krl-alfred 1.82.7 → 1.82.8
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.
|
@@ -38,6 +38,6 @@ var Children = function (props) {
|
|
|
38
38
|
};
|
|
39
39
|
var Button = (0, react_1.forwardRef)(function (props, ref) {
|
|
40
40
|
var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, _a = props.icon, icon = _a === void 0 ? props_1.ButtonDefault.icon : _a, children = props.children, _b = props.iconSize, iconSize = _b === void 0 ? props_1.ButtonDefault.iconSize : _b, _c = props.tooltip, tooltip = _c === void 0 ? props_1.ButtonDefault.tooltip : _c, other = __rest(props, ["type", "isLoading", "onClick", "disabled", "size", "variant", "width", "icon", "children", "iconSize", "tooltip"]);
|
|
41
|
-
return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled, "$size": size, "$variant": variant, "$width": width, "$icon": icon, type: type, ref: ref, "$isLoading": isLoading, "$tooltip": tooltip }, other, { children: [(0, jsx_runtime_1.jsxs)(Children, __assign({ isLoading: isLoading, icon: icon, iconSize: iconSize }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "loadingContent" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", height: ["small", "xsmall"].includes(size) ? "1rem" : "1.5rem", variant: variant === 'primary' ? 'secondary' : 'primary' }) }))), (0, jsx_runtime_1.jsx)("span", { children: children })] })), tooltip && (0, jsx_runtime_1.jsx)("div", __assign({ className: "buttonTooltip" }, { children: tooltip }))] })));
|
|
42
42
|
});
|
|
43
43
|
exports.default = Button;
|
|
@@ -86,7 +86,7 @@ var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
|
|
|
86
86
|
return "var(--body-bold-14-17)";
|
|
87
87
|
}
|
|
88
88
|
}, devices_1.devices.mdUp, devices_1.devices.md);
|
|
89
|
-
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
|
|
89
|
+
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n &:is(.loading) {\n user-select: none;\n pointer-events: none;\n .children{\n > span{\n opacity: 0;\n } \n }\n > *:not(.children){\n opacity: 0;\n }\n }\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n padding: ", ";\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n outline: none;\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n background-color: transparent;\n border-radius: inherit;\n &:is(.isLoading){\n background-color: inherit;\n }\n &:empty{\n margin-right: 0;\n }\n }\n .loadingContent{\n position: absolute;\n background-color: inherit;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 5;\n border-radius: inherit;\n svg{\n color: inherit;\n }\n }\n .buttonTooltip{\n position: absolute;\n right: 0;\n top: calc(100% + 5px);\n background: white;\n color: var(--dark);\n font: var(--caption-medium-10-12);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n user-select: none;\n pointer-events: none;\n transition: all .2s ease;\n opacity: 0;\n transition-delay: 0s;\n }\n &:hover{\n .buttonTooltip{\n opacity: 1;\n transition-delay: 0.5s;\n }\n }\n &:is(.loading) {\n user-select: none;\n pointer-events: none;\n .children{\n > span{\n opacity: 0;\n } \n }\n > *:not(.children){\n opacity: 0;\n }\n }\n"])), function (props) { return props.$width ? '0' : '0 24px'; }, function (props) { return props.$width; }, function (props) {
|
|
90
90
|
switch (props.$variant) {
|
|
91
91
|
case 'primary':
|
|
92
92
|
return primary;
|