import { type ReactElement } from "react";
import { type ElementInteractionHandlers, type ElementInteractionMode } from "./types.js";
declare module "react" {
    interface CSSProperties {
        "--rmd-surface-inset"?: string | number;
        "--rmd-surface-border-radius"?: string | number;
    }
}
/** @since 6.0.0 */
export declare const PRESSED_CLASS_NAME = "rmd-pressed";
/** @since 6.0.0 */
export interface ElementInteractionOptions<E extends HTMLElement> extends Partial<ElementInteractionHandlers<E>> {
    /**
     * This can be used to override the {@link INTERACTION_CONFIG.mode}
     *
     * @defaultValue `INTERACTION_CONFIG.mode`
     */
    mode?: ElementInteractionMode;
    /**
     * Boolean if the element is currently disabled which will prevent any of the
     * element interaction states from happening.
     *
     * @defaultValue `false`
     */
    disabled?: boolean;
}
/** @since 6.0.0 */
export interface ElementInteractionImplementation<E extends HTMLElement> {
    /**
     * The event handlers required for element interaction.
     */
    handlers: Readonly<ElementInteractionHandlers<E>>;
    /**
     * Boolean if the element is currently pressed. This will always be `false` if
     * the {@link ElementInteractionMode} is set to `"none"`
     */
    pressed: boolean;
    /**
     * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is
     * `true` and the {@link ElementInteractionMode} is set to `"press"`. It will
     * be `undefined` otherwise.
     */
    pressedClassName: string | undefined;
    /**
     * The ripple click/touch interaction. This will be `undefined` when the {@link ElementInteractionMode}
     * is set to `"none"` or `"press"`.
     */
    ripples?: ReactElement;
}
/**
 * This hook is used to apply the required element interaction based on the
 * {@link ElementInteractionMode} and should generally be used internally only.
 *
 * @example Providing Element Interaction
 * ```tsx
 * import { useElementInteraction } from "@react-md/core/interaction/useElementInteraction";
 * import { cnb } from "cnbuilder";
 * import { type ReactElement } from "react";
 *
 * import styles from "./CustomComponent.module.scss";
 *
 * interface Props extends HTMLAttributes<HTMLDivElement> {
 *   disabled?: boolean;
 * }
 *
 * function CustomComponent(props: Props): ReactElement {
 *   const {
 *     disabled = false,
 *     className,
 *     onBlur,
 *     onClick,
 *     onKeyDown,
 *     onKeyUp,
 *     onMouseDown,
 *     onMouseUp,
 *     onMouseLeave,
 *     onTouchStart,
 *     onTouchMove,
 *     onTouchEnd,
 *     ...remaining
 *   } = props;
 *
 *   const { handlers, pressed, ripples } = useElementInteraction({
 *     disabled,
 *     // pass remaining props so that if any event handlers were provided to
 *     // the component, they will be merged with the element interaction
 *     // handlers
 *     onBlur,
 *     onClick,
 *     onKeyDown,
 *     onKeyUp,
 *     onMouseDown,
 *     onMouseUp,
 *     onMouseLeave,
 *     onTouchStart,
 *     onTouchMove,
 *     onTouchEnd,
 *   });
 *
 *   return (
 *     <div
 *       {...remaining}
 *       {...handlers}
 *       aria-disabled={disabled}
 *       role="button"
 *       className={cnb(styles.button, pressed && styles.pressed)}
 *       tabIndex={disabled ? undefined : 0}
 *     >
 *       {children}
 *       {ripples}
 *     </div>
 *   );
 * }
 * ```
 *
 * @param options - An object of {@link ElementInteractionOptions} that is used
 * to merge event handlers or disable the interactions.
 * @returns the {@link ElementInteractionImplementation}
 * @since 6.0.0 Touch interactions were removed since it never looked
 * good if the user touched a clickable element right before scrolling. The
 * ripple effect will only be fired on click now for touch devices.
 */
export declare function useElementInteraction<E extends HTMLElement>(options?: ElementInteractionOptions<E>): ElementInteractionImplementation<E>;
