welcome-ui/dist/PasswordInput.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { jsx as o } from "react/jsx-runtime";
import { forwardRef as p, useState as c } from "react";
import { InputText as m } from "./InputText.js";
import { Button as l } from "./Button.js";
import "./Icon-BisRi8B3.js";
import { S as w, H as u } from "./index-5rXezknO.js";
const x = ({ isHidden: s, onClick: t, ...a }) => /* @__PURE__ */ o(
  l,
  {
    "aria-controls": "password",
    "aria-expanded": !s,
    onClick: t,
    shape: "circle",
    size: "xs",
    variant: "ghost",
    ...a,
    children: s ? /* @__PURE__ */ o(w, {}) : /* @__PURE__ */ o(u, {})
  }
), H = p(
  ({ toggleAriaLabel: s, ...t }, a) => {
    const [r, n] = c("password"), e = r === "password", i = () => {
      n(e ? "text" : "password");
    }, d = t["data-testid"] ? `${t["data-testid"]}-action` : void 0;
    return /* @__PURE__ */ o(
      m,
      {
        ...t,
        icon: /* @__PURE__ */ o(
          x,
          {
            "aria-label": s ?? (e ? "Show password" : "Hide password"),
            "data-testid": d,
            isHidden: e,
            onClick: i
          }
        ),
        iconPlacement: "right",
        ref: a,
        type: r
      }
    );
  }
);
export {
  H as PasswordInput
};