import { t as e } from "../../../chunks/clsx.js";
import { getBorderColor as t, getTextColor as n } from "../../helpers/colors/colors.js";
import { FormControlError as r } from "../FormControlError.js";
import { useInternalStatus as i } from "../../hooks/useInternalStatus.js";
import { useId as a } from "react";
import { Icon as o } from "@clubmed/trident-icons";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
//#region lib/ui/forms/checkboxes/Checkbox.tsx
function l(l) {
	let u = a(), { id: d = u, name: f = d, className: p, color: m = "black", size: h = "size-24", disabled: g = !1, tabIndex: _ = 0, validationStatus: v = "default", errorMessage: y, children: b, ref: x, onChange: S, value: C, "data-testid": w, ...T } = l, E = i({
		isDisabled: g,
		validationStatus: v
	}), D = E === "disabled", O = E === "error" && y, k = e({
		"!border-red !text-red": E === "error",
		"bg-pearl": D
	}), A = /* @__PURE__ */ c("span", {
		className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60", t(m), n(m), h, k, p),
		"data-name": "Checkbox",
		children: [/* @__PURE__ */ s("input", {
			...T,
			disabled: g,
			id: d,
			name: f,
			className: "peer sr-only",
			ref: x,
			tabIndex: _,
			type: "checkbox",
			value: typeof C == "boolean" ? String(C) : C,
			onChange: (e) => {
				S?.(e.nativeEvent, e.target.checked);
			}
		}), /* @__PURE__ */ s(o, {
			className: "scale-1/2 transition-[transform,opacity] peer-checked:scale-auto opacity-0 peer-checked:opacity-100",
			name: "CheckDefault",
			width: "100%"
		})]
	});
	return !b && !y ? A : /* @__PURE__ */ c("div", {
		className: e("flex flex-col space-y-2", p),
		"data-testid": w || `checkbox-container-${d}`,
		children: [/* @__PURE__ */ c("label", {
			className: e("relative flex items-center gap-8", { "text-grey": g }),
			children: [A, b]
		}), O && /* @__PURE__ */ s(r, { children: y })]
	});
}
//#endregion
export { l as Checkbox };

//# sourceMappingURL=Checkbox.js.map