@akinon/ui-ai-spinner 1.0.0-next.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 (13) hide show
  1. package/dist/cjs/index.d.ts +5 -0
  2. package/dist/cjs/index.d.ts.map +1 -0
  3. package/dist/cjs/index.js +124 -0
  4. package/dist/cjs/types.d.ts +24 -0
  5. package/dist/cjs/types.d.ts.map +1 -0
  6. package/dist/cjs/types.js +2 -0
  7. package/dist/esm/index.d.ts +5 -0
  8. package/dist/esm/index.d.ts.map +1 -0
  9. package/dist/esm/index.js +120 -0
  10. package/dist/esm/types.d.ts +24 -0
  11. package/dist/esm/types.d.ts.map +1 -0
  12. package/dist/esm/types.js +1 -0
  13. package/package.json +47 -0
package/dist/cjs/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ import type { AiSpinnerProps } from './types';
3
+ export declare const AiSpinner: ({ text, icon, showContainer, iconColor, textColor }: AiSpinnerProps) => React.JSX.Element;
4
+ export type * from './types';
5
+ //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,SAAS,GAAI,qDAMvB,cAAc,sBAgJhB,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/cjs/index.js ADDED
@@ -0,0 +1,124 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.AiSpinner = void 0;
4
+ const icons_1 = require("@akinon/icons");
5
+ const ui_theme_1 = require("@akinon/ui-theme");
6
+ const ui_typography_1 = require("@akinon/ui-typography");
7
+ const cssinjs_1 = require("@ant-design/cssinjs");
8
+ const antd_1 = require("antd");
9
+ const React = require("react");
10
+ const AiSpinner = ({ text, icon = 'ai-star', showContainer = true, iconColor = ui_theme_1.theme.colors.azure['500'], textColor }) => {
11
+ const gradientId = React.useId();
12
+ const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
13
+ const { token, hashId } = (0, ui_theme_1.useToken)();
14
+ const customTokens = (0, ui_theme_1.getSafeCustomTokens)(theme);
15
+ const baseCls = getPrefixCls('ai-spinner');
16
+ const gradientStart = customTokens.ai.gradientStart;
17
+ const gradientEnd = customTokens.ai.gradientEnd;
18
+ const resolvedTextColor = textColor !== null && textColor !== void 0 ? textColor : customTokens.ai.textColor;
19
+ const containerClassName = `${baseCls} ${baseCls}__container ${hashId}${showContainer ? '' : ` ${baseCls}__container--hidden`}`;
20
+ const useStyle = (0, cssinjs_1.useStyleRegister)({
21
+ token: token,
22
+ path: ['AiSpinner', resolvedTextColor],
23
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
24
+ theme: theme
25
+ }, () => {
26
+ const prefixCls = `:where(.${hashId}).${baseCls}`;
27
+ return {
28
+ [`${prefixCls}`]: {
29
+ position: 'relative',
30
+ width: customTokens.sizing.valueFull,
31
+ height: customTokens.sizing.valueFull,
32
+ display: customTokens.layout.displayFlex,
33
+ flexDirection: customTokens.layout.flexDirectionColumn,
34
+ alignItems: customTokens.layout.flexCenter,
35
+ justifyContent: customTokens.layout.flexCenter,
36
+ gap: '16px',
37
+ border: '3px solid transparent',
38
+ borderImageSource: `linear-gradient(to bottom, ${gradientStart}, ${gradientEnd})`,
39
+ borderImageSlice: 1,
40
+ background: 'linear-gradient(to bottom, rgba(35, 43, 60, 0.4), rgba(35, 43, 60, 0.4))',
41
+ backgroundClip: 'padding-box'
42
+ },
43
+ [`${prefixCls}.${baseCls}__container--hidden`]: {
44
+ border: 'none',
45
+ borderImageSource: 'none',
46
+ background: 'none'
47
+ },
48
+ [`${prefixCls} .${baseCls}__spinner`]: {
49
+ position: 'absolute',
50
+ inset: 0,
51
+ width: customTokens.sizing.valueFull,
52
+ height: customTokens.sizing.valueFull,
53
+ display: customTokens.layout.displayFlex,
54
+ alignItems: customTokens.layout.flexCenter,
55
+ justifyContent: customTokens.layout.flexCenter,
56
+ zIndex: 1
57
+ },
58
+ [`${prefixCls} .${baseCls}__circle`]: {
59
+ width: '80px',
60
+ height: '80px',
61
+ transformOrigin: customTokens.layout.flexCenter,
62
+ animation: 'ai-spinner-rotate 1.4s linear infinite'
63
+ },
64
+ [`${prefixCls} .${baseCls}__path`]: {
65
+ strokeDasharray: '90, 150',
66
+ strokeDashoffset: 0,
67
+ animation: 'ai-spinner-dash 1.4s ease-in-out infinite'
68
+ },
69
+ [`${prefixCls} .${baseCls}__icon-wrapper`]: {
70
+ position: 'absolute',
71
+ inset: 0,
72
+ zIndex: 2,
73
+ display: customTokens.layout.displayFlex,
74
+ alignItems: customTokens.layout.flexCenter,
75
+ justifyContent: customTokens.layout.flexCenter,
76
+ ['svg']: {
77
+ width: '18px',
78
+ height: '18px'
79
+ }
80
+ },
81
+ [`${prefixCls} .${baseCls}__text`]: {
82
+ position: 'relative',
83
+ zIndex: 2,
84
+ marginTop: '110px',
85
+ color: resolvedTextColor
86
+ },
87
+ '@keyframes ai-spinner-rotate': {
88
+ '0%': {
89
+ transform: 'rotate(0deg)'
90
+ },
91
+ '100%': {
92
+ transform: 'rotate(360deg)'
93
+ }
94
+ },
95
+ '@keyframes ai-spinner-dash': {
96
+ '0%': {
97
+ strokeDasharray: '1, 150',
98
+ strokeDashoffset: 0
99
+ },
100
+ '50%': {
101
+ strokeDasharray: '90, 150',
102
+ strokeDashoffset: -35
103
+ },
104
+ '100%': {
105
+ strokeDasharray: '90, 150',
106
+ strokeDashoffset: -124
107
+ }
108
+ }
109
+ };
110
+ });
111
+ return useStyle(React.createElement(React.Fragment, null,
112
+ React.createElement("div", { className: containerClassName },
113
+ React.createElement("div", { className: `${baseCls}__spinner` },
114
+ React.createElement("svg", { className: `${baseCls}__circle`, viewBox: "0 0 50 50" },
115
+ React.createElement("defs", null,
116
+ React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
117
+ React.createElement("stop", { offset: "0%", stopColor: gradientStart }),
118
+ React.createElement("stop", { offset: "100%", stopColor: gradientEnd }))),
119
+ React.createElement("circle", { className: `${baseCls}__path`, cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "3", strokeLinecap: "round", stroke: `url(#${gradientId})` }))),
120
+ React.createElement("div", { className: `${baseCls}__icon-wrapper` },
121
+ React.createElement(icons_1.Icon, { icon: icon, size: 18, color: iconColor })),
122
+ text && React.createElement(ui_typography_1.Text, { className: `${baseCls}__text` }, text))));
123
+ };
124
+ exports.AiSpinner = AiSpinner;
package/dist/cjs/types.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import type { IconName } from '@akinon/icons';
2
+ export interface AiSpinnerProps {
3
+ /**
4
+ * Optional text to display below the spinner
5
+ */
6
+ text?: string;
7
+ /**
8
+ * Optional icon name to display in the center. If not provided, default ai-star icon will be shown
9
+ */
10
+ icon?: IconName;
11
+ /**
12
+ * Controls visibility of the outer container and its border. Defaults to true.
13
+ */
14
+ showContainer?: boolean;
15
+ /**
16
+ * Optional icon color. Defaults to azure 500 (#4482ff)
17
+ */
18
+ iconColor?: string;
19
+ /**
20
+ * Optional text color. Defaults to ai text color token
21
+ */
22
+ textColor?: string;
23
+ }
24
+ //# sourceMappingURL=types.d.ts.map
package/dist/cjs/types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
package/dist/cjs/types.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/dist/esm/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ import type { AiSpinnerProps } from './types';
3
+ export declare const AiSpinner: ({ text, icon, showContainer, iconColor, textColor }: AiSpinnerProps) => React.JSX.Element;
4
+ export type * from './types';
5
+ //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,SAAS,GAAI,qDAMvB,cAAc,sBAgJhB,CAAC;AAEF,mBAAmB,SAAS,CAAC"}
package/dist/esm/index.js ADDED
@@ -0,0 +1,120 @@
1
+ import { Icon } from '@akinon/icons';
2
+ import { getSafeCustomTokens, theme as uiTheme, useToken } from '@akinon/ui-theme';
3
+ import { Text } from '@akinon/ui-typography';
4
+ import { useStyleRegister } from '@ant-design/cssinjs';
5
+ import { ConfigProvider } from 'antd';
6
+ import * as React from 'react';
7
+ export const AiSpinner = ({ text, icon = 'ai-star', showContainer = true, iconColor = uiTheme.colors.azure['500'], textColor }) => {
8
+ const gradientId = React.useId();
9
+ const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
10
+ const { token, hashId } = useToken();
11
+ const customTokens = getSafeCustomTokens(theme);
12
+ const baseCls = getPrefixCls('ai-spinner');
13
+ const gradientStart = customTokens.ai.gradientStart;
14
+ const gradientEnd = customTokens.ai.gradientEnd;
15
+ const resolvedTextColor = textColor !== null && textColor !== void 0 ? textColor : customTokens.ai.textColor;
16
+ const containerClassName = `${baseCls} ${baseCls}__container ${hashId}${showContainer ? '' : ` ${baseCls}__container--hidden`}`;
17
+ const useStyle = useStyleRegister({
18
+ token: token,
19
+ path: ['AiSpinner', resolvedTextColor],
20
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
+ theme: theme
22
+ }, () => {
23
+ const prefixCls = `:where(.${hashId}).${baseCls}`;
24
+ return {
25
+ [`${prefixCls}`]: {
26
+ position: 'relative',
27
+ width: customTokens.sizing.valueFull,
28
+ height: customTokens.sizing.valueFull,
29
+ display: customTokens.layout.displayFlex,
30
+ flexDirection: customTokens.layout.flexDirectionColumn,
31
+ alignItems: customTokens.layout.flexCenter,
32
+ justifyContent: customTokens.layout.flexCenter,
33
+ gap: '16px',
34
+ border: '3px solid transparent',
35
+ borderImageSource: `linear-gradient(to bottom, ${gradientStart}, ${gradientEnd})`,
36
+ borderImageSlice: 1,
37
+ background: 'linear-gradient(to bottom, rgba(35, 43, 60, 0.4), rgba(35, 43, 60, 0.4))',
38
+ backgroundClip: 'padding-box'
39
+ },
40
+ [`${prefixCls}.${baseCls}__container--hidden`]: {
41
+ border: 'none',
42
+ borderImageSource: 'none',
43
+ background: 'none'
44
+ },
45
+ [`${prefixCls} .${baseCls}__spinner`]: {
46
+ position: 'absolute',
47
+ inset: 0,
48
+ width: customTokens.sizing.valueFull,
49
+ height: customTokens.sizing.valueFull,
50
+ display: customTokens.layout.displayFlex,
51
+ alignItems: customTokens.layout.flexCenter,
52
+ justifyContent: customTokens.layout.flexCenter,
53
+ zIndex: 1
54
+ },
55
+ [`${prefixCls} .${baseCls}__circle`]: {
56
+ width: '80px',
57
+ height: '80px',
58
+ transformOrigin: customTokens.layout.flexCenter,
59
+ animation: 'ai-spinner-rotate 1.4s linear infinite'
60
+ },
61
+ [`${prefixCls} .${baseCls}__path`]: {
62
+ strokeDasharray: '90, 150',
63
+ strokeDashoffset: 0,
64
+ animation: 'ai-spinner-dash 1.4s ease-in-out infinite'
65
+ },
66
+ [`${prefixCls} .${baseCls}__icon-wrapper`]: {
67
+ position: 'absolute',
68
+ inset: 0,
69
+ zIndex: 2,
70
+ display: customTokens.layout.displayFlex,
71
+ alignItems: customTokens.layout.flexCenter,
72
+ justifyContent: customTokens.layout.flexCenter,
73
+ ['svg']: {
74
+ width: '18px',
75
+ height: '18px'
76
+ }
77
+ },
78
+ [`${prefixCls} .${baseCls}__text`]: {
79
+ position: 'relative',
80
+ zIndex: 2,
81
+ marginTop: '110px',
82
+ color: resolvedTextColor
83
+ },
84
+ '@keyframes ai-spinner-rotate': {
85
+ '0%': {
86
+ transform: 'rotate(0deg)'
87
+ },
88
+ '100%': {
89
+ transform: 'rotate(360deg)'
90
+ }
91
+ },
92
+ '@keyframes ai-spinner-dash': {
93
+ '0%': {
94
+ strokeDasharray: '1, 150',
95
+ strokeDashoffset: 0
96
+ },
97
+ '50%': {
98
+ strokeDasharray: '90, 150',
99
+ strokeDashoffset: -35
100
+ },
101
+ '100%': {
102
+ strokeDasharray: '90, 150',
103
+ strokeDashoffset: -124
104
+ }
105
+ }
106
+ };
107
+ });
108
+ return useStyle(React.createElement(React.Fragment, null,
109
+ React.createElement("div", { className: containerClassName },
110
+ React.createElement("div", { className: `${baseCls}__spinner` },
111
+ React.createElement("svg", { className: `${baseCls}__circle`, viewBox: "0 0 50 50" },
112
+ React.createElement("defs", null,
113
+ React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
114
+ React.createElement("stop", { offset: "0%", stopColor: gradientStart }),
115
+ React.createElement("stop", { offset: "100%", stopColor: gradientEnd }))),
116
+ React.createElement("circle", { className: `${baseCls}__path`, cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "3", strokeLinecap: "round", stroke: `url(#${gradientId})` }))),
117
+ React.createElement("div", { className: `${baseCls}__icon-wrapper` },
118
+ React.createElement(Icon, { icon: icon, size: 18, color: iconColor })),
119
+ text && React.createElement(Text, { className: `${baseCls}__text` }, text))));
120
+ };
package/dist/esm/types.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import type { IconName } from '@akinon/icons';
2
+ export interface AiSpinnerProps {
3
+ /**
4
+ * Optional text to display below the spinner
5
+ */
6
+ text?: string;
7
+ /**
8
+ * Optional icon name to display in the center. If not provided, default ai-star icon will be shown
9
+ */
10
+ icon?: IconName;
11
+ /**
12
+ * Controls visibility of the outer container and its border. Defaults to true.
13
+ */
14
+ showContainer?: boolean;
15
+ /**
16
+ * Optional icon color. Defaults to azure 500 (#4482ff)
17
+ */
18
+ iconColor?: string;
19
+ /**
20
+ * Optional text color. Defaults to ai text color token
21
+ */
22
+ textColor?: string;
23
+ }
24
+ //# sourceMappingURL=types.d.ts.map
package/dist/esm/types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
package/dist/esm/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "@akinon/ui-ai-spinner",
3
+ "version": "1.0.0-next.1",
4
+ "private": false,
5
+ "type": "module",
6
+ "main": "dist/esm/index.js",
7
+ "module": "dist/esm/index.js",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "dependencies": {
12
+ "@ant-design/cssinjs": "^1.24.0",
13
+ "antd": "^5.27.0",
14
+ "@akinon/icons": "1.1.2-next.1",
15
+ "@akinon/ui-theme": "1.1.3-next.1",
16
+ "@akinon/ui-typography": "1.1.2-next.0"
17
+ },
18
+ "devDependencies": {
19
+ "clean-package": "2.2.0",
20
+ "copyfiles": "^2.4.1",
21
+ "rimraf": "^5.0.5",
22
+ "typescript": "*",
23
+ "@akinon/typescript-config": "1.1.1"
24
+ },
25
+ "peerDependencies": {
26
+ "react": "^18 || ^19",
27
+ "react-dom": "^18 || ^19"
28
+ },
29
+ "clean-package": "../../../clean-package.config.json",
30
+ "types": "dist/esm/index.d.ts",
31
+ "exports": {
32
+ ".": {
33
+ "types": "./dist/esm/index.d.ts",
34
+ "import": "./dist/esm/index.js",
35
+ "require": "./dist/cjs/index.js"
36
+ },
37
+ "./package.json": "./package.json"
38
+ },
39
+ "scripts": {
40
+ "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
41
+ "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
42
+ "build:esm": "tsc --outDir dist/esm",
43
+ "clean": "rimraf dist/",
44
+ "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
45
+ "typecheck": "tsc --noEmit"
46
+ }
47
+ }