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