welcome-ui/dist/PasswordInput.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as t } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { useState as c } from "react";
import { InputText as m } from "./InputText.mjs";
import { forwardRef as x } from "./System.mjs";
import { Button as l } from "./Button.mjs";
import "./Icon.mjs";
import { S as d, H as u } from "./index-DfD5GTDk.mjs";
const f = ({
  dataTestId: o,
  isHidden: s,
  onClick: r,
  title: e
}) => /* @__PURE__ */ t.jsx(
  l,
  {
    "aria-controls": "password",
    "aria-expanded": `${!s}`,
    dataTestId: o ? `${o}-action` : null,
    onClick: r,
    shape: "circle",
    size: "xs",
    title: e,
    variant: "ghost",
    children: s ? /* @__PURE__ */ t.jsx(d, {}) : /* @__PURE__ */ t.jsx(u, {})
  }
), w = x(
  ({ dataTestId: o, title: s, ...r }, e) => {
    const [n, a] = c("password"), p = n === "password", i = () => {
      a(p ? "text" : "password");
    };
    return /* @__PURE__ */ t.jsx(
      m,
      {
        ...r,
        dataTestId: o,
        icon: /* @__PURE__ */ t.jsx(
          f,
          {
            dataTestId: o,
            isHidden: p,
            onClick: i,
            title: s
          }
        ),
        iconPlacement: "right",
        ref: e,
        type: n
      }
    );
  }
);
w.displayName = "PasswordInput";
export {
  w as PasswordInput
};