@blerp/design 1.0.113 → 1.0.116

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs.js +24 -9
  2. package/dist/index.esm.js +24 -9
  3. package/dist/index.umd.js +24 -9
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -3069,14 +3069,24 @@ EllipsisLoader.defaultProps = {
3069
3069
  };
3070
3070
 
3071
3071
  var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3072
- var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", "33;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n"])), function (props) {
3072
+ var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", "33;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n"])), function (props) {
3073
3073
  return props.theme.colors.grey5;
3074
3074
  });
3075
3075
  var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", " svg {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n }\n"])), Slider$2, function (props) {
3076
- return props.theme.colors.seafoam;
3076
+ return props.disabled ? "".concat(props.theme.colors.grey3, "cc") : props.theme.colors.seafoam;
3077
3077
  }, Slider$2, Slider$2);
3078
- var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 36px;\n min-width: 35px;\n height: 20px;\n border: 1px solid transparent;\n border-color: ", ";\n border-radius: 18px;\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
3078
+ var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n cursor: ", ";\n position: relative;\n display: inline-block;\n place-self: center;\n width: ", ";\n height: ", ";\n border: ", ";\n border-color: ", ";\n border-radius: 18px;\n opacity: ", ";\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
3079
+ return props.disabled ? "default" : "pointer";
3080
+ }, function (props) {
3081
+ return props.checked ? "38px" : "36px";
3082
+ }, function (props) {
3083
+ return props.checked ? "22px" : "20px";
3084
+ }, function (props) {
3085
+ return props.checked ? "0px" : "1px solid transparent";
3086
+ }, function (props) {
3079
3087
  return props.checked ? "transparent" : props.theme.colors.grey5;
3088
+ }, function (props) {
3089
+ return props.disabled ? "0.5" : "1";
3080
3090
  }, ToggleInput);
3081
3091
  var BlackSlider = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
3082
3092
  return props.theme.colors.notBlack;
@@ -3091,14 +3101,19 @@ var LoadingContainer$1 = styled__default['default'].div(_templateObject7 || (_te
3091
3101
  var Toggle$1 = function Toggle(_ref) {
3092
3102
  var loading = _ref.loading,
3093
3103
  checked = _ref.checked,
3094
- _onClick = _ref.onClick;
3104
+ _onClick = _ref.onClick,
3105
+ disabled = _ref.disabled;
3095
3106
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer$1, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch$1, {
3096
3107
  checked: checked,
3108
+ disabled: disabled,
3097
3109
  onClick: function onClick(e) {
3098
- return _onClick(e);
3110
+ if (!disabled && _onClick) {
3111
+ _onClick(e);
3112
+ }
3099
3113
  }
3100
3114
  }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
3101
3115
  checked: checked,
3116
+ disabled: disabled,
3102
3117
  onChange: function onChange() {
3103
3118
  return null;
3104
3119
  },
@@ -3106,10 +3121,10 @@ var Toggle$1 = function Toggle(_ref) {
3106
3121
  }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
3107
3122
  sx: {
3108
3123
  position: "absolute",
3109
- top: "2px",
3110
- left: "3px",
3111
- color: checked ? "seafoam.main" : "transparent",
3112
- fontSize: "16px",
3124
+ top: checked ? "3px" : "4px",
3125
+ left: "4px",
3126
+ color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
3127
+ fontSize: checked ? "16px" : "12px",
3113
3128
  backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
3114
3129
  borderRadius: "50%",
3115
3130
  transition: "0.2s"
package/dist/index.esm.js CHANGED
@@ -3000,14 +3000,24 @@ EllipsisLoader.defaultProps = {
3000
3000
  };
3001
3001
 
3002
3002
  var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3003
- var Slider$2 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", "33;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n"])), function (props) {
3003
+ var Slider$2 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", "33;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n"])), function (props) {
3004
3004
  return props.theme.colors.grey5;
3005
3005
  });
3006
3006
  var ToggleInput = styled.input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n &:checked + ", " {\n background-color: ", ";\n }\n\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", " svg {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n }\n"])), Slider$2, function (props) {
3007
- return props.theme.colors.seafoam;
3007
+ return props.disabled ? "".concat(props.theme.colors.grey3, "cc") : props.theme.colors.seafoam;
3008
3008
  }, Slider$2, Slider$2);
3009
- var Switch$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 36px;\n min-width: 35px;\n height: 20px;\n border: 1px solid transparent;\n border-color: ", ";\n border-radius: 18px;\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
3009
+ var Switch$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n cursor: ", ";\n position: relative;\n display: inline-block;\n place-self: center;\n width: ", ";\n height: ", ";\n border: ", ";\n border-color: ", ";\n border-radius: 18px;\n opacity: ", ";\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
3010
+ return props.disabled ? "default" : "pointer";
3011
+ }, function (props) {
3012
+ return props.checked ? "38px" : "36px";
3013
+ }, function (props) {
3014
+ return props.checked ? "22px" : "20px";
3015
+ }, function (props) {
3016
+ return props.checked ? "0px" : "1px solid transparent";
3017
+ }, function (props) {
3010
3018
  return props.checked ? "transparent" : props.theme.colors.grey5;
3019
+ }, function (props) {
3020
+ return props.disabled ? "0.5" : "1";
3011
3021
  }, ToggleInput);
3012
3022
  var BlackSlider = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
3013
3023
  return props.theme.colors.notBlack;
@@ -3022,14 +3032,19 @@ var LoadingContainer$1 = styled.div(_templateObject7 || (_templateObject7 = _tag
3022
3032
  var Toggle$1 = function Toggle(_ref) {
3023
3033
  var loading = _ref.loading,
3024
3034
  checked = _ref.checked,
3025
- _onClick = _ref.onClick;
3035
+ _onClick = _ref.onClick,
3036
+ disabled = _ref.disabled;
3026
3037
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading ? /*#__PURE__*/React__default.createElement(LoadingContainer$1, null, /*#__PURE__*/React__default.createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default.createElement(Switch$1, {
3027
3038
  checked: checked,
3039
+ disabled: disabled,
3028
3040
  onClick: function onClick(e) {
3029
- return _onClick(e);
3041
+ if (!disabled && _onClick) {
3042
+ _onClick(e);
3043
+ }
3030
3044
  }
3031
3045
  }, /*#__PURE__*/React__default.createElement(ToggleInput, {
3032
3046
  checked: checked,
3047
+ disabled: disabled,
3033
3048
  onChange: function onChange() {
3034
3049
  return null;
3035
3050
  },
@@ -3037,10 +3052,10 @@ var Toggle$1 = function Toggle(_ref) {
3037
3052
  }), /*#__PURE__*/React__default.createElement(Slider$2, null, /*#__PURE__*/React__default.createElement(CheckRounded, {
3038
3053
  sx: {
3039
3054
  position: "absolute",
3040
- top: "2px",
3041
- left: "3px",
3042
- color: checked ? "seafoam.main" : "transparent",
3043
- fontSize: "16px",
3055
+ top: checked ? "3px" : "4px",
3056
+ left: "4px",
3057
+ color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
3058
+ fontSize: checked ? "16px" : "12px",
3044
3059
  backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
3045
3060
  borderRadius: "50%",
3046
3061
  transition: "0.2s"
package/dist/index.umd.js CHANGED
@@ -3021,14 +3021,24 @@
3021
3021
  };
3022
3022
 
3023
3023
  var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3024
- var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", "33;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n"])), function (props) {
3024
+ var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", "33;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n"])), function (props) {
3025
3025
  return props.theme.colors.grey5;
3026
3026
  });
3027
3027
  var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", " svg {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n }\n"])), Slider$2, function (props) {
3028
- return props.theme.colors.seafoam;
3028
+ return props.disabled ? "".concat(props.theme.colors.grey3, "cc") : props.theme.colors.seafoam;
3029
3029
  }, Slider$2, Slider$2);
3030
- var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 36px;\n min-width: 35px;\n height: 20px;\n border: 1px solid transparent;\n border-color: ", ";\n border-radius: 18px;\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
3030
+ var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n cursor: ", ";\n position: relative;\n display: inline-block;\n place-self: center;\n width: ", ";\n height: ", ";\n border: ", ";\n border-color: ", ";\n border-radius: 18px;\n opacity: ", ";\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
3031
+ return props.disabled ? "default" : "pointer";
3032
+ }, function (props) {
3033
+ return props.checked ? "38px" : "36px";
3034
+ }, function (props) {
3035
+ return props.checked ? "22px" : "20px";
3036
+ }, function (props) {
3037
+ return props.checked ? "0px" : "1px solid transparent";
3038
+ }, function (props) {
3031
3039
  return props.checked ? "transparent" : props.theme.colors.grey5;
3040
+ }, function (props) {
3041
+ return props.disabled ? "0.5" : "1";
3032
3042
  }, ToggleInput);
3033
3043
  var BlackSlider = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
3034
3044
  return props.theme.colors.notBlack;
@@ -3043,14 +3053,19 @@
3043
3053
  var Toggle$1 = function Toggle(_ref) {
3044
3054
  var loading = _ref.loading,
3045
3055
  checked = _ref.checked,
3046
- _onClick = _ref.onClick;
3056
+ _onClick = _ref.onClick,
3057
+ disabled = _ref.disabled;
3047
3058
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer$1, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch$1, {
3048
3059
  checked: checked,
3060
+ disabled: disabled,
3049
3061
  onClick: function onClick(e) {
3050
- return _onClick(e);
3062
+ if (!disabled && _onClick) {
3063
+ _onClick(e);
3064
+ }
3051
3065
  }
3052
3066
  }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
3053
3067
  checked: checked,
3068
+ disabled: disabled,
3054
3069
  onChange: function onChange() {
3055
3070
  return null;
3056
3071
  },
@@ -3058,10 +3073,10 @@
3058
3073
  }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
3059
3074
  sx: {
3060
3075
  position: "absolute",
3061
- top: "2px",
3062
- left: "3px",
3063
- color: checked ? "seafoam.main" : "transparent",
3064
- fontSize: "16px",
3076
+ top: checked ? "3px" : "4px",
3077
+ left: "4px",
3078
+ color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
3079
+ fontSize: checked ? "16px" : "12px",
3065
3080
  backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
3066
3081
  borderRadius: "50%",
3067
3082
  transition: "0.2s"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.0.113",
3
+ "version": "1.0.116",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {