@cypress-design/react-checkbox 0.2.1 → 0.4.0

package/dist/index.umd.js

@@ -105,10 +105,17 @@ function __rest(s, e) {
 }
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size; _a.strokeColor; _a.fillColor; _a.secondaryStrokeColor; _a.secondaryFillColor; var attributes = __rest(_a, ["body", "compiledClasses", "size", "strokeColor", "fillColor", "secondaryStrokeColor", "secondaryFillColor"]);
+    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
+        if (!iconsRegistry.ICON_COLOR_PROP_NAMES.includes(attrName)) {
+            newAttributes[attrName] =
+                attributes[attrName];
+        }
+        return newAttributes;
+    }, {});
     var componentProps = __assign({ width: size, height: size, fill: 'none', dangerouslySetInnerHTML: {
             __html: body
-        } }, attributes);
+        } }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
     }
@@ -124,20 +131,24 @@ var IconCheckmarkSmall = function (props) {
     };
     var body = iconBodies[size];
     if (!body) {
-        throw Error("Icon \"checkmark-small\" is not available in size ".concat(size));
+        throw Error("Icon \"checkmark-small\" is not available in size " + size);
     }
     return React__namespace.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
 };
+/* <windicss-keep class=""> */
 
+var uid = function () {
+    return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
+};
 var Checkbox = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? crypto.randomUUID() : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.color, color = _d === void 0 ? 'indigo' : _d, label = _a.label, disabled = _a.disabled, rest = __rest$1(_a, ["id", "checked", "onChange", "color", "label", "disabled"]);
+    var _b = _a.id, id = _b === void 0 ? uid() : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.color, color = _d === void 0 ? 'indigo' : _d, label = _a.label, disabled = _a.disabled, className = _a.className, name = _a.name, rest = __rest$1(_a, ["id", "checked", "onChange", "color", "label", "disabled", "className", "name"]);
     var _e = React__namespace.useState(checked), localChecked = _e[0], setChecked = _e[1];
     function onChangeInput(event) {
         setChecked(!localChecked);
         onChange(event);
     }
-    return (React__namespace.createElement("label", __assign$1({}, rest, { className: clsx__default["default"](rest.className, 'relative flex items-center') }),
-        React__namespace.createElement("input", { id: id, className: "absolute inset-0 w-0 h-0 opacity-0", "aria-describedby": "".concat(id, "-description"), name: id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
+    return (React__namespace.createElement("div", __assign$1({ className: clsx__default["default"](className, 'relative flex items-center') }, rest),
+        React__namespace.createElement("input", { id: id, className: "absolute inset-0 w-0 h-0 opacity-0", "aria-describedby": id + "-description", name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
         localChecked && (React__namespace.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
         React__namespace.createElement("span", { className: clsx__default["default"]([
                 "block border-1 rounded h-16px w-16px flex items-center text-white",
@@ -151,11 +162,13 @@ var Checkbox = function (_a) {
                         }
                         : 'border-gray-200 bg-white',
             ]) }),
-        label && (React__namespace.createElement("span", { className: clsx__default["default"]([
+        React__namespace.createElement("label", { htmlFor: id }, label && (React__namespace.createElement("span", { className: clsx__default["default"]([
                 disabled ? 'text-gray-500' : 'text-gray-800',
                 'block ml-2 text-16px leading-normal font-light select-none',
-            ]) }, label))));
+            ]) }, label)))));
 };
 
 module.exports = Checkbox;
+/* <windicss-keep class="relative flex items-center absolute inset-0 w-0 h-0 opacity-0 block border-1 rounded h-16px w-16px text-white border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white text-gray-500 text-gray-800 ml-2 text-16px leading-normal font-light select-none"> */
+
 //# sourceMappingURL=index.umd.js.map