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.
Files changed (143) hide show
  1. package/README.md +55 -6
  2. package/dist/components/progress/ProgressBar.d.ts.map +1 -1
  3. package/dist/components/progress/ProgressCircle.d.ts.map +1 -1
  4. package/dist/components/progress/ProgressRing.d.ts.map +1 -1
  5. package/dist/components/progress/ProgressSteps.d.ts +16 -0
  6. package/dist/components/progress/ProgressSteps.d.ts.map +1 -0
  7. package/dist/components/progress/index.d.ts +1 -0
  8. package/dist/components/progress/index.d.ts.map +1 -1
  9. package/dist/components/pulse/PulseBars.d.ts +2 -2
  10. package/dist/components/pulse/PulseBars.d.ts.map +1 -1
  11. package/dist/components/pulse/PulseDots.d.ts +2 -2
  12. package/dist/components/pulse/PulseDots.d.ts.map +1 -1
  13. package/dist/components/pulse/PulseWave.d.ts +2 -2
  14. package/dist/components/pulse/PulseWave.d.ts.map +1 -1
  15. package/dist/components/pulse/TypingIndicator.d.ts +16 -0
  16. package/dist/components/pulse/TypingIndicator.d.ts.map +1 -0
  17. package/dist/components/pulse/index.d.ts +1 -0
  18. package/dist/components/pulse/index.d.ts.map +1 -1
  19. package/dist/components/skeleton/SkeletonForm.d.ts +16 -0
  20. package/dist/components/skeleton/SkeletonForm.d.ts.map +1 -0
  21. package/dist/components/skeleton/index.d.ts +1 -0
  22. package/dist/components/skeleton/index.d.ts.map +1 -1
  23. package/dist/components/spinner/SpinnerBars.d.ts +2 -2
  24. package/dist/components/spinner/SpinnerBars.d.ts.map +1 -1
  25. package/dist/components/spinner/SpinnerCircle.d.ts +2 -1
  26. package/dist/components/spinner/SpinnerCircle.d.ts.map +1 -1
  27. package/dist/components/spinner/SpinnerDots.d.ts +2 -2
  28. package/dist/components/spinner/SpinnerDots.d.ts.map +1 -1
  29. package/dist/components/spinner/SpinnerGrid.d.ts +2 -2
  30. package/dist/components/spinner/SpinnerGrid.d.ts.map +1 -1
  31. package/dist/components/spinner/SpinnerPulse.d.ts +15 -0
  32. package/dist/components/spinner/SpinnerPulse.d.ts.map +1 -0
  33. package/dist/components/spinner/SpinnerRing.d.ts +3 -3
  34. package/dist/components/spinner/SpinnerRing.d.ts.map +1 -1
  35. package/dist/components/spinner/SpinnerWave.d.ts +15 -0
  36. package/dist/components/spinner/SpinnerWave.d.ts.map +1 -0
  37. package/dist/components/spinner/index.d.ts +2 -0
  38. package/dist/components/spinner/index.d.ts.map +1 -1
  39. package/dist/index.cjs +23 -13
  40. package/dist/index.cjs.map +1 -1
  41. package/dist/index.d.ts +1 -1
  42. package/dist/index.js +23 -13
  43. package/dist/index.js.map +1 -1
  44. package/dist/index13.cjs +54 -35
  45. package/dist/index13.cjs.map +1 -1
  46. package/dist/index13.js +56 -37
  47. package/dist/index13.js.map +1 -1
  48. package/dist/index14.cjs +29 -12
  49. package/dist/index14.cjs.map +1 -1
  50. package/dist/index14.js +30 -13
  51. package/dist/index14.js.map +1 -1
  52. package/dist/index15.cjs +19 -36
  53. package/dist/index15.cjs.map +1 -1
  54. package/dist/index15.js +19 -36
  55. package/dist/index15.js.map +1 -1
  56. package/dist/index16.cjs +47 -24
  57. package/dist/index16.cjs.map +1 -1
  58. package/dist/index16.js +48 -25
  59. package/dist/index16.js.map +1 -1
  60. package/dist/index17.cjs +29 -38
  61. package/dist/index17.cjs.map +1 -1
  62. package/dist/index17.js +29 -38
  63. package/dist/index17.js.map +1 -1
  64. package/dist/index18.cjs +52 -79
  65. package/dist/index18.cjs.map +1 -1
  66. package/dist/index18.js +54 -81
  67. package/dist/index18.js.map +1 -1
  68. package/dist/index19.cjs +45 -104
  69. package/dist/index19.cjs.map +1 -1
  70. package/dist/index19.js +46 -105
  71. package/dist/index19.js.map +1 -1
  72. package/dist/index20.cjs +58 -108
  73. package/dist/index20.cjs.map +1 -1
  74. package/dist/index20.js +60 -110
  75. package/dist/index20.js.map +1 -1
  76. package/dist/index21.cjs +79 -28
  77. package/dist/index21.cjs.map +1 -1
  78. package/dist/index21.js +82 -31
  79. package/dist/index21.js.map +1 -1
  80. package/dist/index22.cjs +106 -32
  81. package/dist/index22.cjs.map +1 -1
  82. package/dist/index22.js +108 -34
  83. package/dist/index22.js.map +1 -1
  84. package/dist/index23.cjs +112 -34
  85. package/dist/index23.cjs.map +1 -1
  86. package/dist/index23.js +115 -37
  87. package/dist/index23.js.map +1 -1
  88. package/dist/index24.cjs +108 -48
  89. package/dist/index24.cjs.map +1 -1
  90. package/dist/index24.js +110 -50
  91. package/dist/index24.js.map +1 -1
  92. package/dist/index25.cjs +59 -16
  93. package/dist/index25.cjs.map +1 -1
  94. package/dist/index25.js +58 -15
  95. package/dist/index25.js.map +1 -1
  96. package/dist/index26.cjs +66 -0
  97. package/dist/index26.cjs.map +1 -0
  98. package/dist/index26.js +66 -0
  99. package/dist/index26.js.map +1 -0
  100. package/dist/index27.cjs +69 -0
  101. package/dist/index27.cjs.map +1 -0
  102. package/dist/index27.js +69 -0
  103. package/dist/index27.js.map +1 -0
  104. package/dist/index28.cjs +65 -0
  105. package/dist/index28.cjs.map +1 -0
  106. package/dist/index28.js +65 -0
  107. package/dist/index28.js.map +1 -0
  108. package/dist/index29.cjs +71 -0
  109. package/dist/index29.cjs.map +1 -0
  110. package/dist/index29.js +71 -0
  111. package/dist/index29.js.map +1 -0
  112. package/dist/index3.cjs +1 -1
  113. package/dist/index3.js +1 -1
  114. package/dist/index30.cjs +18 -0
  115. package/dist/index30.cjs.map +1 -0
  116. package/dist/index30.js +18 -0
  117. package/dist/index30.js.map +1 -0
  118. package/dist/index31.cjs +42 -0
  119. package/dist/index31.cjs.map +1 -0
  120. package/dist/index31.js +42 -0
  121. package/dist/index31.js.map +1 -0
  122. package/dist/index4.cjs +10 -0
  123. package/dist/index4.cjs.map +1 -1
  124. package/dist/index4.js +10 -0
  125. package/dist/index4.js.map +1 -1
  126. package/dist/premium-react-loaders.css +299 -3
  127. package/dist/types/common.d.ts +14 -2
  128. package/dist/types/common.d.ts.map +1 -1
  129. package/dist/types/progress.d.ts +24 -1
  130. package/dist/types/progress.d.ts.map +1 -1
  131. package/dist/types/pulse.d.ts +13 -0
  132. package/dist/types/pulse.d.ts.map +1 -1
  133. package/dist/types/skeleton.d.ts +17 -0
  134. package/dist/types/skeleton.d.ts.map +1 -1
  135. package/dist/types/spinner.d.ts +18 -0
  136. package/dist/types/spinner.d.ts.map +1 -1
  137. package/dist/utils/colors.d.ts +2 -1
  138. package/dist/utils/colors.d.ts.map +1 -1
  139. package/dist/utils/hooks.d.ts +10 -0
  140. package/dist/utils/hooks.d.ts.map +1 -0
  141. package/dist/utils/index.d.ts +1 -0
  142. package/dist/utils/index.d.ts.map +1 -1
  143. 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
- ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
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 */
@@ -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,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB,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,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"}
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"}
@@ -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;AAE/C;;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"}
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"}
@@ -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