@clubmed/trident-ui/ui/forms/password/Password.js

Shared ClubMed React UI components

import { jsxs as c, jsx as a } from "react/jsx-runtime";
import { useInternalStatus as M } from "../../hooks/useInternalStatus.js";
import { c as f } from "../../../chunks/clsx.js";
import { useId as P, useState as T, useEffect as q } from "react";
import { useValue as F } from "../../hooks/useValue.js";
import { FormControl as z } from "../FormControl.js";
import { Icon as p } from "@clubmed/trident-icons";
import { ValidationMessage as E } from "./ValidationMessage.js";
function O(b) {
  const x = P(), {
    id: l = x,
    name: o = l,
    label: g,
    value: h,
    disabled: t = !1,
    required: u = !1,
    hideRequiredStar: v,
    validationStatus: e = "default",
    errorMessage: w,
    validationMessages: m = [],
    withoutFieldValidation: s = !1,
    className: y,
    onChange: N,
    dataTestId: C = "Password",
    ...I
  } = b, i = M({
    isDisabled: t,
    validationStatus: e
  }), { value: S, setValue: V } = F({
    name: o,
    initialValue: h,
    onChange: N
  }), [r, n] = T("password");
  q(() => {
    n(t ? "password" : r);
  }, [r, t]);
  const k = () => n(r === "password" ? "text" : "password");
  return /* @__PURE__ */ c(
    z,
    {
      className: y,
      id: l,
      label: g,
      dataName: "Password",
      dataTestId: C,
      disabled: t,
      required: u,
      hideRequiredStar: v,
      validationStatus: s ? "default" : e,
      errorMessage: w,
      children: [
        /* @__PURE__ */ c("div", { className: "relative", children: [
          /* @__PURE__ */ a(
            "input",
            {
              ...I,
              id: l,
              name: o,
              type: r,
              value: S,
              disabled: t,
              required: u,
              onChange: (d) => V(d.target.value),
              className: f(
                "text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none",
                {
                  "border-lightGrey focus:border-black active:border-black pe-[52px]": (s || e === "default") && i !== "disabled",
                  "bg-white text-black": i !== "disabled",
                  "bg-pearl text-grey": i === "disabled",
                  "pe-[84px]": !s && (e === "error" || e === "success"),
                  "border-red": !s && e === "error",
                  "border-green": !s && e === "success"
                }
              ),
              "aria-label": o
            }
          ),
          /* @__PURE__ */ a(
            "div",
            {
              className: f(
                "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12"
              ),
              children: /* @__PURE__ */ c("span", { className: "ms-auto flex gap-x-8", children: [
                !s && e === "error" && /* @__PURE__ */ a(p, { name: "CrossDefault", color: "red", width: "24px" }),
                !s && e === "success" && /* @__PURE__ */ a(p, { name: "CheckDefault", color: "green", width: "24px" }),
                !t && /* @__PURE__ */ a(
                  "button",
                  {
                    type: "button",
                    className: "pointer-events-auto size-24 inline-flex",
                    onClick: k,
                    children: /* @__PURE__ */ a(
                      p,
                      {
                        name: r === "password" ? "Invisible" : "Visible",
                        width: "24px",
                        type: "svg"
                      }
                    )
                  }
                )
              ] })
            }
          )
        ] }),
        m.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: m.map(({ label: d, status: j }, D) => /* @__PURE__ */ a(E, { label: d, status: j }, D)) })
      ]
    }
  );
}
export {
  O as Password
};
//# sourceMappingURL=Password.js.map