@serendie/ui/dist/components/PasswordField/PasswordField.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as o } from "react/jsx-runtime";
import { forwardRef as m, useState as p } from "react";
import { TextField as w } from "../TextField/TextField.js";
import { SerendieSymbolEyeHidden as y, SerendieSymbolEye as c } from "@serendie/symbols";
import { IconButton as f } from "../IconButton/IconButton.js";
import { useTranslations as g } from "../../i18n/index.js";
const P = m(
  ({ disableToggle: r = !1, disabled: t, ...i }, a) => {
    const e = g(), [s, d] = p(!1), l = r ? void 0 : /* @__PURE__ */ o(
      f,
      {
        type: "button",
        onClick: () => {
          d((n) => !n);
        },
        styleType: "ghost",
        size: "small",
        shape: "circle",
        "aria-label": e(s ? "passwordField.hidePassword" : "passwordField.showPassword"),
        disabled: t,
        icon: s ? /* @__PURE__ */ o(y, {}) : /* @__PURE__ */ o(c, {})
      }
    );
    return /* @__PURE__ */ o(
      w,
      {
        type: s ? "text" : "password",
        rightContent: l,
        disabled: t,
        ...i,
        ref: a
      }
    );
  }
);
P.displayName = "PasswordField";
export {
  P as PasswordField
};