oolib 2.13.3 → 2.14.2
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.
- package/dist/components/ActionMenu/styled.js +1 -1
- package/dist/components/PercentCompletedPi/index.d.ts +2 -1
- package/dist/components/PercentCompletedPi/index.js +11 -8
- package/dist/components/PercentCompletedPi/styled.d.ts +1 -0
- package/dist/components/PercentCompletedPi/styled.js +7 -6
- package/dist/components/Tags/index.styled.js +1 -1
- package/dist/icons/index.d.ts +4 -0
- package/dist/icons/index.js +3 -1
- package/package.json +1 -1
|
@@ -34,7 +34,7 @@ var mixins_1 = require("../../themes/mixins");
|
|
|
34
34
|
var Buttons_1 = require("../Buttons");
|
|
35
35
|
var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor80 = themes_1.colors.greyColor80;
|
|
36
36
|
exports.StyledActionMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: max-content;\n"], ["\n position: relative;\n width: max-content;\n"])));
|
|
37
|
-
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n bottom: -
|
|
37
|
+
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n bottom: -2px;\n z-index: 10;\n transform-origin: left top; \n transform: translateY(100%) ", ";\n ", "\n\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border: 1px solid ", ";\n background-color: ", ";\n\n \n\n &::after{\n content: '';\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n border: 1rem solid transparent;\n border-bottom: 1rem solid ", ";\n }\n"], ["\n position: absolute;\n bottom: -2px;\n z-index: 10;\n transform-origin: left top; \n transform: translateY(100%) ", ";\n ", "\n\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border: 1px solid ", ";\n background-color: ", ";\n\n \n\n &::after{\n content: '';\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n border: 1rem solid transparent;\n border-bottom: 1rem solid ", ";\n }\n"])), function (_a) {
|
|
38
38
|
var unfold = _a.unfold;
|
|
39
39
|
return "scaleY(".concat(Number(unfold), ")");
|
|
40
40
|
}, (0, mixins_1.transition)('transform'), function (_a) {
|
|
@@ -5,17 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.PercentCompletedPi = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var Typo_1 = require("../Typo");
|
|
8
9
|
var styled_1 = require("./styled");
|
|
9
10
|
function PercentCompletedPi(_a) {
|
|
10
|
-
var percent = _a.percent, _b = _a.size, size = _b === void 0 ? "2.4rem" : _b;
|
|
11
|
+
var percent = _a.percent, _b = _a.size, size = _b === void 0 ? "2.4rem" : _b, label = _a.label;
|
|
11
12
|
var perUnit = 1.8;
|
|
12
13
|
var transform = "rotate(".concat(parseInt(percent) * perUnit, "deg)");
|
|
13
|
-
return (react_1.default.createElement(styled_1.
|
|
14
|
-
react_1.default.createElement(styled_1.
|
|
15
|
-
react_1.default.createElement(styled_1.
|
|
16
|
-
react_1.default.createElement(styled_1.
|
|
17
|
-
|
|
18
|
-
react_1.default.createElement(styled_1.
|
|
19
|
-
|
|
14
|
+
return (react_1.default.createElement(styled_1.StyledContainer, null,
|
|
15
|
+
react_1.default.createElement(styled_1.StyledWrapper, { size: size },
|
|
16
|
+
react_1.default.createElement(styled_1.StyledCircle, { size: size },
|
|
17
|
+
react_1.default.createElement(styled_1.StyledMask, { size: size, transform: transform },
|
|
18
|
+
react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill" })),
|
|
19
|
+
react_1.default.createElement(styled_1.StyledMask, { size: size, className: "mask half" },
|
|
20
|
+
react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill" }),
|
|
21
|
+
react_1.default.createElement(styled_1.StyledFill, { size: size, transform: transform, className: "fill fix" })))),
|
|
22
|
+
(label === null || label === void 0 ? void 0 : label.show) && react_1.default.createElement(Typo_1.LABEL, null, "".concat(percent).concat(label.suffix || ''))));
|
|
20
23
|
}
|
|
21
24
|
exports.PercentCompletedPi = PercentCompletedPi;
|
|
@@ -7,26 +7,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.StyledFill = exports.StyledMask = exports.StyledCircle = exports.StyledWrapper = void 0;
|
|
10
|
+
exports.StyledFill = exports.StyledMask = exports.StyledCircle = exports.StyledWrapper = exports.StyledContainer = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var utilsOolib_1 = require("../../utilsOolib");
|
|
13
|
-
exports.
|
|
13
|
+
exports.StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: 1rem;\n align-items: center;\n"], ["\n display: flex;\n gap: 1rem;\n align-items: center;\n"])));
|
|
14
|
+
exports.StyledWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 50%;\n ", "\n background-color: ", ";\n"], ["\n border-radius: 50%;\n ", "\n background-color: ", ";\n"])), function (_a) {
|
|
14
15
|
var size = _a.size;
|
|
15
16
|
return "\n width: ".concat(size, ";\n height: ").concat(size, "; \n ");
|
|
16
17
|
}, function (_a) {
|
|
17
18
|
var theme = _a.theme;
|
|
18
19
|
return (0, utilsOolib_1.getPrimaryColor40)(theme.colors);
|
|
19
20
|
});
|
|
20
|
-
exports.StyledCircle = styled_components_1.default.div(
|
|
21
|
-
exports.StyledMask = styled_components_1.default.div(
|
|
21
|
+
exports.StyledCircle = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
22
|
+
exports.StyledMask = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n position: absolute;\n border-radius: 50%;\n \n"], ["\n ", "\n position: absolute;\n border-radius: 50%;\n \n"])), function (_a) {
|
|
22
23
|
var size = _a.size, transform = _a.transform;
|
|
23
24
|
return "\n ".concat(transform ? "transform: ".concat(transform) : '', ";\n width: ").concat(size, ";\n height: ").concat(size, "; \n clip: rect(0px, ").concat(size, ", ").concat(size, ", ").concat((parseFloat(size.replace('rem', '').trim()) / 2) + 'rem', ");\n ");
|
|
24
25
|
});
|
|
25
|
-
exports.StyledFill = styled_components_1.default.div(
|
|
26
|
+
exports.StyledFill = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n border-radius: 50%;\n position: absolute;\n background-color: ", ";\n"], ["\n ", "\n border-radius: 50%;\n position: absolute;\n background-color: ", ";\n"])), function (_a) {
|
|
26
27
|
var size = _a.size, transform = _a.transform;
|
|
27
28
|
return "\n transform: ".concat(transform, ";\n width: ").concat(size, ";\n height: ").concat(size, "; \n clip: rect(0px, ").concat((parseFloat(size.replace('rem', '').trim()) / 2) + 'rem', ", ").concat(size, ", 0px);\n ");
|
|
28
29
|
}, function (_a) {
|
|
29
30
|
var theme = _a.theme;
|
|
30
31
|
return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
|
|
31
32
|
});
|
|
32
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
33
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -102,7 +102,7 @@ var StyledTagSelect = styled_components_1.default.div(templateObject_15 || (temp
|
|
|
102
102
|
return commonStyle({ size: size });
|
|
103
103
|
}, (0, mixins_1.multiTransition)("background-color"), function (_a) {
|
|
104
104
|
var selected = _a.selected, size = _a.size, colors = _a.theme.colors;
|
|
105
|
-
return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "], ["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "])), size === "XS" ? "1px" : "2px", (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.
|
|
105
|
+
return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "], ["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "])), size === "XS" ? "1px" : "2px", (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.getPrimaryColor40)(colors) : null, !selected ? (0, utilsOolib_1.getPrimaryColorText)(colors) : white, !selected && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\t\t\n\t\t}"], ["&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\t\t\n\t\t}"])), (0, utilsOolib_1.getPrimaryColor40)(colors), (0, utilsOolib_1.getPrimaryColorText)(colors)));
|
|
106
106
|
});
|
|
107
107
|
exports.StyledTagSelect = StyledTagSelect;
|
|
108
108
|
var StyledTagLink = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n \t", "\n\t", ";\n ", "\n"], ["\n \t", "\n\t", ";\n ", "\n"])), function (_a) {
|
package/dist/icons/index.d.ts
CHANGED
|
@@ -79,6 +79,8 @@ export namespace icons {
|
|
|
79
79
|
export { Code };
|
|
80
80
|
export { SortDescending };
|
|
81
81
|
export { SortAscending };
|
|
82
|
+
export { Crosshair };
|
|
83
|
+
export { MicrophoneStage };
|
|
82
84
|
}
|
|
83
85
|
import { PencilSimple } from "phosphor-react";
|
|
84
86
|
import { PencilLine } from "phosphor-react";
|
|
@@ -160,3 +162,5 @@ import { Faders } from "phosphor-react";
|
|
|
160
162
|
import { Code } from "phosphor-react";
|
|
161
163
|
import { SortDescending } from "phosphor-react";
|
|
162
164
|
import { SortAscending } from "phosphor-react";
|
|
165
|
+
import { Crosshair } from "phosphor-react";
|
|
166
|
+
import { MicrophoneStage } from "phosphor-react";
|
package/dist/icons/index.js
CHANGED
|
@@ -83,5 +83,7 @@ exports.icons = {
|
|
|
83
83
|
Faders: phosphor_react_1.Faders,
|
|
84
84
|
Code: phosphor_react_1.Code,
|
|
85
85
|
SortDescending: phosphor_react_1.SortDescending,
|
|
86
|
-
SortAscending: phosphor_react_1.SortAscending
|
|
86
|
+
SortAscending: phosphor_react_1.SortAscending,
|
|
87
|
+
Crosshair: phosphor_react_1.Crosshair,
|
|
88
|
+
MicrophoneStage: phosphor_react_1.MicrophoneStage
|
|
87
89
|
};
|