@bouko/react 2.5.2 → 2.5.4
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/assets/icons/check copy.svg +6 -0
- package/dist/assets/icons/check-circle copy.svg +6 -0
- package/dist/assets/icons/chevron copy.svg +6 -0
- package/dist/assets/icons/paperclip copy.svg +6 -0
- package/dist/assets/icons/spinner copy.svg +6 -0
- package/dist/assets/icons/x-circle copy.svg +6 -0
- package/dist/components/animate/configs.d.ts +136 -136
- package/dist/components/animate/configs.js +62 -62
- package/dist/components/animate/index.d.ts +54 -54
- package/dist/components/animate/index.js +33 -33
- package/dist/components/attachment.d.ts +2 -2
- package/dist/components/attachment.js +18 -18
- package/dist/components/badge.d.ts +5 -0
- package/dist/components/badge.js +4 -0
- package/dist/components/button/ghost.d.ts +7 -7
- package/dist/components/button/ghost.js +8 -8
- package/dist/components/button/load.d.ts +10 -11
- package/dist/components/button/load.js +35 -35
- package/dist/components/button/normal.d.ts +11 -11
- package/dist/components/button/normal.js +38 -37
- package/dist/components/button.d.ts +10 -10
- package/dist/components/button.js +22 -22
- package/dist/components/carousel/index.d.ts +11 -11
- package/dist/components/carousel/index.js +19 -19
- package/dist/components/checkbox.d.ts +8 -8
- package/dist/components/checkbox.js +13 -13
- package/dist/components/dropdown/normal.d.ts +10 -10
- package/dist/components/dropdown/normal.js +19 -19
- package/dist/components/fade-carousel.d.ts +4 -4
- package/dist/components/fade-carousel.js +14 -14
- package/dist/components/field.d.ts +10 -10
- package/dist/components/field.js +10 -10
- package/dist/components/flex.d.ts +16 -0
- package/dist/components/flex.js +8 -0
- package/dist/components/form/fields.d.ts +16 -0
- package/dist/components/form/fields.js +21 -0
- package/dist/components/form/footer.js +2 -2
- package/dist/components/form/functions.d.ts +1 -1
- package/dist/components/form/functions.js +28 -28
- package/dist/components/form/loaders.d.ts +3 -0
- package/dist/components/form/loaders.js +11 -0
- package/dist/components/form/test-next.d.ts +1 -0
- package/dist/components/form/test-next.js +6 -0
- package/dist/components/form/types.d.ts +38 -38
- package/dist/components/form/types.js +1 -1
- package/dist/components/heading/normal.d.ts +29 -29
- package/dist/components/heading/normal.js +22 -22
- package/dist/components/heading/page.d.ts +25 -25
- package/dist/components/heading/page.js +23 -23
- package/dist/components/index.d.ts +12 -12
- package/dist/components/index.js +12 -12
- package/dist/components/input.d.ts +37 -11
- package/dist/components/input.js +40 -6
- package/dist/components/layout/fade.d.ts +7 -6
- package/dist/components/layout/fade.js +15 -15
- package/dist/components/layout/flex.d.ts +16 -16
- package/dist/components/layout/flex.js +42 -42
- package/dist/components/layout/heading.d.ts +3 -1
- package/dist/components/layout/heading.js +2 -2
- package/dist/components/layout/separator.d.ts +3 -3
- package/dist/components/layout/separator.js +5 -5
- package/dist/components/list/index.d.ts +2 -2
- package/dist/components/list/index.js +2 -2
- package/dist/components/list/item.d.ts +9 -9
- package/dist/components/list/item.js +7 -7
- package/dist/components/list/variants/bullet.d.ts +9 -9
- package/dist/components/list/variants/bullet.js +16 -16
- package/dist/components/list/variants/number.d.ts +10 -10
- package/dist/components/list/variants/number.js +18 -18
- package/dist/components/multiple-choice.d.ts +2 -2
- package/dist/components/multiple-choice.js +12 -12
- package/dist/components/search/index.d.ts +6 -0
- package/dist/components/search/index.js +12 -0
- package/dist/components/search-bar.d.ts +13 -14
- package/dist/components/search-bar.js +22 -28
- package/dist/components/select.d.ts +6 -6
- package/dist/components/select.js +24 -24
- package/dist/components/text/badge.d.ts +16 -16
- package/dist/components/text/badge.js +28 -28
- package/dist/components/textarea.d.ts +7 -7
- package/dist/components/textarea.js +11 -11
- package/dist/components/upload/file.d.ts +8 -8
- package/dist/components/upload/file.js +15 -15
- package/dist/components/waveform/index.d.ts +8 -8
- package/dist/components/waveform/index.js +11 -11
- package/dist/components/waveform/patterns.d.ts +1 -1
- package/dist/components/waveform/patterns.js +27 -27
- package/dist/core/format.d.ts +3 -3
- package/dist/core/format.js +34 -34
- package/dist/core/functions.d.ts +13 -13
- package/dist/core/functions.js +79 -79
- package/dist/core/types.d.ts +14 -14
- package/dist/core/types.js +2 -2
- package/dist/hooks/audio/sound.d.ts +1 -1
- package/dist/hooks/audio/sound.js +6 -6
- package/dist/hooks/clock/interval.d.ts +8 -8
- package/dist/hooks/clock/interval.js +25 -25
- package/dist/hooks/color.d.ts +7 -0
- package/dist/hooks/color.js +8 -0
- package/dist/hooks/element/container.d.ts +4 -5
- package/dist/hooks/element/container.js +7 -7
- package/dist/hooks/element/resize.d.ts +1 -1
- package/dist/hooks/element/resize.js +12 -12
- package/dist/hooks/index.d.ts +4 -4
- package/dist/hooks/index.js +4 -4
- package/dist/index.d.ts +14 -14
- package/dist/index.js +14 -14
- package/package.json +35 -2
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em">
|
|
2
|
+
<path
|
|
3
|
+
d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
|
|
4
|
+
fill="currentColor"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
|
|
2
|
+
<path
|
|
3
|
+
d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"
|
|
4
|
+
fill="currentColor"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
|
|
2
|
+
<path
|
|
3
|
+
d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
|
|
4
|
+
fill="currentColor"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em">
|
|
2
|
+
<path
|
|
3
|
+
d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"
|
|
4
|
+
fill="currentColor"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
|
|
2
|
+
<path
|
|
3
|
+
d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"
|
|
4
|
+
fill="currentColor"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em">
|
|
2
|
+
<path
|
|
3
|
+
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"
|
|
4
|
+
fill="currentColor"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
@@ -1,136 +1,136 @@
|
|
|
1
|
-
export declare const animations: {
|
|
2
|
-
readonly fadeUp: {
|
|
3
|
-
readonly initial: {
|
|
4
|
-
readonly opacity: 0;
|
|
5
|
-
readonly y: 30;
|
|
6
|
-
};
|
|
7
|
-
readonly animate: {
|
|
8
|
-
readonly opacity: 1;
|
|
9
|
-
readonly y: 0;
|
|
10
|
-
readonly transition: {
|
|
11
|
-
readonly duration: 0.3;
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
readonly fadeInAndOut: {
|
|
16
|
-
readonly initial: {
|
|
17
|
-
readonly opacity: 0;
|
|
18
|
-
};
|
|
19
|
-
readonly animate: {
|
|
20
|
-
readonly opacity: 1;
|
|
21
|
-
};
|
|
22
|
-
readonly exit: {
|
|
23
|
-
readonly opacity: 0;
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
readonly fadeUpAndOut: {
|
|
27
|
-
readonly initial: {
|
|
28
|
-
readonly opacity: 0;
|
|
29
|
-
readonly y: 10;
|
|
30
|
-
};
|
|
31
|
-
readonly animate: {
|
|
32
|
-
readonly opacity: 1;
|
|
33
|
-
readonly y: 0;
|
|
34
|
-
};
|
|
35
|
-
readonly exit: {
|
|
36
|
-
readonly opacity: 1;
|
|
37
|
-
readonly y: -10;
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
readonly fadeUpAndOutSlow: {
|
|
41
|
-
readonly initial: {
|
|
42
|
-
readonly opacity: 0;
|
|
43
|
-
readonly y: "-100%";
|
|
44
|
-
};
|
|
45
|
-
readonly animate: {
|
|
46
|
-
readonly opacity: 1;
|
|
47
|
-
readonly y: 0;
|
|
48
|
-
readonly transition: {
|
|
49
|
-
readonly duration: 0.2;
|
|
50
|
-
readonly ease: "easeInOut";
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
readonly exit: {
|
|
54
|
-
readonly opacity: 0;
|
|
55
|
-
readonly y: "100%";
|
|
56
|
-
};
|
|
57
|
-
};
|
|
58
|
-
readonly fadeLeft: {
|
|
59
|
-
readonly initial: {
|
|
60
|
-
readonly x: -50;
|
|
61
|
-
readonly opacity: 0;
|
|
62
|
-
};
|
|
63
|
-
readonly animate: {
|
|
64
|
-
readonly x: 0;
|
|
65
|
-
readonly opacity: 1;
|
|
66
|
-
};
|
|
67
|
-
readonly exit: {
|
|
68
|
-
readonly x: 50;
|
|
69
|
-
readonly opacity: 0;
|
|
70
|
-
};
|
|
71
|
-
readonly transition: {
|
|
72
|
-
readonly duration: 0.4;
|
|
73
|
-
readonly ease: "easeOut";
|
|
74
|
-
};
|
|
75
|
-
};
|
|
76
|
-
readonly growUpAndOut: {
|
|
77
|
-
readonly initial: {
|
|
78
|
-
readonly opacity: 0;
|
|
79
|
-
readonly height: 0;
|
|
80
|
-
};
|
|
81
|
-
readonly animate: {
|
|
82
|
-
readonly opacity: 1;
|
|
83
|
-
readonly height: "auto";
|
|
84
|
-
};
|
|
85
|
-
readonly exit: {
|
|
86
|
-
readonly opacity: 0;
|
|
87
|
-
readonly height: 0;
|
|
88
|
-
};
|
|
89
|
-
};
|
|
90
|
-
readonly fadeStagger: {
|
|
91
|
-
readonly initial: {
|
|
92
|
-
readonly opacity: 0;
|
|
93
|
-
};
|
|
94
|
-
readonly animate: {
|
|
95
|
-
readonly opacity: 1;
|
|
96
|
-
readonly transition: {
|
|
97
|
-
readonly staggerChildren: 0.2;
|
|
98
|
-
};
|
|
99
|
-
};
|
|
100
|
-
};
|
|
101
|
-
readonly fadeList: {
|
|
102
|
-
readonly hidden: {
|
|
103
|
-
readonly opacity: 0;
|
|
104
|
-
readonly x: -10;
|
|
105
|
-
readonly y: 5;
|
|
106
|
-
};
|
|
107
|
-
readonly visible: {
|
|
108
|
-
readonly opacity: 1;
|
|
109
|
-
readonly x: 0;
|
|
110
|
-
readonly y: 0;
|
|
111
|
-
readonly transition: {
|
|
112
|
-
readonly type: "spring";
|
|
113
|
-
readonly stiffness: 350;
|
|
114
|
-
readonly damping: 25;
|
|
115
|
-
};
|
|
116
|
-
};
|
|
117
|
-
};
|
|
118
|
-
readonly popUp: {
|
|
119
|
-
readonly initial: {
|
|
120
|
-
readonly opacity: 0;
|
|
121
|
-
readonly scale: 0.9;
|
|
122
|
-
};
|
|
123
|
-
readonly animate: {
|
|
124
|
-
readonly opacity: 1;
|
|
125
|
-
readonly scale: 1;
|
|
126
|
-
};
|
|
127
|
-
readonly exit: {
|
|
128
|
-
readonly opacity: 0;
|
|
129
|
-
readonly scale: 0.9;
|
|
130
|
-
};
|
|
131
|
-
readonly transition: {
|
|
132
|
-
readonly duration: 0.2;
|
|
133
|
-
readonly ease: readonly [0.23, 1, 0.32, 1];
|
|
134
|
-
};
|
|
135
|
-
};
|
|
136
|
-
};
|
|
1
|
+
export declare const animations: {
|
|
2
|
+
readonly fadeUp: {
|
|
3
|
+
readonly initial: {
|
|
4
|
+
readonly opacity: 0;
|
|
5
|
+
readonly y: 30;
|
|
6
|
+
};
|
|
7
|
+
readonly animate: {
|
|
8
|
+
readonly opacity: 1;
|
|
9
|
+
readonly y: 0;
|
|
10
|
+
readonly transition: {
|
|
11
|
+
readonly duration: 0.3;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
readonly fadeInAndOut: {
|
|
16
|
+
readonly initial: {
|
|
17
|
+
readonly opacity: 0;
|
|
18
|
+
};
|
|
19
|
+
readonly animate: {
|
|
20
|
+
readonly opacity: 1;
|
|
21
|
+
};
|
|
22
|
+
readonly exit: {
|
|
23
|
+
readonly opacity: 0;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
readonly fadeUpAndOut: {
|
|
27
|
+
readonly initial: {
|
|
28
|
+
readonly opacity: 0;
|
|
29
|
+
readonly y: 10;
|
|
30
|
+
};
|
|
31
|
+
readonly animate: {
|
|
32
|
+
readonly opacity: 1;
|
|
33
|
+
readonly y: 0;
|
|
34
|
+
};
|
|
35
|
+
readonly exit: {
|
|
36
|
+
readonly opacity: 1;
|
|
37
|
+
readonly y: -10;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
readonly fadeUpAndOutSlow: {
|
|
41
|
+
readonly initial: {
|
|
42
|
+
readonly opacity: 0;
|
|
43
|
+
readonly y: "-100%";
|
|
44
|
+
};
|
|
45
|
+
readonly animate: {
|
|
46
|
+
readonly opacity: 1;
|
|
47
|
+
readonly y: 0;
|
|
48
|
+
readonly transition: {
|
|
49
|
+
readonly duration: 0.2;
|
|
50
|
+
readonly ease: "easeInOut";
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
readonly exit: {
|
|
54
|
+
readonly opacity: 0;
|
|
55
|
+
readonly y: "100%";
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
readonly fadeLeft: {
|
|
59
|
+
readonly initial: {
|
|
60
|
+
readonly x: -50;
|
|
61
|
+
readonly opacity: 0;
|
|
62
|
+
};
|
|
63
|
+
readonly animate: {
|
|
64
|
+
readonly x: 0;
|
|
65
|
+
readonly opacity: 1;
|
|
66
|
+
};
|
|
67
|
+
readonly exit: {
|
|
68
|
+
readonly x: 50;
|
|
69
|
+
readonly opacity: 0;
|
|
70
|
+
};
|
|
71
|
+
readonly transition: {
|
|
72
|
+
readonly duration: 0.4;
|
|
73
|
+
readonly ease: "easeOut";
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
readonly growUpAndOut: {
|
|
77
|
+
readonly initial: {
|
|
78
|
+
readonly opacity: 0;
|
|
79
|
+
readonly height: 0;
|
|
80
|
+
};
|
|
81
|
+
readonly animate: {
|
|
82
|
+
readonly opacity: 1;
|
|
83
|
+
readonly height: "auto";
|
|
84
|
+
};
|
|
85
|
+
readonly exit: {
|
|
86
|
+
readonly opacity: 0;
|
|
87
|
+
readonly height: 0;
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
readonly fadeStagger: {
|
|
91
|
+
readonly initial: {
|
|
92
|
+
readonly opacity: 0;
|
|
93
|
+
};
|
|
94
|
+
readonly animate: {
|
|
95
|
+
readonly opacity: 1;
|
|
96
|
+
readonly transition: {
|
|
97
|
+
readonly staggerChildren: 0.2;
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
readonly fadeList: {
|
|
102
|
+
readonly hidden: {
|
|
103
|
+
readonly opacity: 0;
|
|
104
|
+
readonly x: -10;
|
|
105
|
+
readonly y: 5;
|
|
106
|
+
};
|
|
107
|
+
readonly visible: {
|
|
108
|
+
readonly opacity: 1;
|
|
109
|
+
readonly x: 0;
|
|
110
|
+
readonly y: 0;
|
|
111
|
+
readonly transition: {
|
|
112
|
+
readonly type: "spring";
|
|
113
|
+
readonly stiffness: 350;
|
|
114
|
+
readonly damping: 25;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
readonly popUp: {
|
|
119
|
+
readonly initial: {
|
|
120
|
+
readonly opacity: 0;
|
|
121
|
+
readonly scale: 0.9;
|
|
122
|
+
};
|
|
123
|
+
readonly animate: {
|
|
124
|
+
readonly opacity: 1;
|
|
125
|
+
readonly scale: 1;
|
|
126
|
+
};
|
|
127
|
+
readonly exit: {
|
|
128
|
+
readonly opacity: 0;
|
|
129
|
+
readonly scale: 0.9;
|
|
130
|
+
};
|
|
131
|
+
readonly transition: {
|
|
132
|
+
readonly duration: 0.2;
|
|
133
|
+
readonly ease: readonly [0.23, 1, 0.32, 1];
|
|
134
|
+
};
|
|
135
|
+
};
|
|
136
|
+
};
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
export const animations = {
|
|
2
|
-
"fadeUp": {
|
|
3
|
-
"initial": { "opacity": 0, "y": 30 },
|
|
4
|
-
"animate": {
|
|
5
|
-
"opacity": 1,
|
|
6
|
-
"y": 0,
|
|
7
|
-
"transition": { "duration": 0.3 }
|
|
8
|
-
}
|
|
9
|
-
},
|
|
10
|
-
"fadeInAndOut": {
|
|
11
|
-
"initial": { "opacity": 0 },
|
|
12
|
-
"animate": { "opacity": 1 },
|
|
13
|
-
"exit": { "opacity": 0 }
|
|
14
|
-
},
|
|
15
|
-
"fadeUpAndOut": {
|
|
16
|
-
"initial": { "opacity": 0, "y": 10 },
|
|
17
|
-
"animate": { "opacity": 1, "y": 0 },
|
|
18
|
-
"exit": { "opacity": 1, "y": -10 }
|
|
19
|
-
},
|
|
20
|
-
"fadeUpAndOutSlow": {
|
|
21
|
-
"initial": { "opacity": 0, "y": "-100%" },
|
|
22
|
-
"animate": { "opacity": 1, "y": 0,
|
|
23
|
-
"transition": { "duration": 0.2, "ease": "easeInOut" }
|
|
24
|
-
},
|
|
25
|
-
"exit": { "opacity": 0, "y": "100%" }
|
|
26
|
-
},
|
|
27
|
-
"fadeLeft": {
|
|
28
|
-
"initial": { "x": -50, "opacity": 0 },
|
|
29
|
-
"animate": { "x": 0, "opacity": 1 },
|
|
30
|
-
"exit": { "x": 50, "opacity": 0 },
|
|
31
|
-
"transition": { "duration": 0.4, "ease": "easeOut" }
|
|
32
|
-
},
|
|
33
|
-
"growUpAndOut": {
|
|
34
|
-
"initial": { "opacity": 0, "height": 0 },
|
|
35
|
-
"animate": { "opacity": 1, "height": "auto" },
|
|
36
|
-
"exit": { "opacity": 0, "height": 0 }
|
|
37
|
-
},
|
|
38
|
-
"fadeStagger": {
|
|
39
|
-
"initial": { "opacity": 0 },
|
|
40
|
-
"animate": {
|
|
41
|
-
"opacity": 1,
|
|
42
|
-
"transition": { "staggerChildren": 0.2 }
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
"fadeList": {
|
|
46
|
-
"hidden": { "opacity": 0, "x": -10, "y": 5 },
|
|
47
|
-
"visible": {
|
|
48
|
-
"opacity": 1, "x": 0, "y": 0,
|
|
49
|
-
"transition": {
|
|
50
|
-
"type": "spring",
|
|
51
|
-
"stiffness": 350,
|
|
52
|
-
"damping": 25
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
"popUp": {
|
|
57
|
-
"initial": { "opacity": 0, "scale": 0.9 },
|
|
58
|
-
"animate": { "opacity": 1, "scale": 1 },
|
|
59
|
-
"exit": { "opacity": 0, "scale": 0.9 },
|
|
60
|
-
"transition": { "duration": 0.2, "ease": [0.23, 1, 0.32, 1] }
|
|
61
|
-
}
|
|
62
|
-
};
|
|
1
|
+
export const animations = {
|
|
2
|
+
"fadeUp": {
|
|
3
|
+
"initial": { "opacity": 0, "y": 30 },
|
|
4
|
+
"animate": {
|
|
5
|
+
"opacity": 1,
|
|
6
|
+
"y": 0,
|
|
7
|
+
"transition": { "duration": 0.3 }
|
|
8
|
+
}
|
|
9
|
+
},
|
|
10
|
+
"fadeInAndOut": {
|
|
11
|
+
"initial": { "opacity": 0 },
|
|
12
|
+
"animate": { "opacity": 1 },
|
|
13
|
+
"exit": { "opacity": 0 }
|
|
14
|
+
},
|
|
15
|
+
"fadeUpAndOut": {
|
|
16
|
+
"initial": { "opacity": 0, "y": 10 },
|
|
17
|
+
"animate": { "opacity": 1, "y": 0 },
|
|
18
|
+
"exit": { "opacity": 1, "y": -10 }
|
|
19
|
+
},
|
|
20
|
+
"fadeUpAndOutSlow": {
|
|
21
|
+
"initial": { "opacity": 0, "y": "-100%" },
|
|
22
|
+
"animate": { "opacity": 1, "y": 0,
|
|
23
|
+
"transition": { "duration": 0.2, "ease": "easeInOut" }
|
|
24
|
+
},
|
|
25
|
+
"exit": { "opacity": 0, "y": "100%" }
|
|
26
|
+
},
|
|
27
|
+
"fadeLeft": {
|
|
28
|
+
"initial": { "x": -50, "opacity": 0 },
|
|
29
|
+
"animate": { "x": 0, "opacity": 1 },
|
|
30
|
+
"exit": { "x": 50, "opacity": 0 },
|
|
31
|
+
"transition": { "duration": 0.4, "ease": "easeOut" }
|
|
32
|
+
},
|
|
33
|
+
"growUpAndOut": {
|
|
34
|
+
"initial": { "opacity": 0, "height": 0 },
|
|
35
|
+
"animate": { "opacity": 1, "height": "auto" },
|
|
36
|
+
"exit": { "opacity": 0, "height": 0 }
|
|
37
|
+
},
|
|
38
|
+
"fadeStagger": {
|
|
39
|
+
"initial": { "opacity": 0 },
|
|
40
|
+
"animate": {
|
|
41
|
+
"opacity": 1,
|
|
42
|
+
"transition": { "staggerChildren": 0.2 }
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"fadeList": {
|
|
46
|
+
"hidden": { "opacity": 0, "x": -10, "y": 5 },
|
|
47
|
+
"visible": {
|
|
48
|
+
"opacity": 1, "x": 0, "y": 0,
|
|
49
|
+
"transition": {
|
|
50
|
+
"type": "spring",
|
|
51
|
+
"stiffness": 350,
|
|
52
|
+
"damping": 25
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"popUp": {
|
|
57
|
+
"initial": { "opacity": 0, "scale": 0.9 },
|
|
58
|
+
"animate": { "opacity": 1, "scale": 1 },
|
|
59
|
+
"exit": { "opacity": 0, "scale": 0.9 },
|
|
60
|
+
"transition": { "duration": 0.2, "ease": [0.23, 1, 0.32, 1] }
|
|
61
|
+
}
|
|
62
|
+
};
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
import type { ReactNode } from "react";
|
|
2
|
-
export
|
|
3
|
-
variants?: VariantConfig[];
|
|
4
|
-
direction?: "horizontal" | "vertical";
|
|
5
|
-
interval?: number;
|
|
6
|
-
duration?: number;
|
|
7
|
-
style?: string;
|
|
8
|
-
layout?: boolean;
|
|
9
|
-
children?: ReactNode;
|
|
10
|
-
};
|
|
11
|
-
export declare function Animation({ variants, style, direction, interval, duration, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
|
|
13
|
-
initial?: Record<string, number>;
|
|
14
|
-
animate?: Record<string, number>;
|
|
15
|
-
exit?: Record<string, number>;
|
|
16
|
-
};
|
|
17
|
-
/**
|
|
18
|
-
* Merges multiple variant configs into one.
|
|
19
|
-
*/
|
|
20
|
-
export declare function mergeVariants(...variants: VariantConfig[]): VariantConfig;
|
|
21
|
-
export declare const opacity: (x?: number) => {
|
|
22
|
-
initial: {
|
|
23
|
-
opacity: number;
|
|
24
|
-
};
|
|
25
|
-
animate: {
|
|
26
|
-
opacity: number;
|
|
27
|
-
};
|
|
28
|
-
exit: {
|
|
29
|
-
opacity: number;
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
export declare const slideX: (x?: number) => {
|
|
33
|
-
initial: {
|
|
34
|
-
x: number;
|
|
35
|
-
};
|
|
36
|
-
animate: {
|
|
37
|
-
x: number;
|
|
38
|
-
};
|
|
39
|
-
exit: {
|
|
40
|
-
x: number;
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
export declare const slideY: (y?: number) => {
|
|
44
|
-
initial: {
|
|
45
|
-
y: number;
|
|
46
|
-
};
|
|
47
|
-
animate: {
|
|
48
|
-
y: number;
|
|
49
|
-
};
|
|
50
|
-
exit: {
|
|
51
|
-
y: number;
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
export { AnimatePresence } from "framer-motion";
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type Props = {
|
|
3
|
+
variants?: VariantConfig[];
|
|
4
|
+
direction?: "horizontal" | "vertical";
|
|
5
|
+
interval?: number;
|
|
6
|
+
duration?: number;
|
|
7
|
+
style?: string;
|
|
8
|
+
layout?: boolean;
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
};
|
|
11
|
+
export declare function Animation({ variants, style, direction, interval, duration, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
type VariantConfig = {
|
|
13
|
+
initial?: Record<string, number>;
|
|
14
|
+
animate?: Record<string, number>;
|
|
15
|
+
exit?: Record<string, number>;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Merges multiple variant configs into one.
|
|
19
|
+
*/
|
|
20
|
+
export declare function mergeVariants(...variants: VariantConfig[]): VariantConfig;
|
|
21
|
+
export declare const opacity: (x?: number) => {
|
|
22
|
+
initial: {
|
|
23
|
+
opacity: number;
|
|
24
|
+
};
|
|
25
|
+
animate: {
|
|
26
|
+
opacity: number;
|
|
27
|
+
};
|
|
28
|
+
exit: {
|
|
29
|
+
opacity: number;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
export declare const slideX: (x?: number) => {
|
|
33
|
+
initial: {
|
|
34
|
+
x: number;
|
|
35
|
+
};
|
|
36
|
+
animate: {
|
|
37
|
+
x: number;
|
|
38
|
+
};
|
|
39
|
+
exit: {
|
|
40
|
+
x: number;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
export declare const slideY: (y?: number) => {
|
|
44
|
+
initial: {
|
|
45
|
+
y: number;
|
|
46
|
+
};
|
|
47
|
+
animate: {
|
|
48
|
+
y: number;
|
|
49
|
+
};
|
|
50
|
+
exit: {
|
|
51
|
+
y: number;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
export { AnimatePresence } from "framer-motion";
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { motion } from "framer-motion";
|
|
4
|
-
import { cn } from "@bouko/style";
|
|
5
|
-
export function Animation({ variants = [opacity()], style, direction = "horizontal", interval = 3000, duration = 0.3, ...props }) {
|
|
6
|
-
return (_jsx(motion.div, { className: cn("w-full", style), transition: { duration: duration }, ...mergeVariants(...variants), ...props }
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* Merges multiple variant configs into one.
|
|
10
|
-
*/
|
|
11
|
-
export function mergeVariants(...variants) {
|
|
12
|
-
return variants.reduce((acc, v) => ({
|
|
13
|
-
initial: { ...acc.initial, ...v.initial },
|
|
14
|
-
animate: { ...acc.animate, ...v.animate },
|
|
15
|
-
exit: { ...acc.exit, ...v.exit },
|
|
16
|
-
}), { initial: {}, animate: {}, exit: {} });
|
|
17
|
-
}
|
|
18
|
-
export const opacity = (x = 1) => ({
|
|
19
|
-
initial: { opacity: 0 },
|
|
20
|
-
animate: { opacity: x },
|
|
21
|
-
exit: { opacity: 0 }
|
|
22
|
-
});
|
|
23
|
-
export const slideX = (x = 5) => ({
|
|
24
|
-
initial: { x: x },
|
|
25
|
-
animate: { x: 0 },
|
|
26
|
-
exit: { x: -x }
|
|
27
|
-
});
|
|
28
|
-
export const slideY = (y = 5) => ({
|
|
29
|
-
initial: { y: y },
|
|
30
|
-
animate: { y: 0 },
|
|
31
|
-
exit: { y: -y }
|
|
32
|
-
});
|
|
33
|
-
export { AnimatePresence } from "framer-motion";
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { motion } from "framer-motion";
|
|
4
|
+
import { cn } from "@bouko/style";
|
|
5
|
+
export function Animation({ variants = [opacity()], style, direction = "horizontal", interval = 3000, duration = 0.3, ...props }) {
|
|
6
|
+
return (_jsx(motion.div, { className: cn("w-full", style), transition: { duration: duration }, ...mergeVariants(...variants), ...props }));
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Merges multiple variant configs into one.
|
|
10
|
+
*/
|
|
11
|
+
export function mergeVariants(...variants) {
|
|
12
|
+
return variants.reduce((acc, v) => ({
|
|
13
|
+
initial: { ...acc.initial, ...v.initial },
|
|
14
|
+
animate: { ...acc.animate, ...v.animate },
|
|
15
|
+
exit: { ...acc.exit, ...v.exit },
|
|
16
|
+
}), { initial: {}, animate: {}, exit: {} });
|
|
17
|
+
}
|
|
18
|
+
export const opacity = (x = 1) => ({
|
|
19
|
+
initial: { opacity: 0 },
|
|
20
|
+
animate: { opacity: x },
|
|
21
|
+
exit: { opacity: 0 }
|
|
22
|
+
});
|
|
23
|
+
export const slideX = (x = 5) => ({
|
|
24
|
+
initial: { x: x },
|
|
25
|
+
animate: { x: 0 },
|
|
26
|
+
exit: { x: -x }
|
|
27
|
+
});
|
|
28
|
+
export const slideY = (y = 5) => ({
|
|
29
|
+
initial: { y: y },
|
|
30
|
+
animate: { y: 0 },
|
|
31
|
+
exit: { y: -y }
|
|
32
|
+
});
|
|
33
|
+
export { AnimatePresence } from "framer-motion";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { type Field } from "./form/types";
|
|
2
|
-
export default function Attachment({ id, style, label, value, update, required, note }: Field<File[], File[]>): import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { type Field } from "./form/types";
|
|
2
|
+
export default function Attachment({ id, style, label, value, update, required, note }: Field<File[], File[]>): import("react/jsx-runtime").JSX.Element;
|