@optiaxiom/globals 3.0.0-next.2 → 3.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.
- package/dist/cjs/fonts.js +3 -6
- package/dist/cjs/index.js +593 -402
- package/dist/esm/context.js +3 -3
- package/dist/esm/fonts.js +3 -3
- package/dist/esm/index.js +8 -7
- package/dist/esm/modal-context.js +3 -3
- package/dist/esm/surface-context.js +36 -48
- package/dist/esm/theme-css.js +175 -2
- package/dist/esm/toast-context.js +3 -3
- package/dist/esm/toaster.js +56 -61
- package/dist/esm/tokens/borderRadius.js +9 -9
- package/dist/esm/tokens/boxShadow.js +6 -5
- package/dist/esm/tokens/colors.js +222 -178
- package/dist/esm/tokens/duration.js +5 -4
- package/dist/esm/tokens/fontFamily.js +5 -4
- package/dist/esm/tokens/fontSize.js +35 -35
- package/dist/esm/tokens/index.js +22 -22
- package/dist/esm/tokens/maxSize.js +7 -7
- package/dist/esm/tokens/rem.js +2 -1
- package/dist/esm/tokens/screens.js +5 -5
- package/dist/esm/tokens/size.js +10 -10
- package/dist/esm/tokens/zIndex.js +5 -4
- package/dist/index.d.ts +465 -464
- package/package.json +5 -4
package/dist/esm/context.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { createContext } from
|
|
3
|
-
|
|
2
|
+
import { createContext } from "react";
|
|
3
|
+
//#region src/context.ts
|
|
4
4
|
const AxiomAuthContext = createContext(void 0);
|
|
5
5
|
const AxiomVersionContext = createContext(void 0);
|
|
6
|
-
|
|
6
|
+
//#endregion
|
|
7
7
|
export { AxiomAuthContext, AxiomVersionContext };
|
package/dist/esm/fonts.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import "@fontsource-variable/roboto/index.css";
|
|
2
|
+
import "@fontsource-variable/roboto-condensed/index.css";
|
|
3
|
+
import "@fontsource-variable/roboto-mono/index.css";
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { AxiomAuthContext, AxiomVersionContext } from "./context.js";
|
|
2
|
+
import { ModalProvider, useModalContext } from "./modal-context.js";
|
|
3
|
+
import { unstable_SuggestionContext, unstable_SurfaceProvider, unstable_useSurfaceContext } from "./surface-context.js";
|
|
4
|
+
import { theme } from "./theme-css.js";
|
|
5
|
+
import { ToastProviderProvider, useToastProviderContext } from "./toast-context.js";
|
|
6
|
+
import { createToaster, toaster } from "./toaster.js";
|
|
7
|
+
import { tokens } from "./tokens/index.js";
|
|
8
|
+
export { AxiomAuthContext, AxiomVersionContext, ModalProvider, ToastProviderProvider, createToaster, theme, toaster, tokens, unstable_SuggestionContext, unstable_SurfaceProvider, unstable_useSurfaceContext, useModalContext, useToastProviderContext };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { createContext } from
|
|
2
|
-
|
|
1
|
+
import { createContext } from "@radix-ui/react-context";
|
|
2
|
+
//#region src/modal-context.ts
|
|
3
3
|
const [ModalProvider, useModalContext] = createContext("@optiaxiom/react/Modal", { shardRef: { current: null } });
|
|
4
|
-
|
|
4
|
+
//#endregion
|
|
5
5
|
export { ModalProvider, useModalContext };
|
|
@@ -1,59 +1,47 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { createContext, useContext, useEffect
|
|
3
|
-
|
|
2
|
+
import { createContext, createElement, useContext, useEffect } from "react";
|
|
3
|
+
//#region src/surface-context.ts
|
|
4
4
|
const SuggestionContext = createContext(null);
|
|
5
5
|
const SurfaceContext = createContext(null);
|
|
6
6
|
const SurfaceProvider = (props) => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
rest.suggestionPopover?.registered
|
|
40
|
-
]);
|
|
41
|
-
return createElement(SurfaceContext.Provider, {
|
|
42
|
-
children,
|
|
43
|
-
value: disabled ? null : {
|
|
44
|
-
accept,
|
|
45
|
-
executeTool,
|
|
46
|
-
reject,
|
|
47
|
-
renderSuggestionValue,
|
|
48
|
-
...rest
|
|
49
|
-
}
|
|
50
|
-
});
|
|
7
|
+
const { accept, children, disabled, executeTool, reject, renderSuggestionValue, ...rest } = props;
|
|
8
|
+
const store = useContext(SuggestionContext);
|
|
9
|
+
const suggestion = !disabled && "suggestions" in rest ? rest.suggestions?.find((s) => ("/" + rest.path).endsWith("/" + s.surface) && (s.type === "message" || s.type === "value" && s.value !== rest.value)) : void 0;
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
if (disabled || !store || !suggestion || suggestion.type === "cards" || rest.suggestionAlert?.registered || rest.suggestionPopover?.registered) return;
|
|
12
|
+
return store.add(suggestion, {
|
|
13
|
+
accept,
|
|
14
|
+
executeTool,
|
|
15
|
+
reject,
|
|
16
|
+
renderSuggestionValue
|
|
17
|
+
});
|
|
18
|
+
}, [
|
|
19
|
+
disabled,
|
|
20
|
+
accept,
|
|
21
|
+
executeTool,
|
|
22
|
+
rest.suggestionAlert?.registered,
|
|
23
|
+
reject,
|
|
24
|
+
renderSuggestionValue,
|
|
25
|
+
store,
|
|
26
|
+
suggestion,
|
|
27
|
+
rest.suggestionPopover?.registered
|
|
28
|
+
]);
|
|
29
|
+
return createElement(SurfaceContext.Provider, {
|
|
30
|
+
children,
|
|
31
|
+
value: disabled ? null : {
|
|
32
|
+
accept,
|
|
33
|
+
executeTool,
|
|
34
|
+
reject,
|
|
35
|
+
renderSuggestionValue,
|
|
36
|
+
...rest
|
|
37
|
+
}
|
|
38
|
+
});
|
|
51
39
|
};
|
|
52
40
|
function useSurfaceContext() {
|
|
53
|
-
|
|
41
|
+
return useContext(SurfaceContext);
|
|
54
42
|
}
|
|
55
43
|
const unstable_SuggestionContext = SuggestionContext;
|
|
56
44
|
const unstable_SurfaceProvider = SurfaceProvider;
|
|
57
45
|
const unstable_useSurfaceContext = useSurfaceContext;
|
|
58
|
-
|
|
46
|
+
//#endregion
|
|
59
47
|
export { unstable_SuggestionContext, unstable_SurfaceProvider, unstable_useSurfaceContext };
|
package/dist/esm/theme-css.js
CHANGED
|
@@ -1,3 +1,176 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
//#region src/theme.css.ts
|
|
2
|
+
var theme = {
|
|
3
|
+
borderRadius: {
|
|
4
|
+
xs: "var(--ax-borderRadius-xs)",
|
|
5
|
+
sm: "var(--ax-borderRadius-sm)",
|
|
6
|
+
md: "var(--ax-borderRadius-md)",
|
|
7
|
+
lg: "var(--ax-borderRadius-lg)",
|
|
8
|
+
xl: "var(--ax-borderRadius-xl)",
|
|
9
|
+
full: "var(--ax-borderRadius-full)"
|
|
10
|
+
},
|
|
11
|
+
boxShadow: {
|
|
12
|
+
sm: "var(--ax-boxShadow-sm)",
|
|
13
|
+
md: "var(--ax-boxShadow-md)",
|
|
14
|
+
lg: "var(--ax-boxShadow-lg)",
|
|
15
|
+
xl: "var(--ax-boxShadow-xl)"
|
|
16
|
+
},
|
|
17
|
+
colors: {
|
|
18
|
+
"bg.accent": "var(--ax-colors-bg-accent)",
|
|
19
|
+
"bg.accent.hovered": "var(--ax-colors-bg-accent-hovered)",
|
|
20
|
+
"bg.accent.light": "var(--ax-colors-bg-accent-light)",
|
|
21
|
+
"bg.accent.pressed": "var(--ax-colors-bg-accent-pressed)",
|
|
22
|
+
"bg.accent.subtle": "var(--ax-colors-bg-accent-subtle)",
|
|
23
|
+
"bg.avatar.neutral": "var(--ax-colors-bg-avatar-neutral)",
|
|
24
|
+
"bg.avatar.purple": "var(--ax-colors-bg-avatar-purple)",
|
|
25
|
+
"bg.default": "var(--ax-colors-bg-default)",
|
|
26
|
+
"bg.default.hovered": "var(--ax-colors-bg-default-hovered)",
|
|
27
|
+
"bg.default.inverse": "var(--ax-colors-bg-default-inverse)",
|
|
28
|
+
"bg.default.inverse.hovered": "var(--ax-colors-bg-default-inverse-hovered)",
|
|
29
|
+
"bg.default.inverse.pressed": "var(--ax-colors-bg-default-inverse-pressed)",
|
|
30
|
+
"bg.default.pressed": "var(--ax-colors-bg-default-pressed)",
|
|
31
|
+
"bg.error": "var(--ax-colors-bg-error)",
|
|
32
|
+
"bg.error.hovered": "var(--ax-colors-bg-error-hovered)",
|
|
33
|
+
"bg.error.light": "var(--ax-colors-bg-error-light)",
|
|
34
|
+
"bg.error.pressed": "var(--ax-colors-bg-error-pressed)",
|
|
35
|
+
"bg.error.subtle": "var(--ax-colors-bg-error-subtle)",
|
|
36
|
+
"bg.error.subtlest": "var(--ax-colors-bg-error-subtlest)",
|
|
37
|
+
"bg.information": "var(--ax-colors-bg-information)",
|
|
38
|
+
"bg.information.light": "var(--ax-colors-bg-information-light)",
|
|
39
|
+
"bg.information.subtle": "var(--ax-colors-bg-information-subtle)",
|
|
40
|
+
"bg.overlay": "var(--ax-colors-bg-overlay)",
|
|
41
|
+
"bg.page": "var(--ax-colors-bg-page)",
|
|
42
|
+
"bg.pill.default": "var(--ax-colors-bg-pill-default)",
|
|
43
|
+
"bg.pill.hovered": "var(--ax-colors-bg-pill-hovered)",
|
|
44
|
+
"bg.secondary": "var(--ax-colors-bg-secondary)",
|
|
45
|
+
"bg.secondary.hovered": "var(--ax-colors-bg-secondary-hovered)",
|
|
46
|
+
"bg.spinner.default": "var(--ax-colors-bg-spinner-default)",
|
|
47
|
+
"bg.spinner.inverse": "var(--ax-colors-bg-spinner-inverse)",
|
|
48
|
+
"bg.success": "var(--ax-colors-bg-success)",
|
|
49
|
+
"bg.success.hovered": "var(--ax-colors-bg-success-hovered)",
|
|
50
|
+
"bg.success.light": "var(--ax-colors-bg-success-light)",
|
|
51
|
+
"bg.success.subtle": "var(--ax-colors-bg-success-subtle)",
|
|
52
|
+
"bg.tertiary": "var(--ax-colors-bg-tertiary)",
|
|
53
|
+
"bg.tertiary.hovered": "var(--ax-colors-bg-tertiary-hovered)",
|
|
54
|
+
"bg.warning": "var(--ax-colors-bg-warning)",
|
|
55
|
+
"bg.warning.hovered": "var(--ax-colors-bg-warning-hovered)",
|
|
56
|
+
"bg.warning.light": "var(--ax-colors-bg-warning-light)",
|
|
57
|
+
"bg.warning.subtle": "var(--ax-colors-bg-warning-subtle)",
|
|
58
|
+
"border.accent": "var(--ax-colors-border-accent)",
|
|
59
|
+
"border.control": "var(--ax-colors-border-control)",
|
|
60
|
+
"border.control.hovered": "var(--ax-colors-border-control-hovered)",
|
|
61
|
+
"border.default": "var(--ax-colors-border-default)",
|
|
62
|
+
"border.disabled": "var(--ax-colors-border-disabled)",
|
|
63
|
+
"border.error": "var(--ax-colors-border-error)",
|
|
64
|
+
"border.focus": "var(--ax-colors-border-focus)",
|
|
65
|
+
"border.focus.error": "var(--ax-colors-border-focus-error)",
|
|
66
|
+
"border.secondary": "var(--ax-colors-border-secondary)",
|
|
67
|
+
"border.success": "var(--ax-colors-border-success)",
|
|
68
|
+
"border.tertiary": "var(--ax-colors-border-tertiary)",
|
|
69
|
+
"border.warning": "var(--ax-colors-border-warning)",
|
|
70
|
+
"fg.accent": "var(--ax-colors-fg-accent)",
|
|
71
|
+
"fg.accent.hovered": "var(--ax-colors-fg-accent-hovered)",
|
|
72
|
+
"fg.accent.strong": "var(--ax-colors-fg-accent-strong)",
|
|
73
|
+
"fg.avatar.neutral": "var(--ax-colors-fg-avatar-neutral)",
|
|
74
|
+
"fg.avatar.purple": "var(--ax-colors-fg-avatar-purple)",
|
|
75
|
+
"fg.black": "var(--ax-colors-fg-black)",
|
|
76
|
+
"fg.default": "var(--ax-colors-fg-default)",
|
|
77
|
+
"fg.default.inverse": "var(--ax-colors-fg-default-inverse)",
|
|
78
|
+
"fg.disabled": "var(--ax-colors-fg-disabled)",
|
|
79
|
+
"fg.error": "var(--ax-colors-fg-error)",
|
|
80
|
+
"fg.error.hovered": "var(--ax-colors-fg-error-hovered)",
|
|
81
|
+
"fg.error.light": "var(--ax-colors-fg-error-light)",
|
|
82
|
+
"fg.error.strong": "var(--ax-colors-fg-error-strong)",
|
|
83
|
+
"fg.information": "var(--ax-colors-fg-information)",
|
|
84
|
+
"fg.information.light": "var(--ax-colors-fg-information-light)",
|
|
85
|
+
"fg.information.strong": "var(--ax-colors-fg-information-strong)",
|
|
86
|
+
"fg.link.default": "var(--ax-colors-fg-link-default)",
|
|
87
|
+
"fg.link.default.hovered": "var(--ax-colors-fg-link-default-hovered)",
|
|
88
|
+
"fg.link.inverse": "var(--ax-colors-fg-link-inverse)",
|
|
89
|
+
"fg.link.subtle": "var(--ax-colors-fg-link-subtle)",
|
|
90
|
+
"fg.link.visited": "var(--ax-colors-fg-link-visited)",
|
|
91
|
+
"fg.secondary": "var(--ax-colors-fg-secondary)",
|
|
92
|
+
"fg.spinner.default": "var(--ax-colors-fg-spinner-default)",
|
|
93
|
+
"fg.spinner.inverse": "var(--ax-colors-fg-spinner-inverse)",
|
|
94
|
+
"fg.success": "var(--ax-colors-fg-success)",
|
|
95
|
+
"fg.success.hovered": "var(--ax-colors-fg-success-hovered)",
|
|
96
|
+
"fg.success.light": "var(--ax-colors-fg-success-light)",
|
|
97
|
+
"fg.success.strong": "var(--ax-colors-fg-success-strong)",
|
|
98
|
+
"fg.tertiary": "var(--ax-colors-fg-tertiary)",
|
|
99
|
+
"fg.warning": "var(--ax-colors-fg-warning)",
|
|
100
|
+
"fg.warning.hovered": "var(--ax-colors-fg-warning-hovered)",
|
|
101
|
+
"fg.warning.inverse": "var(--ax-colors-fg-warning-inverse)",
|
|
102
|
+
"fg.warning.light": "var(--ax-colors-fg-warning-light)",
|
|
103
|
+
"fg.warning.strong": "var(--ax-colors-fg-warning-strong)",
|
|
104
|
+
"fg.white": "var(--ax-colors-fg-white)"
|
|
105
|
+
},
|
|
106
|
+
duration: {
|
|
107
|
+
sm: "var(--ax-duration-sm)",
|
|
108
|
+
md: "var(--ax-duration-md)",
|
|
109
|
+
lg: "var(--ax-duration-lg)"
|
|
110
|
+
},
|
|
111
|
+
fontFamily: {
|
|
112
|
+
heading: "var(--ax-fontFamily-heading)",
|
|
113
|
+
mono: "var(--ax-fontFamily-mono)",
|
|
114
|
+
sans: "var(--ax-fontFamily-sans)"
|
|
115
|
+
},
|
|
116
|
+
fontSize: {
|
|
117
|
+
xs: {
|
|
118
|
+
fontSize: "var(--ax-fontSize-xs-fontSize)",
|
|
119
|
+
lineHeight: "var(--ax-fontSize-xs-lineHeight)"
|
|
120
|
+
},
|
|
121
|
+
sm: {
|
|
122
|
+
fontSize: "var(--ax-fontSize-sm-fontSize)",
|
|
123
|
+
lineHeight: "var(--ax-fontSize-sm-lineHeight)"
|
|
124
|
+
},
|
|
125
|
+
md: {
|
|
126
|
+
fontSize: "var(--ax-fontSize-md-fontSize)",
|
|
127
|
+
lineHeight: "var(--ax-fontSize-md-lineHeight)"
|
|
128
|
+
},
|
|
129
|
+
lg: {
|
|
130
|
+
fontSize: "var(--ax-fontSize-lg-fontSize)",
|
|
131
|
+
lineHeight: "var(--ax-fontSize-lg-lineHeight)"
|
|
132
|
+
},
|
|
133
|
+
xl: {
|
|
134
|
+
fontSize: "var(--ax-fontSize-xl-fontSize)",
|
|
135
|
+
lineHeight: "var(--ax-fontSize-xl-lineHeight)"
|
|
136
|
+
},
|
|
137
|
+
"2xl": {
|
|
138
|
+
fontSize: "var(--ax-fontSize-2xl-fontSize)",
|
|
139
|
+
lineHeight: "var(--ax-fontSize-2xl-lineHeight)"
|
|
140
|
+
},
|
|
141
|
+
"3xl": {
|
|
142
|
+
fontSize: "var(--ax-fontSize-3xl-fontSize)",
|
|
143
|
+
lineHeight: "var(--ax-fontSize-3xl-lineHeight)"
|
|
144
|
+
},
|
|
145
|
+
"4xl": {
|
|
146
|
+
fontSize: "var(--ax-fontSize-4xl-fontSize)",
|
|
147
|
+
lineHeight: "var(--ax-fontSize-4xl-lineHeight)"
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
maxSize: {
|
|
151
|
+
xs: "var(--ax-maxSize-xs)",
|
|
152
|
+
sm: "var(--ax-maxSize-sm)",
|
|
153
|
+
md: "var(--ax-maxSize-md)",
|
|
154
|
+
lg: "var(--ax-maxSize-lg)"
|
|
155
|
+
},
|
|
156
|
+
screens: {
|
|
157
|
+
sm: "var(--ax-screens-sm)",
|
|
158
|
+
md: "var(--ax-screens-md)"
|
|
159
|
+
},
|
|
160
|
+
size: {
|
|
161
|
+
"2xs": "var(--ax-size-2xs)",
|
|
162
|
+
xs: "var(--ax-size-xs)",
|
|
163
|
+
sm: "var(--ax-size-sm)",
|
|
164
|
+
md: "var(--ax-size-md)",
|
|
165
|
+
lg: "var(--ax-size-lg)",
|
|
166
|
+
xl: "var(--ax-size-xl)",
|
|
167
|
+
"3xl": "var(--ax-size-3xl)"
|
|
168
|
+
},
|
|
169
|
+
zIndex: {
|
|
170
|
+
popover: "var(--ax-zIndex-popover)",
|
|
171
|
+
toast: "var(--ax-zIndex-toast)",
|
|
172
|
+
tooltip: "var(--ax-zIndex-tooltip)"
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
//#endregion
|
|
3
176
|
export { theme };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { createContext } from
|
|
3
|
-
|
|
2
|
+
import { createContext } from "@radix-ui/react-context";
|
|
3
|
+
//#region src/toast-context.ts
|
|
4
4
|
const [ToastProviderProvider, useToastProviderContext] = createContext("@optiaxiom/react/ToastProvider");
|
|
5
|
-
|
|
5
|
+
//#endregion
|
|
6
6
|
export { ToastProviderProvider, useToastProviderContext };
|
package/dist/esm/toaster.js
CHANGED
|
@@ -1,71 +1,66 @@
|
|
|
1
|
+
//#region src/toaster.ts
|
|
1
2
|
const EMPTY = [];
|
|
2
3
|
let id = 1;
|
|
3
4
|
const genId = () => {
|
|
4
|
-
|
|
5
|
+
return "t" + id++;
|
|
5
6
|
};
|
|
6
7
|
const createToaster = () => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
};
|
|
8
|
+
let snapshot = [];
|
|
9
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
10
|
+
const emit = () => {
|
|
11
|
+
for (const listener of listeners) listener();
|
|
12
|
+
};
|
|
13
|
+
let queue = Promise.resolve();
|
|
14
|
+
return {
|
|
15
|
+
store: [
|
|
16
|
+
(callback) => {
|
|
17
|
+
listeners.add(callback);
|
|
18
|
+
return () => listeners.delete(callback);
|
|
19
|
+
},
|
|
20
|
+
() => snapshot,
|
|
21
|
+
() => EMPTY
|
|
22
|
+
],
|
|
23
|
+
clear: () => {
|
|
24
|
+
snapshot = [];
|
|
25
|
+
emit();
|
|
26
|
+
},
|
|
27
|
+
create: (message, options) => {
|
|
28
|
+
const id = genId();
|
|
29
|
+
queue = queue.then(async () => {
|
|
30
|
+
const item = {
|
|
31
|
+
id,
|
|
32
|
+
open: true,
|
|
33
|
+
ref: { current: null },
|
|
34
|
+
toast: {
|
|
35
|
+
...options,
|
|
36
|
+
title: message
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
snapshot = [...snapshot, item];
|
|
40
|
+
emit();
|
|
41
|
+
await waitForAnimation(item.ref.current);
|
|
42
|
+
});
|
|
43
|
+
return id;
|
|
44
|
+
},
|
|
45
|
+
remove: (id) => {
|
|
46
|
+
queue = queue.then(async () => {
|
|
47
|
+
snapshot = snapshot.map((item) => item.id === id ? {
|
|
48
|
+
...item,
|
|
49
|
+
open: false
|
|
50
|
+
} : item);
|
|
51
|
+
emit();
|
|
52
|
+
await waitForAnimation(snapshot.find((item) => item.id === id)?.ref.current);
|
|
53
|
+
snapshot = snapshot.filter((item) => item.id !== id);
|
|
54
|
+
emit();
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
};
|
|
59
58
|
};
|
|
60
59
|
const waitForAnimation = async (element) => {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
65
|
-
await Promise.allSettled(
|
|
66
|
-
typeof element.getAnimations === "function" ? element.getAnimations().map((animation) => animation.finished) : [Promise.resolve()]
|
|
67
|
-
);
|
|
60
|
+
if (!element) return;
|
|
61
|
+
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
62
|
+
await Promise.allSettled(typeof element.getAnimations === "function" ? element.getAnimations().map((animation) => animation.finished) : [Promise.resolve()]);
|
|
68
63
|
};
|
|
69
64
|
const toaster = createToaster();
|
|
70
|
-
|
|
65
|
+
//#endregion
|
|
71
66
|
export { createToaster, toaster };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { rem } from
|
|
2
|
-
|
|
1
|
+
import { rem } from "./rem.js";
|
|
2
|
+
//#region src/tokens/borderRadius.ts
|
|
3
3
|
const borderRadius = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
xs: rem("2px"),
|
|
5
|
+
sm: rem("6px"),
|
|
6
|
+
md: rem("8px"),
|
|
7
|
+
lg: rem("12px"),
|
|
8
|
+
xl: rem("16px"),
|
|
9
|
+
full: "9999px"
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
//#endregion
|
|
12
12
|
export { borderRadius };
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
//#region src/tokens/boxShadow.ts
|
|
1
2
|
const boxShadow = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
4
|
+
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
5
|
+
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
6
|
+
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
|
|
6
7
|
};
|
|
7
|
-
|
|
8
|
+
//#endregion
|
|
8
9
|
export { boxShadow };
|