react-custom-elements - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.js

@@ -89,3 +89,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-function Button(_ref) {
+var Button = function Button(_ref) {
   var primary = _ref.primary,
@@ -102,3 +102,3 @@ secondary = _ref.secondary,
   return dark ? /*#__PURE__*/React__default.createElement(DarkButton, props, "Default") : secondary ? /*#__PURE__*/React__default.createElement(SecondaryButton, props, "Default") : primary ? /*#__PURE__*/React__default.createElement(PrimaryButton, props, "Default") : outline ? /*#__PURE__*/React__default.createElement(OutlineButton, props, "Default") : /*#__PURE__*/React__default.createElement(PrimaryButton, props);
-}
+};
 
@@ -182,4 +182,14 @@ function _templateObject2$1() {
 
+function _templateObject6() {
+  var data = _taggedTemplateLiteralLoose(["\n    padding-top: 0;\n    padding-bottom: 0;\n    margin-top: 0;\n    margin-bottom: 0;\n  "]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n    user-select: none;\n    margin: 0;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    height: 1px;\n\n    background: #111;\n    margin-top: 6px;\n  "]);
 
@@ -194,3 +204,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4$1() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid black;\n    background: ", ";\n    cursor: pointer;\n    color: ", ";\n\n    width: ", "px;\n    height: ", "px;\n\n    border-radius: ", "px;\n\n    margin-right: 10px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    padding-right: 8px;\n    padding-left: 8px;\n    padding-bottom: 8px;\n    z-index: 1;\n    margin: 6px 0px;\n\n    cursor: pointer;\n    position: relative;\n  "]);
 
@@ -205,3 +215,3 @@ _templateObject4$1 = function _templateObject4() {
 function _templateObject3$1() {
-  var data = _taggedTemplateLiteralLoose(["\n    border: 1px solid black;\n\n    cursor: pointer;\n    color: ", ";\n\n    width: ", "px;\n    height: ", "px;\n\n    border-radius: ", "px;\n    margin-right: 10px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    background: #fff;\n\n    transition: all 0.5s ease-in-out;\n    position: absolute;\n\n    width: 180px;\n    margin-left: 10px;\n\n    border: 0.4px solid #ccc;\n\n    border-bottom-right-radius: 6px;\n    border-bottom-left-radius: 6px;\n  "]);
 
@@ -216,3 +226,3 @@ _templateObject3$1 = function _templateObject3() {
 function _templateObject2$2() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    cursor: pointer;\n    margin-bottom: 0;\n    padding-bottom: 0;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    padding: 2px 14px;\n\n    border-radius: 6px;\n\n    align-items: center;\n    justify-content: space-between;\n    background: #fff;\n\n    border: 0.4px solid #ccc;\n\n    user-select: none;\n    cursor: pointer;\n\n    box-shadow: 2px 2px 12px #ccc;\n  "]);
 
@@ -227,3 +237,3 @@ _templateObject2$2 = function _templateObject2() {
 function _templateObject$2() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    position: relative;\n    min-width: 200px;\n  "]);
 
@@ -237,51 +247,39 @@ _templateObject$2 = function _templateObject() {
 
-var CheckBox = function CheckBox(_ref) {
-  var w = _ref.w,
-      h = _ref.h,
-      setClick = _ref.setClick,
-      color = _ref.color,
-      bg = _ref.bg,
-      _ref$text = _ref.text,
-      text = _ref$text === void 0 ? 'default' : _ref$text,
-      borderRadius = _ref.borderRadius;
+var Dropdown = function Dropdown(_ref) {
+  var select = _ref.select,
+      selections = _ref.selections;
 
-  var _useState = React.useState(false),
-      checked = _useState[0],
-      setChecked = _useState[1];
+  var _useState = React.useState(true),
+      open = _useState[0],
+      setOpen = _useState[1];
 
+  var _useState2 = React.useState(''),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
   React.useEffect(function () {
-    if (setClick) {
-      setClick(checked);
-    }
+    select(selected);
   });
-  var MasterDiv = styled.div(_templateObject$2());
-  var Container = styled.div(_templateObject2$2());
-  var CheckBox = styled.div(_templateObject3$1(), color || '#111', w || 24, h || 24, borderRadius || 999);
-  var CheckBoxChecked = styled.div(_templateObject4$1(), bg || '#111', color || '#111', w || 24, h || 24, borderRadius || 999);
-  var Text = styled.p(_templateObject5());
-  return checked ? /*#__PURE__*/React__default.createElement(MasterDiv, null, /*#__PURE__*/React__default.createElement(Container, {
+  var Dropdown = styled.div(_templateObject$2());
+  var DropdownDefault = styled.div(_templateObject2$2());
+  var DropdownOpen = styled.div(_templateObject3$1());
+  var DropdownOpenItem = styled.div(_templateObject4$1());
+  var Span = styled.div(_templateObject5());
+  var DropdownText = styled.p(_templateObject6());
+  return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Dropdown, null, /*#__PURE__*/React__default.createElement(DropdownDefault, {
     onClick: function onClick() {
-      setChecked(!checked);
+      return setOpen(!open);
     }
-  }, /*#__PURE__*/React__default.createElement(CheckBoxChecked, null, /*#__PURE__*/React__default.createElement(SvgCheck, {
-    color: "white"
-  })), /*#__PURE__*/React__default.createElement(Text, null, text))) : /*#__PURE__*/React__default.createElement(MasterDiv, null, /*#__PURE__*/React__default.createElement(Container, {
-    onClick: function onClick() {
-      setChecked(!checked);
-    }
-  }, /*#__PURE__*/React__default.createElement(CheckBox, null), /*#__PURE__*/React__default.createElement(Text, null, text)));
+  }, /*#__PURE__*/React__default.createElement("p", null, selected === '' ? selections[0] : selected), open ? /*#__PURE__*/React__default.createElement(SvgUp, null) : /*#__PURE__*/React__default.createElement(SvgDown, null)), open && /*#__PURE__*/React__default.createElement(DropdownOpen, null, selections === null || selections === void 0 ? void 0 : selections.map(function (item, key) {
+    return /*#__PURE__*/React__default.createElement(DropdownOpenItem, {
+      onClick: function onClick() {
+        setSelected(item);
+        setOpen(false);
+      }
+    }, /*#__PURE__*/React__default.createElement(DropdownText, null, item), selections.length - 1 !== key && /*#__PURE__*/React__default.createElement(Span, null));
+  }))));
 };
 
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n    padding-top: 0;\n    padding-bottom: 0;\n    margin-top: 0;\n    margin-bottom: 0;\n  "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject5$1() {
-  var data = _taggedTemplateLiteralLoose(["\n    height: 1px;\n\n    background: #111;\n    margin-top: 6px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    user-select: none;\n    margin: 0;\n  "]);
 
@@ -296,3 +294,3 @@ _templateObject5$1 = function _templateObject5() {
 function _templateObject4$2() {
-  var data = _taggedTemplateLiteralLoose(["\n    padding-right: 8px;\n    padding-left: 8px;\n    padding-bottom: 8px;\n    z-index: 1;\n    margin: 6px 0px;\n\n    cursor: pointer;\n    position: relative;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid black;\n    background: ", ";\n    cursor: pointer;\n    color: ", ";\n\n    width: ", "px;\n    height: ", "px;\n\n    border-radius: ", "px;\n\n    margin-right: 10px;\n  "]);
 
@@ -307,3 +305,3 @@ _templateObject4$2 = function _templateObject4() {
 function _templateObject3$2() {
-  var data = _taggedTemplateLiteralLoose(["\n    background: #fff;\n\n    transition: all 0.5s ease-in-out;\n    position: absolute;\n\n    width: 180px;\n    margin-left: 10px;\n\n    border: 0.4px solid #ccc;\n\n    border-bottom-right-radius: 6px;\n    border-bottom-left-radius: 6px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    border: 1px solid black;\n\n    cursor: pointer;\n    color: ", ";\n\n    width: ", "px;\n    height: ", "px;\n\n    border-radius: ", "px;\n    margin-right: 10px;\n  "]);
 
@@ -318,3 +316,3 @@ _templateObject3$2 = function _templateObject3() {
 function _templateObject2$3() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    padding: 2px 14px;\n\n    border-radius: 6px;\n\n    align-items: center;\n    justify-content: space-between;\n    background: #fff;\n\n    border: 0.4px solid #ccc;\n\n    user-select: none;\n    cursor: pointer;\n\n    box-shadow: 2px 2px 12px #ccc;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    cursor: pointer;\n    margin-bottom: 0;\n    padding-bottom: 0;\n  "]);
 
@@ -329,3 +327,3 @@ _templateObject2$3 = function _templateObject2() {
 function _templateObject$3() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    position: relative;\n    min-width: 200px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n  "]);
 
@@ -339,35 +337,37 @@ _templateObject$3 = function _templateObject() {
 
-var Dropdown = function Dropdown(_ref) {
-  var select = _ref.select,
-      selections = _ref.selections;
+var CheckBox = function CheckBox(_ref) {
+  var w = _ref.w,
+      h = _ref.h,
+      setClick = _ref.setClick,
+      color = _ref.color,
+      bg = _ref.bg,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? 'default' : _ref$text,
+      borderRadius = _ref.borderRadius;
 
-  var _useState = React.useState(true),
-      open = _useState[0],
-      setOpen = _useState[1];
+  var _useState = React.useState(false),
+      checked = _useState[0],
+      setChecked = _useState[1];
 
-  var _useState2 = React.useState(''),
-      selected = _useState2[0],
-      setSelected = _useState2[1];
-
   React.useEffect(function () {
-    select(selected);
+    if (setClick) {
+      setClick(checked);
+    }
   });
-  var Dropdown = styled.div(_templateObject$3());
-  var DropdownDefault = styled.div(_templateObject2$3());
-  var DropdownOpen = styled.div(_templateObject3$2());
-  var DropdownOpenItem = styled.div(_templateObject4$2());
-  var Span = styled.div(_templateObject5$1());
-  var DropdownText = styled.p(_templateObject6());
-  return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Dropdown, null, /*#__PURE__*/React__default.createElement(DropdownDefault, {
+  var MasterDiv = styled.div(_templateObject$3());
+  var Container = styled.div(_templateObject2$3());
+  var CheckBox = styled.div(_templateObject3$2(), color || '#111', w || 24, h || 24, borderRadius || 999);
+  var CheckBoxChecked = styled.div(_templateObject4$2(), bg || '#111', color || '#111', w || 24, h || 24, borderRadius || 999);
+  var Text = styled.p(_templateObject5$1());
+  return checked ? /*#__PURE__*/React__default.createElement(MasterDiv, null, /*#__PURE__*/React__default.createElement(Container, {
     onClick: function onClick() {
-      return setOpen(!open);
+      setChecked(!checked);
     }
-  }, /*#__PURE__*/React__default.createElement("p", null, selected === '' ? selections[0] : selected), open ? /*#__PURE__*/React__default.createElement(SvgUp, null) : /*#__PURE__*/React__default.createElement(SvgDown, null)), open && /*#__PURE__*/React__default.createElement(DropdownOpen, null, selections === null || selections === void 0 ? void 0 : selections.map(function (item, key) {
-    return /*#__PURE__*/React__default.createElement(DropdownOpenItem, {
-      onClick: function onClick() {
-        setSelected(item);
-        setOpen(false);
-      }
-    }, /*#__PURE__*/React__default.createElement(DropdownText, null, item), selections.length - 1 !== key && /*#__PURE__*/React__default.createElement(Span, null));
-  }))));
+  }, /*#__PURE__*/React__default.createElement(CheckBoxChecked, null, /*#__PURE__*/React__default.createElement(SvgCheck, {
+    color: "white"
+  })), /*#__PURE__*/React__default.createElement(Text, null, text))) : /*#__PURE__*/React__default.createElement(MasterDiv, null, /*#__PURE__*/React__default.createElement(Container, {
+    onClick: function onClick() {
+      setChecked(!checked);
+    }
+  }, /*#__PURE__*/React__default.createElement(CheckBox, null), /*#__PURE__*/React__default.createElement(Text, null, text)));
 };
@@ -374,0 +374,0 @@

dist/index.modern.js

@@ -86,3 +86,3 @@ import React__default, { createElement, useState, useEffect } from 'react';
 
-function Button(_ref) {
+var Button = function Button(_ref) {
   var primary = _ref.primary,
@@ -99,3 +99,3 @@ secondary = _ref.secondary,
   return dark ? /*#__PURE__*/React__default.createElement(DarkButton, props, "Default") : secondary ? /*#__PURE__*/React__default.createElement(SecondaryButton, props, "Default") : primary ? /*#__PURE__*/React__default.createElement(PrimaryButton, props, "Default") : outline ? /*#__PURE__*/React__default.createElement(OutlineButton, props, "Default") : /*#__PURE__*/React__default.createElement(PrimaryButton, props);
-}
+};
 
@@ -179,4 +179,14 @@ function _templateObject2$1() {
 
+function _templateObject6() {
+  var data = _taggedTemplateLiteralLoose(["\n    padding-top: 0;\n    padding-bottom: 0;\n    margin-top: 0;\n    margin-bottom: 0;\n  "]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n    user-select: none;\n    margin: 0;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    height: 1px;\n\n    background: #111;\n    margin-top: 6px;\n  "]);
 
@@ -191,3 +201,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4$1() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid black;\n    background: ", ";\n    cursor: pointer;\n    color: ", ";\n\n    width: ", "px;\n    height: ", "px;\n\n    border-radius: ", "px;\n\n    margin-right: 10px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    padding-right: 8px;\n    padding-left: 8px;\n    padding-bottom: 8px;\n    z-index: 1;\n    margin: 6px 0px;\n\n    cursor: pointer;\n    position: relative;\n  "]);
 
@@ -202,3 +212,3 @@ _templateObject4$1 = function _templateObject4() {
 function _templateObject3$1() {
-  var data = _taggedTemplateLiteralLoose(["\n    border: 1px solid black;\n\n    cursor: pointer;\n    color: ", ";\n\n    width: ", "px;\n    height: ", "px;\n\n    border-radius: ", "px;\n    margin-right: 10px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    background: #fff;\n\n    transition: all 0.5s ease-in-out;\n    position: absolute;\n\n    width: 180px;\n    margin-left: 10px;\n\n    border: 0.4px solid #ccc;\n\n    border-bottom-right-radius: 6px;\n    border-bottom-left-radius: 6px;\n  "]);
 
@@ -213,3 +223,3 @@ _templateObject3$1 = function _templateObject3() {
 function _templateObject2$2() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    cursor: pointer;\n    margin-bottom: 0;\n    padding-bottom: 0;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    padding: 2px 14px;\n\n    border-radius: 6px;\n\n    align-items: center;\n    justify-content: space-between;\n    background: #fff;\n\n    border: 0.4px solid #ccc;\n\n    user-select: none;\n    cursor: pointer;\n\n    box-shadow: 2px 2px 12px #ccc;\n  "]);
 
@@ -224,3 +234,3 @@ _templateObject2$2 = function _templateObject2() {
 function _templateObject$2() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    position: relative;\n    min-width: 200px;\n  "]);
 
@@ -234,51 +244,39 @@ _templateObject$2 = function _templateObject() {
 
-var CheckBox = function CheckBox(_ref) {
-  var w = _ref.w,
-      h = _ref.h,
-      setClick = _ref.setClick,
-      color = _ref.color,
-      bg = _ref.bg,
-      _ref$text = _ref.text,
-      text = _ref$text === void 0 ? 'default' : _ref$text,
-      borderRadius = _ref.borderRadius;
+var Dropdown = function Dropdown(_ref) {
+  var select = _ref.select,
+      selections = _ref.selections;
 
-  var _useState = useState(false),
-      checked = _useState[0],
-      setChecked = _useState[1];
+  var _useState = useState(true),
+      open = _useState[0],
+      setOpen = _useState[1];
 
+  var _useState2 = useState(''),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
   useEffect(function () {
-    if (setClick) {
-      setClick(checked);
-    }
+    select(selected);
   });
-  var MasterDiv = styled.div(_templateObject$2());
-  var Container = styled.div(_templateObject2$2());
-  var CheckBox = styled.div(_templateObject3$1(), color || '#111', w || 24, h || 24, borderRadius || 999);
-  var CheckBoxChecked = styled.div(_templateObject4$1(), bg || '#111', color || '#111', w || 24, h || 24, borderRadius || 999);
-  var Text = styled.p(_templateObject5());
-  return checked ? /*#__PURE__*/React__default.createElement(MasterDiv, null, /*#__PURE__*/React__default.createElement(Container, {
+  var Dropdown = styled.div(_templateObject$2());
+  var DropdownDefault = styled.div(_templateObject2$2());
+  var DropdownOpen = styled.div(_templateObject3$1());
+  var DropdownOpenItem = styled.div(_templateObject4$1());
+  var Span = styled.div(_templateObject5());
+  var DropdownText = styled.p(_templateObject6());
+  return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Dropdown, null, /*#__PURE__*/React__default.createElement(DropdownDefault, {
     onClick: function onClick() {
-      setChecked(!checked);
+      return setOpen(!open);
     }
-  }, /*#__PURE__*/React__default.createElement(CheckBoxChecked, null, /*#__PURE__*/React__default.createElement(SvgCheck, {
-    color: "white"
-  })), /*#__PURE__*/React__default.createElement(Text, null, text))) : /*#__PURE__*/React__default.createElement(MasterDiv, null, /*#__PURE__*/React__default.createElement(Container, {
-    onClick: function onClick() {
-      setChecked(!checked);
-    }
-  }, /*#__PURE__*/React__default.createElement(CheckBox, null), /*#__PURE__*/React__default.createElement(Text, null, text)));
+  }, /*#__PURE__*/React__default.createElement("p", null, selected === '' ? selections[0] : selected), open ? /*#__PURE__*/React__default.createElement(SvgUp, null) : /*#__PURE__*/React__default.createElement(SvgDown, null)), open && /*#__PURE__*/React__default.createElement(DropdownOpen, null, selections === null || selections === void 0 ? void 0 : selections.map(function (item, key) {
+    return /*#__PURE__*/React__default.createElement(DropdownOpenItem, {
+      onClick: function onClick() {
+        setSelected(item);
+        setOpen(false);
+      }
+    }, /*#__PURE__*/React__default.createElement(DropdownText, null, item), selections.length - 1 !== key && /*#__PURE__*/React__default.createElement(Span, null));
+  }))));
 };
 
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n    padding-top: 0;\n    padding-bottom: 0;\n    margin-top: 0;\n    margin-bottom: 0;\n  "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject5$1() {
-  var data = _taggedTemplateLiteralLoose(["\n    height: 1px;\n\n    background: #111;\n    margin-top: 6px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    user-select: none;\n    margin: 0;\n  "]);
 
@@ -293,3 +291,3 @@ _templateObject5$1 = function _templateObject5() {
 function _templateObject4$2() {
-  var data = _taggedTemplateLiteralLoose(["\n    padding-right: 8px;\n    padding-left: 8px;\n    padding-bottom: 8px;\n    z-index: 1;\n    margin: 6px 0px;\n\n    cursor: pointer;\n    position: relative;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n\n    border: 1px solid black;\n    background: ", ";\n    cursor: pointer;\n    color: ", ";\n\n    width: ", "px;\n    height: ", "px;\n\n    border-radius: ", "px;\n\n    margin-right: 10px;\n  "]);
 
@@ -304,3 +302,3 @@ _templateObject4$2 = function _templateObject4() {
 function _templateObject3$2() {
-  var data = _taggedTemplateLiteralLoose(["\n    background: #fff;\n\n    transition: all 0.5s ease-in-out;\n    position: absolute;\n\n    width: 180px;\n    margin-left: 10px;\n\n    border: 0.4px solid #ccc;\n\n    border-bottom-right-radius: 6px;\n    border-bottom-left-radius: 6px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    border: 1px solid black;\n\n    cursor: pointer;\n    color: ", ";\n\n    width: ", "px;\n    height: ", "px;\n\n    border-radius: ", "px;\n    margin-right: 10px;\n  "]);
 
@@ -315,3 +313,3 @@ _templateObject3$2 = function _templateObject3() {
 function _templateObject2$3() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    padding: 2px 14px;\n\n    border-radius: 6px;\n\n    align-items: center;\n    justify-content: space-between;\n    background: #fff;\n\n    border: 0.4px solid #ccc;\n\n    user-select: none;\n    cursor: pointer;\n\n    box-shadow: 2px 2px 12px #ccc;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    cursor: pointer;\n    margin-bottom: 0;\n    padding-bottom: 0;\n  "]);
 
@@ -326,3 +324,3 @@ _templateObject2$3 = function _templateObject2() {
 function _templateObject$3() {
-  var data = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n    position: relative;\n    min-width: 200px;\n  "]);
+  var data = _taggedTemplateLiteralLoose(["\n    display: inline-block;\n  "]);
 
@@ -336,35 +334,37 @@ _templateObject$3 = function _templateObject() {
 
-var Dropdown = function Dropdown(_ref) {
-  var select = _ref.select,
-      selections = _ref.selections;
+var CheckBox = function CheckBox(_ref) {
+  var w = _ref.w,
+      h = _ref.h,
+      setClick = _ref.setClick,
+      color = _ref.color,
+      bg = _ref.bg,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? 'default' : _ref$text,
+      borderRadius = _ref.borderRadius;
 
-  var _useState = useState(true),
-      open = _useState[0],
-      setOpen = _useState[1];
+  var _useState = useState(false),
+      checked = _useState[0],
+      setChecked = _useState[1];
 
-  var _useState2 = useState(''),
-      selected = _useState2[0],
-      setSelected = _useState2[1];
-
   useEffect(function () {
-    select(selected);
+    if (setClick) {
+      setClick(checked);
+    }
   });
-  var Dropdown = styled.div(_templateObject$3());
-  var DropdownDefault = styled.div(_templateObject2$3());
-  var DropdownOpen = styled.div(_templateObject3$2());
-  var DropdownOpenItem = styled.div(_templateObject4$2());
-  var Span = styled.div(_templateObject5$1());
-  var DropdownText = styled.p(_templateObject6());
-  return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Dropdown, null, /*#__PURE__*/React__default.createElement(DropdownDefault, {
+  var MasterDiv = styled.div(_templateObject$3());
+  var Container = styled.div(_templateObject2$3());
+  var CheckBox = styled.div(_templateObject3$2(), color || '#111', w || 24, h || 24, borderRadius || 999);
+  var CheckBoxChecked = styled.div(_templateObject4$2(), bg || '#111', color || '#111', w || 24, h || 24, borderRadius || 999);
+  var Text = styled.p(_templateObject5$1());
+  return checked ? /*#__PURE__*/React__default.createElement(MasterDiv, null, /*#__PURE__*/React__default.createElement(Container, {
     onClick: function onClick() {
-      return setOpen(!open);
+      setChecked(!checked);
     }
-  }, /*#__PURE__*/React__default.createElement("p", null, selected === '' ? selections[0] : selected), open ? /*#__PURE__*/React__default.createElement(SvgUp, null) : /*#__PURE__*/React__default.createElement(SvgDown, null)), open && /*#__PURE__*/React__default.createElement(DropdownOpen, null, selections === null || selections === void 0 ? void 0 : selections.map(function (item, key) {
-    return /*#__PURE__*/React__default.createElement(DropdownOpenItem, {
-      onClick: function onClick() {
-        setSelected(item);
-        setOpen(false);
-      }
-    }, /*#__PURE__*/React__default.createElement(DropdownText, null, item), selections.length - 1 !== key && /*#__PURE__*/React__default.createElement(Span, null));
-  }))));
+  }, /*#__PURE__*/React__default.createElement(CheckBoxChecked, null, /*#__PURE__*/React__default.createElement(SvgCheck, {
+    color: "white"
+  })), /*#__PURE__*/React__default.createElement(Text, null, text))) : /*#__PURE__*/React__default.createElement(MasterDiv, null, /*#__PURE__*/React__default.createElement(Container, {
+    onClick: function onClick() {
+      setChecked(!checked);
+    }
+  }, /*#__PURE__*/React__default.createElement(CheckBox, null), /*#__PURE__*/React__default.createElement(Text, null, text)));
 };
@@ -371,0 +371,0 @@

package.json

 {
   "name": "react-custom-elements",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React custom elements ",
@@ -5,0 +5,0 @@ "author": "Muhammed Deniz",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61110

increased by0.14%

No dependency changes