"use client";
import { t as e } from "../../chunks/clsx.js";
import { getBgColor as t } from "../helpers/colors/colors.js";
import { useId as n } from "react";
import { jsx as r, jsxs as i } from "react/jsx-runtime";
//#region lib/ui/forms/Switch.tsx
function a({ id: a, name: o, checked: s, className: c, color: l = "saffron", onChange: u, disabled: d = !1, tabIndex: f = 0, children: p, role: m = "switch", value: h, ...g }) {
	let _ = n(), v = a ?? _, y = o ?? v, b = p != null, x = e("inline-flex items-center relative", {
		"gap-4": b,
		"cursor-pointer": !d,
		"cursor-not-allowed": d
	});
	return /* @__PURE__ */ i(b ? "label" : "span", {
		htmlFor: v,
		className: x,
		children: [
			/* @__PURE__ */ r("input", {
				...g,
				id: v,
				name: y,
				checked: s,
				"data-name": "Switch",
				disabled: d,
				role: m,
				tabIndex: f,
				type: "checkbox",
				value: typeof h == "boolean" ? String(h) : h,
				className: "absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full",
				onChange: (e) => {
					u?.(e.nativeEvent, e.target.checked);
				}
			}),
			/* @__PURE__ */ r("span", {
				className: e(c, "rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors", { "bg-middleGrey": !s }, { [t(l)]: s }),
				children: /* @__PURE__ */ r("svg", {
					className: "size-24",
					viewBox: "0 0 24 24",
					children: /* @__PURE__ */ i("g", { children: [
						/* @__PURE__ */ r("circle", {
							cx: 12,
							cy: 12,
							r: 12,
							fill: "var(--color-white)"
						}),
						/* @__PURE__ */ r("circle", {
							cx: 12,
							cy: 12,
							r: 4,
							fill: "var(--color-middleGrey)"
						}),
						/* @__PURE__ */ r("path", { d: "M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37" })
					] })
				})
			}),
			p
		]
	});
}
//#endregion
export { a as Switch };

//# sourceMappingURL=Switch.js.map