@blerp/design 1.0.112 → 1.0.115

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 +36 -12
  2. package/dist/index.esm.js +37 -13
  3. package/dist/index.umd.js +36 -12
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -3069,17 +3069,25 @@ 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: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 3px;\n bottom: 2px;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 50%;\n }\n"])), function (props) {
3073
- return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
3074
- }, function (props) {
3075
- return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
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
+ return props.theme.colors.grey5;
3076
3074
  });
3077
- var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$2, function (props) {
3078
- return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
3079
- }, Slider$2, function (props) {
3080
- return props.theme.colors.seafoam;
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.disabled ? props.theme.colors.grey3 : props.theme.colors.seafoam;
3081
3077
  }, Slider$2, Slider$2);
3082
- 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: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
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) {
3087
+ return props.checked ? "transparent" : props.theme.colors.grey5;
3088
+ }, function (props) {
3089
+ return props.disabled ? "0.5" : "1";
3090
+ }, ToggleInput);
3083
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) {
3084
3092
  return props.theme.colors.notBlack;
3085
3093
  });
@@ -3093,19 +3101,35 @@ var LoadingContainer$1 = styled__default['default'].div(_templateObject7 || (_te
3093
3101
  var Toggle$1 = function Toggle(_ref) {
3094
3102
  var loading = _ref.loading,
3095
3103
  checked = _ref.checked,
3096
- _onClick = _ref.onClick;
3104
+ _onClick = _ref.onClick,
3105
+ disabled = _ref.disabled;
3097
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, {
3098
3107
  checked: checked,
3108
+ disabled: disabled,
3099
3109
  onClick: function onClick(e) {
3100
- return _onClick(e);
3110
+ if (!disabled && _onClick) {
3111
+ _onClick(e);
3112
+ }
3101
3113
  }
3102
3114
  }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
3103
3115
  checked: checked,
3116
+ disabled: disabled,
3104
3117
  onChange: function onChange() {
3105
3118
  return null;
3106
3119
  },
3107
3120
  type: "checkbox"
3108
- }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
3121
+ }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
3122
+ sx: {
3123
+ position: "absolute",
3124
+ top: checked ? "3px" : "4px",
3125
+ left: "4px",
3126
+ color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
3127
+ fontSize: checked ? "16px" : "12px",
3128
+ backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
3129
+ borderRadius: "50%",
3130
+ transition: "0.2s"
3131
+ }
3132
+ }))));
3109
3133
  };
3110
3134
 
3111
3135
  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
package/dist/index.esm.js CHANGED
@@ -6,7 +6,7 @@ import React__default, { useState, useEffect, useContext, useRef, createRef, clo
6
6
  import { ColorExtractor } from 'react-color-extractor';
7
7
  import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
8
8
  import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
9
- import { PauseCircleOutlineRounded, LockRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
9
+ import { PauseCircleOutlineRounded, LockRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
10
10
  import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
11
11
  import LockRoundedIcon from '@mui/icons-material/LockRounded';
12
12
  import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
@@ -3000,17 +3000,25 @@ 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: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 3px;\n bottom: 2px;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 50%;\n }\n"])), function (props) {
3004
- return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
3005
- }, function (props) {
3006
- return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
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
+ return props.theme.colors.grey5;
3007
3005
  });
3008
- var ToggleInput = styled.input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$2, function (props) {
3009
- return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
3010
- }, Slider$2, function (props) {
3011
- return props.theme.colors.seafoam;
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.disabled ? props.theme.colors.grey3 : props.theme.colors.seafoam;
3012
3008
  }, Slider$2, Slider$2);
3013
- var Switch$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
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) {
3018
+ return props.checked ? "transparent" : props.theme.colors.grey5;
3019
+ }, function (props) {
3020
+ return props.disabled ? "0.5" : "1";
3021
+ }, ToggleInput);
3014
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) {
3015
3023
  return props.theme.colors.notBlack;
3016
3024
  });
@@ -3024,19 +3032,35 @@ var LoadingContainer$1 = styled.div(_templateObject7 || (_templateObject7 = _tag
3024
3032
  var Toggle$1 = function Toggle(_ref) {
3025
3033
  var loading = _ref.loading,
3026
3034
  checked = _ref.checked,
3027
- _onClick = _ref.onClick;
3035
+ _onClick = _ref.onClick,
3036
+ disabled = _ref.disabled;
3028
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, {
3029
3038
  checked: checked,
3039
+ disabled: disabled,
3030
3040
  onClick: function onClick(e) {
3031
- return _onClick(e);
3041
+ if (!disabled && _onClick) {
3042
+ _onClick(e);
3043
+ }
3032
3044
  }
3033
3045
  }, /*#__PURE__*/React__default.createElement(ToggleInput, {
3034
3046
  checked: checked,
3047
+ disabled: disabled,
3035
3048
  onChange: function onChange() {
3036
3049
  return null;
3037
3050
  },
3038
3051
  type: "checkbox"
3039
- }), /*#__PURE__*/React__default.createElement(Slider$2, null)));
3052
+ }), /*#__PURE__*/React__default.createElement(Slider$2, null, /*#__PURE__*/React__default.createElement(CheckRounded, {
3053
+ sx: {
3054
+ position: "absolute",
3055
+ top: checked ? "3px" : "4px",
3056
+ left: "4px",
3057
+ color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
3058
+ fontSize: checked ? "16px" : "12px",
3059
+ backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
3060
+ borderRadius: "50%",
3061
+ transition: "0.2s"
3062
+ }
3063
+ }))));
3040
3064
  };
3041
3065
 
3042
3066
  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
package/dist/index.umd.js CHANGED
@@ -3021,17 +3021,25 @@
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: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 3px;\n bottom: 2px;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 50%;\n }\n"])), function (props) {
3025
- return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
3026
- }, function (props) {
3027
- return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
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
+ return props.theme.colors.grey5;
3028
3026
  });
3029
- var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$2, function (props) {
3030
- return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
3031
- }, Slider$2, function (props) {
3032
- return props.theme.colors.seafoam;
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.disabled ? props.theme.colors.grey3 : props.theme.colors.seafoam;
3033
3029
  }, Slider$2, Slider$2);
3034
- 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: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
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) {
3039
+ return props.checked ? "transparent" : props.theme.colors.grey5;
3040
+ }, function (props) {
3041
+ return props.disabled ? "0.5" : "1";
3042
+ }, ToggleInput);
3035
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) {
3036
3044
  return props.theme.colors.notBlack;
3037
3045
  });
@@ -3045,19 +3053,35 @@
3045
3053
  var Toggle$1 = function Toggle(_ref) {
3046
3054
  var loading = _ref.loading,
3047
3055
  checked = _ref.checked,
3048
- _onClick = _ref.onClick;
3056
+ _onClick = _ref.onClick,
3057
+ disabled = _ref.disabled;
3049
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, {
3050
3059
  checked: checked,
3060
+ disabled: disabled,
3051
3061
  onClick: function onClick(e) {
3052
- return _onClick(e);
3062
+ if (!disabled && _onClick) {
3063
+ _onClick(e);
3064
+ }
3053
3065
  }
3054
3066
  }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
3055
3067
  checked: checked,
3068
+ disabled: disabled,
3056
3069
  onChange: function onChange() {
3057
3070
  return null;
3058
3071
  },
3059
3072
  type: "checkbox"
3060
- }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
3073
+ }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
3074
+ sx: {
3075
+ position: "absolute",
3076
+ top: checked ? "3px" : "4px",
3077
+ left: "4px",
3078
+ color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
3079
+ fontSize: checked ? "16px" : "12px",
3080
+ backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
3081
+ borderRadius: "50%",
3082
+ transition: "0.2s"
3083
+ }
3084
+ }))));
3061
3085
  };
3062
3086
 
3063
3087
  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.0.112",
3
+ "version": "1.0.115",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {