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 c, useState as l } from "react";
import { InputText as u } from "./InputText.js";
import { Button as w } from "./Button.js";
import { Icon as n } from "./Icon.js";
const d = ({ isHidden: a, onClick: t, ...e }) => /* @__PURE__ */ o(
  w,
  {
    "aria-controls": "password",
    "aria-expanded": !a,
    onClick: t,
    size: "sm",
    variant: "tertiary",
    ...e,
    children: a ? /* @__PURE__ */ o(n, { name: "eye" }) : /* @__PURE__ */ o(n, { name: "eye-slash" })
  }
);
d.displayName = "PasswordInput.ToggleButton";
const y = c(
  ({ toggleAriaLabel: a, ...t }, e) => {
    const [r, i] = l("password"), s = r === "password", p = () => {
      i(s ? "text" : "password");
    }, m = t["data-testid"] ? `${t["data-testid"]}-action` : void 0;
    return /* @__PURE__ */ o(u, { ...t, ref: e, type: r, children: /* @__PURE__ */ o(
      d,
      {
        "aria-label": a ?? (s ? "Show password" : "Hide password"),
        "data-testid": m,
        isHidden: s,
        onClick: p
      }
    ) });
  }
);
y.displayName = "PasswordInput";
export {
  y as PasswordInput
};