@mexi/uikit 0.0.13 → 0.0.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/dist/index.cjs.js +6 -5
  2. package/dist/index.esm.js +6 -5
  3. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -2881,30 +2881,32 @@ var bunnyHeadMax = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%223
2881
2881
 
2882
2882
  var bunnyButt = "data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2232%22%20viewBox%3D%220%200%2015%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.58803%2020.8649C7.72935%2021.3629%208.02539%2024.0334%208.76388%2026.7895C9.50238%2029.5456%2010.5812%2032.0062%2012.4399%2031.5082C14.2986%2031.0102%2015.2334%2028.0099%2014.4949%2025.2538C13.7564%2022.4978%2011.4467%2020.3669%209.58803%2020.8649Z%22%20fill%3D%22%230098A1%22%2F%3E%3Cpath%20d%3D%22M1%2024.4516C1%2020.8885%203.88849%2018%207.45161%2018H15V28H4.54839C2.58867%2028%201%2026.4113%201%2024.4516Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3Cpath%20d%3D%22M6.11115%2017.2246C6.79693%2018.4124%205.77784%2019.3343%204.52793%2020.0559C3.27802%2020.7776%201.97011%2021.1992%201.28433%2020.0114C0.598546%2018.8236%201.1635%2017.1151%202.41341%2016.3935C3.66332%2015.6718%205.42537%2016.0368%206.11115%2017.2246Z%22%20fill%3D%22%2353DEE9%22%2F%3E%3Cpath%20d%3D%22M1.64665%2023.6601C0.285995%2025.0207%201.87759%2027.1854%203.89519%2029.203C5.91279%2031.2206%208.07743%2032.8122%209.43808%2031.4515C10.7987%2030.0909%2010.1082%2027.0252%208.09058%2025.0076C6.07298%2022.99%203.0073%2022.2994%201.64665%2023.6601Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3C%2Fsvg%3E";
2883
2883
 
2884
+ var rectangle = "data:image/svg+xml,%3Csvg%20width%3D%2231%22%20height%3D%2232%22%20viewBox%3D%220%200%2031%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.5033%202.01304L2.01172%2015.5046L15.5033%2028.9962L28.9949%2015.5046L15.5033%202.01304Z%22%20fill%3D%22%234AC7D5%22%2F%3E%3Cpath%20d%3D%22M15.3643%200.464783L0%2015.8291L15.3643%2031.1934L30.7286%2015.8291L15.3643%200.464783Z%22%20fill%3D%22%23238E9A%22%2F%3E%3Cpath%20d%3D%22M15.3702%200.470581L1.21094%2014.6299L15.3702%2028.7892L29.5295%2014.6299L15.3702%200.470581Z%22%20fill%3D%22%2362DEEC%22%2F%3E%3Cpath%20d%3D%22M15.3631%203.9345L4.50195%2014.7957L15.3631%2025.6568L26.2243%2014.7957L15.3631%203.9345Z%22%20fill%3D%22%234AC7D5%22%2F%3E%3C%2Fsvg%3E";
2885
+
2884
2886
  var getCursorStyle = function (_a) {
2885
2887
  var _b = _a.disabled, disabled = _b === void 0 ? false : _b;
2886
2888
  return disabled ? "not-allowed" : "cursor";
2887
2889
  };
2888
2890
  var getBaseThumbStyles = function (_a) {
2889
2891
  var isMax = _a.isMax, disabled = _a.disabled;
2890
- return "\n -webkit-appearance: none;\n background-image: url(" + (isMax ? bunnyHeadMax : bunnyHeadMain) + ");\n background-color: transparent;\n border: 0;\n cursor: " + getCursorStyle + ";\n width: 24px;\n height: 32px;\n filter: " + (disabled ? "grayscale(100%)" : "none") + ";\n transform: translate(-2px, -2px);\n transition: 200ms transform;\n\n &:hover {\n transform: " + (disabled ? "scale(1) translate(-2px, -2px)" : "scale(1.1) translate(-3px, -3px)") + ";\n }\n";
2892
+ return "\n -webkit-appearance: none;\n // background-image: url(" + (isMax ? bunnyHeadMax : bunnyHeadMain) + ");\n background-image: url(" + rectangle + ");\n background-color: transparent;\n border: 0;\n cursor: " + getCursorStyle + ";\n width: 31px;\n height: 31px;\n filter: " + (disabled ? "grayscale(100%)" : "none") + ";\n // transform: translate(-2px, -2px);\n transition: 200ms transform;\n\n &:hover {\n transform: " + (disabled ? "scale(1)" : "scale(1.1)") + ";\n }\n";
2891
2893
  };
2892
2894
  var SliderLabelContainer = styled__default['default'].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"], ["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"])));
2893
2895
  var SliderLabel = styled__default['default'](Text)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"], ["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"])), function (_a) {
2894
2896
  var progress = _a.progress;
2895
2897
  return progress;
2896
2898
  });
2897
- var BunnyButt = styled__default['default'].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"], ["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"])), bunnyButt, function (_a) {
2899
+ styled__default['default'].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"], ["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"])), bunnyButt, function (_a) {
2898
2900
  var disabled = _a.disabled;
2899
2901
  return (disabled ? "grayscale(100%)" : "none");
2900
2902
  });
2901
- var BunnySlider = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n left: 14px;\n width: calc(100% - 14px);\n"], ["\n position: absolute;\n left: 14px;\n width: calc(100% - 14px);\n"])));
2903
+ var BunnySlider = styled__default['default'].div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n /* left: 14px; */\n /* width: calc(100% - 14px); */\n"], ["\n position: absolute;\n width: 100%;\n /* left: 14px; */\n /* width: calc(100% - 14px); */\n"])));
2902
2904
  var StyledInput = styled__default['default'].input(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n cursor: ", ";\n height: 32px;\n position: relative;\n\n ::-webkit-slider-thumb {\n ", "\n }\n\n ::-moz-range-thumb {\n ", "\n }\n\n ::-ms-thumb {\n ", "\n }\n"], ["\n cursor: ", ";\n height: 32px;\n position: relative;\n\n ::-webkit-slider-thumb {\n ", "\n }\n\n ::-moz-range-thumb {\n ", "\n }\n\n ::-ms-thumb {\n ", "\n }\n"])), getCursorStyle, getBaseThumbStyles, getBaseThumbStyles, getBaseThumbStyles);
2903
2905
  var BarBackground = styled__default['default'].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n background-color: ", ";\n height: 2px;\n position: absolute;\n top: 18px;\n width: 100%;\n"], ["\n background-color: ", ";\n height: 2px;\n position: absolute;\n top: 18px;\n width: 100%;\n"])), function (_a) {
2904
2906
  var theme = _a.theme, disabled = _a.disabled;
2905
2907
  return theme.colors[disabled ? "textDisabled" : "inputSecondary"];
2906
2908
  });
2907
- var BarProgress = styled__default['default'].div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n background-color: ", ";\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 18px;\n"], ["\n background-color: ", ";\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 18px;\n"])), function (_a) {
2909
+ var BarProgress = styled__default['default'].div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n /* background-color: ", "; */\n background-color: #4AC7D5;\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 14px;\n"], ["\n /* background-color: ", "; */\n background-color: #4AC7D5;\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 14px;\n"])), function (_a) {
2908
2910
  var theme = _a.theme;
2909
2911
  return theme.colors.primary;
2910
2912
  }, function (_a) {
@@ -2937,7 +2939,6 @@ var Slider = function (_a) {
2937
2939
  var labelProgress = isMax ? "calc(100% - 12px)" : progressPercentage + "%";
2938
2940
  var displayValueLabel = isMax ? "MAX" : valueLabel;
2939
2941
  return (React__default['default'].createElement(Box, __assign({ position: "relative", height: "48px" }, props),
2940
- React__default['default'].createElement(BunnyButt, { disabled: disabled }),
2941
2942
  React__default['default'].createElement(BunnySlider, null,
2942
2943
  React__default['default'].createElement(BarBackground, { disabled: disabled }),
2943
2944
  React__default['default'].createElement(BarProgress, { style: { width: progressWidth }, disabled: disabled }),
package/dist/index.esm.js CHANGED
@@ -2847,30 +2847,32 @@ var bunnyHeadMax = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%223
2847
2847
 
2848
2848
  var bunnyButt = "data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2232%22%20viewBox%3D%220%200%2015%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.58803%2020.8649C7.72935%2021.3629%208.02539%2024.0334%208.76388%2026.7895C9.50238%2029.5456%2010.5812%2032.0062%2012.4399%2031.5082C14.2986%2031.0102%2015.2334%2028.0099%2014.4949%2025.2538C13.7564%2022.4978%2011.4467%2020.3669%209.58803%2020.8649Z%22%20fill%3D%22%230098A1%22%2F%3E%3Cpath%20d%3D%22M1%2024.4516C1%2020.8885%203.88849%2018%207.45161%2018H15V28H4.54839C2.58867%2028%201%2026.4113%201%2024.4516Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3Cpath%20d%3D%22M6.11115%2017.2246C6.79693%2018.4124%205.77784%2019.3343%204.52793%2020.0559C3.27802%2020.7776%201.97011%2021.1992%201.28433%2020.0114C0.598546%2018.8236%201.1635%2017.1151%202.41341%2016.3935C3.66332%2015.6718%205.42537%2016.0368%206.11115%2017.2246Z%22%20fill%3D%22%2353DEE9%22%2F%3E%3Cpath%20d%3D%22M1.64665%2023.6601C0.285995%2025.0207%201.87759%2027.1854%203.89519%2029.203C5.91279%2031.2206%208.07743%2032.8122%209.43808%2031.4515C10.7987%2030.0909%2010.1082%2027.0252%208.09058%2025.0076C6.07298%2022.99%203.0073%2022.2994%201.64665%2023.6601Z%22%20fill%3D%22%231FC7D4%22%2F%3E%3C%2Fsvg%3E";
2849
2849
 
2850
+ var rectangle = "data:image/svg+xml,%3Csvg%20width%3D%2231%22%20height%3D%2232%22%20viewBox%3D%220%200%2031%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.5033%202.01304L2.01172%2015.5046L15.5033%2028.9962L28.9949%2015.5046L15.5033%202.01304Z%22%20fill%3D%22%234AC7D5%22%2F%3E%3Cpath%20d%3D%22M15.3643%200.464783L0%2015.8291L15.3643%2031.1934L30.7286%2015.8291L15.3643%200.464783Z%22%20fill%3D%22%23238E9A%22%2F%3E%3Cpath%20d%3D%22M15.3702%200.470581L1.21094%2014.6299L15.3702%2028.7892L29.5295%2014.6299L15.3702%200.470581Z%22%20fill%3D%22%2362DEEC%22%2F%3E%3Cpath%20d%3D%22M15.3631%203.9345L4.50195%2014.7957L15.3631%2025.6568L26.2243%2014.7957L15.3631%203.9345Z%22%20fill%3D%22%234AC7D5%22%2F%3E%3C%2Fsvg%3E";
2851
+
2850
2852
  var getCursorStyle = function (_a) {
2851
2853
  var _b = _a.disabled, disabled = _b === void 0 ? false : _b;
2852
2854
  return disabled ? "not-allowed" : "cursor";
2853
2855
  };
2854
2856
  var getBaseThumbStyles = function (_a) {
2855
2857
  var isMax = _a.isMax, disabled = _a.disabled;
2856
- return "\n -webkit-appearance: none;\n background-image: url(" + (isMax ? bunnyHeadMax : bunnyHeadMain) + ");\n background-color: transparent;\n border: 0;\n cursor: " + getCursorStyle + ";\n width: 24px;\n height: 32px;\n filter: " + (disabled ? "grayscale(100%)" : "none") + ";\n transform: translate(-2px, -2px);\n transition: 200ms transform;\n\n &:hover {\n transform: " + (disabled ? "scale(1) translate(-2px, -2px)" : "scale(1.1) translate(-3px, -3px)") + ";\n }\n";
2858
+ return "\n -webkit-appearance: none;\n // background-image: url(" + (isMax ? bunnyHeadMax : bunnyHeadMain) + ");\n background-image: url(" + rectangle + ");\n background-color: transparent;\n border: 0;\n cursor: " + getCursorStyle + ";\n width: 31px;\n height: 31px;\n filter: " + (disabled ? "grayscale(100%)" : "none") + ";\n // transform: translate(-2px, -2px);\n transition: 200ms transform;\n\n &:hover {\n transform: " + (disabled ? "scale(1)" : "scale(1.1)") + ";\n }\n";
2857
2859
  };
2858
2860
  var SliderLabelContainer = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"], ["\n bottom: 0;\n position: absolute;\n left: 14px;\n width: calc(100% - 30px);\n"])));
2859
2861
  var SliderLabel = styled(Text)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"], ["\n bottom: 0;\n font-size: 12px;\n left: ", ";\n position: absolute;\n text-align: center;\n min-width: 24px; // Slider thumb size\n"])), function (_a) {
2860
2862
  var progress = _a.progress;
2861
2863
  return progress;
2862
2864
  });
2863
- var BunnyButt = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"], ["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"])), bunnyButt, function (_a) {
2865
+ styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"], ["\n background: url(", ") no-repeat;\n height: 32px;\n filter: ", ";\n position: absolute;\n width: 15px;\n"])), bunnyButt, function (_a) {
2864
2866
  var disabled = _a.disabled;
2865
2867
  return (disabled ? "grayscale(100%)" : "none");
2866
2868
  });
2867
- var BunnySlider = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n left: 14px;\n width: calc(100% - 14px);\n"], ["\n position: absolute;\n left: 14px;\n width: calc(100% - 14px);\n"])));
2869
+ var BunnySlider = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n /* left: 14px; */\n /* width: calc(100% - 14px); */\n"], ["\n position: absolute;\n width: 100%;\n /* left: 14px; */\n /* width: calc(100% - 14px); */\n"])));
2868
2870
  var StyledInput = styled.input(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n cursor: ", ";\n height: 32px;\n position: relative;\n\n ::-webkit-slider-thumb {\n ", "\n }\n\n ::-moz-range-thumb {\n ", "\n }\n\n ::-ms-thumb {\n ", "\n }\n"], ["\n cursor: ", ";\n height: 32px;\n position: relative;\n\n ::-webkit-slider-thumb {\n ", "\n }\n\n ::-moz-range-thumb {\n ", "\n }\n\n ::-ms-thumb {\n ", "\n }\n"])), getCursorStyle, getBaseThumbStyles, getBaseThumbStyles, getBaseThumbStyles);
2869
2871
  var BarBackground = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n background-color: ", ";\n height: 2px;\n position: absolute;\n top: 18px;\n width: 100%;\n"], ["\n background-color: ", ";\n height: 2px;\n position: absolute;\n top: 18px;\n width: 100%;\n"])), function (_a) {
2870
2872
  var theme = _a.theme, disabled = _a.disabled;
2871
2873
  return theme.colors[disabled ? "textDisabled" : "inputSecondary"];
2872
2874
  });
2873
- var BarProgress = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n background-color: ", ";\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 18px;\n"], ["\n background-color: ", ";\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 18px;\n"])), function (_a) {
2875
+ var BarProgress = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n /* background-color: ", "; */\n background-color: #4AC7D5;\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 14px;\n"], ["\n /* background-color: ", "; */\n background-color: #4AC7D5;\n filter: ", ";\n height: 10px;\n position: absolute;\n top: 14px;\n"])), function (_a) {
2874
2876
  var theme = _a.theme;
2875
2877
  return theme.colors.primary;
2876
2878
  }, function (_a) {
@@ -2903,7 +2905,6 @@ var Slider = function (_a) {
2903
2905
  var labelProgress = isMax ? "calc(100% - 12px)" : progressPercentage + "%";
2904
2906
  var displayValueLabel = isMax ? "MAX" : valueLabel;
2905
2907
  return (React__default.createElement(Box, __assign({ position: "relative", height: "48px" }, props),
2906
- React__default.createElement(BunnyButt, { disabled: disabled }),
2907
2908
  React__default.createElement(BunnySlider, null,
2908
2909
  React__default.createElement(BarBackground, { disabled: disabled }),
2909
2910
  React__default.createElement(BarProgress, { style: { width: progressWidth }, disabled: disabled }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mexi/uikit",
3
- "version": "0.0.13",
3
+ "version": "0.0.14",
4
4
  "description": "Set of UI components for pancake projects",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",