@julseb-lib/react 0.1.15 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/julseb-lib-react.cjs.js +10805 -39
  3. package/dist/julseb-lib-react.es.js +6774 -8848
  4. package/dist/lib/index.css +300 -157
  5. package/dist/style.css +539 -0
  6. package/package.json +23 -23
  7. package/dist/index.css +0 -396
  8. package/dist/julseb-lib-react.umd.js +0 -39
package/dist/lib/index.css CHANGED
@@ -6,6 +6,151 @@
6
6
  --font-lato: "Lato", sans-serif;
7
7
  --font-sans: var(--font-lato);
8
8
  --font-mono: monospace;
9
+
10
+ --color-primary-50: var(--color-blue-50);
11
+ --color-primary-100: var(--color-blue-100);
12
+ --color-primary-200: var(--color-blue-200);
13
+ --color-primary-300: var(--color-blue-300);
14
+ --color-primary-400: var(--color-blue-400);
15
+ --color-primary-500: var(--color-blue-500);
16
+ --color-primary-600: var(--color-blue-600);
17
+ --color-primary-700: var(--color-blue-700);
18
+ --color-primary-800: var(--color-blue-800);
19
+ --color-primary-900: var(--color-blue-900);
20
+ --color-primary-950: var(--color-blue-950);
21
+ --color-secondary-50: var(--color-cyan-50);
22
+ --color-secondary-100: var(--color-cyan-100);
23
+ --color-secondary-200: var(--color-cyan-200);
24
+ --color-secondary-300: var(--color-cyan-300);
25
+ --color-secondary-400: var(--color-cyan-400);
26
+ --color-secondary-500: var(--color-cyan-500);
27
+ --color-secondary-600: var(--color-cyan-600);
28
+ --color-secondary-700: var(--color-cyan-700);
29
+ --color-secondary-800: var(--color-cyan-800);
30
+ --color-secondary-900: var(--color-cyan-900);
31
+ --color-secondary-950: var(--color-cyan-950);
32
+ --color-success-50: var(--color-green-50);
33
+ --color-success-100: var(--color-green-100);
34
+ --color-success-200: var(--color-green-200);
35
+ --color-success-300: var(--color-green-300);
36
+ --color-success-400: var(--color-green-400);
37
+ --color-success-500: var(--color-green-500);
38
+ --color-success-600: var(--color-green-600);
39
+ --color-success-700: var(--color-green-700);
40
+ --color-success-800: var(--color-green-800);
41
+ --color-success-900: var(--color-green-900);
42
+ --color-success-950: var(--color-green-950);
43
+ --color-danger-50: var(--color-red-50);
44
+ --color-danger-100: var(--color-red-100);
45
+ --color-danger-200: var(--color-red-200);
46
+ --color-danger-300: var(--color-red-300);
47
+ --color-danger-400: var(--color-red-400);
48
+ --color-danger-500: var(--color-red-500);
49
+ --color-danger-600: var(--color-red-600);
50
+ --color-danger-700: var(--color-red-700);
51
+ --color-danger-800: var(--color-red-800);
52
+ --color-danger-900: var(--color-red-900);
53
+ --color-danger-950: var(--color-red-950);
54
+ --color-warning-50: var(--color-amber-50);
55
+ --color-warning-100: var(--color-amber-100);
56
+ --color-warning-200: var(--color-amber-200);
57
+ --color-warning-300: var(--color-amber-300);
58
+ --color-warning-400: var(--color-amber-400);
59
+ --color-warning-500: var(--color-amber-500);
60
+ --color-warning-600: var(--color-amber-600);
61
+ --color-warning-700: var(--color-amber-700);
62
+ --color-warning-800: var(--color-amber-800);
63
+ --color-warning-900: var(--color-amber-900);
64
+ --color-warning-950: var(--color-amber-950);
65
+ --color-gray-50: var(--color-neutral-50);
66
+ --color-gray-100: var(--color-neutral-100);
67
+ --color-gray-200: var(--color-neutral-200);
68
+ --color-gray-300: var(--color-neutral-300);
69
+ --color-gray-400: var(--color-neutral-400);
70
+ --color-gray-500: var(--color-neutral-500);
71
+ --color-gray-600: var(--color-neutral-600);
72
+ --color-gray-700: var(--color-neutral-700);
73
+ --color-gray-800: var(--color-neutral-800);
74
+ --color-gray-900: var(--color-neutral-900);
75
+ --color-gray-950: var(--color-neutral-950);
76
+
77
+ --color-background: var(--color-white);
78
+ --color-font: var(--color-black);
79
+
80
+ --font-weight-thin: 100;
81
+ --font-weight-light: 300;
82
+ --font-weight-normal: 400;
83
+ --font-weight-bold: 700;
84
+ --font-weight-black: 900;
85
+
86
+ --color-overlay-black-50: rgba(0, 0, 0, 0.5);
87
+ --color-overlay-black-80: rgba(0, 0, 0, 0.8);
88
+ --color-overlay-white-50: rgba(255, 255, 255, 0.5);
89
+ --color-overlay-white-80: rgba(255, 255, 255, 0.8);
90
+ --color-overlay-gradient-black: linear-gradient(
91
+ 180deg,
92
+ rgba(255, 255, 255, 0) 0%,
93
+ rgba(0, 0, 0, 0.56) 100%
94
+ );
95
+ --color-overlay-gradient-white: linear-gradient(
96
+ 180deg,
97
+ rgba(0, 0, 0, 0) 0%,
98
+ rgba(255, 255, 255, 0.35) 100%
99
+ );
100
+
101
+ --font-sans: var(--font-lato);
102
+ --font-mono: monospace;
103
+
104
+ --spacer-2xs: 4px;
105
+ --spacer-xs: 8px;
106
+ --spacer-sm: 12px;
107
+ --spacer-md: 16px;
108
+ --spacer-lg: 24px;
109
+ --spacer-xl: 32px;
110
+ --spacer-2xl: 48px;
111
+
112
+ --main-default: 600px;
113
+ --main-large: 800px;
114
+ --main-form: 400px;
115
+ --main-full: 100%;
116
+ --aside-default: 250px;
117
+ --aside-small: 200px;
118
+
119
+ --shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
120
+ --shadow-xs:
121
+ 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
122
+ --shadow-sm:
123
+ 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
124
+ --shadow-md:
125
+ 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
126
+ --shadow-lg:
127
+ 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
128
+ --shadow-xl:
129
+ 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
130
+ --shadow-2xl:
131
+ 0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
132
+ --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
133
+ --shadow-none: none;
134
+
135
+ --animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
136
+
137
+ --transition-short: all 200ms ease;
138
+ --transition-long: all 500ms ease;
139
+ --transition-bezier: all 500ms cubic-bezier(0.25, 0.75, 0, 0.66);
140
+
141
+ --text-display-h1: 5rem;
142
+ --text-display-h2: 4rem;
143
+ --text-display-h3: 3.5rem;
144
+ --text-display-h4: 3rem;
145
+ --text-display-h5: 2.5rem;
146
+ --text-h1: 2.5rem;
147
+ --text-h2: 2rem;
148
+ --text-h3: 1.8rem;
149
+ --text-h4: 1.5rem;
150
+ --text-h5: 1.3rem;
151
+ --text-h6: 1.1rem;
152
+ --text-body: 1rem;
153
+ --text-small: 0.875rem;
9
154
  }
10
155
 
11
156
  @theme {
@@ -187,210 +332,208 @@ button {
187
332
  }
188
333
  }
189
334
 
190
- @layer base {
191
- img,
192
- video,
193
- iframe {
194
- max-width: 100%;
195
- }
335
+ img,
336
+ video,
337
+ iframe {
338
+ max-width: 100%;
339
+ }
196
340
 
197
- .no-scrollbar {
198
- -ms-overflow-style: none;
199
- scrollbar-width: none;
341
+ .no-scrollbar {
342
+ -ms-overflow-style: none;
343
+ scrollbar-width: none;
200
344
 
201
- &::-webkit-scrollbar {
202
- display: none;
203
- }
345
+ &::-webkit-scrollbar {
346
+ display: none;
204
347
  }
348
+ }
205
349
 
206
- /*====================== Fonts ======================*/
207
-
208
- .lato-thin {
209
- font-family: var(--font-sans);
210
- font-weight: var(--font-weight-thin);
211
- font-style: normal;
212
- }
350
+ /*====================== Fonts ======================*/
213
351
 
214
- .lato-light {
215
- font-family: var(--font-sans);
216
- font-weight: var(--font-weight-light);
217
- font-style: normal;
218
- }
352
+ .lato-thin {
353
+ font-family: var(--font-sans);
354
+ font-weight: var(--font-weight-thin);
355
+ font-style: normal;
356
+ }
219
357
 
220
- .lato-regular {
221
- font-family: var(--font-sans);
222
- font-weight: var(--font-weight-normal);
223
- font-style: normal;
224
- }
358
+ .lato-light {
359
+ font-family: var(--font-sans);
360
+ font-weight: var(--font-weight-light);
361
+ font-style: normal;
362
+ }
225
363
 
226
- .lato-bold {
227
- font-family: var(--font-sans);
228
- font-weight: var(--font-weight-bold);
229
- font-style: normal;
230
- }
364
+ .lato-regular {
365
+ font-family: var(--font-sans);
366
+ font-weight: var(--font-weight-normal);
367
+ font-style: normal;
368
+ }
231
369
 
232
- .lato-black {
233
- font-family: var(--font-sans);
234
- font-weight: var(--font-weight-black);
235
- font-style: normal;
236
- }
370
+ .lato-bold {
371
+ font-family: var(--font-sans);
372
+ font-weight: var(--font-weight-bold);
373
+ font-style: normal;
374
+ }
237
375
 
238
- .lato-thin-italic {
239
- font-family: var(--font-sans);
240
- font-weight: var(--font-weight-thin);
241
- font-style: italic;
242
- }
376
+ .lato-black {
377
+ font-family: var(--font-sans);
378
+ font-weight: var(--font-weight-black);
379
+ font-style: normal;
380
+ }
243
381
 
244
- .lato-light-italic {
245
- font-family: var(--font-sans);
246
- font-weight: var(--font-weight-light);
247
- font-style: italic;
248
- }
382
+ .lato-thin-italic {
383
+ font-family: var(--font-sans);
384
+ font-weight: var(--font-weight-thin);
385
+ font-style: italic;
386
+ }
249
387
 
250
- .lato-regular-italic {
251
- font-family: var(--font-sans);
252
- font-weight: var(--font-weight-normal);
253
- font-style: italic;
254
- }
388
+ .lato-light-italic {
389
+ font-family: var(--font-sans);
390
+ font-weight: var(--font-weight-light);
391
+ font-style: italic;
392
+ }
255
393
 
256
- .lato-bold-italic {
257
- font-family: var(--font-sans);
258
- font-weight: var(--font-weight-bold);
259
- font-style: italic;
260
- }
394
+ .lato-regular-italic {
395
+ font-family: var(--font-sans);
396
+ font-weight: var(--font-weight-normal);
397
+ font-style: italic;
398
+ }
261
399
 
262
- .lato-black-italic {
263
- font-family: var(--font-sans);
264
- font-weight: var(--font-weight-black);
265
- font-style: italic;
266
- }
400
+ .lato-bold-italic {
401
+ font-family: var(--font-sans);
402
+ font-weight: var(--font-weight-bold);
403
+ font-style: italic;
404
+ }
267
405
 
268
- /*====================== Colors ======================*/
406
+ .lato-black-italic {
407
+ font-family: var(--font-sans);
408
+ font-weight: var(--font-weight-black);
409
+ font-style: italic;
410
+ }
269
411
 
270
- .text-primary {
271
- color: var(--color-primary-500);
272
- }
412
+ /*====================== Colors ======================*/
273
413
 
274
- .bg-primary {
275
- background-color: var(--color-primary-500);
276
- }
414
+ .text-primary {
415
+ color: var(--color-primary-500);
416
+ }
277
417
 
278
- .text-secondary {
279
- color: var(--color-secondary-500);
280
- }
418
+ .bg-primary {
419
+ background-color: var(--color-primary-500);
420
+ }
281
421
 
282
- .bg-secondary {
283
- background-color: var(--color-secondary-500);
284
- }
422
+ .text-secondary {
423
+ color: var(--color-secondary-500);
424
+ }
285
425
 
286
- .text-success {
287
- color: var(--color-success-500);
288
- }
426
+ .bg-secondary {
427
+ background-color: var(--color-secondary-500);
428
+ }
289
429
 
290
- .bg-success {
291
- background-color: var(--color-success-500);
292
- }
430
+ .text-success {
431
+ color: var(--color-success-500);
432
+ }
293
433
 
294
- .text-danger {
295
- color: var(--color-danger-500);
296
- }
434
+ .bg-success {
435
+ background-color: var(--color-success-500);
436
+ }
297
437
 
298
- .bg-danger {
299
- background-color: var(--color-danger-500);
300
- }
438
+ .text-danger {
439
+ color: var(--color-danger-500);
440
+ }
301
441
 
302
- .text-warning {
303
- color: var(--color-warning-500);
304
- }
442
+ .bg-danger {
443
+ background-color: var(--color-danger-500);
444
+ }
305
445
 
306
- .bg-warning {
307
- background-color: var(--color-warning-500);
308
- }
446
+ .text-warning {
447
+ color: var(--color-warning-500);
448
+ }
309
449
 
310
- .text-gray {
311
- color: var(--color-gray-500);
312
- }
450
+ .bg-warning {
451
+ background-color: var(--color-warning-500);
452
+ }
313
453
 
314
- .bg-gray {
315
- background-color: var(--color-gray-500);
316
- }
454
+ .text-gray {
455
+ color: var(--color-gray-500);
456
+ }
317
457
 
318
- .text-white {
319
- color: var(--color-white);
320
- }
458
+ .bg-gray {
459
+ background-color: var(--color-gray-500);
460
+ }
321
461
 
322
- .bg-white {
323
- background-color: var(--color-white);
324
- }
462
+ .text-white {
463
+ color: var(--color-white);
464
+ }
325
465
 
326
- .overlay-black-50 {
327
- background: var(--color-overlay-black-50);
328
- }
466
+ .bg-white {
467
+ background-color: var(--color-white);
468
+ }
329
469
 
330
- .overlay-black-80 {
331
- background: var(--color-overlay-black-80);
332
- }
470
+ .overlay-black-50 {
471
+ background: var(--color-overlay-black-50);
472
+ }
333
473
 
334
- .overlay-white-50 {
335
- background: var(--color-overlay-white-50);
336
- }
474
+ .overlay-black-80 {
475
+ background: var(--color-overlay-black-80);
476
+ }
337
477
 
338
- .overlay-white-80 {
339
- background: var(--color-overlay-white-80);
340
- }
478
+ .overlay-white-50 {
479
+ background: var(--color-overlay-white-50);
480
+ }
341
481
 
342
- .overlay-gradient-black {
343
- background: var(--color-overlay-gradient-black);
344
- }
482
+ .overlay-white-80 {
483
+ background: var(--color-overlay-white-80);
484
+ }
345
485
 
346
- .overlay-gradient-white {
347
- background: var(--color-overlay-gradient-white);
348
- }
486
+ .overlay-gradient-black {
487
+ background: var(--color-overlay-gradient-black);
488
+ }
349
489
 
350
- /*====================== Keyframes & animations ======================*/
490
+ .overlay-gradient-white {
491
+ background: var(--color-overlay-gradient-white);
492
+ }
351
493
 
352
- @keyframes shine {
353
- from {
354
- left: -150px;
355
- }
494
+ /*====================== Keyframes & animations ======================*/
356
495
 
357
- to {
358
- left: 106%;
359
- }
496
+ @keyframes shine {
497
+ from {
498
+ left: -150px;
360
499
  }
361
500
 
362
- @keyframes spin {
363
- from {
364
- transform: rotate(0deg);
365
- }
501
+ to {
502
+ left: 106%;
503
+ }
504
+ }
366
505
 
367
- to {
368
- transform: rotate(360deg);
369
- }
506
+ @keyframes spin {
507
+ from {
508
+ transform: rotate(0deg);
370
509
  }
371
510
 
372
- @keyframes loader-pulse {
373
- 0%,
374
- 100% {
375
- transform: scale(0);
376
- }
511
+ to {
512
+ transform: rotate(360deg);
513
+ }
514
+ }
377
515
 
378
- 50% {
379
- transform: scale(1);
380
- }
516
+ @keyframes loader-pulse {
517
+ 0%,
518
+ 100% {
519
+ transform: scale(0);
381
520
  }
382
521
 
383
- .Toastify__progress-bar--bg {
384
- background-color: transparent !important;
522
+ 50% {
523
+ transform: scale(1);
385
524
  }
525
+ }
386
526
 
387
- @keyframes progress-bar {
388
- 0% {
389
- width: 0;
390
- }
527
+ .Toastify__progress-bar--bg {
528
+ background-color: transparent !important;
529
+ }
530
+
531
+ @keyframes progress-bar {
532
+ 0% {
533
+ width: 0;
534
+ }
391
535
 
392
- 100% {
393
- width: var(--meter-value);
394
- }
536
+ 100% {
537
+ width: var(--meter-value);
395
538
  }
396
539
  }