@primer/react-brand/esm/forms/Checkbox/Checkbox.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../../node_modules/clsx/dist/clsx.js";
import { useId as t } from "../../hooks/useId.js";
import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
import r from "../../hooks/useIsomorphicLayoutEffect.js";
import i from "./Checkbox.module.js";
import { forwardRef as a, useCallback as o } from "react";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
var l = a(({ checked: a, className: l, indeterminate: u, disabled: d, id: f, onChange: p, required: m, validationStatus: h, value: g, ..._ }, v) => {
	let y = n(v || null), b = t(f);
	r(() => {
		y.current && (y.current.indeterminate = u || !1);
	}, [
		u,
		a,
		y
	]);
	let x = o(() => {
		!d && y.current && y.current.click();
	}, [d, y]);
	return /* @__PURE__ */ c("span", {
		className: i["Checkbox-wrapper"],
		children: [/* @__PURE__ */ s("input", {
			id: b,
			"aria-invalid": h === "error" ? "true" : "false",
			"aria-required": m ? "true" : "false",
			"aria-checked": u ? "mixed" : a,
			checked: u ? !1 : a,
			className: e(i["Checkbox-input"]),
			disabled: d,
			name: g,
			onChange: p,
			ref: y,
			required: m,
			type: "checkbox",
			value: g,
			..._
		}), /* @__PURE__ */ s("span", {
			className: e(i.Checkbox, u && i["Checkbox--indeterminate"], l),
			onClick: x,
			tabIndex: -1,
			"aria-hidden": "true",
			children: u ? /* @__PURE__ */ s("svg", {
				className: e(i["Checkbox-checkmark"]),
				xmlns: "http://www.w3.org/2000/svg",
				viewBox: "0 0 16 16",
				width: "16",
				height: "16",
				"aria-hidden": "true",
				children: /* @__PURE__ */ s("path", {
					fillRule: "evenodd",
					d: "M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"
				})
			}) : /* @__PURE__ */ s("svg", {
				viewBox: "0 0 100 100",
				className: e(i["Checkbox-checkmark"]),
				"aria-hidden": "true",
				children: /* @__PURE__ */ s("path", {
					className: e(i["Checkbox-checkmark-path"]),
					fill: "none",
					stroke: "#000",
					strokeWidth: "13",
					strokeLinecap: "round",
					strokeLinejoin: "round",
					strokeMiterlimit: "10",
					d: "M12.1 52.1l24.4 24.4 53-53"
				})
			})
		})]
	});
});
//#endregion
export { l as Checkbox };

//# sourceMappingURL=Checkbox.js.map