@mexi/uikit 0.0.13 → 0.0.14

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 (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",