UNPKG

@primer/react-brand

Version:

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

75 lines (74 loc) 2.45 kB
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 '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css */ 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