"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Button } from "../button/Button.js";
import { getIcon } from "../icon/iconConfig.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { useToggle } from "../useToggle.js";
import { password, passwordInput, passwordInputToggle } from "./passwordStyles.js";
import { TextField } from "./TextField.js";
/**
 * **Client Component**
 *
 * @example Simple Example
 * ```tsx
 * import { Password } from "@react-md/core";
 *
 * function Example(): ReactElement {
 *   return (
 *     <Password
 *       label="Password"
 *       name="password"
 *       required
 *     />
 *   );
 * }
 * ```
 */ export const Password = /*#__PURE__*/ forwardRef(function Password(props, ref) {
    const { id: propId, name = "password", className, inputClassName, visibilityIcon: propVisibilityIcon, visibilityLabel = "Show password", visibilityProps, ...remaining } = props;
    const { toggled: isPasswordVisible, toggle } = useToggle(false);
    let currentVisibilityIcon;
    if (propVisibilityIcon && typeof propVisibilityIcon === "object" && "visible" in propVisibilityIcon) {
        currentVisibilityIcon = isPasswordVisible ? propVisibilityIcon.visible : propVisibilityIcon.invisible;
    } else if (typeof propVisibilityIcon === "function") {
        currentVisibilityIcon = propVisibilityIcon(isPasswordVisible);
    } else {
        currentVisibilityIcon = propVisibilityIcon;
    }
    const id = useEnsuredId(propId, "password");
    const visibilityIcon = getIcon("password", currentVisibilityIcon);
    return /*#__PURE__*/ _jsx(TextField, {
        ...remaining,
        ref: ref,
        name: name,
        type: isPasswordVisible ? "text" : "password",
        className: password({
            className
        }),
        inputClassName: passwordInput({
            className: inputClassName
        }),
        rightAddon: /*#__PURE__*/ _jsx(Button, {
            id: `${id}-toggle`,
            buttonType: "icon",
            "aria-label": visibilityLabel,
            "aria-pressed": isPasswordVisible,
            ...visibilityProps,
            className: passwordInputToggle({
                className: visibilityProps?.className
            }),
            onClick: (event)=>{
                visibilityProps?.onClick?.(event);
                if (event.isPropagationStopped()) {
                    return;
                }
                toggle();
            },
            children: visibilityProps?.children ?? visibilityIcon
        }),
        disableRightAddonStyles: true
    });
});

//# sourceMappingURL=Password.js.map