import React from 'react';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { Polymorphic } from '../core/polymorphism';
import type { Theme } from '../core/theme';
import { type BoxBaseProps } from '../layout/Box';
export declare const interactableDefaultElement = 'button';
export type InteractableDefaultElement = typeof interactableDefaultElement;
/**
 * Custom color overrides for different interaction states.
 * Base colors (background, borderColor) are used directly, while interaction
 * state colors (hovered, pressed, disabled) are used as alternative base colors
 * for blending calculations with blend strength and color scheme considerations.
 *
 * @example
 * ```tsx
 * <Interactable
 *   blendStyles={{
 *     background: '#ffffff',
 *     hoveredBackground: '#f5f5f5',
 *     pressedBackground: '#e0e0e0',
 *     borderColor: '#cccccc'
 *   }}
 * />
 * ```
 */
export type InteractableBlendStyles = {
  background?: string;
  pressedBackground?: string;
  disabledBackground?: string;
  hoveredBackground?: string;
  borderColor?: string;
  pressedBorderColor?: string;
  disabledBorderColor?: string;
  hoveredBorderColor?: string;
  /**
   * The opacity of the element when hovered.
   * @default 0.88
   */
  hoveredOpacity?: number;
  /**
   * The opacity of the element when pressed.
   * @default 0.82
   */
  pressedOpacity?: number;
  /**
   * The opacity of the element when disabled.
   * @default 0.75
   */
  disabledOpacity?: number;
};
export type InteractableBaseProps = Polymorphic.ExtendableProps<
  BoxBaseProps,
  {
    /** Apply class names to the outer container. */
    className?: string;
    /** Background color of the overlay (element being interacted with). */
    background?: ThemeVars.Color;
    /** Set element to block and expand to 100% width. */
    block?: boolean;
    /** Border color of the element. */
    borderColor?: ThemeVars.Color;
    /** Is the element currently disabled. */
    disabled?: boolean;
    /**
     * 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;
  }
>;
export type InteractableProps<AsComponent extends React.ElementType> = Polymorphic.Props<
  AsComponent,
  InteractableBaseProps
>;
type InteractableComponent = (<AsComponent extends React.ElementType = InteractableDefaultElement>(
  props: InteractableProps<AsComponent>,
) => Polymorphic.ReactReturn) &
  Polymorphic.ReactNamed;
export declare const Interactable: InteractableComponent;
export declare const getInteractableStyles: ({
  theme,
  background,
  borderColor,
  blendStyles,
}: {
  theme: Theme;
  background?: ThemeVars.Color;
  borderColor?: ThemeVars.Color;
  blendStyles?: InteractableBlendStyles;
}) => {
  '--interactable-background': string;
  '--interactable-border-color': string;
  /**
   * Apply an interactive background style. Blend the color with the background or backgroundInverse values
   */
  '--interactable-hovered-background': string;
  '--interactable-hovered-border-color': string;
  '--interactable-hovered-opacity': number;
  '--interactable-pressed-background': string;
  '--interactable-pressed-border-color': string;
  '--interactable-pressed-opacity': number;
  '--interactable-disabled-background': string;
  '--interactable-disabled-border-color': string;
};
export {};
//# sourceMappingURL=Interactable.d.ts.map