premium-react-loaders 1.0.2 → 1.2.0
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/README.md +55 -6
- package/dist/components/progress/ProgressBar.d.ts.map +1 -1
- package/dist/components/progress/ProgressCircle.d.ts.map +1 -1
- package/dist/components/progress/ProgressRing.d.ts.map +1 -1
- package/dist/components/progress/ProgressSteps.d.ts +16 -0
- package/dist/components/progress/ProgressSteps.d.ts.map +1 -0
- package/dist/components/progress/index.d.ts +1 -0
- package/dist/components/progress/index.d.ts.map +1 -1
- package/dist/components/pulse/PulseBars.d.ts +2 -2
- package/dist/components/pulse/PulseBars.d.ts.map +1 -1
- package/dist/components/pulse/PulseDots.d.ts +2 -2
- package/dist/components/pulse/PulseDots.d.ts.map +1 -1
- package/dist/components/pulse/PulseWave.d.ts +2 -2
- package/dist/components/pulse/PulseWave.d.ts.map +1 -1
- package/dist/components/pulse/TypingIndicator.d.ts +16 -0
- package/dist/components/pulse/TypingIndicator.d.ts.map +1 -0
- package/dist/components/pulse/index.d.ts +1 -0
- package/dist/components/pulse/index.d.ts.map +1 -1
- package/dist/components/skeleton/SkeletonForm.d.ts +16 -0
- package/dist/components/skeleton/SkeletonForm.d.ts.map +1 -0
- package/dist/components/skeleton/index.d.ts +1 -0
- package/dist/components/skeleton/index.d.ts.map +1 -1
- package/dist/components/spinner/SpinnerBars.d.ts +2 -2
- package/dist/components/spinner/SpinnerBars.d.ts.map +1 -1
- package/dist/components/spinner/SpinnerCircle.d.ts +2 -1
- package/dist/components/spinner/SpinnerCircle.d.ts.map +1 -1
- package/dist/components/spinner/SpinnerDots.d.ts +2 -2
- package/dist/components/spinner/SpinnerDots.d.ts.map +1 -1
- package/dist/components/spinner/SpinnerGrid.d.ts +2 -2
- package/dist/components/spinner/SpinnerGrid.d.ts.map +1 -1
- package/dist/components/spinner/SpinnerPulse.d.ts +15 -0
- package/dist/components/spinner/SpinnerPulse.d.ts.map +1 -0
- package/dist/components/spinner/SpinnerRing.d.ts +3 -3
- package/dist/components/spinner/SpinnerRing.d.ts.map +1 -1
- package/dist/components/spinner/SpinnerWave.d.ts +15 -0
- package/dist/components/spinner/SpinnerWave.d.ts.map +1 -0
- package/dist/components/spinner/index.d.ts +2 -0
- package/dist/components/spinner/index.d.ts.map +1 -1
- package/dist/index.cjs +23 -13
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +23 -13
- package/dist/index.js.map +1 -1
- package/dist/index13.cjs +54 -35
- package/dist/index13.cjs.map +1 -1
- package/dist/index13.js +56 -37
- package/dist/index13.js.map +1 -1
- package/dist/index14.cjs +29 -12
- package/dist/index14.cjs.map +1 -1
- package/dist/index14.js +30 -13
- package/dist/index14.js.map +1 -1
- package/dist/index15.cjs +19 -36
- package/dist/index15.cjs.map +1 -1
- package/dist/index15.js +19 -36
- package/dist/index15.js.map +1 -1
- package/dist/index16.cjs +47 -24
- package/dist/index16.cjs.map +1 -1
- package/dist/index16.js +48 -25
- package/dist/index16.js.map +1 -1
- package/dist/index17.cjs +29 -38
- package/dist/index17.cjs.map +1 -1
- package/dist/index17.js +29 -38
- package/dist/index17.js.map +1 -1
- package/dist/index18.cjs +52 -79
- package/dist/index18.cjs.map +1 -1
- package/dist/index18.js +54 -81
- package/dist/index18.js.map +1 -1
- package/dist/index19.cjs +45 -104
- package/dist/index19.cjs.map +1 -1
- package/dist/index19.js +46 -105
- package/dist/index19.js.map +1 -1
- package/dist/index20.cjs +58 -108
- package/dist/index20.cjs.map +1 -1
- package/dist/index20.js +60 -110
- package/dist/index20.js.map +1 -1
- package/dist/index21.cjs +79 -28
- package/dist/index21.cjs.map +1 -1
- package/dist/index21.js +82 -31
- package/dist/index21.js.map +1 -1
- package/dist/index22.cjs +106 -32
- package/dist/index22.cjs.map +1 -1
- package/dist/index22.js +108 -34
- package/dist/index22.js.map +1 -1
- package/dist/index23.cjs +112 -34
- package/dist/index23.cjs.map +1 -1
- package/dist/index23.js +115 -37
- package/dist/index23.js.map +1 -1
- package/dist/index24.cjs +108 -48
- package/dist/index24.cjs.map +1 -1
- package/dist/index24.js +110 -50
- package/dist/index24.js.map +1 -1
- package/dist/index25.cjs +59 -16
- package/dist/index25.cjs.map +1 -1
- package/dist/index25.js +58 -15
- package/dist/index25.js.map +1 -1
- package/dist/index26.cjs +66 -0
- package/dist/index26.cjs.map +1 -0
- package/dist/index26.js +66 -0
- package/dist/index26.js.map +1 -0
- package/dist/index27.cjs +69 -0
- package/dist/index27.cjs.map +1 -0
- package/dist/index27.js +69 -0
- package/dist/index27.js.map +1 -0
- package/dist/index28.cjs +65 -0
- package/dist/index28.cjs.map +1 -0
- package/dist/index28.js +65 -0
- package/dist/index28.js.map +1 -0
- package/dist/index29.cjs +71 -0
- package/dist/index29.cjs.map +1 -0
- package/dist/index29.js +71 -0
- package/dist/index29.js.map +1 -0
- package/dist/index3.cjs +1 -1
- package/dist/index3.js +1 -1
- package/dist/index30.cjs +18 -0
- package/dist/index30.cjs.map +1 -0
- package/dist/index30.js +18 -0
- package/dist/index30.js.map +1 -0
- package/dist/index31.cjs +42 -0
- package/dist/index31.cjs.map +1 -0
- package/dist/index31.js +42 -0
- package/dist/index31.js.map +1 -0
- package/dist/index4.cjs +10 -0
- package/dist/index4.cjs.map +1 -1
- package/dist/index4.js +10 -0
- package/dist/index4.js.map +1 -1
- package/dist/premium-react-loaders.css +299 -3
- package/dist/types/common.d.ts +14 -2
- package/dist/types/common.d.ts.map +1 -1
- package/dist/types/progress.d.ts +24 -1
- package/dist/types/progress.d.ts.map +1 -1
- package/dist/types/pulse.d.ts +13 -0
- package/dist/types/pulse.d.ts.map +1 -1
- package/dist/types/skeleton.d.ts +17 -0
- package/dist/types/skeleton.d.ts.map +1 -1
- package/dist/types/spinner.d.ts +18 -0
- package/dist/types/spinner.d.ts.map +1 -1
- package/dist/utils/colors.d.ts +2 -1
- package/dist/utils/colors.d.ts.map +1 -1
- package/dist/utils/hooks.d.ts +10 -0
- package/dist/utils/hooks.d.ts.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,169 @@
|
|
|
1
|
+
/* Animation keyframes */
|
|
2
|
+
|
|
3
|
+
@keyframes skeleton-shimmer {
|
|
4
|
+
0% {
|
|
5
|
+
transform: translateX(-100%);
|
|
6
|
+
}
|
|
7
|
+
100% {
|
|
8
|
+
transform: translateX(100%);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@keyframes spinner-rotate {
|
|
13
|
+
0% {
|
|
14
|
+
transform: rotate(0deg);
|
|
15
|
+
}
|
|
16
|
+
100% {
|
|
17
|
+
transform: rotate(360deg);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes pulse-scale {
|
|
22
|
+
0%,
|
|
23
|
+
100% {
|
|
24
|
+
transform: scale(1);
|
|
25
|
+
opacity: 1;
|
|
26
|
+
}
|
|
27
|
+
50% {
|
|
28
|
+
transform: scale(0.5);
|
|
29
|
+
opacity: 0.5;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@keyframes pulse-bounce {
|
|
34
|
+
0%,
|
|
35
|
+
80%,
|
|
36
|
+
100% {
|
|
37
|
+
transform: scale(0);
|
|
38
|
+
opacity: 0.5;
|
|
39
|
+
}
|
|
40
|
+
40% {
|
|
41
|
+
transform: scale(1);
|
|
42
|
+
opacity: 1;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@keyframes pulse-wave {
|
|
47
|
+
0%,
|
|
48
|
+
40%,
|
|
49
|
+
100% {
|
|
50
|
+
transform: scaleY(0.4);
|
|
51
|
+
}
|
|
52
|
+
20% {
|
|
53
|
+
transform: scaleY(1);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@keyframes progress-indeterminate {
|
|
58
|
+
0% {
|
|
59
|
+
left: -40%;
|
|
60
|
+
right: 100%;
|
|
61
|
+
}
|
|
62
|
+
60% {
|
|
63
|
+
left: 100%;
|
|
64
|
+
right: -90%;
|
|
65
|
+
}
|
|
66
|
+
100% {
|
|
67
|
+
left: 100%;
|
|
68
|
+
right: -90%;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@keyframes fade-pulse {
|
|
73
|
+
0%,
|
|
74
|
+
100% {
|
|
75
|
+
opacity: 1;
|
|
76
|
+
}
|
|
77
|
+
50% {
|
|
78
|
+
opacity: 0.3;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@keyframes dots-rotate {
|
|
83
|
+
0% {
|
|
84
|
+
transform: rotate(0deg);
|
|
85
|
+
}
|
|
86
|
+
100% {
|
|
87
|
+
transform: rotate(360deg);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@keyframes ripple-expand {
|
|
92
|
+
0% {
|
|
93
|
+
transform: scale(0);
|
|
94
|
+
opacity: 1;
|
|
95
|
+
}
|
|
96
|
+
100% {
|
|
97
|
+
transform: scale(var(--max-scale, 2));
|
|
98
|
+
opacity: 0;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@keyframes heartbeat-pulse {
|
|
103
|
+
0% {
|
|
104
|
+
transform: scale(0.8);
|
|
105
|
+
opacity: 1;
|
|
106
|
+
}
|
|
107
|
+
100% {
|
|
108
|
+
transform: scale(var(--max-scale, 1.8));
|
|
109
|
+
opacity: 0;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@keyframes typing-bounce {
|
|
114
|
+
0%,
|
|
115
|
+
60%,
|
|
116
|
+
100% {
|
|
117
|
+
transform: translateY(0);
|
|
118
|
+
}
|
|
119
|
+
30% {
|
|
120
|
+
transform: translateY(-8px);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@keyframes typing-fade {
|
|
125
|
+
0%,
|
|
126
|
+
60%,
|
|
127
|
+
100% {
|
|
128
|
+
opacity: 0.2;
|
|
129
|
+
}
|
|
130
|
+
30% {
|
|
131
|
+
opacity: 1;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Animation utility classes */
|
|
136
|
+
|
|
137
|
+
.animate-skeleton {
|
|
138
|
+
animation: skeleton-shimmer var(--animation-duration-normal, 1.5s) infinite;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.animate-spinner {
|
|
142
|
+
animation: spinner-rotate var(--animation-duration-normal, 1s) linear infinite;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.animate-pulse-scale {
|
|
146
|
+
animation: pulse-scale var(--animation-duration-normal, 1.5s) ease-in-out infinite;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.animate-pulse-bounce {
|
|
150
|
+
animation: pulse-bounce var(--animation-duration-normal, 1.4s) ease-in-out infinite;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.animate-progress {
|
|
154
|
+
animation: progress-indeterminate var(--animation-duration-normal, 1.5s) ease-in-out infinite;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Speed variants */
|
|
158
|
+
|
|
159
|
+
.animate-slow {
|
|
160
|
+
animation-duration: var(--animation-duration-slow, 2s);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.animate-fast {
|
|
164
|
+
animation-duration: var(--animation-duration-fast, 0.5s);
|
|
165
|
+
}
|
|
166
|
+
|
|
1
167
|
*, ::before, ::after {
|
|
2
168
|
--tw-border-spacing-x: 0;
|
|
3
169
|
--tw-border-spacing-y: 0;
|
|
@@ -104,9 +270,11 @@
|
|
|
104
270
|
--tw-contain-layout: ;
|
|
105
271
|
--tw-contain-paint: ;
|
|
106
272
|
--tw-contain-style: ;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
|
|
276
|
+
|
|
277
|
+
/*
|
|
110
278
|
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
111
279
|
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
|
112
280
|
*/
|
|
@@ -423,6 +591,7 @@ menu {
|
|
|
423
591
|
/*
|
|
424
592
|
Reset default styling for dialogs.
|
|
425
593
|
*/
|
|
594
|
+
|
|
426
595
|
dialog {
|
|
427
596
|
padding: 0;
|
|
428
597
|
}
|
|
@@ -463,6 +632,7 @@ button,
|
|
|
463
632
|
/*
|
|
464
633
|
Make sure disabled buttons don't get the pointer cursor.
|
|
465
634
|
*/
|
|
635
|
+
|
|
466
636
|
:disabled {
|
|
467
637
|
cursor: default;
|
|
468
638
|
}
|
|
@@ -496,20 +666,25 @@ video {
|
|
|
496
666
|
}
|
|
497
667
|
|
|
498
668
|
/* Make elements with the HTML hidden attribute stay hidden by default */
|
|
669
|
+
|
|
499
670
|
[hidden]:where(:not([hidden="until-found"])) {
|
|
500
671
|
display: none;
|
|
501
672
|
}
|
|
673
|
+
|
|
502
674
|
/* Skeleton base */
|
|
675
|
+
|
|
503
676
|
.skeleton {
|
|
504
677
|
position: relative;
|
|
505
678
|
overflow: hidden;
|
|
506
679
|
--tw-bg-opacity: 1;
|
|
507
680
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
|
|
508
681
|
}
|
|
682
|
+
|
|
509
683
|
.skeleton-animate {
|
|
510
684
|
position: relative;
|
|
511
685
|
overflow: hidden;
|
|
512
686
|
}
|
|
687
|
+
|
|
513
688
|
.skeleton-animate::after {
|
|
514
689
|
position: absolute;
|
|
515
690
|
inset: 0px;
|
|
@@ -523,273 +698,393 @@ video {
|
|
|
523
698
|
);
|
|
524
699
|
animation: skeleton-shimmer 1.5s infinite;
|
|
525
700
|
}
|
|
701
|
+
|
|
526
702
|
/* Spinner base */
|
|
703
|
+
|
|
527
704
|
/* Progress base */
|
|
705
|
+
|
|
528
706
|
.progress-indeterminate {
|
|
529
707
|
position: absolute;
|
|
530
708
|
inset: 0px;
|
|
531
709
|
}
|
|
710
|
+
|
|
532
711
|
.\!visible {
|
|
533
712
|
visibility: visible !important;
|
|
534
713
|
}
|
|
714
|
+
|
|
535
715
|
.visible {
|
|
536
716
|
visibility: visible;
|
|
537
717
|
}
|
|
718
|
+
|
|
538
719
|
.fixed {
|
|
539
720
|
position: fixed;
|
|
540
721
|
}
|
|
722
|
+
|
|
541
723
|
.absolute {
|
|
542
724
|
position: absolute;
|
|
543
725
|
}
|
|
726
|
+
|
|
544
727
|
.relative {
|
|
545
728
|
position: relative;
|
|
546
729
|
}
|
|
730
|
+
|
|
547
731
|
.inset-0 {
|
|
548
732
|
inset: 0px;
|
|
549
733
|
}
|
|
734
|
+
|
|
550
735
|
.z-10 {
|
|
551
736
|
z-index: 10;
|
|
552
737
|
}
|
|
738
|
+
|
|
553
739
|
.col-span-2 {
|
|
554
740
|
grid-column: span 2 / span 2;
|
|
555
741
|
}
|
|
742
|
+
|
|
556
743
|
.mx-auto {
|
|
557
744
|
margin-left: auto;
|
|
558
745
|
margin-right: auto;
|
|
559
746
|
}
|
|
747
|
+
|
|
560
748
|
.mb-4 {
|
|
561
749
|
margin-bottom: 1rem;
|
|
562
750
|
}
|
|
751
|
+
|
|
752
|
+
.mt-1 {
|
|
753
|
+
margin-top: 0.25rem;
|
|
754
|
+
}
|
|
755
|
+
|
|
563
756
|
.block {
|
|
564
757
|
display: block;
|
|
565
758
|
}
|
|
759
|
+
|
|
566
760
|
.flex {
|
|
567
761
|
display: flex;
|
|
568
762
|
}
|
|
763
|
+
|
|
569
764
|
.inline-flex {
|
|
570
765
|
display: inline-flex;
|
|
571
766
|
}
|
|
767
|
+
|
|
572
768
|
.table {
|
|
573
769
|
display: table;
|
|
574
770
|
}
|
|
771
|
+
|
|
575
772
|
.grid {
|
|
576
773
|
display: grid;
|
|
577
774
|
}
|
|
775
|
+
|
|
578
776
|
.h-4 {
|
|
579
777
|
height: 1rem;
|
|
580
778
|
}
|
|
779
|
+
|
|
581
780
|
.h-96 {
|
|
582
781
|
height: 24rem;
|
|
583
782
|
}
|
|
783
|
+
|
|
584
784
|
.h-full {
|
|
585
785
|
height: 100%;
|
|
586
786
|
}
|
|
787
|
+
|
|
587
788
|
.w-1\/2 {
|
|
588
789
|
width: 50%;
|
|
589
790
|
}
|
|
791
|
+
|
|
590
792
|
.w-3\/4 {
|
|
591
793
|
width: 75%;
|
|
592
794
|
}
|
|
795
|
+
|
|
593
796
|
.w-96 {
|
|
594
797
|
width: 24rem;
|
|
595
798
|
}
|
|
799
|
+
|
|
596
800
|
.w-full {
|
|
597
801
|
width: 100%;
|
|
598
802
|
}
|
|
803
|
+
|
|
599
804
|
.max-w-3xl {
|
|
600
805
|
max-width: 48rem;
|
|
601
806
|
}
|
|
807
|
+
|
|
602
808
|
.flex-1 {
|
|
603
809
|
flex: 1 1 0%;
|
|
604
810
|
}
|
|
811
|
+
|
|
605
812
|
.transform {
|
|
606
813
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
607
814
|
}
|
|
815
|
+
|
|
608
816
|
@keyframes spinner-rotate {
|
|
609
817
|
|
|
610
818
|
100% {
|
|
611
819
|
transform: rotate(360deg);
|
|
612
820
|
}
|
|
613
821
|
}
|
|
822
|
+
|
|
614
823
|
.animate-spinner-rotate {
|
|
615
824
|
animation: spinner-rotate 1s linear infinite;
|
|
616
825
|
}
|
|
826
|
+
|
|
617
827
|
.grid-cols-3 {
|
|
618
828
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
619
829
|
}
|
|
830
|
+
|
|
620
831
|
.grid-cols-4 {
|
|
621
832
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
622
833
|
}
|
|
834
|
+
|
|
835
|
+
.flex-row {
|
|
836
|
+
flex-direction: row;
|
|
837
|
+
}
|
|
838
|
+
|
|
623
839
|
.flex-col {
|
|
624
840
|
flex-direction: column;
|
|
625
841
|
}
|
|
842
|
+
|
|
626
843
|
.items-start {
|
|
627
844
|
align-items: flex-start;
|
|
628
845
|
}
|
|
846
|
+
|
|
629
847
|
.items-end {
|
|
630
848
|
align-items: flex-end;
|
|
631
849
|
}
|
|
850
|
+
|
|
632
851
|
.items-center {
|
|
633
852
|
align-items: center;
|
|
634
853
|
}
|
|
854
|
+
|
|
855
|
+
.justify-start {
|
|
856
|
+
justify-content: flex-start;
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
.justify-end {
|
|
860
|
+
justify-content: flex-end;
|
|
861
|
+
}
|
|
862
|
+
|
|
635
863
|
.justify-center {
|
|
636
864
|
justify-content: center;
|
|
637
865
|
}
|
|
866
|
+
|
|
638
867
|
.justify-between {
|
|
639
868
|
justify-content: space-between;
|
|
640
869
|
}
|
|
870
|
+
|
|
641
871
|
.gap-0\.5 {
|
|
642
872
|
gap: 0.125rem;
|
|
643
873
|
}
|
|
874
|
+
|
|
644
875
|
.gap-1 {
|
|
645
876
|
gap: 0.25rem;
|
|
646
877
|
}
|
|
878
|
+
|
|
647
879
|
.gap-2 {
|
|
648
880
|
gap: 0.5rem;
|
|
649
881
|
}
|
|
882
|
+
|
|
650
883
|
.gap-3 {
|
|
651
884
|
gap: 0.75rem;
|
|
652
885
|
}
|
|
886
|
+
|
|
653
887
|
.gap-4 {
|
|
654
888
|
gap: 1rem;
|
|
655
889
|
}
|
|
890
|
+
|
|
656
891
|
.gap-6 {
|
|
657
892
|
gap: 1.5rem;
|
|
658
893
|
}
|
|
894
|
+
|
|
659
895
|
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
|
660
896
|
--tw-space-y-reverse: 0;
|
|
661
897
|
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
|
662
898
|
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
|
663
899
|
}
|
|
900
|
+
|
|
664
901
|
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
|
665
902
|
--tw-space-y-reverse: 0;
|
|
666
903
|
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
|
667
904
|
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
|
668
905
|
}
|
|
906
|
+
|
|
669
907
|
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
|
670
908
|
--tw-space-y-reverse: 0;
|
|
671
909
|
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
|
672
910
|
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
|
673
911
|
}
|
|
912
|
+
|
|
674
913
|
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
|
675
914
|
--tw-space-y-reverse: 0;
|
|
676
915
|
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
|
|
677
916
|
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
|
|
678
917
|
}
|
|
918
|
+
|
|
679
919
|
.overflow-hidden {
|
|
680
920
|
overflow: hidden;
|
|
681
921
|
}
|
|
922
|
+
|
|
682
923
|
.rounded {
|
|
683
924
|
border-radius: 0.25rem;
|
|
684
925
|
}
|
|
926
|
+
|
|
685
927
|
.rounded-full {
|
|
686
928
|
border-radius: 9999px;
|
|
687
929
|
}
|
|
930
|
+
|
|
688
931
|
.rounded-lg {
|
|
689
932
|
border-radius: 0.5rem;
|
|
690
933
|
}
|
|
934
|
+
|
|
691
935
|
.rounded-sm {
|
|
692
936
|
border-radius: 0.125rem;
|
|
693
937
|
}
|
|
938
|
+
|
|
694
939
|
.border {
|
|
695
940
|
border-width: 1px;
|
|
696
941
|
}
|
|
942
|
+
|
|
943
|
+
.border-2 {
|
|
944
|
+
border-width: 2px;
|
|
945
|
+
}
|
|
946
|
+
|
|
697
947
|
.border-b {
|
|
698
948
|
border-bottom-width: 1px;
|
|
699
949
|
}
|
|
950
|
+
|
|
700
951
|
.border-gray-200 {
|
|
701
952
|
--tw-border-opacity: 1;
|
|
702
953
|
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
|
703
954
|
}
|
|
955
|
+
|
|
704
956
|
.bg-gray-100 {
|
|
705
957
|
--tw-bg-opacity: 1;
|
|
706
958
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
|
707
959
|
}
|
|
960
|
+
|
|
708
961
|
.bg-gray-200 {
|
|
709
962
|
--tw-bg-opacity: 1;
|
|
710
963
|
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
|
|
711
964
|
}
|
|
965
|
+
|
|
712
966
|
.bg-white {
|
|
713
967
|
--tw-bg-opacity: 1;
|
|
714
968
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
715
969
|
}
|
|
970
|
+
|
|
716
971
|
.p-4 {
|
|
717
972
|
padding: 1rem;
|
|
718
973
|
}
|
|
974
|
+
|
|
719
975
|
.p-6 {
|
|
720
976
|
padding: 1.5rem;
|
|
721
977
|
}
|
|
978
|
+
|
|
722
979
|
.p-8 {
|
|
723
980
|
padding: 2rem;
|
|
724
981
|
}
|
|
982
|
+
|
|
725
983
|
.pb-2 {
|
|
726
984
|
padding-bottom: 0.5rem;
|
|
727
985
|
}
|
|
986
|
+
|
|
728
987
|
.pb-4 {
|
|
729
988
|
padding-bottom: 1rem;
|
|
730
989
|
}
|
|
990
|
+
|
|
731
991
|
.pb-6 {
|
|
732
992
|
padding-bottom: 1.5rem;
|
|
733
993
|
}
|
|
994
|
+
|
|
995
|
+
.text-left {
|
|
996
|
+
text-align: left;
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
.text-center {
|
|
1000
|
+
text-align: center;
|
|
1001
|
+
}
|
|
1002
|
+
|
|
734
1003
|
.text-2xl {
|
|
735
1004
|
font-size: 1.5rem;
|
|
736
1005
|
line-height: 2rem;
|
|
737
1006
|
}
|
|
1007
|
+
|
|
738
1008
|
.text-sm {
|
|
739
1009
|
font-size: 0.875rem;
|
|
740
1010
|
line-height: 1.25rem;
|
|
741
1011
|
}
|
|
1012
|
+
|
|
742
1013
|
.text-xs {
|
|
743
1014
|
font-size: 0.75rem;
|
|
744
1015
|
line-height: 1rem;
|
|
745
1016
|
}
|
|
1017
|
+
|
|
746
1018
|
.font-bold {
|
|
747
1019
|
font-weight: 700;
|
|
748
1020
|
}
|
|
1021
|
+
|
|
749
1022
|
.font-medium {
|
|
750
1023
|
font-weight: 500;
|
|
751
1024
|
}
|
|
1025
|
+
|
|
752
1026
|
.font-semibold {
|
|
753
1027
|
font-weight: 600;
|
|
754
1028
|
}
|
|
1029
|
+
|
|
755
1030
|
.text-gray-600 {
|
|
756
1031
|
--tw-text-opacity: 1;
|
|
757
1032
|
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
|
758
1033
|
}
|
|
1034
|
+
|
|
759
1035
|
.opacity-30 {
|
|
760
1036
|
opacity: 0.3;
|
|
761
1037
|
}
|
|
1038
|
+
|
|
762
1039
|
.shadow-lg {
|
|
763
1040
|
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
764
1041
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
|
765
1042
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
766
1043
|
}
|
|
1044
|
+
|
|
767
1045
|
.ring {
|
|
768
1046
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
769
1047
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
770
1048
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
771
1049
|
}
|
|
1050
|
+
|
|
772
1051
|
.blur {
|
|
773
1052
|
--tw-blur: blur(8px);
|
|
774
1053
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
775
1054
|
}
|
|
1055
|
+
|
|
776
1056
|
.transition {
|
|
777
1057
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
778
1058
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
779
1059
|
transition-duration: 150ms;
|
|
780
1060
|
}
|
|
1061
|
+
|
|
781
1062
|
.transition-all {
|
|
782
1063
|
transition-property: all;
|
|
783
1064
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
784
1065
|
transition-duration: 150ms;
|
|
785
1066
|
}
|
|
1067
|
+
|
|
1068
|
+
.transition-colors {
|
|
1069
|
+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
1070
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1071
|
+
transition-duration: 150ms;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
786
1074
|
.duration-300 {
|
|
787
1075
|
transition-duration: 300ms;
|
|
788
1076
|
}
|
|
1077
|
+
|
|
789
1078
|
.ease-in-out {
|
|
790
1079
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
791
1080
|
}
|
|
1081
|
+
|
|
1082
|
+
.ease-out {
|
|
1083
|
+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
1084
|
+
}
|
|
1085
|
+
|
|
792
1086
|
/* CSS Variables for theming */
|
|
1087
|
+
|
|
793
1088
|
:root {
|
|
794
1089
|
--loader-primary: #3b82f6;
|
|
795
1090
|
--loader-secondary: #8b5cf6;
|
|
@@ -799,4 +1094,5 @@ video {
|
|
|
799
1094
|
--animation-duration-normal: 1s;
|
|
800
1095
|
--animation-duration-fast: 0.5s;
|
|
801
1096
|
}
|
|
1097
|
+
|
|
802
1098
|
/* Base loader styles */
|
package/dist/types/common.d.ts
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Size preset options
|
|
4
|
+
*/
|
|
5
|
+
export type SizePreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
6
|
+
/**
|
|
7
|
+
* Size preset to pixel mapping
|
|
8
|
+
*/
|
|
9
|
+
export declare const SIZE_PRESET_MAP: Record<SizePreset, number>;
|
|
2
10
|
/**
|
|
3
11
|
* Base props for all loader components
|
|
4
12
|
*/
|
|
5
13
|
export interface BaseLoaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
6
|
-
/** Size of the loader (numeric for px, or CSS string like '2rem') */
|
|
7
|
-
size?: number | string;
|
|
14
|
+
/** Size of the loader (preset, numeric for px, or CSS string like '2rem') */
|
|
15
|
+
size?: SizePreset | number | string;
|
|
8
16
|
/** Primary color of the loader */
|
|
9
17
|
color?: string;
|
|
10
18
|
/** Secondary color (for multi-color loaders) */
|
|
@@ -19,6 +27,10 @@ export interface BaseLoaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
|
|
|
19
27
|
visible?: boolean;
|
|
20
28
|
/** Animation speed: 'slow' | 'normal' | 'fast' or milliseconds */
|
|
21
29
|
speed?: 'slow' | 'normal' | 'fast' | number;
|
|
30
|
+
/** Reverse animation direction */
|
|
31
|
+
reverse?: boolean;
|
|
32
|
+
/** Respect user's reduced motion preference (default: true) */
|
|
33
|
+
respectMotionPreference?: boolean;
|
|
22
34
|
/** Test ID for testing */
|
|
23
35
|
testId?: string;
|
|
24
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpF,
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMtD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpF,6EAA6E;IAC7E,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAEpC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAE5C,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIpD,CAAC"}
|
package/dist/types/progress.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ProgressLoaderProps } from './common';
|
|
1
|
+
import { ProgressLoaderProps, BaseLoaderProps } from './common';
|
|
2
2
|
/**
|
|
3
3
|
* ProgressBar component props
|
|
4
4
|
*/
|
|
@@ -30,4 +30,27 @@ export interface ProgressRingProps extends ProgressLoaderProps {
|
|
|
30
30
|
/** Buffer value (0-100) for showing partial loading */
|
|
31
31
|
buffer?: number;
|
|
32
32
|
}
|
|
33
|
+
/**
|
|
34
|
+
* ProgressSteps component props
|
|
35
|
+
*/
|
|
36
|
+
export interface ProgressStepsProps extends BaseLoaderProps {
|
|
37
|
+
/** Total number of steps (required) */
|
|
38
|
+
steps: number;
|
|
39
|
+
/** Current active step (0-indexed, required) */
|
|
40
|
+
currentStep: number;
|
|
41
|
+
/** Optional step labels */
|
|
42
|
+
labels?: string[];
|
|
43
|
+
/** Show step numbers */
|
|
44
|
+
showNumbers?: boolean;
|
|
45
|
+
/** Layout orientation */
|
|
46
|
+
orientation?: 'horizontal' | 'vertical';
|
|
47
|
+
/** Connector style between steps */
|
|
48
|
+
connector?: 'line' | 'none';
|
|
49
|
+
/** Color for completed steps */
|
|
50
|
+
completedColor?: string;
|
|
51
|
+
/** Color for active step */
|
|
52
|
+
activeColor?: string;
|
|
53
|
+
/** Color for inactive steps */
|
|
54
|
+
inactiveColor?: string;
|
|
55
|
+
}
|
|
33
56
|
//# sourceMappingURL=progress.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/types/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/types/progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhE;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,mBAAmB;IAC3D,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
|
package/dist/types/pulse.d.ts
CHANGED
|
@@ -22,4 +22,17 @@ export interface PulseBarsProps extends BaseLoaderProps {
|
|
|
22
22
|
/** Number of bars */
|
|
23
23
|
barCount?: number;
|
|
24
24
|
}
|
|
25
|
+
/**
|
|
26
|
+
* TypingIndicator component props
|
|
27
|
+
*/
|
|
28
|
+
export interface TypingIndicatorProps extends BaseLoaderProps {
|
|
29
|
+
/** Number of dots */
|
|
30
|
+
dotCount?: number;
|
|
31
|
+
/** Size of each dot */
|
|
32
|
+
dotSize?: number | string;
|
|
33
|
+
/** Space between dots */
|
|
34
|
+
gap?: number | string;
|
|
35
|
+
/** Animation style */
|
|
36
|
+
variant?: 'bounce' | 'fade';
|
|
37
|
+
}
|
|
25
38
|
//# sourceMappingURL=pulse.d.ts.map
|