@clubmed/trident-ui/molecules/Forms/Switch.js

Shared ClubMed React UI components

import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { c as x } from "../../chunks/index.js";
import { useValue as f } from "../../hooks/useValue.js";
/* empty css                    */
import { useId as w } from "react";
function k(r) {
  const s = w(), {
    id: n = s,
    name: a = n,
    className: o,
    checked: h,
    disabled: t,
    width: i = 56,
    onChange: d,
    tabIndex: m = 0,
    children: p
  } = r, { value: c, setValue: u } = f({
    initialValue: h,
    name: a,
    onChange: d
  });
  return /* @__PURE__ */ l(
    "label",
    {
      className: x(o, "relative flex items-center gap-[10px]", {
        "text-grey": t,
        "cursor-pointer": !t
      }),
      "data-testid": "SwitchContainer",
      children: [
        /* @__PURE__ */ l("span", { className: "relative", children: [
          /* @__PURE__ */ e(
            "input",
            {
              type: "checkbox",
              name: a,
              tabIndex: m,
              checked: c,
              disabled: t,
              role: "switch",
              className: "absolute w-full h-full opacity-0 cursor-pointer",
              onChange: () => {
                !t && u(!c);
              },
              "data-name": "Switch"
            }
          ),
          /* @__PURE__ */ e("span", { style: { height: i * 4 / 7, width: i }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: i * 3 / 7, children: /* @__PURE__ */ l("g", { children: [
            /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 12, fill: "hsl(var(--color-white))" }),
            /* @__PURE__ */ e("circle", { cx: 12, cy: 12, r: 4, fill: "hsl(var(--color-grey))" })
          ] }) }) })
        ] }),
        /* @__PURE__ */ e("span", { className: "text-b2 font-semibold", children: p })
      ]
    }
  );
}
export {
  k as Switch
};
//# sourceMappingURL=Switch.js.map