@akinon/ui-tag 1.0.0 → 1.0.1

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 (9) hide show
  1. package/dist/cjs/index.d.ts +1 -1
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +49 -40
  4. package/dist/cjs/types.d.ts +6 -0
  5. package/dist/esm/index.d.ts +1 -1
  6. package/dist/esm/index.d.ts.map +1 -1
  7. package/dist/esm/index.js +47 -25
  8. package/dist/esm/types.d.ts +6 -0
  9. package/package.json +4 -3
package/dist/cjs/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { type TagProps } from './types.d';
3
- export * from './types.d';
3
+ export { type AntTagProps, type TagProps, TagStatus } from './types.d';
4
4
  /**
5
5
  * Tag component for Akinon UI.
6
6
  *
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAErD,cAAc,WAAW,CAAC;AAE1B;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAwGV,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAoBvE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAyGV,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -1,18 +1,4 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
2
  var __rest = (this && this.__rest) || function (s, e) {
17
3
  var t = {};
18
4
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,15 +11,32 @@ var __rest = (this && this.__rest) || function (s, e) {
25
11
  return t;
26
12
  };
27
13
  Object.defineProperty(exports, "__esModule", { value: true });
28
- exports.Tag = void 0;
14
+ exports.Tag = exports.TagStatus = void 0;
29
15
  const ui_theme_1 = require("@akinon/ui-theme");
30
16
  const cssinjs_1 = require("@ant-design/cssinjs");
31
17
  const antd_1 = require("antd");
18
+ const antd_style_1 = require("antd-style");
32
19
  const clsx_1 = require("clsx");
33
20
  const color_1 = require("color");
34
21
  const React = require("react");
35
22
  const types_d_1 = require("./types.d");
36
- __exportStar(require("./types.d"), exports);
23
+ var types_d_2 = require("./types.d");
24
+ Object.defineProperty(exports, "TagStatus", { enumerable: true, get: function () { return types_d_2.TagStatus; } });
25
+ // It is necessary for dynamic styles to be created in this way.
26
+ const useDynamicStyles = (0, antd_style_1.createStyles)(({ css }, { prefixClsWithoutHash, color, status }) => ({
27
+ dynamicStyles: css `
28
+ ${color &&
29
+ `&${prefixClsWithoutHash}-${status} {
30
+ color: ${color};
31
+ background-color: ${(0, color_1.default)(color)
32
+ .lighten(0.4)
33
+ .whiten(0.4)
34
+ .hsl()
35
+ .toString()};
36
+ border-color: ${(0, color_1.default)(color).lighten(0.2).whiten(0.2).hsl().toString()};
37
+ }`}
38
+ `
39
+ }));
37
40
  /**
38
41
  * Tag component for Akinon UI.
39
42
  *
@@ -50,77 +53,83 @@ const Tag = (_a) => {
50
53
  const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
51
54
  const { token, hashId } = (0, ui_theme_1.useToken)();
52
55
  const tagToken = token.Tag;
56
+ const customTokens = theme.CustomTokens || {};
57
+ const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
53
58
  const useStyle = (0, cssinjs_1.useStyleRegister)({
54
59
  token: token,
55
60
  path: ['Tag'],
56
61
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
57
62
  theme: theme
58
63
  }, () => {
59
- const prefixCls = `:where(.${hashId}).${getPrefixCls()}-tag`;
60
- const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
61
- return Object.assign({ [prefixCls]: {
64
+ const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
65
+ return {
66
+ [prefixCls]: {
62
67
  borderRadius: tagToken.borderRadius,
63
68
  fontSize: tagToken.fontSize,
64
- fontWeight: tagToken.fontWeight,
69
+ fontWeight: customTokens.typography.fontWeightMedium,
65
70
  paddingLeft: tagToken.paddingLeft,
66
71
  paddingRight: tagToken.paddingRight
67
- }, [prefixClsWithoutHash]: {
72
+ },
73
+ [prefixClsWithoutHash]: {
68
74
  svg: {
69
75
  fontSize: tagToken.fontSizeClose
70
76
  }
71
- }, [`${prefixClsWithoutHash}-borderless`]: {
72
- border: 'none'
73
- }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Success}`]: {
77
+ },
78
+ [`${prefixClsWithoutHash}-borderless`]: {
79
+ border: customTokens.border.borderNone
80
+ },
81
+ [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Success}`]: {
74
82
  color: tagToken.defaultColorSuccess,
75
83
  borderColor: tagToken.defaultBorderColorSuccess,
76
84
  backgroundColor: tagToken.defaultBgSuccess,
77
85
  svg: {
78
86
  color: tagToken.defaultColorSuccess
79
87
  }
80
- }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info1}`]: {
88
+ },
89
+ [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info1}`]: {
81
90
  color: tagToken.defaultColorWaiting1,
82
91
  borderColor: tagToken.defaultBorderColorWaiting1,
83
92
  backgroundColor: tagToken.defaultBgWaiting1,
84
93
  svg: {
85
94
  color: tagToken.defaultColorWaiting1
86
95
  }
87
- }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info2}`]: {
96
+ },
97
+ [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info2}`]: {
88
98
  color: tagToken.defaultColorWaiting2,
89
99
  borderColor: tagToken.defaultBorderColorWaiting2,
90
100
  backgroundColor: tagToken.defaultBgWaiting2,
91
101
  svg: {
92
102
  color: tagToken.defaultColorWaiting2
93
103
  }
94
- }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info3}`]: {
104
+ },
105
+ [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Info3}`]: {
95
106
  color: tagToken.defaultColorWaiting3,
96
107
  borderColor: tagToken.defaultBorderColorWaiting3,
97
108
  backgroundColor: tagToken.defaultBgWaiting3,
98
109
  svg: {
99
110
  color: tagToken.defaultColorWaiting3
100
111
  }
101
- }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Error}`]: {
112
+ },
113
+ [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Error}`]: {
102
114
  color: tagToken.defaultColorFailed,
103
115
  borderColor: tagToken.defaultBorderColorFailed,
104
116
  backgroundColor: tagToken.defaultBgFailed,
105
117
  svg: {
106
118
  color: tagToken.defaultColorFailed
107
119
  }
108
- }, [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Empty}`]: {
120
+ },
121
+ [`${prefixClsWithoutHash}-${types_d_1.TagStatus.Empty}`]: {
109
122
  color: tagToken.defaultColorEmpty,
110
123
  borderColor: tagToken.defaultBorderColorEmpty,
111
124
  backgroundColor: tagToken.defaultBgEmpty
112
- } }, (color && {
113
- [`${prefixClsWithoutHash}-${status}`]: {
114
- color,
115
- backgroundColor: (0, color_1.default)(color)
116
- .lighten(0.4)
117
- .whiten(0.4)
118
- .hsl()
119
- .toString(),
120
- borderColor: (0, color_1.default)(color).lighten(0.2).whiten(0.2).hsl().toString()
121
125
  }
122
- }));
126
+ };
127
+ });
128
+ const { styles } = useDynamicStyles({
129
+ prefixClsWithoutHash,
130
+ status,
131
+ color
123
132
  });
124
- return useStyle(React.createElement(antd_1.Tag, Object.assign({ className: (0, clsx_1.default)(status && `${getPrefixCls()}-tag-${status}`, className) }, restTagProps), children));
133
+ return useStyle(React.createElement(antd_1.Tag, Object.assign({ className: (0, clsx_1.default)(status && `${getPrefixCls()}-tag-${status}`, styles.dynamicStyles, className) }, restTagProps), children));
125
134
  };
126
135
  exports.Tag = Tag;
package/dist/cjs/types.d.ts CHANGED
@@ -107,3 +107,9 @@ export interface AntTagProps extends React.HTMLAttributes<HTMLSpanElement> {
107
107
  */
108
108
  bordered?: boolean;
109
109
  }
110
+
111
+ interface DynamicStylesProps {
112
+ prefixClsWithoutHash: string;
113
+ color?: string;
114
+ status?: TagStatus;
115
+ }
package/dist/esm/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { type TagProps } from './types.d';
3
- export * from './types.d';
3
+ export { type AntTagProps, type TagProps, TagStatus } from './types.d';
4
4
  /**
5
5
  * Tag component for Akinon UI.
6
6
  *
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAErD,cAAc,WAAW,CAAC;AAE1B;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAwGV,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,KAAK,QAAQ,EAAa,MAAM,WAAW,CAAC;AAEzE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAoBvE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,GAAG,4DAMb,QAAQ,sBAyGV,CAAC"}
package/dist/esm/index.js CHANGED
@@ -12,11 +12,27 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { useToken } from '@akinon/ui-theme';
13
13
  import { useStyleRegister } from '@ant-design/cssinjs';
14
14
  import { ConfigProvider, Tag as AntTag } from 'antd';
15
+ import { createStyles } from 'antd-style';
15
16
  import clsx from 'clsx';
16
17
  import Color from 'color';
17
18
  import * as React from 'react';
18
19
  import { TagStatus } from './types.d';
19
- export * from './types.d';
20
+ export { TagStatus } from './types.d';
21
+ // It is necessary for dynamic styles to be created in this way.
22
+ const useDynamicStyles = createStyles(({ css }, { prefixClsWithoutHash, color, status }) => ({
23
+ dynamicStyles: css `
24
+ ${color &&
25
+ `&${prefixClsWithoutHash}-${status} {
26
+ color: ${color};
27
+ background-color: ${Color(color)
28
+ .lighten(0.4)
29
+ .whiten(0.4)
30
+ .hsl()
31
+ .toString()};
32
+ border-color: ${Color(color).lighten(0.2).whiten(0.2).hsl().toString()};
33
+ }`}
34
+ `
35
+ }));
20
36
  /**
21
37
  * Tag component for Akinon UI.
22
38
  *
@@ -33,76 +49,82 @@ export const Tag = (_a) => {
33
49
  const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
34
50
  const { token, hashId } = useToken();
35
51
  const tagToken = token.Tag;
52
+ const customTokens = theme.CustomTokens || {};
53
+ const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
36
54
  const useStyle = useStyleRegister({
37
55
  token: token,
38
56
  path: ['Tag'],
39
57
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
40
58
  theme: theme
41
59
  }, () => {
42
- const prefixCls = `:where(.${hashId}).${getPrefixCls()}-tag`;
43
- const prefixClsWithoutHash = `.${getPrefixCls()}-tag`;
44
- return Object.assign({ [prefixCls]: {
60
+ const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
61
+ return {
62
+ [prefixCls]: {
45
63
  borderRadius: tagToken.borderRadius,
46
64
  fontSize: tagToken.fontSize,
47
- fontWeight: tagToken.fontWeight,
65
+ fontWeight: customTokens.typography.fontWeightMedium,
48
66
  paddingLeft: tagToken.paddingLeft,
49
67
  paddingRight: tagToken.paddingRight
50
- }, [prefixClsWithoutHash]: {
68
+ },
69
+ [prefixClsWithoutHash]: {
51
70
  svg: {
52
71
  fontSize: tagToken.fontSizeClose
53
72
  }
54
- }, [`${prefixClsWithoutHash}-borderless`]: {
55
- border: 'none'
56
- }, [`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
73
+ },
74
+ [`${prefixClsWithoutHash}-borderless`]: {
75
+ border: customTokens.border.borderNone
76
+ },
77
+ [`${prefixClsWithoutHash}-${TagStatus.Success}`]: {
57
78
  color: tagToken.defaultColorSuccess,
58
79
  borderColor: tagToken.defaultBorderColorSuccess,
59
80
  backgroundColor: tagToken.defaultBgSuccess,
60
81
  svg: {
61
82
  color: tagToken.defaultColorSuccess
62
83
  }
63
- }, [`${prefixClsWithoutHash}-${TagStatus.Info1}`]: {
84
+ },
85
+ [`${prefixClsWithoutHash}-${TagStatus.Info1}`]: {
64
86
  color: tagToken.defaultColorWaiting1,
65
87
  borderColor: tagToken.defaultBorderColorWaiting1,
66
88
  backgroundColor: tagToken.defaultBgWaiting1,
67
89
  svg: {
68
90
  color: tagToken.defaultColorWaiting1
69
91
  }
70
- }, [`${prefixClsWithoutHash}-${TagStatus.Info2}`]: {
92
+ },
93
+ [`${prefixClsWithoutHash}-${TagStatus.Info2}`]: {
71
94
  color: tagToken.defaultColorWaiting2,
72
95
  borderColor: tagToken.defaultBorderColorWaiting2,
73
96
  backgroundColor: tagToken.defaultBgWaiting2,
74
97
  svg: {
75
98
  color: tagToken.defaultColorWaiting2
76
99
  }
77
- }, [`${prefixClsWithoutHash}-${TagStatus.Info3}`]: {
100
+ },
101
+ [`${prefixClsWithoutHash}-${TagStatus.Info3}`]: {
78
102
  color: tagToken.defaultColorWaiting3,
79
103
  borderColor: tagToken.defaultBorderColorWaiting3,
80
104
  backgroundColor: tagToken.defaultBgWaiting3,
81
105
  svg: {
82
106
  color: tagToken.defaultColorWaiting3
83
107
  }
84
- }, [`${prefixClsWithoutHash}-${TagStatus.Error}`]: {
108
+ },
109
+ [`${prefixClsWithoutHash}-${TagStatus.Error}`]: {
85
110
  color: tagToken.defaultColorFailed,
86
111
  borderColor: tagToken.defaultBorderColorFailed,
87
112
  backgroundColor: tagToken.defaultBgFailed,
88
113
  svg: {
89
114
  color: tagToken.defaultColorFailed
90
115
  }
91
- }, [`${prefixClsWithoutHash}-${TagStatus.Empty}`]: {
116
+ },
117
+ [`${prefixClsWithoutHash}-${TagStatus.Empty}`]: {
92
118
  color: tagToken.defaultColorEmpty,
93
119
  borderColor: tagToken.defaultBorderColorEmpty,
94
120
  backgroundColor: tagToken.defaultBgEmpty
95
- } }, (color && {
96
- [`${prefixClsWithoutHash}-${status}`]: {
97
- color,
98
- backgroundColor: Color(color)
99
- .lighten(0.4)
100
- .whiten(0.4)
101
- .hsl()
102
- .toString(),
103
- borderColor: Color(color).lighten(0.2).whiten(0.2).hsl().toString()
104
121
  }
105
- }));
122
+ };
106
123
  });
107
- return useStyle(React.createElement(AntTag, Object.assign({ className: clsx(status && `${getPrefixCls()}-tag-${status}`, className) }, restTagProps), children));
124
+ const { styles } = useDynamicStyles({
125
+ prefixClsWithoutHash,
126
+ status,
127
+ color
128
+ });
129
+ return useStyle(React.createElement(AntTag, Object.assign({ className: clsx(status && `${getPrefixCls()}-tag-${status}`, styles.dynamicStyles, className) }, restTagProps), children));
108
130
  };
package/dist/esm/types.d.ts CHANGED
@@ -107,3 +107,9 @@ export interface AntTagProps extends React.HTMLAttributes<HTMLSpanElement> {
107
107
  */
108
108
  bordered?: boolean;
109
109
  }
110
+
111
+ interface DynamicStylesProps {
112
+ prefixClsWithoutHash: string;
113
+ color?: string;
114
+ status?: TagStatus;
115
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-tag",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -10,6 +10,7 @@
10
10
  ],
11
11
  "dependencies": {
12
12
  "antd": "5.22.6",
13
+ "antd-style": "^3.7.1",
13
14
  "clsx": "^2.0.0",
14
15
  "color": "4.2.3"
15
16
  },
@@ -19,8 +20,8 @@
19
20
  "copyfiles": "^2.4.1",
20
21
  "rimraf": "^5.0.5",
21
22
  "typescript": "*",
22
- "@akinon/typescript-config": "1.0.0",
23
- "@akinon/ui-theme": "1.0.0"
23
+ "@akinon/typescript-config": "1.0.1",
24
+ "@akinon/ui-theme": "1.0.1"
24
25
  },
25
26
  "peerDependencies": {
26
27
  "react": ">=18",