@cypress-design/react-checkbox 0.1.0 → 0.1.1

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,21 +104,86 @@ 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, 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 " + size + " " + size, fill: 'none', dangerouslySetInnerHTML: {
+            __html: body
+        } }, filteredAttributes);
+    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 })));
+};
+
+/* <windicss-keep class=""> */
+
+var 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'
+};
+var 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 _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 _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("span", __assign$1({ className: clsx__default["default"](className, Classes.wrapper) }, rest),
+        React__namespace.createElement("input", { id: id, className: Classes.hiddenInput, "aria-describedby": 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__default["default"]([
+                    Classes.visibleCheckbox,
+                    disabled
+                        ? CheckboxColors.disabled
+                        : localChecked
+                            ? CheckboxColors[color]
+                            : CheckboxColors.empty,
+                ]) }),
+            label && (React__namespace.createElement("span", { className: clsx__default["default"]([
+                    disabled ? 'text-gray-500' : 'text-gray-800',
+                    Classes.trueLabel,
+                ]) }, label)))));
 };
 
 module.exports = Checkbox;
+
+/* <windicss-keep class="absolute text-gray-500 text-gray-800 icon-dark-white relative flex items-center inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-0 text-white block ml-[8px] text-[16px] leading-[24px] font-light select-none border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 border-gray-200 bg-gray-100 bg-white"> */
 //# sourceMappingURL=index.umd.js.map