@clubmed/trident-ui/ui/forms/TextField.js

Shared ClubMed React UI components

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