@astral/ui 0.7.1 → 0.7.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/Tag/Tag.d.ts +1 -1
- package/Tag/Tag.js +3 -2
- package/Tag/constants.d.ts +0 -4
- package/Tag/constants.js +1 -6
- package/Tag/styled.js +20 -5
- package/Tag/types.d.ts +2 -4
- package/esm/Tag/Tag.d.ts +1 -1
- package/esm/Tag/Tag.js +3 -2
- package/esm/Tag/constants.d.ts +0 -4
- package/esm/Tag/constants.js +0 -5
- package/esm/Tag/styled.js +20 -5
- package/esm/Tag/types.d.ts +2 -4
- package/package.json +1 -1
package/Tag/Tag.d.ts
CHANGED
package/Tag/Tag.js
CHANGED
|
@@ -24,9 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
25
|
exports.Tag = void 0;
|
|
26
26
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
|
+
var icons_1 = require("@astral/icons");
|
|
27
28
|
var styled_1 = require("./styled");
|
|
28
29
|
var Tag = function (_a) {
|
|
29
|
-
var color = _a.color, variant = _a.variant, props = __rest(_a, ["color", "variant"]);
|
|
30
|
-
return (0, jsx_runtime_1.jsx)(styled_1.StyledTag, __assign({ customColor: color, customVariant: variant }, props), void 0);
|
|
30
|
+
var color = _a.color, variant = _a.variant, deleteIcon = _a.deleteIcon, props = __rest(_a, ["color", "variant", "deleteIcon"]);
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(styled_1.StyledTag, __assign({ customColor: color, customVariant: variant }, props, { deleteIcon: deleteIcon ? deleteIcon : (0, jsx_runtime_1.jsx)(icons_1.CrossSmOutlineSm, {}, void 0) }), void 0));
|
|
31
32
|
};
|
|
32
33
|
exports.Tag = Tag;
|
package/Tag/constants.d.ts
CHANGED
package/Tag/constants.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TagStates = exports.
|
|
3
|
+
exports.TagStates = exports.TagVariants = exports.TagColors = void 0;
|
|
4
4
|
var TagColors;
|
|
5
5
|
(function (TagColors) {
|
|
6
6
|
TagColors["DEFAULT"] = "default";
|
|
@@ -15,11 +15,6 @@ var TagVariants;
|
|
|
15
15
|
TagVariants["CONTAINED"] = "contained";
|
|
16
16
|
TagVariants["LIGHT"] = "light";
|
|
17
17
|
})(TagVariants = exports.TagVariants || (exports.TagVariants = {}));
|
|
18
|
-
var TagSizes;
|
|
19
|
-
(function (TagSizes) {
|
|
20
|
-
TagSizes["MEDIUM"] = "medium";
|
|
21
|
-
TagSizes["SMALL"] = "small";
|
|
22
|
-
})(TagSizes = exports.TagSizes || (exports.TagSizes = {}));
|
|
23
18
|
var TagStates;
|
|
24
19
|
(function (TagStates) {
|
|
25
20
|
TagStates["DEFAULT"] = "default";
|
package/Tag/styled.js
CHANGED
|
@@ -32,7 +32,10 @@ var getDeleteIconBorderRadius = function (_a) {
|
|
|
32
32
|
return "0 ".concat(theme.shape.small, " ").concat(theme.shape.small, " 0");
|
|
33
33
|
};
|
|
34
34
|
var getBgColor = function (_a) {
|
|
35
|
-
var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant;
|
|
35
|
+
var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant, onDelete = _a.onDelete;
|
|
36
|
+
if (onDelete) {
|
|
37
|
+
return theme.palette.grey[100];
|
|
38
|
+
}
|
|
36
39
|
if (customColor === constants_1.TagColors.GREY) {
|
|
37
40
|
return theme.palette.grey[100];
|
|
38
41
|
}
|
|
@@ -61,7 +64,10 @@ var getBgColor = function (_a) {
|
|
|
61
64
|
return theme.palette.background.element;
|
|
62
65
|
};
|
|
63
66
|
var getColor = function (_a) {
|
|
64
|
-
var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant;
|
|
67
|
+
var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant, onDelete = _a.onDelete;
|
|
68
|
+
if (onDelete) {
|
|
69
|
+
return theme.palette.grey[900];
|
|
70
|
+
}
|
|
65
71
|
var textColorVariants = {
|
|
66
72
|
contained: {
|
|
67
73
|
primary: theme.palette.primary.contrastText,
|
|
@@ -79,7 +85,7 @@ var getColor = function (_a) {
|
|
|
79
85
|
},
|
|
80
86
|
};
|
|
81
87
|
if (!customColor) {
|
|
82
|
-
return textColorVariants.contained.
|
|
88
|
+
return textColorVariants.contained.default;
|
|
83
89
|
}
|
|
84
90
|
if (customVariant && customColor) {
|
|
85
91
|
return textColorVariants[customVariant][customColor];
|
|
@@ -108,16 +114,25 @@ exports.StyledTag = (0, styles_1.styled)(material_1.Chip, {
|
|
|
108
114
|
shouldForwardProp: function (prop) {
|
|
109
115
|
return prop !== 'customColor' && prop !== 'customVariant' && prop !== 'rounded';
|
|
110
116
|
},
|
|
111
|
-
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n user-select: none;\n font-size: 14px;\n height: 20px;\n border-radius: ", ";\n background-color: ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n .MuiChip-label {\n padding: ", ";\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n &:active {\n color: ", ";\n }\n }\n .MuiChip-deleteIcon {\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: ", ";\n
|
|
117
|
+
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n user-select: none;\n font-size: 14px;\n height: 20px;\n border-radius: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n .MuiChip-label {\n padding: ", ";\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n &:active {\n color: ", ";\n }\n }\n .MuiChip-deleteIcon {\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: ", ";\n color: ", ";\n background: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n &:active {\n color: ", ";\n background: ", ";\n }\n }\n .MuiChip-avatar {\n margin: 2px;\n width: 16px;\n height: 16px;\n }\n .MuiChip-icon {\n width: 16px;\n height: 16px;\n }\n"], ["\n user-select: none;\n font-size: 14px;\n height: 20px;\n border-radius: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n .MuiChip-label {\n padding: ", ";\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n &:active {\n color: ", ";\n }\n }\n .MuiChip-deleteIcon {\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: ", ";\n color: ", ";\n background: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n &:active {\n color: ", ";\n background: ", ";\n }\n }\n .MuiChip-avatar {\n margin: 2px;\n width: 16px;\n height: 16px;\n }\n .MuiChip-icon {\n width: 16px;\n height: 16px;\n }\n"])), function (props) { return getShape(__assign({}, props)); }, function (props) {
|
|
112
118
|
return getBgColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.DEFAULT }));
|
|
113
119
|
}, function (props) {
|
|
114
120
|
return getBgColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER }));
|
|
115
121
|
}, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER })); }, function (props) {
|
|
116
122
|
return getBgColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE }));
|
|
117
|
-
}, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (props) { return getTagLabelPadding(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.DEFAULT })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (props) { return getDeleteIconBorderRadius(__assign({}, props)); }, function (
|
|
123
|
+
}, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (props) { return getTagLabelPadding(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.DEFAULT })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.HOVER })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: constants_1.TagStates.ACTIVE })); }, function (props) { return getDeleteIconBorderRadius(__assign({}, props)); }, function (_a) {
|
|
124
|
+
var theme = _a.theme;
|
|
125
|
+
return theme.palette.grey[800];
|
|
126
|
+
}, function (props) {
|
|
118
127
|
return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: constants_1.TagStates.DEFAULT }));
|
|
128
|
+
}, function (_a) {
|
|
129
|
+
var theme = _a.theme;
|
|
130
|
+
return theme.palette.grey[800];
|
|
119
131
|
}, function (props) {
|
|
120
132
|
return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: constants_1.TagStates.HOVER }));
|
|
133
|
+
}, function (_a) {
|
|
134
|
+
var theme = _a.theme;
|
|
135
|
+
return theme.palette.grey[800];
|
|
121
136
|
}, function (props) {
|
|
122
137
|
return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: constants_1.TagStates.ACTIVE }));
|
|
123
138
|
});
|
package/Tag/types.d.ts
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { ChipProps as MuiTagProps } from '@mui/material/Chip/Chip';
|
|
2
|
-
import { TagColors,
|
|
2
|
+
import { TagColors, TagStates, TagVariants } from './constants';
|
|
3
3
|
export declare type TagColor = `${TagColors}`;
|
|
4
4
|
export declare type TagVariant = `${TagVariants}`;
|
|
5
|
-
export declare type TagSize = `${TagSizes}`;
|
|
6
5
|
export declare type TagState = `${TagStates}`;
|
|
7
|
-
export declare type TagProps = Omit<MuiTagProps, 'color' | 'variant'> & {
|
|
6
|
+
export declare type TagProps = Omit<MuiTagProps, 'color' | 'variant' | 'size'> & {
|
|
8
7
|
color?: TagColor;
|
|
9
8
|
variant?: TagVariant;
|
|
10
|
-
size?: TagSize;
|
|
11
9
|
rounded?: boolean;
|
|
12
10
|
};
|
package/esm/Tag/Tag.d.ts
CHANGED
package/esm/Tag/Tag.js
CHANGED
|
@@ -21,8 +21,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import { CrossSmOutlineSm } from '@astral/icons';
|
|
24
25
|
import { StyledTag } from './styled';
|
|
25
26
|
export var Tag = function (_a) {
|
|
26
|
-
var color = _a.color, variant = _a.variant, props = __rest(_a, ["color", "variant"]);
|
|
27
|
-
return _jsx(StyledTag, __assign({ customColor: color, customVariant: variant }, props), void 0);
|
|
27
|
+
var color = _a.color, variant = _a.variant, deleteIcon = _a.deleteIcon, props = __rest(_a, ["color", "variant", "deleteIcon"]);
|
|
28
|
+
return (_jsx(StyledTag, __assign({ customColor: color, customVariant: variant }, props, { deleteIcon: deleteIcon ? deleteIcon : _jsx(CrossSmOutlineSm, {}, void 0) }), void 0));
|
|
28
29
|
};
|
package/esm/Tag/constants.d.ts
CHANGED
package/esm/Tag/constants.js
CHANGED
|
@@ -12,11 +12,6 @@ export var TagVariants;
|
|
|
12
12
|
TagVariants["CONTAINED"] = "contained";
|
|
13
13
|
TagVariants["LIGHT"] = "light";
|
|
14
14
|
})(TagVariants || (TagVariants = {}));
|
|
15
|
-
export var TagSizes;
|
|
16
|
-
(function (TagSizes) {
|
|
17
|
-
TagSizes["MEDIUM"] = "medium";
|
|
18
|
-
TagSizes["SMALL"] = "small";
|
|
19
|
-
})(TagSizes || (TagSizes = {}));
|
|
20
15
|
export var TagStates;
|
|
21
16
|
(function (TagStates) {
|
|
22
17
|
TagStates["DEFAULT"] = "default";
|
package/esm/Tag/styled.js
CHANGED
|
@@ -29,7 +29,10 @@ var getDeleteIconBorderRadius = function (_a) {
|
|
|
29
29
|
return "0 ".concat(theme.shape.small, " ").concat(theme.shape.small, " 0");
|
|
30
30
|
};
|
|
31
31
|
var getBgColor = function (_a) {
|
|
32
|
-
var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant;
|
|
32
|
+
var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant, onDelete = _a.onDelete;
|
|
33
|
+
if (onDelete) {
|
|
34
|
+
return theme.palette.grey[100];
|
|
35
|
+
}
|
|
33
36
|
if (customColor === TagColors.GREY) {
|
|
34
37
|
return theme.palette.grey[100];
|
|
35
38
|
}
|
|
@@ -58,7 +61,10 @@ var getBgColor = function (_a) {
|
|
|
58
61
|
return theme.palette.background.element;
|
|
59
62
|
};
|
|
60
63
|
var getColor = function (_a) {
|
|
61
|
-
var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant;
|
|
64
|
+
var theme = _a.theme, customColor = _a.customColor, customVariant = _a.customVariant, onDelete = _a.onDelete;
|
|
65
|
+
if (onDelete) {
|
|
66
|
+
return theme.palette.grey[900];
|
|
67
|
+
}
|
|
62
68
|
var textColorVariants = {
|
|
63
69
|
contained: {
|
|
64
70
|
primary: theme.palette.primary.contrastText,
|
|
@@ -76,7 +82,7 @@ var getColor = function (_a) {
|
|
|
76
82
|
},
|
|
77
83
|
};
|
|
78
84
|
if (!customColor) {
|
|
79
|
-
return textColorVariants.contained.
|
|
85
|
+
return textColorVariants.contained.default;
|
|
80
86
|
}
|
|
81
87
|
if (customVariant && customColor) {
|
|
82
88
|
return textColorVariants[customVariant][customColor];
|
|
@@ -105,16 +111,25 @@ export var StyledTag = styled(Chip, {
|
|
|
105
111
|
shouldForwardProp: function (prop) {
|
|
106
112
|
return prop !== 'customColor' && prop !== 'customVariant' && prop !== 'rounded';
|
|
107
113
|
},
|
|
108
|
-
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n user-select: none;\n font-size: 14px;\n height: 20px;\n border-radius: ", ";\n background-color: ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n .MuiChip-label {\n padding: ", ";\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n &:active {\n color: ", ";\n }\n }\n .MuiChip-deleteIcon {\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: ", ";\n
|
|
114
|
+
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n user-select: none;\n font-size: 14px;\n height: 20px;\n border-radius: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n .MuiChip-label {\n padding: ", ";\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n &:active {\n color: ", ";\n }\n }\n .MuiChip-deleteIcon {\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: ", ";\n color: ", ";\n background: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n &:active {\n color: ", ";\n background: ", ";\n }\n }\n .MuiChip-avatar {\n margin: 2px;\n width: 16px;\n height: 16px;\n }\n .MuiChip-icon {\n width: 16px;\n height: 16px;\n }\n"], ["\n user-select: none;\n font-size: 14px;\n height: 20px;\n border-radius: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n .MuiChip-label {\n padding: ", ";\n\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n &:active {\n color: ", ";\n }\n }\n .MuiChip-deleteIcon {\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: ", ";\n color: ", ";\n background: ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n &:active {\n color: ", ";\n background: ", ";\n }\n }\n .MuiChip-avatar {\n margin: 2px;\n width: 16px;\n height: 16px;\n }\n .MuiChip-icon {\n width: 16px;\n height: 16px;\n }\n"])), function (props) { return getShape(__assign({}, props)); }, function (props) {
|
|
109
115
|
return getBgColor(__assign(__assign({}, props), { tagState: TagStates.DEFAULT }));
|
|
110
116
|
}, function (props) {
|
|
111
117
|
return getBgColor(__assign(__assign({}, props), { tagState: TagStates.HOVER }));
|
|
112
118
|
}, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.HOVER })); }, function (props) {
|
|
113
119
|
return getBgColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE }));
|
|
114
|
-
}, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE })); }, function (props) { return getTagLabelPadding(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.DEFAULT })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.HOVER })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE })); }, function (props) { return getDeleteIconBorderRadius(__assign({}, props)); }, function (
|
|
120
|
+
}, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE })); }, function (props) { return getTagLabelPadding(__assign({}, props)); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.DEFAULT })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.HOVER })); }, function (props) { return getColor(__assign(__assign({}, props), { tagState: TagStates.ACTIVE })); }, function (props) { return getDeleteIconBorderRadius(__assign({}, props)); }, function (_a) {
|
|
121
|
+
var theme = _a.theme;
|
|
122
|
+
return theme.palette.grey[800];
|
|
123
|
+
}, function (props) {
|
|
115
124
|
return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: TagStates.DEFAULT }));
|
|
125
|
+
}, function (_a) {
|
|
126
|
+
var theme = _a.theme;
|
|
127
|
+
return theme.palette.grey[800];
|
|
116
128
|
}, function (props) {
|
|
117
129
|
return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: TagStates.HOVER }));
|
|
130
|
+
}, function (_a) {
|
|
131
|
+
var theme = _a.theme;
|
|
132
|
+
return theme.palette.grey[800];
|
|
118
133
|
}, function (props) {
|
|
119
134
|
return getDeleteIconBgColor(__assign(__assign({}, props), { iconState: TagStates.ACTIVE }));
|
|
120
135
|
});
|
package/esm/Tag/types.d.ts
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { ChipProps as MuiTagProps } from '@mui/material/Chip/Chip';
|
|
2
|
-
import { TagColors,
|
|
2
|
+
import { TagColors, TagStates, TagVariants } from './constants';
|
|
3
3
|
export declare type TagColor = `${TagColors}`;
|
|
4
4
|
export declare type TagVariant = `${TagVariants}`;
|
|
5
|
-
export declare type TagSize = `${TagSizes}`;
|
|
6
5
|
export declare type TagState = `${TagStates}`;
|
|
7
|
-
export declare type TagProps = Omit<MuiTagProps, 'color' | 'variant'> & {
|
|
6
|
+
export declare type TagProps = Omit<MuiTagProps, 'color' | 'variant' | 'size'> & {
|
|
8
7
|
color?: TagColor;
|
|
9
8
|
variant?: TagVariant;
|
|
10
|
-
size?: TagSize;
|
|
11
9
|
rounded?: boolean;
|
|
12
10
|
};
|