@akinon/ui-button 1.2.0 → 1.3.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.
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 +25 -15
  4. package/dist/cjs/types.d.ts +1 -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 +26 -16
  8. package/dist/esm/types.d.ts +1 -0
  9. package/package.json +11 -10
package/dist/cjs/index.d.ts CHANGED
@@ -11,6 +11,6 @@ import type { IButtonProps } from './types';
11
11
  * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
12
12
  * allowing for flexible usage as both a button and a link.
13
13
  */
14
- export declare const Button: (buttonProps: IButtonProps) => React.JSX.Element;
14
+ export declare const Button: ({ iconSize, ...buttonProps }: IButtonProps) => React.JSX.Element;
15
15
  export type * from './types';
16
16
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0J/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,GAAI,8BAA8B,YAAY,sBA6JhE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
2
13
  Object.defineProperty(exports, "__esModule", { value: true });
3
14
  exports.Button = void 0;
4
15
  const icons_1 = require("@akinon/icons");
@@ -18,11 +29,12 @@ const react_1 = require("react");
18
29
  * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
19
30
  * allowing for flexible usage as both a button and a link.
20
31
  */
21
- const Button = (buttonProps) => {
32
+ const Button = (_a) => {
33
+ var { iconSize } = _a, buttonProps = __rest(_a, ["iconSize"]);
22
34
  const { getPrefixCls, theme } = react_1.default.useContext(antd_1.ConfigProvider.ConfigContext);
23
35
  const { token, hashId } = (0, ui_theme_1.useToken)();
24
36
  const buttonToken = token.Button;
25
- const customTokens = theme.CustomTokens || {};
37
+ const customTokens = (0, ui_theme_1.getSafeCustomTokens)(theme);
26
38
  const useStyle = (0, cssinjs_1.useStyleRegister)({
27
39
  token: token,
28
40
  path: ['Button'],
@@ -62,7 +74,7 @@ const Button = (buttonProps) => {
62
74
  borderColor: customTokens.others.colorTransparent,
63
75
  '&:hover': {
64
76
  backgroundColor: buttonToken.defaultBgSmHover,
65
- borderColor: customTokens.others.colorTransparent,
77
+ borderColor: (_d = (_c = customTokens.others) === null || _c === void 0 ? void 0 : _c.colorTransparent) !== null && _d !== void 0 ? _d : 'transparent',
66
78
  color: buttonToken.colorTextHover
67
79
  },
68
80
  [`&${prefixCls}-dangerous`]: {
@@ -79,25 +91,26 @@ const Button = (buttonProps) => {
79
91
  },
80
92
  // END: Default SM
81
93
  // MARK: - Success
82
- [`${prefixCls}-success`]: Object.assign({ backgroundColor: (_c = buttonToken.colorSuccessBg) !== null && _c !== void 0 ? _c : token.colorSuccessBg, '&:hover:not(:disabled)': {
83
- backgroundColor: (_d = buttonToken.colorSuccessHover) !== null && _d !== void 0 ? _d : token.colorSuccessHover
94
+ [`${prefixCls}-success`]: Object.assign({ backgroundColor: (_e = buttonToken.colorSuccessBg) !== null && _e !== void 0 ? _e : token.colorSuccessBg, '&:hover:not(:disabled)': {
95
+ backgroundColor: (_f = buttonToken.colorSuccessHover) !== null && _f !== void 0 ? _f : token.colorSuccessHover
84
96
  } }, disabledStyles),
85
97
  // END: Success
86
98
  // MARK: - Warning
87
- [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
88
- backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
89
- borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
99
+ [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_g = buttonToken.colorWarningBg) !== null && _g !== void 0 ? _g : token.colorWarningBg, color: (_h = buttonToken.colorWarningText) !== null && _h !== void 0 ? _h : token.colorWarningText, '&:hover:not(:disabled)': {
100
+ backgroundColor: (_j = buttonToken.colorWarningHover) !== null && _j !== void 0 ? _j : token.colorWarningHover,
101
+ borderColor: (_k = buttonToken.colorWarningBorder) !== null && _k !== void 0 ? _k : token.colorWarningBorder
90
102
  } }, disabledStyles),
91
103
  // END: Warning
92
104
  // MARK: Icon
93
105
  [`${prefixCls}-icon`]: {
106
+ lineHeight: 1,
94
107
  ['> *']: {
95
108
  backgroundColor: customTokens.others.colorTransparent,
96
- // Since this button is transparent, we are using success bg color for the icon.
97
- color: (_j = buttonToken.colorSuccessBg) !== null && _j !== void 0 ? _j : token.colorSuccessBg,
109
+ // Since this button is transparent, we are using current color for the icon.
110
+ color: 'currentcolor',
98
111
  verticalAlign: customTokens.others.verticalAlignMiddle,
99
112
  '&:hover:not(:disabled)': {
100
- color: (_k = buttonToken.colorSuccessBg) !== null && _k !== void 0 ? _k : token.colorSuccessBg
113
+ color: 'currentcolor'
101
114
  },
102
115
  '&:active': {
103
116
  boxShadow: customTokens.layout.displayNone
@@ -116,10 +129,7 @@ const Button = (buttonProps) => {
116
129
  // END: Icon
117
130
  };
118
131
  });
119
- const renderButton = () => {
120
- var _a;
121
- return (react_1.default.createElement(antd_1.Button, Object.assign({}, buttonProps, { icon: buttonProps.icon ? (react_1.default.createElement(icons_1.Icon, { icon: buttonProps.icon, size: (_a = buttonProps.iconSize) !== null && _a !== void 0 ? _a : 12, style: { lineHeight: 0 } })) : undefined }), buttonProps.children));
122
- };
132
+ const renderButton = () => (react_1.default.createElement(antd_1.Button, Object.assign({}, buttonProps, { icon: buttonProps.icon ? (react_1.default.createElement(icons_1.Icon, { icon: buttonProps.icon, size: iconSize !== null && iconSize !== void 0 ? iconSize : 12, style: { lineHeight: 0 } })) : undefined }), buttonProps.children));
123
133
  // If tooltip prop is provided, wrap the button with Tooltip
124
134
  if (buttonProps.tooltip) {
125
135
  const tooltipProps = typeof buttonProps.tooltip === 'string'
package/dist/cjs/types.d.ts CHANGED
@@ -70,6 +70,7 @@ export interface IButtonProps extends TMergedHTMLAttributes {
70
70
  * @default 12
71
71
  */
72
72
  iconSize?: number;
73
+
73
74
  /**
74
75
  * Whether the button is in disabled state.
75
76
  * @default false
package/dist/esm/index.d.ts CHANGED
@@ -11,6 +11,6 @@ import type { IButtonProps } from './types';
11
11
  * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
12
12
  * allowing for flexible usage as both a button and a link.
13
13
  */
14
- export declare const Button: (buttonProps: IButtonProps) => React.JSX.Element;
14
+ export declare const Button: ({ iconSize, ...buttonProps }: IButtonProps) => React.JSX.Element;
15
15
  export type * from './types';
16
16
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,gBAAiB,YAAY,sBA0J/C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,GAAI,8BAA8B,YAAY,sBA6JhE,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/esm/index.js CHANGED
@@ -1,5 +1,16 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
1
12
  import { Icon } from '@akinon/icons';
2
- import { useToken } from '@akinon/ui-theme';
13
+ import { getSafeCustomTokens, useToken } from '@akinon/ui-theme';
3
14
  import { Tooltip } from '@akinon/ui-tooltip';
4
15
  import { useStyleRegister } from '@ant-design/cssinjs';
5
16
  import { Button as AntButton, ConfigProvider } from 'antd';
@@ -15,11 +26,12 @@ import React from 'react';
15
26
  * &nbsp;and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" target="_blank" rel="noopener noreferrer">HTMLAnchorElement</a>,
16
27
  * allowing for flexible usage as both a button and a link.
17
28
  */
18
- export const Button = (buttonProps) => {
29
+ export const Button = (_a) => {
30
+ var { iconSize } = _a, buttonProps = __rest(_a, ["iconSize"]);
19
31
  const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
20
32
  const { token, hashId } = useToken();
21
33
  const buttonToken = token.Button;
22
- const customTokens = theme.CustomTokens || {};
34
+ const customTokens = getSafeCustomTokens(theme);
23
35
  const useStyle = useStyleRegister({
24
36
  token: token,
25
37
  path: ['Button'],
@@ -59,7 +71,7 @@ export const Button = (buttonProps) => {
59
71
  borderColor: customTokens.others.colorTransparent,
60
72
  '&:hover': {
61
73
  backgroundColor: buttonToken.defaultBgSmHover,
62
- borderColor: customTokens.others.colorTransparent,
74
+ borderColor: (_d = (_c = customTokens.others) === null || _c === void 0 ? void 0 : _c.colorTransparent) !== null && _d !== void 0 ? _d : 'transparent',
63
75
  color: buttonToken.colorTextHover
64
76
  },
65
77
  [`&${prefixCls}-dangerous`]: {
@@ -76,25 +88,26 @@ export const Button = (buttonProps) => {
76
88
  },
77
89
  // END: Default SM
78
90
  // MARK: - Success
79
- [`${prefixCls}-success`]: Object.assign({ backgroundColor: (_c = buttonToken.colorSuccessBg) !== null && _c !== void 0 ? _c : token.colorSuccessBg, '&:hover:not(:disabled)': {
80
- backgroundColor: (_d = buttonToken.colorSuccessHover) !== null && _d !== void 0 ? _d : token.colorSuccessHover
91
+ [`${prefixCls}-success`]: Object.assign({ backgroundColor: (_e = buttonToken.colorSuccessBg) !== null && _e !== void 0 ? _e : token.colorSuccessBg, '&:hover:not(:disabled)': {
92
+ backgroundColor: (_f = buttonToken.colorSuccessHover) !== null && _f !== void 0 ? _f : token.colorSuccessHover
81
93
  } }, disabledStyles),
82
94
  // END: Success
83
95
  // MARK: - Warning
84
- [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_e = buttonToken.colorWarningBg) !== null && _e !== void 0 ? _e : token.colorWarningBg, color: (_f = buttonToken.colorWarningText) !== null && _f !== void 0 ? _f : token.colorWarningText, '&:hover:not(:disabled)': {
85
- backgroundColor: (_g = buttonToken.colorWarningHover) !== null && _g !== void 0 ? _g : token.colorWarningHover,
86
- borderColor: (_h = buttonToken.colorWarningBorder) !== null && _h !== void 0 ? _h : token.colorWarningBorder
96
+ [`${prefixCls}-warning`]: Object.assign({ backgroundColor: (_g = buttonToken.colorWarningBg) !== null && _g !== void 0 ? _g : token.colorWarningBg, color: (_h = buttonToken.colorWarningText) !== null && _h !== void 0 ? _h : token.colorWarningText, '&:hover:not(:disabled)': {
97
+ backgroundColor: (_j = buttonToken.colorWarningHover) !== null && _j !== void 0 ? _j : token.colorWarningHover,
98
+ borderColor: (_k = buttonToken.colorWarningBorder) !== null && _k !== void 0 ? _k : token.colorWarningBorder
87
99
  } }, disabledStyles),
88
100
  // END: Warning
89
101
  // MARK: Icon
90
102
  [`${prefixCls}-icon`]: {
103
+ lineHeight: 1,
91
104
  ['> *']: {
92
105
  backgroundColor: customTokens.others.colorTransparent,
93
- // Since this button is transparent, we are using success bg color for the icon.
94
- color: (_j = buttonToken.colorSuccessBg) !== null && _j !== void 0 ? _j : token.colorSuccessBg,
106
+ // Since this button is transparent, we are using current color for the icon.
107
+ color: 'currentcolor',
95
108
  verticalAlign: customTokens.others.verticalAlignMiddle,
96
109
  '&:hover:not(:disabled)': {
97
- color: (_k = buttonToken.colorSuccessBg) !== null && _k !== void 0 ? _k : token.colorSuccessBg
110
+ color: 'currentcolor'
98
111
  },
99
112
  '&:active': {
100
113
  boxShadow: customTokens.layout.displayNone
@@ -113,10 +126,7 @@ export const Button = (buttonProps) => {
113
126
  // END: Icon
114
127
  };
115
128
  });
116
- const renderButton = () => {
117
- var _a;
118
- return (React.createElement(AntButton, Object.assign({}, buttonProps, { icon: buttonProps.icon ? (React.createElement(Icon, { icon: buttonProps.icon, size: (_a = buttonProps.iconSize) !== null && _a !== void 0 ? _a : 12, style: { lineHeight: 0 } })) : undefined }), buttonProps.children));
119
- };
129
+ const renderButton = () => (React.createElement(AntButton, Object.assign({}, buttonProps, { icon: buttonProps.icon ? (React.createElement(Icon, { icon: buttonProps.icon, size: iconSize !== null && iconSize !== void 0 ? iconSize : 12, style: { lineHeight: 0 } })) : undefined }), buttonProps.children));
120
130
  // If tooltip prop is provided, wrap the button with Tooltip
121
131
  if (buttonProps.tooltip) {
122
132
  const tooltipProps = typeof buttonProps.tooltip === 'string'
package/dist/esm/types.d.ts CHANGED
@@ -70,6 +70,7 @@ export interface IButtonProps extends TMergedHTMLAttributes {
70
70
  * @default 12
71
71
  */
72
72
  iconSize?: number;
73
+
73
74
  /**
74
75
  * Whether the button is in disabled state.
75
76
  * @default false
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-button",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "private": false,
5
5
  "description": "A basic button react component.",
6
6
  "type": "module",
@@ -10,21 +10,22 @@
10
10
  "dist"
11
11
  ],
12
12
  "dependencies": {
13
- "antd": "5.22.6",
14
- "@akinon/ui-theme": "1.0.1",
15
- "@akinon/icons": "1.0.1",
16
- "@akinon/ui-tooltip": "1.2.0"
13
+ "@ant-design/cssinjs": "^1.24.0",
14
+ "antd": "^5.27.0",
15
+ "@akinon/icons": "1.1.0",
16
+ "@akinon/ui-theme": "1.1.0",
17
+ "@akinon/ui-tooltip": "1.3.0"
17
18
  },
18
19
  "devDependencies": {
19
20
  "clean-package": "2.2.0",
20
21
  "copyfiles": "^2.4.1",
21
22
  "rimraf": "^5.0.5",
22
23
  "typescript": "*",
23
- "@akinon/typescript-config": "1.0.1"
24
+ "@akinon/typescript-config": "1.1.0"
24
25
  },
25
26
  "peerDependencies": {
26
- "react": ">=18",
27
- "react-dom": ">=18"
27
+ "react": "^18 || ^19",
28
+ "react-dom": "^18 || ^19"
28
29
  },
29
30
  "clean-package": "../../../clean-package.config.json",
30
31
  "types": "dist/esm/index.d.ts",
@@ -38,10 +39,10 @@
38
39
  },
39
40
  "scripts": {
40
41
  "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
41
- "build:esm": "tsc --outDir dist/esm",
42
42
  "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
43
- "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
43
+ "build:esm": "tsc --outDir dist/esm",
44
44
  "clean": "rimraf dist/",
45
+ "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
45
46
  "typecheck": "tsc --noEmit"
46
47
  }
47
48
  }