hh-ui-components
Version:
21 lines • 3.07 kB
JavaScript
import React from "react";
import classNames from "classnames";
export var Checkbox = function (_a) {
var _b = _a.type, type = _b === void 0 ? "checkbox" : _b, _c = _a.label, label = _c === void 0 ? "Label" : _c, checked = _a.checked, value = _a.value, required = _a.required, _d = _a.disabled, disabled = _d === void 0 ? false : _d, onChange = _a.onChange, className = _a.className;
var classes = classNames({
"appearance-none bg-tertiary border cursor-pointer border-secondary disabled:opacity-50 rounded checked:bg-tertiary checked:border-graphite h-[1.25rem] w-[1.25rem] md:h-[2.604vw] md:w-[2.604vw] lg:h-[1.25rem] lg:w-[1.25rem] 2xl:h-[1.389vw] 2xl:w-[1.389vw] 2xl:rounded-[0.278vw]": type === "checkbox" && true,
"appearance-none bg-tertiary border cursor-pointer border-secondary disabled:opacity-50 rounded-[60px] checked:bg-tertiary checked:border-graphite h-[1.25rem] w-[1.25rem] md:h-[2.604vw] md:w-[2.604vw] lg:h-[1.25rem] lg:w-[1.25rem] 2xl:h-[1.389vw] 2xl:w-[1.389vw] 2xl:rounded-[4.167vw]": type == "radio" && true
});
return (React.createElement("div", { className: "group relative w-fit ".concat(className) },
React.createElement("div", { className: "flex items-center cursor-pointer group transition-all duration-300", onClick: onChange },
React.createElement("label", { className: "relative flex" },
React.createElement("input", { type: type, className: " group-hover:bg-quaternary ".concat(classes, " ").concat(checked ? " " : " "), defaultChecked: checked, required: required, disabled: disabled, name: value, value: value, "aria-label": "in-label" }),
checked === true && type === "checkbox" ? (React.createElement(React.Fragment, null,
React.createElement("svg", { className: "absolute w-[11.76px] h-[7.96px] top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 2xl:w-[0.810vw] 2xl:h-[0.553vw] group-checked:flex ", width: "100%", height: "100%", viewBox: "0 0 14 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": "checkIcon", role: "img" },
React.createElement("path", { d: "M0.863281 5.9458L4.57088 9.6534L12.5299 1.69434", stroke: "#1A1817", strokeWidth: "2" })))) : null,
checked === true && type === "radio" ? (React.createElement(React.Fragment, null,
React.createElement("svg", { className: "absolute w-[11.76px] h-[11.76px] top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 2xl:w-[0.810vw] 2xl:h-[0.810vw] group-checked:flex ", width: "100%", height: "100%", viewBox: "0 0 13 12", role: "img", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": "Radio" },
React.createElement("circle", { cx: "6.49984", cy: "5.99996", r: "5.83333", fill: "#1A1817" })))) : null),
React.createElement("span", { className: "text-body-large lg:text-body-large-lg 2xl:text-body-large-2xl font-normal text-graphite ml-10 2xl:ml-10-2xl capitalize cursor-pointer" }, label))));
};
//# sourceMappingURL=Checkbox.js.map