@cypress-design/react-checkbox 0.1.0 → 0.2.2

package/dist/index.umd.js

@@ -1,6 +1,10 @@
 'use strict';
 
+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;
@@ -20,7 +24,47 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var iconsRegistry__namespace = /*#__PURE__*/_interopNamespace(iconsRegistry);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -60,20 +104,61 @@ function __rest(s, e) {
     return t;
 }
 
-// TODO: how do you disable it? does it work?
+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);
+    if (attributes.className) {
+        compiledClasses.push(attributes.className);
+    }
+    if (compiledClasses.length) {
+        componentProps.className = compiledClasses.join(' ');
+    }
+    return componentProps;
+};
+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\"/>"
+    };
+    var body = iconBodies[size];
+    if (!body) {
+        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 })));
+};
+
 var Checkbox = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? crypto.randomUUID() : _b, modelValue = _a.modelValue, onChange = _a.onChange, _c = _a.state, state = _c === void 0 ? 'default' : _c, label = _a.label, rest = __rest(_a, ["id", "modelValue", "onChange", "state", "label"]);
-    return (React__namespace.createElement("div", __assign({}, rest, { className: "relative flex items-center" }),
-        React__namespace.createElement("div", { className: "flex items-center h-5" },
-            React__namespace.createElement("input", { id: id, defaultChecked: modelValue, "aria-describedby": "".concat(id, "-description"), name: id, type: "checkbox", className: "border-1 rounded border-gray-200 bg-white h-4 w-4 text-indigo-500 disabled:bg-gray-100 checked:bg-indigo-500 ".concat(state === 'default'
-                    ? 'text-indigo-500 checked:border-indigo-300 checked:bg-indigo-600 checked:text-indigo-600'
-                    : '', " ").concat(state === 'success'
-                    ? 'checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600'
-                    : '', " ").concat(state === 'danger'
-                    ? 'checked:border-red-300 checked:bg-red-600 checked:text-red-600'
-                    : ''), onChange: onChange })),
-        React__namespace.createElement("div", { className: "ml-2 text-16px leading-normal" },
-            React__namespace.createElement("label", { "v-if": "label", htmlFor: id, className: "disabled:text-gray-500 text-gray-800 font-light select-none" }, label))));
+    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 _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))));
 };
 
 module.exports = Checkbox;