@astral/ui 0.7.1-test.8 → 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 CHANGED
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { TagProps } from './types';
3
- export declare const Tag: ({ color, variant, ...props }: TagProps) => JSX.Element;
3
+ export declare const Tag: ({ color, variant, deleteIcon, ...props }: TagProps) => JSX.Element;
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;
@@ -10,10 +10,6 @@ export declare enum TagVariants {
10
10
  CONTAINED = "contained",
11
11
  LIGHT = "light"
12
12
  }
13
- export declare enum TagSizes {
14
- MEDIUM = "medium",
15
- SMALL = "small"
16
- }
17
13
  export declare enum TagStates {
18
14
  DEFAULT = "default",
19
15
  HOVER = "hover",
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.TagSizes = exports.TagVariants = exports.TagColors = void 0;
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.primary;
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\n background: ", ";\n\n &:hover {\n background: ", ";\n }\n &:active {\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 &: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\n background: ", ";\n\n &:hover {\n background: ", ";\n }\n &:active {\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) {
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 (props) {
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, TagSizes, TagStates, TagVariants } from './constants';
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
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { TagProps } from './types';
3
- export declare const Tag: ({ color, variant, ...props }: TagProps) => JSX.Element;
3
+ export declare const Tag: ({ color, variant, deleteIcon, ...props }: TagProps) => JSX.Element;
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
  };
@@ -10,10 +10,6 @@ export declare enum TagVariants {
10
10
  CONTAINED = "contained",
11
11
  LIGHT = "light"
12
12
  }
13
- export declare enum TagSizes {
14
- MEDIUM = "medium",
15
- SMALL = "small"
16
- }
17
13
  export declare enum TagStates {
18
14
  DEFAULT = "default",
19
15
  HOVER = "hover",
@@ -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.primary;
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\n background: ", ";\n\n &:hover {\n background: ", ";\n }\n &:active {\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 &: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\n background: ", ";\n\n &:hover {\n background: ", ";\n }\n &:active {\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) {
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 (props) {
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
  });
@@ -1,12 +1,10 @@
1
1
  import { ChipProps as MuiTagProps } from '@mui/material/Chip/Chip';
2
- import { TagColors, TagSizes, TagStates, TagVariants } from './constants';
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "0.7.1-test.8",
3
+ "version": "0.7.2",
4
4
  "browser": "./src/index.ts",
5
5
  "jest": {
6
6
  "moduleNameMapper": {