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

Shared ClubMed React UI components

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