my-animated-components 1.2.0 → 1.2.2
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/index.js +1198 -0
- package/package.json +1 -1
- package/tailwind.config.js +1 -1
package/dist/index.js
ADDED
|
@@ -0,0 +1,1198 @@
|
|
|
1
|
+
import React, { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import { motion, AnimatePresence } from 'framer-motion';
|
|
3
|
+
|
|
4
|
+
const motionVariants = {
|
|
5
|
+
null: {},
|
|
6
|
+
fadeIn: {
|
|
7
|
+
hidden: { opacity: 0 },
|
|
8
|
+
visible: { opacity: 1, transition: { duration: 0.5 } },
|
|
9
|
+
},
|
|
10
|
+
zoomIn: {
|
|
11
|
+
hidden: { scale: 0.8, opacity: 0 },
|
|
12
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
|
|
13
|
+
},
|
|
14
|
+
slideUp: {
|
|
15
|
+
hidden: { y: 50, opacity: 0 },
|
|
16
|
+
visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
17
|
+
},
|
|
18
|
+
slideDown: {
|
|
19
|
+
hidden: { y: -50, opacity: 0 },
|
|
20
|
+
visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
21
|
+
},
|
|
22
|
+
slideLeft: {
|
|
23
|
+
hidden: { x: 50, opacity: 0 },
|
|
24
|
+
visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
25
|
+
},
|
|
26
|
+
slideRight: {
|
|
27
|
+
hidden: { x: -50, opacity: 0 },
|
|
28
|
+
visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
29
|
+
},
|
|
30
|
+
bounce: {
|
|
31
|
+
hidden: { scale: 0.8 },
|
|
32
|
+
visible: { scale: 1, transition: { type: 'spring', stiffness: 100 } },
|
|
33
|
+
},
|
|
34
|
+
rotateIn: {
|
|
35
|
+
hidden: { rotate: -90, opacity: 0 },
|
|
36
|
+
visible: { rotate: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
37
|
+
},
|
|
38
|
+
stagger: {
|
|
39
|
+
hidden: { opacity: 0 },
|
|
40
|
+
visible: {
|
|
41
|
+
opacity: 1,
|
|
42
|
+
transition: { staggerChildren: 0.2 },
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
flip: {
|
|
46
|
+
hidden: { rotateY: 90, opacity: 0 },
|
|
47
|
+
visible: { rotateY: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
48
|
+
},
|
|
49
|
+
fadeOut: {
|
|
50
|
+
hidden: { opacity: 1 },
|
|
51
|
+
visible: { opacity: 0, transition: { duration: 0.5 } },
|
|
52
|
+
},
|
|
53
|
+
zoomOut: {
|
|
54
|
+
hidden: { scale: 1, opacity: 1 },
|
|
55
|
+
visible: { scale: 0.8, opacity: 0, transition: { duration: 0.5 } },
|
|
56
|
+
},
|
|
57
|
+
scaleUp: {
|
|
58
|
+
hidden: { scale: 0.5, opacity: 0 },
|
|
59
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
|
|
60
|
+
},
|
|
61
|
+
scaleDown: {
|
|
62
|
+
hidden: { scale: 1.2, opacity: 0 },
|
|
63
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
|
|
64
|
+
},
|
|
65
|
+
fadeInUp: {
|
|
66
|
+
hidden: { opacity: 0, y: 50 },
|
|
67
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
|
|
68
|
+
},
|
|
69
|
+
fadeInDown: {
|
|
70
|
+
hidden: { opacity: 0, y: -50 },
|
|
71
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
|
|
72
|
+
},
|
|
73
|
+
fadeInLeft: {
|
|
74
|
+
hidden: { opacity: 0, x: -50 },
|
|
75
|
+
visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
|
|
76
|
+
},
|
|
77
|
+
fadeInRight: {
|
|
78
|
+
hidden: { opacity: 0, x: 50 },
|
|
79
|
+
visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
|
|
80
|
+
},
|
|
81
|
+
rotateBounce: {
|
|
82
|
+
hidden: { rotate: -45, opacity: 0 },
|
|
83
|
+
visible: { rotate: 0, opacity: 1, transition: { type: 'spring', stiffness: 100 } },
|
|
84
|
+
},
|
|
85
|
+
scaleBounce: {
|
|
86
|
+
hidden: { scale: 0.5 },
|
|
87
|
+
visible: { scale: 1.2, transition: { type: 'spring', stiffness: 100 } },
|
|
88
|
+
},
|
|
89
|
+
fadeInScale: {
|
|
90
|
+
hidden: { opacity: 0, scale: 0.8 },
|
|
91
|
+
visible: { opacity: 1, scale: 1, transition: { duration: 0.5 } },
|
|
92
|
+
},
|
|
93
|
+
bounceOut: {
|
|
94
|
+
hidden: { scale: 1.2 },
|
|
95
|
+
visible: { scale: 0.8, transition: { type: 'spring', stiffness: 100 } },
|
|
96
|
+
},
|
|
97
|
+
shake: {
|
|
98
|
+
hidden: { x: 0 },
|
|
99
|
+
visible: { x: [0, -10, 10, -10, 10, 0], transition: { duration: 0.6, repeat: Infinity } },
|
|
100
|
+
},
|
|
101
|
+
pulse: {
|
|
102
|
+
hidden: { scale: 1 },
|
|
103
|
+
visible: { scale: [1, 1.1, 1], transition: { duration: 1.5, repeat: Infinity } },
|
|
104
|
+
},
|
|
105
|
+
fadeInFast: {
|
|
106
|
+
hidden: { opacity: 0 },
|
|
107
|
+
visible: { opacity: 1, transition: { duration: 0.2 } },
|
|
108
|
+
},
|
|
109
|
+
slideUpFast: {
|
|
110
|
+
hidden: { y: 30, opacity: 0 },
|
|
111
|
+
visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
112
|
+
},
|
|
113
|
+
fadeUp: {
|
|
114
|
+
hidden: { opacity: 0, y: 50 },
|
|
115
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
|
|
116
|
+
},
|
|
117
|
+
zoomInFast: {
|
|
118
|
+
hidden: { scale: 0.6, opacity: 0 },
|
|
119
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
|
|
120
|
+
},
|
|
121
|
+
zoomOutFast: {
|
|
122
|
+
hidden: { scale: 1, opacity: 1 },
|
|
123
|
+
visible: { scale: 0.6, opacity: 0, transition: { duration: 0.3 } },
|
|
124
|
+
},
|
|
125
|
+
slideDownFast: {
|
|
126
|
+
hidden: { y: -30, opacity: 0 },
|
|
127
|
+
visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
128
|
+
},
|
|
129
|
+
rotateOut: {
|
|
130
|
+
hidden: { rotate: 180, opacity: 0 },
|
|
131
|
+
visible: { rotate: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
132
|
+
},
|
|
133
|
+
flipFast: {
|
|
134
|
+
hidden: { rotateY: 90, opacity: 0 },
|
|
135
|
+
visible: { rotateY: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
136
|
+
},
|
|
137
|
+
staggerUp: {
|
|
138
|
+
hidden: { opacity: 0 },
|
|
139
|
+
visible: {
|
|
140
|
+
opacity: 1,
|
|
141
|
+
transition: { staggerChildren: 0.15 },
|
|
142
|
+
},
|
|
143
|
+
},
|
|
144
|
+
flipIn: {
|
|
145
|
+
hidden: { rotateY: 180, opacity: 0 },
|
|
146
|
+
visible: { rotateY: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
147
|
+
},
|
|
148
|
+
fadeInSlow: {
|
|
149
|
+
hidden: { opacity: 0 },
|
|
150
|
+
visible: { opacity: 1, transition: { duration: 1.5 } },
|
|
151
|
+
},
|
|
152
|
+
slideUpSlow: {
|
|
153
|
+
hidden: { y: 50, opacity: 0 },
|
|
154
|
+
visible: { y: 0, opacity: 1, transition: { duration: 1.5 } },
|
|
155
|
+
},
|
|
156
|
+
slideDownSlow: {
|
|
157
|
+
hidden: { y: -50, opacity: 0 },
|
|
158
|
+
visible: { y: 0, opacity: 1, transition: { duration: 1.5 } },
|
|
159
|
+
},
|
|
160
|
+
slideLeftSlow: {
|
|
161
|
+
hidden: { x: 50, opacity: 0 },
|
|
162
|
+
visible: { x: 0, opacity: 1, transition: { duration: 1.5 } },
|
|
163
|
+
},
|
|
164
|
+
slideRightSlow: {
|
|
165
|
+
hidden: { x: -50, opacity: 0 },
|
|
166
|
+
visible: { x: 0, opacity: 1, transition: { duration: 1.5 } },
|
|
167
|
+
},
|
|
168
|
+
bounceSlow: {
|
|
169
|
+
hidden: { scale: 0.8 },
|
|
170
|
+
visible: { scale: 1, transition: { type: 'spring', stiffness: 50 } },
|
|
171
|
+
},
|
|
172
|
+
rotateInSlow: {
|
|
173
|
+
hidden: { rotate: -90, opacity: 0 },
|
|
174
|
+
visible: { rotate: 0, opacity: 1, transition: { duration: 1.5 } },
|
|
175
|
+
},
|
|
176
|
+
staggerSlow: {
|
|
177
|
+
hidden: { opacity: 0 },
|
|
178
|
+
visible: {
|
|
179
|
+
opacity: 1,
|
|
180
|
+
transition: { staggerChildren: 0.5 },
|
|
181
|
+
},
|
|
182
|
+
},
|
|
183
|
+
flipSlow: {
|
|
184
|
+
hidden: { rotateY: 90, opacity: 0 },
|
|
185
|
+
visible: { rotateY: 0, opacity: 1, transition: { duration: 1.5 } },
|
|
186
|
+
},
|
|
187
|
+
scaleBounceSlow: {
|
|
188
|
+
hidden: { scale: 0.6 },
|
|
189
|
+
visible: { scale: 1, transition: { type: 'spring', stiffness: 50 } },
|
|
190
|
+
},
|
|
191
|
+
rotateOutFast: {
|
|
192
|
+
hidden: { rotate: 180, opacity: 0 },
|
|
193
|
+
visible: { rotate: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
194
|
+
},
|
|
195
|
+
scaleUpFast: {
|
|
196
|
+
hidden: { scale: 0.5, opacity: 0 },
|
|
197
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
|
|
198
|
+
},
|
|
199
|
+
scaleDownFast: {
|
|
200
|
+
hidden: { scale: 1.2, opacity: 0 },
|
|
201
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 0.3 } },
|
|
202
|
+
},
|
|
203
|
+
bounceFast: {
|
|
204
|
+
hidden: { scale: 0.8 },
|
|
205
|
+
visible: { scale: 1, transition: { type: 'spring', stiffness: 100 } },
|
|
206
|
+
},
|
|
207
|
+
flipInFast: {
|
|
208
|
+
hidden: { rotateY: 180, opacity: 0 },
|
|
209
|
+
visible: { rotateY: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
210
|
+
},
|
|
211
|
+
fadeInLeftFast: {
|
|
212
|
+
hidden: { opacity: 0, x: -50 },
|
|
213
|
+
visible: { opacity: 1, x: 0, transition: { duration: 0.3 } },
|
|
214
|
+
},
|
|
215
|
+
fadeInRightFast: {
|
|
216
|
+
hidden: { opacity: 0, x: 50 },
|
|
217
|
+
visible: { opacity: 1, x: 0, transition: { duration: 0.3 } },
|
|
218
|
+
},
|
|
219
|
+
fadeInUpFast: {
|
|
220
|
+
hidden: { opacity: 0, y: 30 },
|
|
221
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
|
|
222
|
+
},
|
|
223
|
+
fadeInDownFast: {
|
|
224
|
+
hidden: { opacity: 0, y: -30 },
|
|
225
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
|
|
226
|
+
},
|
|
227
|
+
scaleUpSlow: {
|
|
228
|
+
hidden: { scale: 0.5, opacity: 0 },
|
|
229
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 1.5 } },
|
|
230
|
+
},
|
|
231
|
+
scaleDownSlow: {
|
|
232
|
+
hidden: { scale: 1.2, opacity: 0 },
|
|
233
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 1.5 } },
|
|
234
|
+
},
|
|
235
|
+
rotateInFast: {
|
|
236
|
+
hidden: { rotate: -90, opacity: 0 },
|
|
237
|
+
visible: { rotate: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
238
|
+
},
|
|
239
|
+
staggerChildren: {
|
|
240
|
+
hidden: { opacity: 0 },
|
|
241
|
+
visible: {
|
|
242
|
+
opacity: 1,
|
|
243
|
+
transition: { staggerChildren: 0.25 },
|
|
244
|
+
},
|
|
245
|
+
},
|
|
246
|
+
fadeUpSlow: {
|
|
247
|
+
hidden: { opacity: 0, y: 50 },
|
|
248
|
+
visible: { opacity: 1, y: 0, transition: { duration: 1.5 } },
|
|
249
|
+
},
|
|
250
|
+
slideInFromLeft: {
|
|
251
|
+
hidden: { x: -100, opacity: 0 },
|
|
252
|
+
visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
253
|
+
},
|
|
254
|
+
slideInFromRight: {
|
|
255
|
+
hidden: { x: 100, opacity: 0 },
|
|
256
|
+
visible: { x: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
257
|
+
},
|
|
258
|
+
slideInFromTop: {
|
|
259
|
+
hidden: { y: -100, opacity: 0 },
|
|
260
|
+
visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
261
|
+
},
|
|
262
|
+
slideInFromBottom: {
|
|
263
|
+
hidden: { y: 100, opacity: 0 },
|
|
264
|
+
visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
265
|
+
},
|
|
266
|
+
fadeInSlowFromTop: {
|
|
267
|
+
hidden: { opacity: 0, y: -50 },
|
|
268
|
+
visible: { opacity: 1, y: 0, transition: { duration: 1.5 } },
|
|
269
|
+
},
|
|
270
|
+
fadeInSlowFromBottom: {
|
|
271
|
+
hidden: { opacity: 0, y: 50 },
|
|
272
|
+
visible: { opacity: 1, y: 0, transition: { duration: 1.5 } },
|
|
273
|
+
},
|
|
274
|
+
fadeInSlowFromLeft: {
|
|
275
|
+
hidden: { opacity: 0, x: -50 },
|
|
276
|
+
visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
|
|
277
|
+
},
|
|
278
|
+
fadeInSlowFromRight: {
|
|
279
|
+
hidden: { opacity: 0, x: 50 },
|
|
280
|
+
visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
|
|
281
|
+
},
|
|
282
|
+
bounceIn: {
|
|
283
|
+
hidden: { scale: 0.8 },
|
|
284
|
+
visible: { scale: 1, transition: { type: 'spring', stiffness: 150 } },
|
|
285
|
+
},
|
|
286
|
+
zoomOutSlow: {
|
|
287
|
+
hidden: { scale: 1, opacity: 1 },
|
|
288
|
+
visible: { scale: 0.6, opacity: 0, transition: { duration: 1.5 } },
|
|
289
|
+
},
|
|
290
|
+
fadeInFastFromTop: {
|
|
291
|
+
hidden: { opacity: 0, y: -30 },
|
|
292
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
|
|
293
|
+
},
|
|
294
|
+
fadeInFastFromBottom: {
|
|
295
|
+
hidden: { opacity: 0, y: 30 },
|
|
296
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
|
|
297
|
+
},
|
|
298
|
+
slideInLeftFast: {
|
|
299
|
+
hidden: { x: -50, opacity: 0 },
|
|
300
|
+
visible: { x: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
301
|
+
},
|
|
302
|
+
slideInRightFast: {
|
|
303
|
+
hidden: { x: 50, opacity: 0 },
|
|
304
|
+
visible: { x: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
305
|
+
},
|
|
306
|
+
fadeInRotate: {
|
|
307
|
+
hidden: { opacity: 0, rotate: -45 },
|
|
308
|
+
visible: { opacity: 1, rotate: 0, transition: { duration: 0.5 } },
|
|
309
|
+
},
|
|
310
|
+
scaleInFast: {
|
|
311
|
+
hidden: { scale: 0.8 },
|
|
312
|
+
visible: { scale: 1, transition: { duration: 0.3 } },
|
|
313
|
+
},
|
|
314
|
+
zoomInBig: {
|
|
315
|
+
hidden: { scale: 0.3 },
|
|
316
|
+
visible: { scale: 1, transition: { duration: 1.5 } },
|
|
317
|
+
},
|
|
318
|
+
slideInDiagonal: {
|
|
319
|
+
hidden: { x: -100, y: -100, opacity: 0 },
|
|
320
|
+
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
321
|
+
},
|
|
322
|
+
rotate360: {
|
|
323
|
+
hidden: { rotate: 0, opacity: 0 },
|
|
324
|
+
visible: { rotate: 360, opacity: 1, transition: { duration: 1 } },
|
|
325
|
+
},
|
|
326
|
+
flipInX: {
|
|
327
|
+
hidden: { rotateX: 90, opacity: 0 },
|
|
328
|
+
visible: { rotateX: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
329
|
+
},
|
|
330
|
+
staggerChildrenFast: {
|
|
331
|
+
hidden: { opacity: 0 },
|
|
332
|
+
visible: {
|
|
333
|
+
opacity: 1,
|
|
334
|
+
transition: { staggerChildren: 0.15, duration: 0.3 },
|
|
335
|
+
},
|
|
336
|
+
},
|
|
337
|
+
pulseFast: {
|
|
338
|
+
hidden: { scale: 1 },
|
|
339
|
+
visible: { scale: [1, 1.1, 1], transition: { duration: 0.8, repeat: Infinity } },
|
|
340
|
+
},
|
|
341
|
+
slideInDiagonalFast: {
|
|
342
|
+
hidden: { x: -80, y: -80, opacity: 0 },
|
|
343
|
+
visible: { x: 0, y: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
344
|
+
},
|
|
345
|
+
fadeInRightSlow: {
|
|
346
|
+
hidden: { opacity: 0, x: 50 },
|
|
347
|
+
visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
|
|
348
|
+
},
|
|
349
|
+
zoomOutSlowFromCenter: {
|
|
350
|
+
hidden: { scale: 1.2, opacity: 0 },
|
|
351
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 1.5 } },
|
|
352
|
+
},
|
|
353
|
+
flipBounce: {
|
|
354
|
+
hidden: { rotateY: 90, opacity: 0 },
|
|
355
|
+
visible: { rotateY: 0, opacity: 1, transition: { type: 'spring', stiffness: 150 } },
|
|
356
|
+
},
|
|
357
|
+
slideInFromTopFast: {
|
|
358
|
+
hidden: { y: -50, opacity: 0 },
|
|
359
|
+
visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
360
|
+
},
|
|
361
|
+
fadeInDiagonal: {
|
|
362
|
+
hidden: { opacity: 0, x: -50, y: -50 },
|
|
363
|
+
visible: { opacity: 1, x: 0, y: 0, transition: { duration: 0.5 } },
|
|
364
|
+
},
|
|
365
|
+
zoomInBounce: {
|
|
366
|
+
hidden: { scale: 0.5, opacity: 0 },
|
|
367
|
+
visible: { scale: 1.1, opacity: 1, transition: { type: 'spring', stiffness: 150 } },
|
|
368
|
+
},
|
|
369
|
+
rotateInOut: {
|
|
370
|
+
hidden: { rotate: -180, opacity: 0 },
|
|
371
|
+
visible: { rotate: 0, opacity: 1, transition: { duration: 1 } },
|
|
372
|
+
},
|
|
373
|
+
staggerUpFast: {
|
|
374
|
+
hidden: { opacity: 0 },
|
|
375
|
+
visible: {
|
|
376
|
+
opacity: 1,
|
|
377
|
+
transition: { staggerChildren: 0.1, duration: 0.3 },
|
|
378
|
+
},
|
|
379
|
+
},
|
|
380
|
+
fadeInRotateIn: {
|
|
381
|
+
hidden: { opacity: 0, rotate: -45 },
|
|
382
|
+
visible: { opacity: 1, rotate: 0, transition: { duration: 0.5 } },
|
|
383
|
+
},
|
|
384
|
+
scaleInQuick: {
|
|
385
|
+
hidden: { scale: 0.7, opacity: 0 },
|
|
386
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 0.2 } },
|
|
387
|
+
},
|
|
388
|
+
slideInFromBottomSlow: {
|
|
389
|
+
hidden: { y: 80, opacity: 0 },
|
|
390
|
+
visible: { y: 0, opacity: 1, transition: { duration: 1.5 } },
|
|
391
|
+
},
|
|
392
|
+
flipRotateOut: {
|
|
393
|
+
hidden: { rotateY: 180, opacity: 0 },
|
|
394
|
+
visible: { rotateY: 0, opacity: 1, transition: { duration: 0.5 } },
|
|
395
|
+
},
|
|
396
|
+
slideLeftFast: {
|
|
397
|
+
hidden: { x: -50, opacity: 0 },
|
|
398
|
+
visible: { x: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
399
|
+
},
|
|
400
|
+
zoomInBigFast: {
|
|
401
|
+
hidden: { scale: 0.4, opacity: 0 },
|
|
402
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 0.2 } },
|
|
403
|
+
},
|
|
404
|
+
fadeInUpFastSlow: {
|
|
405
|
+
hidden: { opacity: 0, y: 30 },
|
|
406
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
|
|
407
|
+
},
|
|
408
|
+
rotateOutSlow: {
|
|
409
|
+
hidden: { rotate: 90, opacity: 0 },
|
|
410
|
+
visible: { rotate: 0, opacity: 1, transition: { duration: 1.5 } },
|
|
411
|
+
},
|
|
412
|
+
staggerLeft: {
|
|
413
|
+
hidden: { opacity: 0 },
|
|
414
|
+
visible: {
|
|
415
|
+
opacity: 1,
|
|
416
|
+
transition: { staggerChildren: 0.2, duration: 0.6 },
|
|
417
|
+
},
|
|
418
|
+
},
|
|
419
|
+
rotateOutFastReverse: {
|
|
420
|
+
hidden: { rotate: 180, opacity: 0 },
|
|
421
|
+
visible: { rotate: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
422
|
+
},
|
|
423
|
+
scaleDownBounce: {
|
|
424
|
+
hidden: { scale: 1.2 },
|
|
425
|
+
visible: { scale: 0.9, transition: { type: 'spring', stiffness: 100 } },
|
|
426
|
+
},
|
|
427
|
+
fadeInFastFromLeft: {
|
|
428
|
+
hidden: { opacity: 0, x: -50 },
|
|
429
|
+
visible: { opacity: 1, x: 0, transition: { duration: 0.2 } },
|
|
430
|
+
},
|
|
431
|
+
fadeInFastFromRight: {
|
|
432
|
+
hidden: { opacity: 0, x: 50 },
|
|
433
|
+
visible: { opacity: 1, x: 0, transition: { duration: 0.2 } },
|
|
434
|
+
},
|
|
435
|
+
bounceSlowFast: {
|
|
436
|
+
hidden: { scale: 0.6 },
|
|
437
|
+
visible: { scale: 1, transition: { type: 'spring', stiffness: 75 } },
|
|
438
|
+
},
|
|
439
|
+
slideInFromTopFastReverse: {
|
|
440
|
+
hidden: { y: -80, opacity: 0 },
|
|
441
|
+
visible: { y: 0, opacity: 1, transition: { duration: 0.3 } },
|
|
442
|
+
},
|
|
443
|
+
fadeOutFast: {
|
|
444
|
+
hidden: { opacity: 1 },
|
|
445
|
+
visible: { opacity: 0, transition: { duration: 0.3 } },
|
|
446
|
+
},
|
|
447
|
+
flipScaleUp: {
|
|
448
|
+
hidden: { rotateY: 90, opacity: 0, scale: 0.7 },
|
|
449
|
+
visible: { rotateY: 0, opacity: 1, scale: 1, transition: { duration: 0.5 } },
|
|
450
|
+
},
|
|
451
|
+
slideOutRight: {
|
|
452
|
+
hidden: { x: 0, opacity: 1 },
|
|
453
|
+
visible: { x: 100, opacity: 0, transition: { duration: 0.5 } },
|
|
454
|
+
},
|
|
455
|
+
zoomOutBounce: {
|
|
456
|
+
hidden: { scale: 1, opacity: 1 },
|
|
457
|
+
visible: { scale: 0.5, opacity: 0, transition: { type: 'spring', stiffness: 150 } },
|
|
458
|
+
},
|
|
459
|
+
fadeUpReverse: {
|
|
460
|
+
hidden: { opacity: 0, y: -50 },
|
|
461
|
+
visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
|
|
462
|
+
},
|
|
463
|
+
staggerUpReverse: {
|
|
464
|
+
hidden: { opacity: 0 },
|
|
465
|
+
visible: {
|
|
466
|
+
opacity: 1,
|
|
467
|
+
transition: { staggerChildren: 0.2, duration: 0.4 },
|
|
468
|
+
},
|
|
469
|
+
},
|
|
470
|
+
scaleInFromLeft: {
|
|
471
|
+
hidden: { scale: 0.7, opacity: 0 },
|
|
472
|
+
visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } },
|
|
473
|
+
},
|
|
474
|
+
flipOut: {
|
|
475
|
+
hidden: { rotateY: 0, opacity: 1 },
|
|
476
|
+
visible: { rotateY: 90, opacity: 0, transition: { duration: 0.3 } },
|
|
477
|
+
},
|
|
478
|
+
};
|
|
479
|
+
|
|
480
|
+
const Button = ({ children, className = '', color = 'primary', size = 'md', onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', // Default motion variant
|
|
481
|
+
}) => {
|
|
482
|
+
const baseClasses = 'font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2';
|
|
483
|
+
const colorClasses = {
|
|
484
|
+
primary: {
|
|
485
|
+
solid: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
|
|
486
|
+
outline: 'border border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
|
|
487
|
+
ghost: 'text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
|
|
488
|
+
},
|
|
489
|
+
secondary: {
|
|
490
|
+
solid: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
|
|
491
|
+
outline: 'border border-gray-600 text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
|
|
492
|
+
ghost: 'text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
|
|
493
|
+
},
|
|
494
|
+
success: {
|
|
495
|
+
solid: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500',
|
|
496
|
+
outline: 'border border-green-600 text-green-600 hover:bg-green-50 focus:ring-green-500',
|
|
497
|
+
ghost: 'text-green-600 hover:bg-green-50 focus:ring-green-500',
|
|
498
|
+
},
|
|
499
|
+
danger: {
|
|
500
|
+
solid: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
|
|
501
|
+
outline: 'border border-red-600 text-red-600 hover:bg-red-50 focus:ring-red-500',
|
|
502
|
+
ghost: 'text-red-600 hover:bg-red-50 focus:ring-red-500',
|
|
503
|
+
},
|
|
504
|
+
warning: {
|
|
505
|
+
solid: 'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400',
|
|
506
|
+
outline: 'border border-yellow-500 text-yellow-500 hover:bg-yellow-50 focus:ring-yellow-400',
|
|
507
|
+
ghost: 'text-yellow-500 hover:bg-yellow-50 focus:ring-yellow-400',
|
|
508
|
+
},
|
|
509
|
+
info: {
|
|
510
|
+
solid: 'bg-blue-400 text-white hover:bg-blue-500 focus:ring-blue-300',
|
|
511
|
+
outline: 'border border-blue-400 text-blue-400 hover:bg-blue-50 focus:ring-blue-300',
|
|
512
|
+
ghost: 'text-blue-400 hover:bg-blue-50 focus:ring-blue-300',
|
|
513
|
+
},
|
|
514
|
+
};
|
|
515
|
+
const sizeClasses = {
|
|
516
|
+
xs: 'px-2.5 py-1.5 text-xs',
|
|
517
|
+
sm: 'px-3 py-2 text-sm',
|
|
518
|
+
md: 'px-4 py-2 text-base',
|
|
519
|
+
lg: 'px-4 py-2 text-lg',
|
|
520
|
+
xl: 'px-6 py-3 text-xl',
|
|
521
|
+
};
|
|
522
|
+
return (React.createElement(motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, children));
|
|
523
|
+
};
|
|
524
|
+
|
|
525
|
+
const IconButton = ({ className = '', color = 'primary', size = 'md', icon, onClick, disabled = false, variant = 'solid', motionVariant = 'fadeIn', // Default motion variant
|
|
526
|
+
}) => {
|
|
527
|
+
const baseClasses = 'rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2';
|
|
528
|
+
const colorClasses = {
|
|
529
|
+
primary: {
|
|
530
|
+
solid: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
|
|
531
|
+
outline: 'border border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
|
|
532
|
+
ghost: 'text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
|
|
533
|
+
},
|
|
534
|
+
secondary: {
|
|
535
|
+
solid: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
|
|
536
|
+
outline: 'border border-gray-600 text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
|
|
537
|
+
ghost: 'text-gray-600 hover:bg-gray-50 focus:ring-gray-500',
|
|
538
|
+
},
|
|
539
|
+
success: {
|
|
540
|
+
solid: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500',
|
|
541
|
+
outline: 'border border-green-600 text-green-600 hover:bg-green-50 focus:ring-green-500',
|
|
542
|
+
ghost: 'text-green-600 hover:bg-green-50 focus:ring-green-500',
|
|
543
|
+
},
|
|
544
|
+
danger: {
|
|
545
|
+
solid: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
|
|
546
|
+
outline: 'border border-red-600 text-red-600 hover:bg-red-50 focus:ring-red-500',
|
|
547
|
+
ghost: 'text-red-600 hover:bg-red-50 focus:ring-red-500',
|
|
548
|
+
},
|
|
549
|
+
warning: {
|
|
550
|
+
solid: 'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400',
|
|
551
|
+
outline: 'border border-yellow-500 text-yellow-500 hover:bg-yellow-50 focus:ring-yellow-400',
|
|
552
|
+
ghost: 'text-yellow-500 hover:bg-yellow-50 focus:ring-yellow-400',
|
|
553
|
+
},
|
|
554
|
+
info: {
|
|
555
|
+
solid: 'bg-blue-400 text-white hover:bg-blue-500 focus:ring-blue-300',
|
|
556
|
+
outline: 'border border-blue-400 text-blue-400 hover:bg-blue-50 focus:ring-blue-300',
|
|
557
|
+
ghost: 'text-blue-400 hover:bg-blue-50 focus:ring-blue-300',
|
|
558
|
+
},
|
|
559
|
+
};
|
|
560
|
+
const sizeClasses = {
|
|
561
|
+
xs: 'p-1',
|
|
562
|
+
sm: 'p-1.5',
|
|
563
|
+
md: 'p-2',
|
|
564
|
+
lg: 'p-2.5',
|
|
565
|
+
xl: 'p-3',
|
|
566
|
+
};
|
|
567
|
+
return (React.createElement(motion.button, { className: `${baseClasses} ${colorClasses[color][variant]} ${sizeClasses[size]} ${className}`, onClick: onClick, disabled: disabled, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", whileHover: { scale: 1.1 }, whileTap: { scale: 0.95 } }, icon));
|
|
568
|
+
};
|
|
569
|
+
|
|
570
|
+
const Accordion = ({ className = '', items, color = 'primary', variant = 'solid', motionVariant = 'fadeIn', }) => {
|
|
571
|
+
const [openIndex, setOpenIndex] = useState(null);
|
|
572
|
+
const toggleItem = (index) => {
|
|
573
|
+
setOpenIndex(openIndex === index ? null : index);
|
|
574
|
+
};
|
|
575
|
+
const colors = {
|
|
576
|
+
primary: {
|
|
577
|
+
solid: 'bg-blue-100 border-blue-400 text-blue-900',
|
|
578
|
+
outline: 'border-blue-400 text-blue-600',
|
|
579
|
+
ghost: 'text-blue-600 hover:bg-blue-50',
|
|
580
|
+
},
|
|
581
|
+
secondary: {
|
|
582
|
+
solid: 'bg-gray-100 border-gray-400 text-gray-900',
|
|
583
|
+
outline: 'border-gray-400 text-gray-600',
|
|
584
|
+
ghost: 'text-gray-600 hover:bg-gray-50',
|
|
585
|
+
},
|
|
586
|
+
danger: {
|
|
587
|
+
solid: 'bg-red-100 border-red-400 text-red-900',
|
|
588
|
+
outline: 'border-red-400 text-red-600',
|
|
589
|
+
ghost: 'text-red-600 hover:bg-red-50',
|
|
590
|
+
},
|
|
591
|
+
success: {
|
|
592
|
+
solid: 'bg-green-100 border-green-400 text-green-900',
|
|
593
|
+
outline: 'border-green-400 text-green-600',
|
|
594
|
+
ghost: 'text-green-600 hover:bg-green-50',
|
|
595
|
+
},
|
|
596
|
+
info: {
|
|
597
|
+
solid: 'bg-blue-100 border-blue-400 text-blue-900',
|
|
598
|
+
outline: 'border-blue-400 text-blue-600',
|
|
599
|
+
ghost: 'text-blue-600 hover:bg-blue-50',
|
|
600
|
+
},
|
|
601
|
+
warning: {
|
|
602
|
+
solid: 'bg-yellow-100 border-yellow-400 text-yellow-900',
|
|
603
|
+
outline: 'border-yellow-400 text-yellow-600',
|
|
604
|
+
ghost: 'text-yellow-600 hover:bg-yellow-50',
|
|
605
|
+
},
|
|
606
|
+
};
|
|
607
|
+
const variantClasses = colors[color][variant];
|
|
608
|
+
return (React.createElement("div", { className: `space-y-2 ${className}` }, items.map((item, index) => (React.createElement("div", { key: index, className: `border rounded-md ${variantClasses}` },
|
|
609
|
+
React.createElement("button", { className: `flex justify-between items-center w-full px-4 py-2 text-left focus:outline-none`, onClick: () => toggleItem(index) },
|
|
610
|
+
React.createElement("span", null, item.title),
|
|
611
|
+
React.createElement(motion.svg, { className: "w-5 h-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", animate: { rotate: openIndex === index ? 180 : 0 }, transition: { duration: 0.3 } },
|
|
612
|
+
React.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }))),
|
|
613
|
+
React.createElement(AnimatePresence, null, openIndex === index && (React.createElement(motion.div, { variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", className: "px-4 py-2 border-t" }, item.content))))))));
|
|
614
|
+
};
|
|
615
|
+
|
|
616
|
+
const Alert = ({ children, className = '', color = 'primary', onClose, motionVariant = 'fadeIn', // Default motion variant
|
|
617
|
+
}) => {
|
|
618
|
+
const colorClasses = {
|
|
619
|
+
primary: 'bg-blue-100 text-blue-700',
|
|
620
|
+
secondary: 'bg-gray-100 text-gray-700',
|
|
621
|
+
success: 'bg-green-100 text-green-700',
|
|
622
|
+
danger: 'bg-red-100 text-red-700',
|
|
623
|
+
warning: 'bg-yellow-100 text-yellow-700',
|
|
624
|
+
info: 'bg-indigo-100 text-indigo-700',
|
|
625
|
+
};
|
|
626
|
+
return (React.createElement(motion.div, { className: `p-4 rounded-md ${colorClasses[color]} ${className}`, role: "alert", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } },
|
|
627
|
+
React.createElement("div", { className: "flex" },
|
|
628
|
+
React.createElement("div", { className: "flex-grow" }, children),
|
|
629
|
+
onClose && (React.createElement("button", { type: "button", className: "ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 inline-flex h-8 w-8", onClick: onClose, "aria-label": "Close" },
|
|
630
|
+
React.createElement("span", { className: "sr-only" }, "Close"),
|
|
631
|
+
React.createElement("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
|
|
632
|
+
React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })))))));
|
|
633
|
+
};
|
|
634
|
+
|
|
635
|
+
const Avatar = ({ className = '', size = 'md', src, alt, initials }) => {
|
|
636
|
+
const sizeClasses = {
|
|
637
|
+
xs: 'w-6 h-6 text-xs',
|
|
638
|
+
sm: 'w-8 h-8 text-sm',
|
|
639
|
+
md: 'w-10 h-10 text-base',
|
|
640
|
+
lg: 'w-12 h-12 text-lg',
|
|
641
|
+
xl: 'w-14 h-14 text-xl',
|
|
642
|
+
};
|
|
643
|
+
return (React.createElement("div", { className: `relative inline-flex items-center justify-center ${sizeClasses[size]} ${className} rounded-full bg-gray-200 overflow-hidden` }, src ? (React.createElement("img", { src: src, alt: alt || 'Avatar', className: "w-full h-full object-cover" })) : (React.createElement("span", { className: "font-medium text-gray-600" }, initials))));
|
|
644
|
+
};
|
|
645
|
+
|
|
646
|
+
const Badge = ({ children, className = '', color = 'primary', size = 'md', motionVariant = 'fadeIn', // Default motion variant
|
|
647
|
+
}) => {
|
|
648
|
+
// Define the colors
|
|
649
|
+
const colorStyles = {
|
|
650
|
+
primary: '#E0F7FA', // bg-blue-100
|
|
651
|
+
secondary: '#F1F1F1', // bg-gray-100
|
|
652
|
+
success: '#E8F5E9', // bg-green-100
|
|
653
|
+
danger: '#FFEBEE', // bg-red-100
|
|
654
|
+
warning: '#FFFDE7', // bg-yellow-100
|
|
655
|
+
info: '#E8EAF6', // bg-indigo-100
|
|
656
|
+
};
|
|
657
|
+
const textColor = {
|
|
658
|
+
primary: '#00796B', // text-blue-800
|
|
659
|
+
secondary: '#757575', // text-gray-800
|
|
660
|
+
success: '#388E3C', // text-green-800
|
|
661
|
+
danger: '#C62828', // text-red-800
|
|
662
|
+
warning: '#FBC02D', // text-yellow-800
|
|
663
|
+
info: '#1976D2', // text-indigo-800
|
|
664
|
+
};
|
|
665
|
+
// Define the sizes
|
|
666
|
+
const sizeStyles = {
|
|
667
|
+
xs: { padding: '0.125rem 0.5rem', fontSize: '0.75rem' },
|
|
668
|
+
sm: { padding: '0.25rem 0.75rem', fontSize: '0.875rem' },
|
|
669
|
+
md: { padding: '0.375rem 1rem', fontSize: '1rem' },
|
|
670
|
+
lg: { padding: '0.5rem 1.25rem', fontSize: '1.125rem' },
|
|
671
|
+
xl: { padding: '0.625rem 1.5rem', fontSize: '1.25rem' },
|
|
672
|
+
};
|
|
673
|
+
// Generate custom styles dynamically
|
|
674
|
+
const customStyle = {
|
|
675
|
+
backgroundColor: colorStyles[color] || colorStyles.primary,
|
|
676
|
+
color: textColor[color] || textColor.primary,
|
|
677
|
+
padding: sizeStyles[size].padding,
|
|
678
|
+
fontSize: sizeStyles[size].fontSize,
|
|
679
|
+
};
|
|
680
|
+
return (React.createElement(motion.span, { className: `inline-flex items-center font-medium rounded-full ${className}`, style: customStyle, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
|
|
681
|
+
};
|
|
682
|
+
|
|
683
|
+
const Breadcrumb = ({ className = '', items, motionVariant = 'fadeIn' }) => {
|
|
684
|
+
return (React.createElement(motion.nav, { className: `flex ${className}`, "aria-label": "Breadcrumb", variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } },
|
|
685
|
+
React.createElement("ol", { className: "inline-flex items-center space-x-1 md:space-x-3" }, items.map((item, index) => (React.createElement("li", { key: index, className: "inline-flex items-center" },
|
|
686
|
+
index > 0 && (React.createElement("svg", { className: "w-6 h-6 text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
|
|
687
|
+
React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }))),
|
|
688
|
+
React.createElement("a", { href: item.href, className: `ml-1 text-sm font-medium ${index === items.length - 1
|
|
689
|
+
? 'text-gray-500 hover:text-gray-700'
|
|
690
|
+
: 'text-blue-600 hover:text-blue-800'}` }, item.label)))))));
|
|
691
|
+
};
|
|
692
|
+
|
|
693
|
+
const Card = ({ children, className = '', motionVariant = 'fadeIn' }) => {
|
|
694
|
+
return (React.createElement(motion.div, { className: `bg-white shadow rounded-lg overflow-hidden ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
|
|
695
|
+
};
|
|
696
|
+
|
|
697
|
+
const CardBody = ({ children, className = '', motionVariant = 'fadeIn' }) => {
|
|
698
|
+
return (React.createElement(motion.div, { className: `px-4 py-5 sm:p-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
|
|
699
|
+
};
|
|
700
|
+
|
|
701
|
+
const CardFooter = ({ children, className = '', motionVariant = 'fadeIn' }) => {
|
|
702
|
+
return (React.createElement(motion.div, { className: `px-4 py-4 sm:px-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
|
|
703
|
+
};
|
|
704
|
+
|
|
705
|
+
const CardHeader = ({ children, className = '', motionVariant = 'fadeIn' }) => {
|
|
706
|
+
return (React.createElement(motion.div, { className: `px-4 py-5 sm:px-6 ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children));
|
|
707
|
+
};
|
|
708
|
+
|
|
709
|
+
const Dropdown = ({ children, className = '', trigger, motionVariant = 'fadeIn' }) => {
|
|
710
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
711
|
+
const dropdownRef = useRef(null);
|
|
712
|
+
useEffect(() => {
|
|
713
|
+
const handleClickOutside = (event) => {
|
|
714
|
+
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
715
|
+
setIsOpen(false);
|
|
716
|
+
}
|
|
717
|
+
};
|
|
718
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
719
|
+
return () => {
|
|
720
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
721
|
+
};
|
|
722
|
+
}, []);
|
|
723
|
+
return (React.createElement("div", { className: `relative inline-block text-left ${className}`, ref: dropdownRef },
|
|
724
|
+
React.createElement("div", null,
|
|
725
|
+
React.createElement("button", { type: "button", onClick: () => setIsOpen(prev => !prev) }, trigger),
|
|
726
|
+
React.createElement(AnimatePresence, null, isOpen && (React.createElement(motion.div, { variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: 0.3 } }, children))))));
|
|
727
|
+
};
|
|
728
|
+
|
|
729
|
+
const DropdownItem = ({ children, className = '' }) => {
|
|
730
|
+
return (React.createElement("a", { href: "#", className: `block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 ${className}`, role: "menuitem" }, children));
|
|
731
|
+
};
|
|
732
|
+
|
|
733
|
+
const Checkbox = ({ className = '', label, checked, onChange, color = 'primary', // Default color
|
|
734
|
+
motionVariant = 'fadeIn', // Default motion variant
|
|
735
|
+
}) => {
|
|
736
|
+
const colorClasses = {
|
|
737
|
+
primary: 'text-blue-600',
|
|
738
|
+
secondary: 'text-gray-600',
|
|
739
|
+
success: 'text-green-600',
|
|
740
|
+
danger: 'text-red-600',
|
|
741
|
+
warning: 'text-yellow-500',
|
|
742
|
+
info: 'text-blue-400',
|
|
743
|
+
};
|
|
744
|
+
return (React.createElement(motion.label, { className: `inline-flex items-center ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
|
|
745
|
+
React.createElement("input", { type: "checkbox", className: `form-checkbox h-5 w-5 ${colorClasses[color]}`, checked: checked, onChange: onChange }),
|
|
746
|
+
React.createElement("span", { className: "ml-2 text-gray-700" }, label)));
|
|
747
|
+
};
|
|
748
|
+
|
|
749
|
+
const FileUpload = ({ className = '', onChange, accept, multiple, buttonColor = 'primary', // Default button color
|
|
750
|
+
motionVariant = 'fadeIn', // Default motion variant
|
|
751
|
+
}) => {
|
|
752
|
+
const fileInputRef = useRef(null);
|
|
753
|
+
const handleClick = () => {
|
|
754
|
+
fileInputRef.current?.click();
|
|
755
|
+
};
|
|
756
|
+
const handleChange = (event) => {
|
|
757
|
+
const file = event.target.files?.[0] || null;
|
|
758
|
+
onChange(file);
|
|
759
|
+
};
|
|
760
|
+
const buttonColorClasses = {
|
|
761
|
+
primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
|
|
762
|
+
secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
|
|
763
|
+
success: 'bg-green-600 text-white hover:bg-green-700 focus:ring-green-500',
|
|
764
|
+
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
|
|
765
|
+
warning: 'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-400',
|
|
766
|
+
info: 'bg-blue-400 text-white hover:bg-blue-500 focus:ring-blue-300',
|
|
767
|
+
};
|
|
768
|
+
return (React.createElement(motion.div, { className: `flex items-center ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
|
|
769
|
+
React.createElement("button", { type: "button", onClick: handleClick, className: `px-4 py-2 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 ${buttonColorClasses[buttonColor]}` }, "Choose File"),
|
|
770
|
+
React.createElement("input", { type: "file", ref: fileInputRef, onChange: handleChange, accept: accept, multiple: multiple, className: "hidden" })));
|
|
771
|
+
};
|
|
772
|
+
|
|
773
|
+
const Input = ({ className = '', size = 'md', type = 'text', placeholder, value, onChange, }) => {
|
|
774
|
+
const sizeClasses = {
|
|
775
|
+
xs: 'px-2 py-1 text-xs',
|
|
776
|
+
sm: 'px-3 py-2 text-sm',
|
|
777
|
+
md: 'px-4 py-2 text-base',
|
|
778
|
+
lg: 'px-4 py-3 text-lg',
|
|
779
|
+
xl: 'px-5 py-4 text-xl',
|
|
780
|
+
};
|
|
781
|
+
return (React.createElement(motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } },
|
|
782
|
+
React.createElement("input", { type: type, className: `w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${sizeClasses[size]} ${className}`, placeholder: placeholder, value: value, onChange: onChange })));
|
|
783
|
+
};
|
|
784
|
+
|
|
785
|
+
const Radio = ({ className = '', label, name, value, checked, onChange, color = 'primary', size = 'md', motionVariant = 'fadeIn', // Default motion variant
|
|
786
|
+
}) => {
|
|
787
|
+
const baseClasses = 'inline-flex items-center';
|
|
788
|
+
const colorClasses = {
|
|
789
|
+
primary: 'text-blue-600',
|
|
790
|
+
secondary: 'text-gray-600',
|
|
791
|
+
success: 'text-green-600',
|
|
792
|
+
danger: 'text-red-600',
|
|
793
|
+
warning: 'text-yellow-500',
|
|
794
|
+
info: 'text-blue-400',
|
|
795
|
+
};
|
|
796
|
+
const sizeClasses = {
|
|
797
|
+
xs: 'h-4 w-4',
|
|
798
|
+
sm: 'h-5 w-5',
|
|
799
|
+
md: 'h-6 w-6',
|
|
800
|
+
lg: 'h-7 w-7',
|
|
801
|
+
xl: 'h-8 w-8',
|
|
802
|
+
};
|
|
803
|
+
return (React.createElement(motion.label, { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
|
|
804
|
+
React.createElement("input", { type: "radio", className: "form-radio", name: name, value: value, checked: checked, onChange: onChange }),
|
|
805
|
+
React.createElement("span", { className: "ml-2 text-gray-700" }, label)));
|
|
806
|
+
};
|
|
807
|
+
|
|
808
|
+
const Select = ({ className = '', size = 'md', options, value, onChange, color = 'primary', motionVariant = 'fadeIn', // Default motion variant
|
|
809
|
+
}) => {
|
|
810
|
+
const baseClasses = 'w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2';
|
|
811
|
+
const colorClasses = {
|
|
812
|
+
primary: 'border-blue-600 focus:ring-blue-500 text-blue-600',
|
|
813
|
+
secondary: 'border-gray-600 focus:ring-gray-500 text-gray-600',
|
|
814
|
+
success: 'border-green-600 focus:ring-green-500 text-green-600',
|
|
815
|
+
danger: 'border-red-600 focus:ring-red-500 text-red-600',
|
|
816
|
+
warning: 'border-yellow-500 focus:ring-yellow-400 text-yellow-500',
|
|
817
|
+
info: 'border-blue-400 focus:ring-blue-300 text-blue-400',
|
|
818
|
+
};
|
|
819
|
+
const sizeClasses = {
|
|
820
|
+
xs: 'px-2 py-1 text-xs',
|
|
821
|
+
sm: 'px-3 py-2 text-sm',
|
|
822
|
+
md: 'px-4 py-2 text-base',
|
|
823
|
+
lg: 'px-4 py-3 text-lg',
|
|
824
|
+
xl: 'px-5 py-4 text-xl',
|
|
825
|
+
};
|
|
826
|
+
return (React.createElement(motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
|
|
827
|
+
React.createElement("select", { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, value: value, onChange: onChange }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label))))));
|
|
828
|
+
};
|
|
829
|
+
|
|
830
|
+
const Switch = ({ className = '', checked, onChange, label, color = 'primary', motionVariant = 'fadeIn', // Default motion variant
|
|
831
|
+
}) => {
|
|
832
|
+
const baseClasses = 'inline-flex items-center cursor-pointer';
|
|
833
|
+
const colorClasses = {
|
|
834
|
+
primary: 'bg-blue-600',
|
|
835
|
+
secondary: 'bg-gray-600',
|
|
836
|
+
success: 'bg-green-600',
|
|
837
|
+
danger: 'bg-red-600',
|
|
838
|
+
warning: 'bg-yellow-500',
|
|
839
|
+
info: 'bg-blue-400',
|
|
840
|
+
};
|
|
841
|
+
return (React.createElement(motion.label, { className: `${baseClasses} ${className}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
|
|
842
|
+
React.createElement("div", { className: "relative" },
|
|
843
|
+
React.createElement("input", { type: "checkbox", className: "sr-only", checked: checked, onChange: (e) => onChange(e.target.checked) }),
|
|
844
|
+
React.createElement("div", { className: `w-10 h-6 bg-gray-200 rounded-full shadow-inner ${checked ? colorClasses[color] : ''}` }),
|
|
845
|
+
React.createElement("div", { className: `absolute w-4 h-4 bg-white rounded-full shadow inset-y-1 left-1 transition-transform duration-200 ease-in-out ${checked ? 'transform translate-x-4' : ''}` })),
|
|
846
|
+
label && React.createElement("span", { className: "ml-3 text-sm font-medium text-gray-900" }, label)));
|
|
847
|
+
};
|
|
848
|
+
|
|
849
|
+
const Textarea = ({ className = '', size = 'md', placeholder, value, onChange, rows = 4, color = 'primary', motionVariant = 'fadeIn', // Default motion variant
|
|
850
|
+
}) => {
|
|
851
|
+
const baseClasses = 'w-full border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
|
|
852
|
+
const colorClasses = {
|
|
853
|
+
primary: 'focus:ring-blue-500 focus:border-blue-500',
|
|
854
|
+
secondary: 'focus:ring-gray-500 focus:border-gray-500',
|
|
855
|
+
success: 'focus:ring-green-500 focus:border-green-500',
|
|
856
|
+
danger: 'focus:ring-red-500 focus:border-red-500',
|
|
857
|
+
warning: 'focus:ring-yellow-400 focus:border-yellow-400',
|
|
858
|
+
info: 'focus:ring-blue-300 focus:border-blue-300',
|
|
859
|
+
};
|
|
860
|
+
const sizeClasses = {
|
|
861
|
+
xs: 'px-2 py-1 text-xs',
|
|
862
|
+
sm: 'px-3 py-2 text-sm',
|
|
863
|
+
md: 'px-4 py-2 text-base',
|
|
864
|
+
lg: 'px-4 py-3 text-lg',
|
|
865
|
+
xl: 'px-5 py-4 text-xl',
|
|
866
|
+
};
|
|
867
|
+
return (React.createElement(motion.div, { initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, variants: motionVariants[motionVariant], transition: { duration: 0.3 } },
|
|
868
|
+
React.createElement("textarea", { className: `${baseClasses} ${colorClasses[color]} ${sizeClasses[size]} ${className}`, placeholder: placeholder, value: value, onChange: onChange, rows: rows })));
|
|
869
|
+
};
|
|
870
|
+
|
|
871
|
+
const Container = ({ children, className = '', fluid = false, motionVariant = 'fadeIn' }) => {
|
|
872
|
+
const containerClass = fluid ? 'w-full' : 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8';
|
|
873
|
+
return (React.createElement(motion.div, { className: `${containerClass} ${className}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", exit: "hidden" }, children));
|
|
874
|
+
};
|
|
875
|
+
|
|
876
|
+
const Flex = ({ children, className = '', direction = 'row', justify = 'start', align = 'start', wrap = false, }) => {
|
|
877
|
+
const flexClass = `
|
|
878
|
+
flex
|
|
879
|
+
${direction === 'col' ? 'flex-col' : 'flex-row'}
|
|
880
|
+
${`justify-${justify}`}
|
|
881
|
+
${`items-${align}`}
|
|
882
|
+
${wrap ? 'flex-wrap' : 'flex-nowrap'}
|
|
883
|
+
`;
|
|
884
|
+
return (React.createElement("div", { className: `${flexClass} ${className}` }, children));
|
|
885
|
+
};
|
|
886
|
+
|
|
887
|
+
const Grid = ({ children, className = '', cols = 3, gap = 4 }) => {
|
|
888
|
+
return (React.createElement("div", { className: `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${cols} gap-${gap} ${className}` }, children));
|
|
889
|
+
};
|
|
890
|
+
|
|
891
|
+
const List = ({ children, className = '', as = 'ul' }) => {
|
|
892
|
+
const Tag = as;
|
|
893
|
+
return (React.createElement(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 } },
|
|
894
|
+
React.createElement(Tag, { className: `space-y-1 ${className}` }, children)));
|
|
895
|
+
};
|
|
896
|
+
|
|
897
|
+
const ListItem = ({ children, className = '' }) => {
|
|
898
|
+
return (React.createElement(motion.li, { className: className, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } }, children));
|
|
899
|
+
};
|
|
900
|
+
|
|
901
|
+
const Modal = ({ children, className = '', isOpen, onClose }) => {
|
|
902
|
+
return (React.createElement(AnimatePresence, null, isOpen && (React.createElement(motion.div, { className: "fixed inset-0 z-50 overflow-y-auto", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } },
|
|
903
|
+
React.createElement("div", { className: "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" },
|
|
904
|
+
React.createElement("div", { className: "fixed inset-0 transition-opacity", "aria-hidden": "true" },
|
|
905
|
+
React.createElement("div", { className: "absolute inset-0 bg-gray-500 opacity-75", onClick: onClose })),
|
|
906
|
+
React.createElement("span", { className: "hidden sm:inline-block sm:align-middle sm:h-screen", "aria-hidden": "true" }, "\u200B"),
|
|
907
|
+
React.createElement(motion.div, { className: `inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full ${className}`, initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 } }, children))))));
|
|
908
|
+
};
|
|
909
|
+
|
|
910
|
+
const ModalBody = ({ children, className = '' }) => {
|
|
911
|
+
return (React.createElement("div", { className: `px-4 pt-5 pb-4 sm:p-6 sm:pb-4 ${className}` }, children));
|
|
912
|
+
};
|
|
913
|
+
|
|
914
|
+
const ModalFooter = ({ children, className = '' }) => {
|
|
915
|
+
return (React.createElement("div", { className: `px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse ${className}` }, children));
|
|
916
|
+
};
|
|
917
|
+
|
|
918
|
+
const ModalHeader = ({ children, className = '' }) => {
|
|
919
|
+
return (React.createElement("div", { className: `px-4 pt-5 pb-4 sm:p-6 sm:pb-4 ${className}` },
|
|
920
|
+
React.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900" }, children)));
|
|
921
|
+
};
|
|
922
|
+
|
|
923
|
+
const NavItem = ({ children, className = '', href, active = false, size = 'md', motionVariant = 'fadeIn', }) => {
|
|
924
|
+
const activeClass = active ? 'text-gray-900 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700';
|
|
925
|
+
const sizeClasses = {
|
|
926
|
+
xs: 'text-xs px-1 py-0.5',
|
|
927
|
+
sm: 'text-sm px-2 py-1',
|
|
928
|
+
md: 'text-base px-3 py-2',
|
|
929
|
+
lg: 'text-lg px-4 py-3',
|
|
930
|
+
xl: 'text-xl px-5 py-4',
|
|
931
|
+
};
|
|
932
|
+
return (React.createElement(motion.a, { href: href, className: `inline-flex items-center ${sizeClasses[size]} ${activeClass} ${className}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, children));
|
|
933
|
+
};
|
|
934
|
+
|
|
935
|
+
const Navbar = ({ children, className = '', brand }) => {
|
|
936
|
+
return (React.createElement(motion.nav, { className: `bg-white shadow ${className}`, initial: { opacity: 0, y: -50 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 } },
|
|
937
|
+
React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" },
|
|
938
|
+
React.createElement("div", { className: "flex justify-between h-16" },
|
|
939
|
+
React.createElement("div", { className: "flex-shrink-0 flex items-center" }, brand),
|
|
940
|
+
React.createElement("div", { className: "flex items-center" }, children)))));
|
|
941
|
+
};
|
|
942
|
+
|
|
943
|
+
const Offcanvas = ({ children, className = '', isOpen, onClose, position = 'left' }) => {
|
|
944
|
+
const positionClasses = {
|
|
945
|
+
left: 'left-0 top-0 h-full',
|
|
946
|
+
right: 'right-0 top-0 h-full',
|
|
947
|
+
top: 'top-0 left-0 w-full',
|
|
948
|
+
bottom: 'bottom-0 left-0 w-full',
|
|
949
|
+
};
|
|
950
|
+
const variants = {
|
|
951
|
+
left: { x: '-100%' },
|
|
952
|
+
right: { x: '100%' },
|
|
953
|
+
top: { y: '-100%' },
|
|
954
|
+
bottom: { y: '100%' },
|
|
955
|
+
};
|
|
956
|
+
return (React.createElement(AnimatePresence, null, isOpen && (React.createElement("div", { className: "fixed inset-0 z-50 overflow-hidden" },
|
|
957
|
+
React.createElement("div", { className: "absolute inset-0 overflow-hidden" },
|
|
958
|
+
React.createElement(motion.div, { className: "absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: onClose }),
|
|
959
|
+
React.createElement("section", { className: `absolute ${positionClasses[position]} max-w-md` },
|
|
960
|
+
React.createElement(motion.div, { className: `h-full w-full transform transition ease-in-out duration-300 ${className}`, initial: variants[position], animate: { x: 0, y: 0 }, exit: variants[position], transition: { duration: 0.3 } },
|
|
961
|
+
React.createElement("div", { className: "h-full bg-white shadow-xl" }, children))))))));
|
|
962
|
+
};
|
|
963
|
+
|
|
964
|
+
const OffcanvasBody = ({ children, className = '' }) => {
|
|
965
|
+
return (React.createElement("div", { className: `p-4 overflow-y-auto ${className}` }, children));
|
|
966
|
+
};
|
|
967
|
+
|
|
968
|
+
const OffcanvasHeader = ({ children, className = '', onClose }) => {
|
|
969
|
+
return (React.createElement("div", { className: `px-4 py-3 border-b border-gray-200 flex items-center justify-between ${className}` },
|
|
970
|
+
React.createElement("h2", { className: "text-lg font-semibold" }, children),
|
|
971
|
+
React.createElement("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500" },
|
|
972
|
+
React.createElement("span", { className: "sr-only" }, "Close panel"),
|
|
973
|
+
React.createElement("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
|
|
974
|
+
React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))));
|
|
975
|
+
};
|
|
976
|
+
|
|
977
|
+
const Pagination = ({ className = '', currentPage, totalPages, onPageChange, color = 'primary', motionVariant = 'fadeIn', // Default motion variant
|
|
978
|
+
}) => {
|
|
979
|
+
const pageNumbers = [];
|
|
980
|
+
for (let i = 1; i <= totalPages; i++) {
|
|
981
|
+
pageNumbers.push(i);
|
|
982
|
+
}
|
|
983
|
+
const colorClasses = {
|
|
984
|
+
primary: 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700',
|
|
985
|
+
secondary: 'text-gray-600 bg-gray-50 hover:bg-gray-100 hover:text-gray-700',
|
|
986
|
+
success: 'text-green-600 bg-green-50 hover:bg-green-100 hover:text-green-700',
|
|
987
|
+
danger: 'text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-700',
|
|
988
|
+
warning: 'text-yellow-600 bg-yellow-50 hover:bg-yellow-100 hover:text-yellow-700',
|
|
989
|
+
info: 'text-blue-400 bg-blue-50 hover:bg-blue-100 hover:text-blue-500',
|
|
990
|
+
};
|
|
991
|
+
return (React.createElement(motion.nav, { className: `flex justify-center ${className}`, initial: { opacity: 0, y: -50 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 }, variants: motionVariants[motionVariant] },
|
|
992
|
+
React.createElement("ul", { className: "flex items-center -space-x-px" },
|
|
993
|
+
React.createElement("li", null,
|
|
994
|
+
React.createElement(motion.button, { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: `block px-3 py-2 ml-0 leading-tight border border-gray-300 rounded-l-lg ${colorClasses[color]} ${currentPage === 1 && 'cursor-not-allowed opacity-50'}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, "Previous")),
|
|
995
|
+
pageNumbers.map((number) => (React.createElement("li", { key: number },
|
|
996
|
+
React.createElement(motion.button, { onClick: () => onPageChange(number), className: `px-3 py-2 leading-tight border border-gray-300 ${colorClasses[color]} ${currentPage === number
|
|
997
|
+
? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
|
|
998
|
+
: 'bg-white hover:bg-gray-100'}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, number)))),
|
|
999
|
+
React.createElement("li", null,
|
|
1000
|
+
React.createElement(motion.button, { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: `block px-3 py-2 leading-tight border border-gray-300 rounded-r-lg ${colorClasses[color]} ${currentPage === totalPages && 'cursor-not-allowed opacity-50'}`, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }, "Next")))));
|
|
1001
|
+
};
|
|
1002
|
+
|
|
1003
|
+
const ProgressBar = ({ className = '', color = 'primary', value, max = 100, motionVariant = 'fadeIn', // Default motion variant
|
|
1004
|
+
}) => {
|
|
1005
|
+
const percentage = Math.min(100, Math.max(0, (value / max) * 100));
|
|
1006
|
+
const colorClasses = {
|
|
1007
|
+
primary: 'bg-blue-600',
|
|
1008
|
+
secondary: 'bg-gray-600',
|
|
1009
|
+
success: 'bg-green-600',
|
|
1010
|
+
danger: 'bg-red-600',
|
|
1011
|
+
warning: 'bg-yellow-600',
|
|
1012
|
+
info: 'bg-indigo-600',
|
|
1013
|
+
};
|
|
1014
|
+
return (React.createElement("div", { className: `w-full bg-gray-200 rounded-full h-2.5 ${className}` },
|
|
1015
|
+
React.createElement(motion.div, { className: `h-2.5 rounded-full ${colorClasses[color]}`, style: { width: `${percentage}%` }, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: { duration: 0.5 }, variants: motionVariants[motionVariant], role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max })));
|
|
1016
|
+
};
|
|
1017
|
+
|
|
1018
|
+
const Skeleton = ({ className = '', width = '100%', height = '20px', color = 'primary', motionVariant = 'fadeIn', // Default motion variant
|
|
1019
|
+
}) => {
|
|
1020
|
+
const colorClasses = {
|
|
1021
|
+
primary: 'bg-blue-200',
|
|
1022
|
+
secondary: 'bg-gray-300',
|
|
1023
|
+
success: 'bg-green-200',
|
|
1024
|
+
danger: 'bg-red-200',
|
|
1025
|
+
warning: 'bg-yellow-200',
|
|
1026
|
+
info: 'bg-indigo-200',
|
|
1027
|
+
};
|
|
1028
|
+
return (React.createElement(motion.div, { className: `animate-pulse rounded ${colorClasses[color]} ${className}`, style: { width, height }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible" }));
|
|
1029
|
+
};
|
|
1030
|
+
|
|
1031
|
+
const Slider = ({ className = '', min, max, value, onChange, step = 1, color = 'primary', // Default color set to primary
|
|
1032
|
+
motionVariant = 'fadeIn', // Default motion variant
|
|
1033
|
+
}) => {
|
|
1034
|
+
const percentage = ((value - min) / (max - min)) * 100;
|
|
1035
|
+
const colorClasses = {
|
|
1036
|
+
primary: 'bg-blue-600',
|
|
1037
|
+
secondary: 'bg-gray-600',
|
|
1038
|
+
success: 'bg-green-600',
|
|
1039
|
+
danger: 'bg-red-600',
|
|
1040
|
+
warning: 'bg-yellow-600',
|
|
1041
|
+
info: 'bg-indigo-600',
|
|
1042
|
+
};
|
|
1043
|
+
return (React.createElement("div", { className: `relative w-full h-2 bg-gray-200 rounded-full ${className}` },
|
|
1044
|
+
React.createElement(motion.div, { className: `absolute h-full ${colorClasses[color]} rounded-full`, style: { width: `${percentage}%` }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", transition: { duration: 0.3 } }),
|
|
1045
|
+
React.createElement("input", { type: "range", min: min, max: max, value: value, onChange: (e) => onChange(Number(e.target.value)), step: step, className: "absolute w-full h-full opacity-0 cursor-pointer" })));
|
|
1046
|
+
};
|
|
1047
|
+
|
|
1048
|
+
const RangeSlider = ({ className = '', min, max, values, onChange, step = 1, color = 'primary', // Default color set to primary
|
|
1049
|
+
motionVariant = 'fadeIn', // Default motion variant
|
|
1050
|
+
}) => {
|
|
1051
|
+
const [minValue, maxValue] = values;
|
|
1052
|
+
const minPercentage = ((minValue - min) / (max - min)) * 100;
|
|
1053
|
+
const maxPercentage = ((maxValue - min) / (max - min)) * 100;
|
|
1054
|
+
const colorClasses = {
|
|
1055
|
+
primary: 'bg-blue-600',
|
|
1056
|
+
secondary: 'bg-gray-600',
|
|
1057
|
+
success: 'bg-green-600',
|
|
1058
|
+
danger: 'bg-red-600',
|
|
1059
|
+
warning: 'bg-yellow-600',
|
|
1060
|
+
info: 'bg-indigo-600',
|
|
1061
|
+
};
|
|
1062
|
+
const handleMinChange = (e) => {
|
|
1063
|
+
const newMinValue = Math.min(Number(e.target.value), maxValue - step);
|
|
1064
|
+
onChange([newMinValue, maxValue]);
|
|
1065
|
+
};
|
|
1066
|
+
const handleMaxChange = (e) => {
|
|
1067
|
+
const newMaxValue = Math.max(Number(e.target.value), minValue + step);
|
|
1068
|
+
onChange([minValue, newMaxValue]);
|
|
1069
|
+
};
|
|
1070
|
+
return (React.createElement("div", { className: `relative w-full h-2 bg-gray-200 rounded-full ${className}` },
|
|
1071
|
+
React.createElement(motion.div, { className: `absolute h-full ${colorClasses[color]} rounded-full`, style: { left: `${minPercentage}%`, right: `${100 - maxPercentage}%` }, variants: motionVariants[motionVariant], initial: "hidden", animate: "visible", transition: { duration: 0.3 } }),
|
|
1072
|
+
React.createElement("input", { type: "range", min: min, max: max, value: minValue, onChange: handleMinChange, step: step, className: "absolute w-full h-full opacity-0 cursor-pointer" }),
|
|
1073
|
+
React.createElement("input", { type: "range", min: min, max: max, value: maxValue, onChange: handleMaxChange, step: step, className: "absolute w-full h-full opacity-0 cursor-pointer" })));
|
|
1074
|
+
};
|
|
1075
|
+
|
|
1076
|
+
const Stepper = ({ className = '', steps, currentStep }) => {
|
|
1077
|
+
return (React.createElement("div", { className: `flex items-center ${className}` }, steps.map((step, index) => (React.createElement(React.Fragment, { key: index },
|
|
1078
|
+
React.createElement("div", { className: "flex items-center" },
|
|
1079
|
+
React.createElement("div", { className: `flex items-center justify-center w-8 h-8 rounded-full ${index < currentStep
|
|
1080
|
+
? 'bg-blue-600 text-white'
|
|
1081
|
+
: index === currentStep
|
|
1082
|
+
? 'bg-blue-200 text-blue-600'
|
|
1083
|
+
: 'bg-gray-200 text-gray-600'}` }, index < currentStep ? (React.createElement("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20" },
|
|
1084
|
+
React.createElement("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }))) : (index + 1)),
|
|
1085
|
+
index < steps.length - 1 && (React.createElement("div", { className: `flex-1 h-1 mx-2 ${index < currentStep ? 'bg-blue-600' : 'bg-gray-200'}` }))),
|
|
1086
|
+
index < steps.length - 1 && (React.createElement("div", { className: "hidden sm:block text-xs text-center text-gray-500 mt-2" }, step)))))));
|
|
1087
|
+
};
|
|
1088
|
+
|
|
1089
|
+
const Table = ({ children, className = '', motionVariant = 'fadeIn', // Default motion variant
|
|
1090
|
+
color = 'primary', // Color customization
|
|
1091
|
+
}) => {
|
|
1092
|
+
const baseClasses = 'overflow-x-auto';
|
|
1093
|
+
const colorClasses = {
|
|
1094
|
+
primary: 'border-blue-600 text-blue-600',
|
|
1095
|
+
secondary: 'border-gray-600 text-gray-600',
|
|
1096
|
+
success: 'border-green-600 text-green-600',
|
|
1097
|
+
danger: 'border-red-600 text-red-600',
|
|
1098
|
+
warning: 'border-yellow-500 text-yellow-500',
|
|
1099
|
+
info: 'border-blue-400 text-blue-400',
|
|
1100
|
+
};
|
|
1101
|
+
return (React.createElement(motion.div, { className: `${baseClasses} ${colorClasses[color]} ${className}`, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant] },
|
|
1102
|
+
React.createElement("table", { className: "min-w-full divide-y divide-gray-200" }, children)));
|
|
1103
|
+
};
|
|
1104
|
+
|
|
1105
|
+
const TableBody = ({ children, className = '' }) => {
|
|
1106
|
+
return (React.createElement("tbody", { className: `bg-white divide-y divide-gray-200 ${className}` }, children));
|
|
1107
|
+
};
|
|
1108
|
+
|
|
1109
|
+
const TableCell = ({ children, className = '', as = 'td' }) => {
|
|
1110
|
+
const Tag = as;
|
|
1111
|
+
const baseClass = as === 'th' ? 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider' : 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
|
|
1112
|
+
return (React.createElement(Tag, { className: `${baseClass} ${className}` }, children));
|
|
1113
|
+
};
|
|
1114
|
+
|
|
1115
|
+
const TableHead = ({ children, className = '' }) => {
|
|
1116
|
+
return (React.createElement("thead", { className: `bg-gray-50 ${className}` }, children));
|
|
1117
|
+
};
|
|
1118
|
+
|
|
1119
|
+
const TableRow = ({ children, className = '' }) => {
|
|
1120
|
+
return (React.createElement(motion.tr, { className: className, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.3 } }, children));
|
|
1121
|
+
};
|
|
1122
|
+
|
|
1123
|
+
const Tabs = ({ className = '', tabs, motionVariant = 'fadeIn', // Default motion variant
|
|
1124
|
+
color = 'primary', // Color customization
|
|
1125
|
+
}) => {
|
|
1126
|
+
const [activeTab, setActiveTab] = useState(0);
|
|
1127
|
+
const colorClasses = {
|
|
1128
|
+
primary: 'text-blue-600 border-blue-500',
|
|
1129
|
+
secondary: 'text-gray-600 border-gray-500',
|
|
1130
|
+
success: 'text-green-600 border-green-500',
|
|
1131
|
+
danger: 'text-red-600 border-red-500',
|
|
1132
|
+
warning: 'text-yellow-600 border-yellow-500',
|
|
1133
|
+
info: 'text-blue-400 border-blue-400',
|
|
1134
|
+
};
|
|
1135
|
+
return (React.createElement("div", { className: className },
|
|
1136
|
+
React.createElement("div", { className: "border-b border-gray-200" },
|
|
1137
|
+
React.createElement("nav", { className: "-mb-px flex space-x-8", "aria-label": "Tabs" }, tabs.map((tab, index) => (React.createElement("button", { key: index, className: `
|
|
1138
|
+
whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm
|
|
1139
|
+
${activeTab === index
|
|
1140
|
+
? `${colorClasses[color]}`
|
|
1141
|
+
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}
|
|
1142
|
+
`, onClick: () => setActiveTab(index) }, tab.label))))),
|
|
1143
|
+
React.createElement(motion.div, { key: activeTab, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, variants: motionVariants[motionVariant], className: "mt-4" }, tabs[activeTab].content)));
|
|
1144
|
+
};
|
|
1145
|
+
|
|
1146
|
+
const Tooltip = ({ children, className = '', content, position = 'top', color = 'primary', motionVariant = 'fadeIn', }) => {
|
|
1147
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
1148
|
+
const positionClasses = {
|
|
1149
|
+
top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
|
|
1150
|
+
right: 'left-full top-1/2 transform -translate-y-1/2 ml-2',
|
|
1151
|
+
bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',
|
|
1152
|
+
left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',
|
|
1153
|
+
};
|
|
1154
|
+
const colorClasses = {
|
|
1155
|
+
primary: 'bg-blue-600',
|
|
1156
|
+
secondary: 'bg-gray-600',
|
|
1157
|
+
success: 'bg-green-600',
|
|
1158
|
+
danger: 'bg-red-600',
|
|
1159
|
+
warning: 'bg-yellow-500',
|
|
1160
|
+
info: 'bg-blue-400',
|
|
1161
|
+
};
|
|
1162
|
+
return (React.createElement("div", { className: "relative inline-block" },
|
|
1163
|
+
React.createElement("div", { onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false) }, children),
|
|
1164
|
+
React.createElement(AnimatePresence, null, isVisible && (React.createElement(motion.div, { className: `absolute z-10 px-3 py-2 text-sm font-medium text-white rounded-lg shadow-sm ${positionClasses[position]} ${colorClasses[color]} ${className}`, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, variants: motionVariants[motionVariant] }, content)))));
|
|
1165
|
+
};
|
|
1166
|
+
|
|
1167
|
+
const Heading = ({ children, className = '', as = 'h2', size = 'md' }) => {
|
|
1168
|
+
const Tag = as;
|
|
1169
|
+
const sizeClasses = {
|
|
1170
|
+
xs: 'text-lg',
|
|
1171
|
+
sm: 'text-xl',
|
|
1172
|
+
md: 'text-2xl',
|
|
1173
|
+
lg: 'text-3xl',
|
|
1174
|
+
xl: 'text-4xl',
|
|
1175
|
+
};
|
|
1176
|
+
return (React.createElement(motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 } },
|
|
1177
|
+
React.createElement(Tag, { className: `font-bold ${sizeClasses[size]} ${className}` }, children)));
|
|
1178
|
+
};
|
|
1179
|
+
|
|
1180
|
+
const Text = ({ children, className = '', size = 'md', weight = 'normal' }) => {
|
|
1181
|
+
const sizeClasses = {
|
|
1182
|
+
xs: 'text-xs',
|
|
1183
|
+
sm: 'text-sm',
|
|
1184
|
+
md: 'text-base',
|
|
1185
|
+
lg: 'text-lg',
|
|
1186
|
+
xl: 'text-xl',
|
|
1187
|
+
};
|
|
1188
|
+
const weightClasses = {
|
|
1189
|
+
normal: 'font-normal',
|
|
1190
|
+
medium: 'font-medium',
|
|
1191
|
+
semibold: 'font-semibold',
|
|
1192
|
+
bold: 'font-bold',
|
|
1193
|
+
};
|
|
1194
|
+
return (React.createElement("p", { className: `${sizeClasses[size]} ${weightClasses[weight]} ${className}` }, children));
|
|
1195
|
+
};
|
|
1196
|
+
|
|
1197
|
+
export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Container, Dropdown, DropdownItem, FileUpload, Flex, Grid, Heading, IconButton, Input, List, ListItem, Modal, ModalBody, ModalFooter, ModalHeader, NavItem, Navbar, Offcanvas, OffcanvasBody, OffcanvasHeader, Pagination, ProgressBar, Radio, RangeSlider, Select, Skeleton, Slider, Stepper, Switch, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Text, Textarea, Tooltip, motionVariants };
|
|
1198
|
+
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED