@clubmed/trident-ui/ui/forms/checkboxes/Checkbox.js

Shared ClubMed React UI components

import { jsxs as t, jsx as a } from "react/jsx-runtime";
import { c as n } from "../../../chunks/clsx.js";
import { useId as D } from "react";
import { useValue as S } from "../../hooks/useValue.js";
/* empty css                       */
import { useInternalStatus as V } from "../../hooks/useInternalStatus.js";
import { Icon as h } from "@clubmed/trident-icons";
function A(p) {
  const u = D(), {
    id: s = u,
    name: o = s,
    className: x,
    dataTestId: f,
    disabled: r = !1,
    checked: b = !1,
    value: l,
    size: i = 24,
    tabIndex: k = 0,
    validationStatus: g = "default",
    errorMessage: c,
    children: v,
    onChange: C,
    ...N
  } = p, { value: d, setValue: y } = S({
    name: o,
    initialValue: b,
    onChange(w, m) {
      C?.(w, m ? l !== void 0 ? l : m : null);
    }
  }), e = V({
    isDisabled: r,
    validationStatus: g
  }), I = e === "error" && c;
  return /* @__PURE__ */ t(
    "div",
    {
      className: n("flex flex-col space-y-2", x),
      "data-testid": `checkbox-container-${s}`,
      children: [
        /* @__PURE__ */ t(
          "label",
          {
            className: n("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",
                  {
                    ...N,
                    name: o,
                    "data-testid": f,
                    type: "checkbox",
                    tabIndex: k,
                    onChange: () => {
                      r || y(!d);
                    },
                    checked: d,
                    "data-name": "Checkbox",
                    disabled: r,
                    value: l
                  }
                ),
                /* @__PURE__ */ a(
                  "span",
                  {
                    style: { height: i, width: i },
                    className: n({ "!border-red": e === "error" }),
                    "data-testid": `check-container-${s}`,
                    children: /* @__PURE__ */ a(
                      h,
                      {
                        name: "CheckDefault",
                        type: "svg",
                        width: `${i}px`,
                        color: "black",
                        className: "absolute"
                      }
                    )
                  }
                )
              ] }),
              v
            ]
          }
        ),
        I && /* @__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" }),
          c
        ] })
      ]
    }
  );
}
export {
  A as Checkbox
};
//# sourceMappingURL=Checkbox.js.map