@clubmed/trident-ui/molecules/Forms/Checkboxes/Checkbox.js

Shared ClubMed React UI components

import { jsxs as t, jsx as a } from "react/jsx-runtime";
import { c } from "../../../chunks/index.js";
import { useId as D } from "react";
import { Icon as h } from "../../../atoms/Icons/Icon.js";
import "@clubmed/trident-icons";
import { useValue as S } from "../../../hooks/useValue.js";
/* empty css                       */
import { useInternalStatus as V } from "../../../hooks/useInternalStatus.js";
function B(u) {
  const x = D(), {
    id: s = x,
    name: n = s,
    className: f,
    dataTestId: b,
    disabled: r = !1,
    checked: k = !1,
    value: l,
    size: i = 24,
    tabIndex: v = 0,
    validationStatus: N = "default",
    errorMessage: d,
    children: g,
    onChange: o,
    ...y
  } = u, { value: m, setValue: I } = S({
    name: n,
    initialValue: k,
    onChange(w, p) {
      o == null || o(w, p ? l !== void 0 ? l : p : null);
    }
  }), e = V({
    isDisabled: r,
    validationStatus: N
  }), C = e === "error" && d;
  return /* @__PURE__ */ t(
    "div",
    {
      className: c("flex flex-col space-y-2", f),
      "data-testid": `checkbox-container-${s}`,
      children: [
        /* @__PURE__ */ t(
          "label",
          {
            className: c("cursor-pointer relative flex text-b3 items-center", {
              "text-grey": e === "disabled",
              "text-black": e !== "default"
            }),
            children: [
              /* @__PURE__ */ t("span", { className: "relative self-start me-8", children: [
                /* @__PURE__ */ a(
                  "input",
                  {
                    ...y,
                    name: n,
                    "data-testid": b,
                    type: "checkbox",
                    tabIndex: v,
                    onChange: () => {
                      !r && I(!m);
                    },
                    checked: m,
                    "data-name": "Checkbox",
                    disabled: r,
                    value: l
                  }
                ),
                /* @__PURE__ */ a(
                  "span",
                  {
                    style: { height: i, width: i },
                    className: c({ "!border-red": e === "error" }),
                    "data-testid": `check-container-${s}`,
                    children: /* @__PURE__ */ a(
                      h,
                      {
                        name: "CheckDefault",
                        type: "svg",
                        width: `${i}px`,
                        color: "black",
                        className: "absolute"
                      }
                    )
                  }
                )
              ] }),
              g
            ]
          }
        ),
        C && /* @__PURE__ */ t("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
          /* @__PURE__ */ a(h, { name: "Error", width: "20px" }),
          d
        ] })
      ]
    }
  );
}
export {
  B as Checkbox
};
//# sourceMappingURL=Checkbox.js.map