@cypress-design/react-checkbox 0.2.2 → 0.3.1

package/dist/index.umd.js

@@ -4,10 +4,7 @@ var clsx = require('clsx');
 var React = require('react');
 var iconsRegistry = require('@cypress-design/icon-registry');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -20,13 +17,12 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var iconsRegistry__namespace = /*#__PURE__*/_interopNamespace(iconsRegistry);
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var iconsRegistry__namespace = /*#__PURE__*/_interopNamespaceDefault(iconsRegistry);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -105,10 +101,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 componentProps = __assign({ width: size, height: size, fill: 'none', dangerouslySetInnerHTML: {
-            __html: body
-        } }, attributes);
+    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) && attrName !== 'name') {
+            newAttributes[attrName] =
+                attributes[attrName];
+        }
+        return newAttributes;
+    }, {});
+    var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
+            __html: body,
+        } }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
     }
@@ -120,46 +123,64 @@ var compileReactIconProperties = function (_a) {
 var IconCheckmarkSmall = function (props) {
     var _a = iconsRegistry__namespace.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
     var iconBodies = {
-        "16": "<path d=\"M5 8.5 7.5 11 11 5\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+        "16": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 8.5 7.5 11 11 5\" class=\"icon-dark\"/>"
     };
     var body = iconBodies[size];
     if (!body) {
-        throw Error("Icon \"checkmark-small\" is not available in size " + size);
+        throw Error("Icon \"checkmark-small\" is not available in size ".concat(size));
     }
     return React__namespace.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
 };
 
+
+/* <windicss-keep class=""> */
+
+const Classes = {
+    wrapper: 'relative flex items-center',
+    hiddenInput: 'absolute inset-0 w-0 h-0 opacity-0',
+    labelTag: 'flex items-center',
+    visibleCheckbox: 'border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white',
+    trueLabel: 'block ml-[8px] text-[16px] leading-[24px] font-light select-none',
+};
+const CheckboxColors = {
+    indigo: 'border-indigo-500 bg-indigo-400',
+    jade: 'border-jade-500 bg-jade-400',
+    red: 'border-red-500 bg-red-400',
+    disabled: 'border-gray-200 bg-gray-100',
+    empty: 'border-gray-200 bg-white',
+};
+
+var uid = function () {
+    return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
+};
 var Checkbox = function (_a) {
-    var 
-    // @ts-ignore
-    _b = _a.id, 
-    // @ts-ignore
-    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": id + "-description", 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",
-                disabled
-                    ? 'border-gray-200 bg-gray-100'
-                    : localChecked
-                        ? {
-                            'border-indigo-500 bg-indigo-400': color === 'indigo',
-                            'border-jade-500 bg-jade-400': color === 'jade',
-                            'border-red-500 bg-red-400': color === 'red'
-                        }
-                        : 'border-gray-200 bg-white',
-            ]) }),
-        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))));
+    return (React__namespace.createElement("span", __assign$1({ className: clsx(className, Classes.wrapper) }, rest),
+        React__namespace.createElement("input", { id: id, className: Classes.hiddenInput, "aria-describedby": "".concat(id, "-description"), name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
+        React__namespace.createElement("label", { className: Classes.labelTag, htmlFor: id },
+            localChecked && (
+            // <tw-keep strokeColor="white"/>
+            React__namespace.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
+            React__namespace.createElement("span", { className: clsx([
+                    Classes.visibleCheckbox,
+                    disabled
+                        ? CheckboxColors.disabled
+                        : localChecked
+                            ? CheckboxColors[color]
+                            : CheckboxColors.empty,
+                ]) }),
+            label && (React__namespace.createElement("span", { className: clsx([
+                    disabled ? 'text-gray-500' : 'text-gray-800 dark:text-gray-200',
+                    Classes.trueLabel,
+                ]) }, label)))));
 };
 
 module.exports = Checkbox;
 //# sourceMappingURL=index.umd.js.map
+
+/* <windicss-keep class="absolute text-gray-500 text-gray-800 dark:text-gray-200 icon-dark-white"> */