@mbao01/common 0.2.1 → 0.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/package.json +2 -2
- package/src/stylesheets/tailwind.css +309 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mbao01/common",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Ayomide Bakare",
|
|
7
7
|
"license": "MIT",
|
|
@@ -172,5 +172,5 @@
|
|
|
172
172
|
"recharts": "^2.15.0",
|
|
173
173
|
"typescript": "^5.7.2"
|
|
174
174
|
},
|
|
175
|
-
"gitHead": "
|
|
175
|
+
"gitHead": "aa3d3090fd645ac0a64b1ccb1fe9451037083674"
|
|
176
176
|
}
|
|
@@ -0,0 +1,309 @@
|
|
|
1
|
+
@import 'tailwindcss';
|
|
2
|
+
|
|
3
|
+
@plugin "@tailwindcss/typography";
|
|
4
|
+
@plugin "daisyui" {
|
|
5
|
+
themes: light --default, dark --prefersdark, cupcake;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
|
10
|
+
so we've added these compatibility styles to make sure everything still
|
|
11
|
+
looks the same as it did with Tailwind CSS v3.
|
|
12
|
+
|
|
13
|
+
If we ever want to remove these styles, we need to add an explicit border
|
|
14
|
+
color utility to any element that depends on these defaults.
|
|
15
|
+
*/
|
|
16
|
+
@layer base {
|
|
17
|
+
*,
|
|
18
|
+
::after,
|
|
19
|
+
::before,
|
|
20
|
+
::backdrop,
|
|
21
|
+
::file-selector-button {
|
|
22
|
+
border-color: var(--color-gray-200, currentColor);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@theme {
|
|
27
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
28
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
29
|
+
|
|
30
|
+
@keyframes accordion-down {
|
|
31
|
+
from {
|
|
32
|
+
height: 0;
|
|
33
|
+
}
|
|
34
|
+
to {
|
|
35
|
+
height: var(--radix-accordion-content-height);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
@keyframes accordion-up {
|
|
39
|
+
from {
|
|
40
|
+
height: var(--radix-accordion-content-height);
|
|
41
|
+
}
|
|
42
|
+
to {
|
|
43
|
+
height: 0;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@theme inline {
|
|
49
|
+
/* Predefined values */
|
|
50
|
+
|
|
51
|
+
--animation-delay-0: 0s;
|
|
52
|
+
--animation-delay-75: 75ms;
|
|
53
|
+
--animation-delay-100: 0.1s;
|
|
54
|
+
--animation-delay-150: 0.15s;
|
|
55
|
+
--animation-delay-200: 0.2s;
|
|
56
|
+
--animation-delay-300: 0.3s;
|
|
57
|
+
--animation-delay-500: 0.5s;
|
|
58
|
+
--animation-delay-700: 0.7s;
|
|
59
|
+
--animation-delay-1000: 1s;
|
|
60
|
+
|
|
61
|
+
--animation-repeat-0: 0;
|
|
62
|
+
--animation-repeat-1: 1;
|
|
63
|
+
--animation-repeat-infinite: infinite;
|
|
64
|
+
|
|
65
|
+
--animation-direction-normal: normal;
|
|
66
|
+
--animation-direction-reverse: reverse;
|
|
67
|
+
--animation-direction-alternate: alternate;
|
|
68
|
+
--animation-direction-alternate-reverse: alternate-reverse;
|
|
69
|
+
|
|
70
|
+
--animation-fill-mode-none: none;
|
|
71
|
+
--animation-fill-mode-forwards: forwards;
|
|
72
|
+
--animation-fill-mode-backwards: backwards;
|
|
73
|
+
--animation-fill-mode-both: both;
|
|
74
|
+
|
|
75
|
+
--percentage-0: 0;
|
|
76
|
+
--percentage-5: 0.05;
|
|
77
|
+
--percentage-10: 0.1;
|
|
78
|
+
--percentage-15: 0.15;
|
|
79
|
+
--percentage-20: 0.2;
|
|
80
|
+
--percentage-25: 0.25;
|
|
81
|
+
--percentage-30: 0.3;
|
|
82
|
+
--percentage-35: 0.35;
|
|
83
|
+
--percentage-40: 0.4;
|
|
84
|
+
--percentage-45: 0.45;
|
|
85
|
+
--percentage-50: 0.5;
|
|
86
|
+
--percentage-55: 0.55;
|
|
87
|
+
--percentage-60: 0.6;
|
|
88
|
+
--percentage-65: 0.65;
|
|
89
|
+
--percentage-70: 0.7;
|
|
90
|
+
--percentage-75: 0.75;
|
|
91
|
+
--percentage-80: 0.8;
|
|
92
|
+
--percentage-85: 0.85;
|
|
93
|
+
--percentage-90: 0.9;
|
|
94
|
+
--percentage-95: 0.95;
|
|
95
|
+
--percentage-100: 1;
|
|
96
|
+
--percentage-translate-full: 1;
|
|
97
|
+
|
|
98
|
+
/* Animations and keyframes */
|
|
99
|
+
|
|
100
|
+
--animate-in: enter var(--tw-duration, 150ms) var(--tw-ease, ease);
|
|
101
|
+
--animate-out: exit var(--tw-duration, 150ms) var(--tw-ease, ease);
|
|
102
|
+
|
|
103
|
+
--animate-accordion-down: accordion-down var(--tw-duration, 200ms) ease-out;
|
|
104
|
+
--animate-accordion-up: accordion-up var(--tw-duration, 200ms) ease-out;
|
|
105
|
+
--animate-caret-blink: caret-blink 1.25s ease-out infinite;
|
|
106
|
+
|
|
107
|
+
@keyframes enter {
|
|
108
|
+
from {
|
|
109
|
+
opacity: var(--tw-enter-opacity, 1);
|
|
110
|
+
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
|
|
111
|
+
scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
|
|
112
|
+
rotate(var(--tw-enter-rotate, 0));
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@keyframes exit {
|
|
117
|
+
to {
|
|
118
|
+
opacity: var(--tw-exit-opacity, 1);
|
|
119
|
+
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
|
|
120
|
+
scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
|
|
121
|
+
rotate(var(--tw-exit-rotate, 0));
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@keyframes accordion-down {
|
|
126
|
+
from {
|
|
127
|
+
height: 0;
|
|
128
|
+
}
|
|
129
|
+
to {
|
|
130
|
+
height: var(--radix-accordion-content-height, var(--bits-accordion-content-height));
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@keyframes accordion-up {
|
|
135
|
+
from {
|
|
136
|
+
height: var(--radix-accordion-content-height, var(--bits-accordion-content-height));
|
|
137
|
+
}
|
|
138
|
+
to {
|
|
139
|
+
height: 0;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@keyframes caret-blink {
|
|
144
|
+
0%,
|
|
145
|
+
70%,
|
|
146
|
+
100% {
|
|
147
|
+
opacity: 1;
|
|
148
|
+
}
|
|
149
|
+
20%,
|
|
150
|
+
50% {
|
|
151
|
+
opacity: 0;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* Utility classes */
|
|
157
|
+
|
|
158
|
+
/*
|
|
159
|
+
* Tailwind's default `duration` utility sets the `--tw-duration` variable, so
|
|
160
|
+
* can set `animation-duration` directly in the animation definition in the
|
|
161
|
+
* `@theme` section above. Same goes for the `animation-timing-function`, set
|
|
162
|
+
* with `--tw-ease`.
|
|
163
|
+
*/
|
|
164
|
+
|
|
165
|
+
@utility delay-* {
|
|
166
|
+
animation-delay: calc(--value(number) * 1ms);
|
|
167
|
+
animation-delay: --value(--animation-delay- *, [duration], [ *]);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@utility repeat-* {
|
|
171
|
+
animation-iteration-count: --value(--animation-repeat- *, number);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
@utility direction-* {
|
|
175
|
+
animation-direction: --value(--animation-direction- *);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@utility fill-mode-* {
|
|
179
|
+
animation-fill-mode: --value(--animation-fill-mode- *);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
@utility running {
|
|
183
|
+
animation-play-state: running;
|
|
184
|
+
}
|
|
185
|
+
@utility paused {
|
|
186
|
+
animation-play-state: paused;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
@utility fade-in {
|
|
190
|
+
--tw-enter-opacity: 0;
|
|
191
|
+
}
|
|
192
|
+
@utility fade-in-* {
|
|
193
|
+
--tw-enter-opacity: --value(--percentage- *, [ *]);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
@utility fade-out {
|
|
197
|
+
--tw-exit-opacity: 0;
|
|
198
|
+
}
|
|
199
|
+
@utility fade-out-* {
|
|
200
|
+
--tw-exit-opacity: --value(--percentage- *, [ *]);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
@utility zoom-in {
|
|
204
|
+
--tw-enter-scale: 0;
|
|
205
|
+
}
|
|
206
|
+
@utility zoom-in-* {
|
|
207
|
+
--tw-enter-scale: calc(--value([percentage]) / 100%);
|
|
208
|
+
--tw-enter-scale: calc(--value([ratio], [number]));
|
|
209
|
+
--tw-enter-scale: --value(--percentage- *);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
@utility zoom-out {
|
|
213
|
+
--tw-exit-scale: 0;
|
|
214
|
+
}
|
|
215
|
+
@utility zoom-out-* {
|
|
216
|
+
--tw-exit-scale: calc(--value([percentage]) / 100%);
|
|
217
|
+
--tw-exit-scale: calc(--value([ratio], [number]));
|
|
218
|
+
--tw-exit-scale: --value(--percentage- *);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@utility spin-in {
|
|
222
|
+
--tw-enter-rotate: 30deg;
|
|
223
|
+
}
|
|
224
|
+
@utility spin-in-* {
|
|
225
|
+
--tw-enter-rotate: calc(--value(number) * 1deg);
|
|
226
|
+
--tw-enter-rotate: --value(--rotate- *, [angle]);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@utility spin-out {
|
|
230
|
+
--tw-exit-rotate: 30deg;
|
|
231
|
+
}
|
|
232
|
+
@utility spin-out-* {
|
|
233
|
+
--tw-exit-rotate: calc(--value(number) * 1deg);
|
|
234
|
+
--tw-exit-rotate: --value(--rotate- *, [angle]);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@utility slide-in-from-top {
|
|
238
|
+
--tw-enter-translate-y: -100%;
|
|
239
|
+
}
|
|
240
|
+
@utility slide-in-from-top-* {
|
|
241
|
+
--tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
|
|
242
|
+
--tw-enter-translate-y: calc(--value(--percentage- *, --percentage-translate- *) * -100%);
|
|
243
|
+
--tw-enter-translate-y: calc(--value(ratio) * 100%);
|
|
244
|
+
--tw-enter-translate-y: calc(--value(--translate- *, [percentage], [length]) * -1);
|
|
245
|
+
}
|
|
246
|
+
@utility slide-in-from-bottom {
|
|
247
|
+
--tw-enter-translate-y: 100%;
|
|
248
|
+
}
|
|
249
|
+
@utility slide-in-from-bottom-* {
|
|
250
|
+
--tw-enter-translate-y: calc(--value(integer) * var(--spacing));
|
|
251
|
+
--tw-enter-translate-y: calc(--value(--percentage- *, --percentage-translate- *) * 100%);
|
|
252
|
+
--tw-enter-translate-y: calc(--value(ratio) * 100%);
|
|
253
|
+
--tw-enter-translate-y: --value(--translate- *, [percentage], [length]);
|
|
254
|
+
}
|
|
255
|
+
@utility slide-in-from-left {
|
|
256
|
+
--tw-enter-translate-x: -100%;
|
|
257
|
+
}
|
|
258
|
+
@utility slide-in-from-left-* {
|
|
259
|
+
--tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
|
|
260
|
+
--tw-enter-translate-x: calc(--value(--percentage- *, --percentage-translate- *) * -100%);
|
|
261
|
+
--tw-enter-translate-x: calc(--value(ratio) * 100%);
|
|
262
|
+
--tw-enter-translate-x: calc(--value(--translate- *, [percentage], [length]) * -1);
|
|
263
|
+
}
|
|
264
|
+
@utility slide-in-from-right {
|
|
265
|
+
--tw-enter-translate-x: 100%;
|
|
266
|
+
}
|
|
267
|
+
@utility slide-in-from-right-* {
|
|
268
|
+
--tw-enter-translate-x: calc(--value(integer) * var(--spacing));
|
|
269
|
+
--tw-enter-translate-x: calc(--value(--percentage- *, --percentage-translate- *) * 100%);
|
|
270
|
+
--tw-enter-translate-x: calc(--value(ratio) * 100%);
|
|
271
|
+
--tw-enter-translate-x: --value(--translate- *, [percentage], [length]);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
@utility slide-out-to-top {
|
|
275
|
+
--tw-exit-translate-y: -100%;
|
|
276
|
+
}
|
|
277
|
+
@utility slide-out-to-top-* {
|
|
278
|
+
--tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
|
|
279
|
+
--tw-exit-translate-y: calc(--value(--percentage- *, --percentage-translate- *) * -100%);
|
|
280
|
+
--tw-exit-translate-y: calc(--value(ratio) * 100%);
|
|
281
|
+
--tw-exit-translate-y: calc(--value(--translate- *, [percentage], [length]) * -1);
|
|
282
|
+
}
|
|
283
|
+
@utility slide-out-to-bottom {
|
|
284
|
+
--tw-exit-translate-y: 100%;
|
|
285
|
+
}
|
|
286
|
+
@utility slide-out-to-bottom-* {
|
|
287
|
+
--tw-exit-translate-y: calc(--value(integer) * var(--spacing));
|
|
288
|
+
--tw-exit-translate-y: calc(--value(--percentage- *, --percentage-translate- *) * 100%);
|
|
289
|
+
--tw-exit-translate-y: calc(--value(ratio) * 100%);
|
|
290
|
+
--tw-exit-translate-y: --value(--translate- *, [percentage], [length]);
|
|
291
|
+
}
|
|
292
|
+
@utility slide-out-to-left {
|
|
293
|
+
--tw-exit-translate-x: -100%;
|
|
294
|
+
}
|
|
295
|
+
@utility slide-out-to-left-* {
|
|
296
|
+
--tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
|
|
297
|
+
--tw-exit-translate-x: calc(--value(--percentage- *, --percentage-translate- *) * -100%);
|
|
298
|
+
--tw-exit-translate-x: calc(--value(ratio) * 100%);
|
|
299
|
+
--tw-exit-translate-x: calc(--value(--translate- *, [percentage], [length]) * -1);
|
|
300
|
+
}
|
|
301
|
+
@utility slide-out-to-right {
|
|
302
|
+
--tw-exit-translate-x: 100%;
|
|
303
|
+
}
|
|
304
|
+
@utility slide-out-to-right-* {
|
|
305
|
+
--tw-exit-translate-x: calc(--value(integer) * var(--spacing));
|
|
306
|
+
--tw-exit-translate-x: calc(--value(--percentage- *, --percentage-translate- *) * 100%);
|
|
307
|
+
--tw-exit-translate-x: calc(--value(ratio) * 100%);
|
|
308
|
+
--tw-exit-translate-x: --value(--translate- *, [percentage], [length]);
|
|
309
|
+
}
|