@akinon/ui-button 1.3.1 → 1.4.0-rc.0
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/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +64 -10
- package/dist/cjs/types.d.ts +2 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +64 -10
- package/dist/esm/types.d.ts +2 -0
- package/package.json +5 -5
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,GAAI,8BAA8B,YAAY,sBA0NhE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -41,14 +41,21 @@ const Button = (_a) => {
|
|
|
41
41
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
42
42
|
theme: theme
|
|
43
43
|
}, () => {
|
|
44
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
44
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
|
|
45
45
|
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
|
|
46
46
|
const iconPrefixCls = `.${getPrefixCls()}-btn`;
|
|
47
|
+
const customTheme = theme;
|
|
48
|
+
const aiPrimaryColor = (_b = (_a = customTheme.colors) === null || _a === void 0 ? void 0 : _a.azure) === null || _b === void 0 ? void 0 : _b['500'];
|
|
49
|
+
const aiSecondaryColor = (_d = (_c = customTheme.colors) === null || _c === void 0 ? void 0 : _c.red) === null || _d === void 0 ? void 0 : _d['410'];
|
|
50
|
+
const aiGradient = `linear-gradient(to right, ${aiPrimaryColor},${aiSecondaryColor},${aiPrimaryColor})`;
|
|
51
|
+
const aiBackgroundSize = '175%';
|
|
52
|
+
const aiBlackBg = (_k = (_g = (_f = (_e = customTheme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f['750']) !== null && _g !== void 0 ? _g : (_j = (_h = customTheme.colors) === null || _h === void 0 ? void 0 : _h.ebonyClay) === null || _j === void 0 ? void 0 : _j['600']) !== null && _k !== void 0 ? _k : '#292b2c';
|
|
53
|
+
const aiBlackHoverBg = (_o = (_m = (_l = customTheme.colors) === null || _l === void 0 ? void 0 : _l.neutral) === null || _m === void 0 ? void 0 : _m['950']) !== null && _o !== void 0 ? _o : (_q = (_p = customTheme.colors) === null || _p === void 0 ? void 0 : _p.gray) === null || _q === void 0 ? void 0 : _q['900'];
|
|
47
54
|
// MARK: - Disabled
|
|
48
55
|
const disabledStyles = {
|
|
49
56
|
'&:disabled, &-disabled': {
|
|
50
|
-
backgroundColor: (
|
|
51
|
-
color: (
|
|
57
|
+
backgroundColor: (_r = buttonToken.colorBgContainerDisabled) !== null && _r !== void 0 ? _r : token.colorBgContainerDisabled,
|
|
58
|
+
color: (_s = buttonToken.colorTextDisabled) !== null && _s !== void 0 ? _s : token.colorTextDisabled,
|
|
52
59
|
borderColor: buttonToken.borderColorDisabled,
|
|
53
60
|
cursor: customTokens.others.cursorNotAllowed,
|
|
54
61
|
boxShadow: customTokens.layout.displayNone
|
|
@@ -74,7 +81,7 @@ const Button = (_a) => {
|
|
|
74
81
|
borderColor: customTokens.others.colorTransparent,
|
|
75
82
|
'&:hover': {
|
|
76
83
|
backgroundColor: buttonToken.defaultBgSmHover,
|
|
77
|
-
borderColor: (
|
|
84
|
+
borderColor: (_u = (_t = customTokens.others) === null || _t === void 0 ? void 0 : _t.colorTransparent) !== null && _u !== void 0 ? _u : 'transparent',
|
|
78
85
|
color: buttonToken.colorTextHover
|
|
79
86
|
},
|
|
80
87
|
[`&${prefixCls}-dangerous`]: {
|
|
@@ -90,15 +97,62 @@ const Button = (_a) => {
|
|
|
90
97
|
}
|
|
91
98
|
},
|
|
92
99
|
// END: Default SM
|
|
100
|
+
// MARK: - AI
|
|
101
|
+
[`${prefixCls}-ai`]: {
|
|
102
|
+
border: 'none',
|
|
103
|
+
backgroundImage: aiGradient,
|
|
104
|
+
backgroundSize: aiBackgroundSize,
|
|
105
|
+
backgroundPosition: '0',
|
|
106
|
+
textShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',
|
|
107
|
+
fontWeight: (_v = customTokens.typography.fontWeightBold) !== null && _v !== void 0 ? _v : 600,
|
|
108
|
+
color: (_w = buttonToken.colorTextLightSolid) !== null && _w !== void 0 ? _w : token.colorTextLightSolid,
|
|
109
|
+
transition: 'all 0.3s ease',
|
|
110
|
+
'&:hover:not(:disabled)': {
|
|
111
|
+
backgroundImage: aiGradient,
|
|
112
|
+
backgroundSize: aiBackgroundSize,
|
|
113
|
+
backgroundPosition: '-125%',
|
|
114
|
+
color: (_x = buttonToken.colorTextLightSolid) !== null && _x !== void 0 ? _x : token.colorTextLightSolid
|
|
115
|
+
},
|
|
116
|
+
'&:active:not(:disabled), &:focus:not(:disabled)': {
|
|
117
|
+
backgroundImage: aiGradient,
|
|
118
|
+
backgroundSize: aiBackgroundSize,
|
|
119
|
+
backgroundPosition: '0',
|
|
120
|
+
color: (_y = buttonToken.colorTextLightSolid) !== null && _y !== void 0 ? _y : token.colorTextLightSolid
|
|
121
|
+
},
|
|
122
|
+
'&:disabled': {
|
|
123
|
+
backgroundImage: aiGradient,
|
|
124
|
+
backgroundSize: aiBackgroundSize,
|
|
125
|
+
backgroundPosition: '0',
|
|
126
|
+
color: (_z = buttonToken.colorTextLightSolid) !== null && _z !== void 0 ? _z : token.colorTextLightSolid,
|
|
127
|
+
opacity: 0.6
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
// END: AI
|
|
131
|
+
// MARK: - AI Black
|
|
132
|
+
[`${prefixCls}-ai-black`]: {
|
|
133
|
+
backgroundColor: aiBlackBg,
|
|
134
|
+
color: (_0 = buttonToken.colorTextLightSolid) !== null && _0 !== void 0 ? _0 : token.colorTextLightSolid,
|
|
135
|
+
border: 'none',
|
|
136
|
+
fontWeight: (_1 = customTokens.typography.fontWeightBold) !== null && _1 !== void 0 ? _1 : 600,
|
|
137
|
+
'&:hover:not(:disabled), &:focus:not(:disabled)': {
|
|
138
|
+
backgroundColor: aiBlackHoverBg,
|
|
139
|
+
color: (_2 = buttonToken.colorTextLightSolid) !== null && _2 !== void 0 ? _2 : token.colorTextLightSolid,
|
|
140
|
+
opacity: 0.8
|
|
141
|
+
},
|
|
142
|
+
'&:disabled': {
|
|
143
|
+
opacity: 0.6
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
// END: AI Black
|
|
93
147
|
// MARK: - Success
|
|
94
|
-
[`${prefixCls}-success`]: Object.assign({ backgroundColor: (
|
|
95
|
-
backgroundColor: (
|
|
148
|
+
[`${prefixCls}-success`]: Object.assign({ backgroundColor: (_3 = buttonToken.colorSuccessBg) !== null && _3 !== void 0 ? _3 : token.colorSuccessBg, '&:hover:not(:disabled)': {
|
|
149
|
+
backgroundColor: (_4 = buttonToken.colorSuccessHover) !== null && _4 !== void 0 ? _4 : token.colorSuccessHover
|
|
96
150
|
} }, disabledStyles),
|
|
97
151
|
// END: Success
|
|
98
152
|
// MARK: - Warning
|
|
99
|
-
[`${prefixCls}-warning`]: Object.assign({ backgroundColor: (
|
|
100
|
-
backgroundColor: (
|
|
101
|
-
borderColor: (
|
|
153
|
+
[`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_5 = buttonToken.colorWarningBg) !== null && _5 !== void 0 ? _5 : token.colorWarningBg, color: (_6 = buttonToken.colorWarningText) !== null && _6 !== void 0 ? _6 : token.colorWarningText, '&:hover:not(:disabled)': {
|
|
154
|
+
backgroundColor: (_7 = buttonToken.colorWarningHover) !== null && _7 !== void 0 ? _7 : token.colorWarningHover,
|
|
155
|
+
borderColor: (_8 = buttonToken.colorWarningBorder) !== null && _8 !== void 0 ? _8 : token.colorWarningBorder
|
|
102
156
|
} }, disabledStyles),
|
|
103
157
|
// END: Warning
|
|
104
158
|
// MARK: Icon
|
|
@@ -122,7 +176,7 @@ const Button = (_a) => {
|
|
|
122
176
|
[`&${iconPrefixCls}-dangerous > *`]: {
|
|
123
177
|
color: 'red',
|
|
124
178
|
'&:hover:not(:disabled)': {
|
|
125
|
-
color: (
|
|
179
|
+
color: (_9 = buttonToken.colorErrorHover) !== null && _9 !== void 0 ? _9 : token.colorErrorHover
|
|
126
180
|
}
|
|
127
181
|
}
|
|
128
182
|
}
|
package/dist/cjs/types.d.ts
CHANGED
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,GAAI,8BAA8B,YAAY,sBA0NhE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -38,14 +38,21 @@ export const Button = (_a) => {
|
|
|
38
38
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
39
39
|
theme: theme
|
|
40
40
|
}, () => {
|
|
41
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
41
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
|
|
42
42
|
const prefixCls = `:where(.${hashId}).${getPrefixCls()}-btn`;
|
|
43
43
|
const iconPrefixCls = `.${getPrefixCls()}-btn`;
|
|
44
|
+
const customTheme = theme;
|
|
45
|
+
const aiPrimaryColor = (_b = (_a = customTheme.colors) === null || _a === void 0 ? void 0 : _a.azure) === null || _b === void 0 ? void 0 : _b['500'];
|
|
46
|
+
const aiSecondaryColor = (_d = (_c = customTheme.colors) === null || _c === void 0 ? void 0 : _c.red) === null || _d === void 0 ? void 0 : _d['410'];
|
|
47
|
+
const aiGradient = `linear-gradient(to right, ${aiPrimaryColor},${aiSecondaryColor},${aiPrimaryColor})`;
|
|
48
|
+
const aiBackgroundSize = '175%';
|
|
49
|
+
const aiBlackBg = (_k = (_g = (_f = (_e = customTheme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f['750']) !== null && _g !== void 0 ? _g : (_j = (_h = customTheme.colors) === null || _h === void 0 ? void 0 : _h.ebonyClay) === null || _j === void 0 ? void 0 : _j['600']) !== null && _k !== void 0 ? _k : '#292b2c';
|
|
50
|
+
const aiBlackHoverBg = (_o = (_m = (_l = customTheme.colors) === null || _l === void 0 ? void 0 : _l.neutral) === null || _m === void 0 ? void 0 : _m['950']) !== null && _o !== void 0 ? _o : (_q = (_p = customTheme.colors) === null || _p === void 0 ? void 0 : _p.gray) === null || _q === void 0 ? void 0 : _q['900'];
|
|
44
51
|
// MARK: - Disabled
|
|
45
52
|
const disabledStyles = {
|
|
46
53
|
'&:disabled, &-disabled': {
|
|
47
|
-
backgroundColor: (
|
|
48
|
-
color: (
|
|
54
|
+
backgroundColor: (_r = buttonToken.colorBgContainerDisabled) !== null && _r !== void 0 ? _r : token.colorBgContainerDisabled,
|
|
55
|
+
color: (_s = buttonToken.colorTextDisabled) !== null && _s !== void 0 ? _s : token.colorTextDisabled,
|
|
49
56
|
borderColor: buttonToken.borderColorDisabled,
|
|
50
57
|
cursor: customTokens.others.cursorNotAllowed,
|
|
51
58
|
boxShadow: customTokens.layout.displayNone
|
|
@@ -71,7 +78,7 @@ export const Button = (_a) => {
|
|
|
71
78
|
borderColor: customTokens.others.colorTransparent,
|
|
72
79
|
'&:hover': {
|
|
73
80
|
backgroundColor: buttonToken.defaultBgSmHover,
|
|
74
|
-
borderColor: (
|
|
81
|
+
borderColor: (_u = (_t = customTokens.others) === null || _t === void 0 ? void 0 : _t.colorTransparent) !== null && _u !== void 0 ? _u : 'transparent',
|
|
75
82
|
color: buttonToken.colorTextHover
|
|
76
83
|
},
|
|
77
84
|
[`&${prefixCls}-dangerous`]: {
|
|
@@ -87,15 +94,62 @@ export const Button = (_a) => {
|
|
|
87
94
|
}
|
|
88
95
|
},
|
|
89
96
|
// END: Default SM
|
|
97
|
+
// MARK: - AI
|
|
98
|
+
[`${prefixCls}-ai`]: {
|
|
99
|
+
border: 'none',
|
|
100
|
+
backgroundImage: aiGradient,
|
|
101
|
+
backgroundSize: aiBackgroundSize,
|
|
102
|
+
backgroundPosition: '0',
|
|
103
|
+
textShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',
|
|
104
|
+
fontWeight: (_v = customTokens.typography.fontWeightBold) !== null && _v !== void 0 ? _v : 600,
|
|
105
|
+
color: (_w = buttonToken.colorTextLightSolid) !== null && _w !== void 0 ? _w : token.colorTextLightSolid,
|
|
106
|
+
transition: 'all 0.3s ease',
|
|
107
|
+
'&:hover:not(:disabled)': {
|
|
108
|
+
backgroundImage: aiGradient,
|
|
109
|
+
backgroundSize: aiBackgroundSize,
|
|
110
|
+
backgroundPosition: '-125%',
|
|
111
|
+
color: (_x = buttonToken.colorTextLightSolid) !== null && _x !== void 0 ? _x : token.colorTextLightSolid
|
|
112
|
+
},
|
|
113
|
+
'&:active:not(:disabled), &:focus:not(:disabled)': {
|
|
114
|
+
backgroundImage: aiGradient,
|
|
115
|
+
backgroundSize: aiBackgroundSize,
|
|
116
|
+
backgroundPosition: '0',
|
|
117
|
+
color: (_y = buttonToken.colorTextLightSolid) !== null && _y !== void 0 ? _y : token.colorTextLightSolid
|
|
118
|
+
},
|
|
119
|
+
'&:disabled': {
|
|
120
|
+
backgroundImage: aiGradient,
|
|
121
|
+
backgroundSize: aiBackgroundSize,
|
|
122
|
+
backgroundPosition: '0',
|
|
123
|
+
color: (_z = buttonToken.colorTextLightSolid) !== null && _z !== void 0 ? _z : token.colorTextLightSolid,
|
|
124
|
+
opacity: 0.6
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
// END: AI
|
|
128
|
+
// MARK: - AI Black
|
|
129
|
+
[`${prefixCls}-ai-black`]: {
|
|
130
|
+
backgroundColor: aiBlackBg,
|
|
131
|
+
color: (_0 = buttonToken.colorTextLightSolid) !== null && _0 !== void 0 ? _0 : token.colorTextLightSolid,
|
|
132
|
+
border: 'none',
|
|
133
|
+
fontWeight: (_1 = customTokens.typography.fontWeightBold) !== null && _1 !== void 0 ? _1 : 600,
|
|
134
|
+
'&:hover:not(:disabled), &:focus:not(:disabled)': {
|
|
135
|
+
backgroundColor: aiBlackHoverBg,
|
|
136
|
+
color: (_2 = buttonToken.colorTextLightSolid) !== null && _2 !== void 0 ? _2 : token.colorTextLightSolid,
|
|
137
|
+
opacity: 0.8
|
|
138
|
+
},
|
|
139
|
+
'&:disabled': {
|
|
140
|
+
opacity: 0.6
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
// END: AI Black
|
|
90
144
|
// MARK: - Success
|
|
91
|
-
[`${prefixCls}-success`]: Object.assign({ backgroundColor: (
|
|
92
|
-
backgroundColor: (
|
|
145
|
+
[`${prefixCls}-success`]: Object.assign({ backgroundColor: (_3 = buttonToken.colorSuccessBg) !== null && _3 !== void 0 ? _3 : token.colorSuccessBg, '&:hover:not(:disabled)': {
|
|
146
|
+
backgroundColor: (_4 = buttonToken.colorSuccessHover) !== null && _4 !== void 0 ? _4 : token.colorSuccessHover
|
|
93
147
|
} }, disabledStyles),
|
|
94
148
|
// END: Success
|
|
95
149
|
// MARK: - Warning
|
|
96
|
-
[`${prefixCls}-warning`]: Object.assign({ backgroundColor: (
|
|
97
|
-
backgroundColor: (
|
|
98
|
-
borderColor: (
|
|
150
|
+
[`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_5 = buttonToken.colorWarningBg) !== null && _5 !== void 0 ? _5 : token.colorWarningBg, color: (_6 = buttonToken.colorWarningText) !== null && _6 !== void 0 ? _6 : token.colorWarningText, '&:hover:not(:disabled)': {
|
|
151
|
+
backgroundColor: (_7 = buttonToken.colorWarningHover) !== null && _7 !== void 0 ? _7 : token.colorWarningHover,
|
|
152
|
+
borderColor: (_8 = buttonToken.colorWarningBorder) !== null && _8 !== void 0 ? _8 : token.colorWarningBorder
|
|
99
153
|
} }, disabledStyles),
|
|
100
154
|
// END: Warning
|
|
101
155
|
// MARK: Icon
|
|
@@ -119,7 +173,7 @@ export const Button = (_a) => {
|
|
|
119
173
|
[`&${iconPrefixCls}-dangerous > *`]: {
|
|
120
174
|
color: 'red',
|
|
121
175
|
'&:hover:not(:disabled)': {
|
|
122
|
-
color: (
|
|
176
|
+
color: (_9 = buttonToken.colorErrorHover) !== null && _9 !== void 0 ? _9 : token.colorErrorHover
|
|
123
177
|
}
|
|
124
178
|
}
|
|
125
179
|
}
|
package/dist/esm/types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-button",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0-rc.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A basic button react component.",
|
|
6
6
|
"type": "module",
|
|
@@ -12,16 +12,16 @@
|
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@ant-design/cssinjs": "^1.24.0",
|
|
14
14
|
"antd": "^5.27.0",
|
|
15
|
-
"@akinon/
|
|
16
|
-
"@akinon/
|
|
17
|
-
"@akinon/ui-
|
|
15
|
+
"@akinon/ui-tooltip": "1.3.3-rc.0",
|
|
16
|
+
"@akinon/icons": "1.1.2-rc.0",
|
|
17
|
+
"@akinon/ui-theme": "1.1.3-rc.0"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"clean-package": "2.2.0",
|
|
21
21
|
"copyfiles": "^2.4.1",
|
|
22
22
|
"rimraf": "^5.0.5",
|
|
23
23
|
"typescript": "*",
|
|
24
|
-
"@akinon/typescript-config": "1.1.
|
|
24
|
+
"@akinon/typescript-config": "1.1.1"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "^18 || ^19",
|