import { type ReactNode } from "react";
import { type ButtonProps } from "../button/Button.js";
import { type PropsWithRef } from "../types.js";
import { type TextFieldProps } from "./TextField.js";
/**
 * @example Simple Example
 * ```tsx
 * const getVisibilityIcon: GetPasswordVisibilityIcon = (isPasswordVisible) => {
 *   if (isPasswordVisible) {
 *     return <SecurityIcon />;
 *   }
 *
 *   return <RemoveRedEyeIcon />;
 * };
 * ```
 *
 * @param isPasswordVisible - `true` when the password is visible and in plain
 * text
 * @returns a custom icon to use for the password visibility toggle.
 */
export type GetPasswordVisibilityIcon = (isPasswordVisible: boolean) => ReactNode;
/**
 * @example Simple Example
 * ```tsx
 * const visibilityIcon: ConfigurableVisibilityIcon = {
 *   visible: <SecurityIcon />,
 *   invisible: <RemoveRedEyeIcon />,
 * };
 * ```
 */
export interface ConfigurableVisibilityIcon {
    /**
     * The icon to display while the password is currently visible as plain text.
     */
    visible: ReactNode;
    /**
     * The icon to display while the password is currently invisible as the
     * password input.
     */
    invisible: ReactNode;
}
export interface PasswordProps extends Omit<TextFieldProps, "type" | "rightAddon"> {
    /**
     * @defaultValue `"password"`
     * @since 6.0.0 Defaults to `"password"`
     */
    name?: string;
    /**
     * @example Configurable Visibility Icon Object
     * ```tsx
     * <Password
     *   {...props}
     *   visibilityIcon={{
     *     visible: <SecurityIcon />,
     *     invisible: <RemoveRedEyeIcon />,
     *   }}
     * />
     * ```
     *
     * @example Get Password Visibility Icon Function
     * ```tsx
     * <Password
     *   {...props}
     *   visibilityIcon={(isPasswordVisible) => {
     *     if (isPasswordVisible) {
     *       return <SecurityIcon />;
     *     }
     *
     *     return <RemoveRedEyeIcon />;
     *   }}
     * />
     * ```
     *
     * @example Custom Icon
     * ```tsx
     * <Password
     *   {...props}
     *   visibilityIcon={<SomeCustomComponent />}
     * />
     * ```
     */
    visibilityIcon?: ConfigurableVisibilityIcon | GetPasswordVisibilityIcon | ReactNode;
    /**
     * The `aria-label` to use for the password visibility icon button.
     *
     * @defaultValue `"Show password"`
     */
    visibilityLabel?: string;
    /**
     * Any props that should be passed to the password visibility icon button. If
     * `id`, `buttonType`, `aria-label`, `aria-pressed`, or `children` are
     * provided here, they will override the default implementation.
     */
    visibilityProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;
}
/**
 * **Client Component**
 *
 * @example Simple Example
 * ```tsx
 * import { Password } from "@react-md/core";
 *
 * function Example(): ReactElement {
 *   return (
 *     <Password
 *       label="Password"
 *       name="password"
 *       required
 *     />
 *   );
 * }
 * ```
 */
export declare const Password: import("react").ForwardRefExoticComponent<PasswordProps & import("react").RefAttributes<HTMLInputElement>>;
