import { type ReactElement, type ReactNode } from "react";
/**
 * This is the current mode for how your user is interacting with your app. This
 * will be used to determine which type of state styles should be applied at the
 * time of interacting with an element on your page.
 *
 * @defaultValue `"mouse"`
 */
export type UserInteractionMode = "keyboard" | "mouse" | "touch";
/**
 * @returns the current user interaction mode
 */
export declare function useUserInteractionMode(): UserInteractionMode;
export interface UserInteractionModeProviderProps {
    children: ReactNode;
}
/**
 * **Client Component**
 *
 * This component is used to determine how a user is interacting with your app
 * to update component functionality and applying the following class names to
 * the `document.body`:
 *
 * - `"mouse-mode"`
 * - `"keyboard-mode"`
 * - `"touch-mode"`
 *
 * Within `react-md`, these classes are used for the following behavior:
 * - only display `:focus` outlines while in `"keyboard-mode"`
 * - do not display `:hover` effects while in `"touch-mode"`
 *
 * @example Mount at the root of your app
 * ```tsx
 * import { createRoot } from "react-dom/client";
 * import { UserInteractionModeProvider } from "@react-md/core";
 * import App from "./App":
 *
 * const container = document.getElementById("root");
 * const root = createRoot(container);
 *
 * root.render(
 *   <UserInteractionModeProvider>
 *     <App />
 *   </UserInteractionModeProvider>
 * );
 * ```
 *
 * @throws "The `UserInteractionModeProvider` cannot be mounted multiple times."
 * if this component is mounted multiple times in your app.
 */
export declare function UserInteractionModeProvider(props: UserInteractionModeProviderProps): ReactElement;
