@tapcart/mobile-components 0.2.11 → 0.3.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/dist/components/hooks/use-infinite-scroll.d.ts +2 -0
- package/dist/components/hooks/use-infinite-scroll.d.ts.map +1 -1
- package/dist/components/hooks/use-infinite-scroll.js +11 -6
- package/dist/components/hooks/use-scroll-direction.d.ts +8 -0
- package/dist/components/hooks/use-scroll-direction.d.ts.map +1 -0
- package/dist/components/hooks/use-scroll-direction.js +42 -0
- package/dist/components/ui/accordion.js +3 -3
- package/dist/components/ui/alert-dialog.js +8 -8
- package/dist/components/ui/badge.d.ts +4 -3
- package/dist/components/ui/badge.d.ts.map +1 -1
- package/dist/components/ui/badge.js +25 -7
- package/dist/components/ui/button.d.ts +3 -1
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/button.js +50 -15
- package/dist/components/ui/carousel.d.ts +5 -5
- package/dist/components/ui/carousel.d.ts.map +1 -1
- package/dist/components/ui/carousel.js +5 -5
- package/dist/components/ui/checkbox.d.ts.map +1 -1
- package/dist/components/ui/checkbox.js +6 -6
- package/dist/components/ui/chip.d.ts +2 -2
- package/dist/components/ui/chip.d.ts.map +1 -1
- package/dist/components/ui/chip.js +4 -4
- package/dist/components/ui/container.js +1 -1
- package/dist/components/ui/drawer.d.ts +3 -3
- package/dist/components/ui/drawer.d.ts.map +1 -1
- package/dist/components/ui/drawer.js +15 -13
- package/dist/components/ui/dropdown.d.ts +22 -0
- package/dist/components/ui/dropdown.d.ts.map +1 -0
- package/dist/components/ui/dropdown.js +60 -0
- package/dist/components/ui/favorite.d.ts +4 -2
- package/dist/components/ui/favorite.d.ts.map +1 -1
- package/dist/components/ui/favorite.js +11 -5
- package/dist/components/ui/grid.js +5 -5
- package/dist/components/ui/icon.d.ts +2 -2
- package/dist/components/ui/icon.d.ts.map +1 -1
- package/dist/components/ui/icon.js +36 -7
- package/dist/components/ui/image.d.ts +157 -0
- package/dist/components/ui/image.d.ts.map +1 -0
- package/dist/components/ui/image.js +318 -0
- package/dist/components/ui/input.js +1 -1
- package/dist/components/ui/label.js +1 -1
- package/dist/components/ui/line-item-text-icons.d.ts +14 -0
- package/dist/components/ui/line-item-text-icons.d.ts.map +1 -0
- package/dist/components/ui/line-item-text-icons.js +22 -0
- package/dist/components/ui/money.js +1 -1
- package/dist/components/ui/price.d.ts +2 -1
- package/dist/components/ui/price.d.ts.map +1 -1
- package/dist/components/ui/price.js +6 -6
- package/dist/components/ui/product-card.d.ts +79 -27
- package/dist/components/ui/product-card.d.ts.map +1 -1
- package/dist/components/ui/product-card.js +194 -34
- package/dist/components/ui/product-grid.d.ts +1 -1
- package/dist/components/ui/product-grid.d.ts.map +1 -1
- package/dist/components/ui/product-grid.js +5 -5
- package/dist/components/ui/quantity-picker.d.ts +14 -0
- package/dist/components/ui/quantity-picker.d.ts.map +1 -0
- package/dist/components/ui/quantity-picker.js +23 -0
- package/dist/components/ui/radio-group.js +4 -4
- package/dist/components/ui/scroll-area.d.ts +1 -1
- package/dist/components/ui/scroll-area.d.ts.map +1 -1
- package/dist/components/ui/scroll-area.js +2 -2
- package/dist/components/ui/selectors.d.ts +3 -3
- package/dist/components/ui/selectors.d.ts.map +1 -1
- package/dist/components/ui/selectors.js +22 -6
- package/dist/components/ui/separator.js +1 -1
- package/dist/components/ui/skeleton.js +2 -2
- package/dist/components/ui/slider.d.ts +14 -0
- package/dist/components/ui/slider.d.ts.map +1 -0
- package/dist/components/ui/slider.js +50 -0
- package/dist/components/ui/subscription.d.ts +15 -0
- package/dist/components/ui/subscription.d.ts.map +1 -0
- package/dist/components/ui/subscription.js +24 -0
- package/dist/components/ui/switch.d.ts.map +1 -1
- package/dist/components/ui/switch.js +2 -2
- package/dist/components/ui/tabs.js +4 -4
- package/dist/components/ui/text.js +6 -6
- package/dist/components/ui/toast.d.ts +3 -3
- package/dist/components/ui/toast.d.ts.map +1 -1
- package/dist/components/ui/toast.js +7 -7
- package/dist/components/ui/toaster.js +2 -2
- package/dist/components/ui/toggle-group.d.ts +2 -2
- package/dist/components/ui/toggle-group.js +2 -2
- package/dist/components/ui/toggle.d.ts +2 -2
- package/dist/components/ui/toggle.js +2 -2
- package/dist/components/ui/use-toast.d.ts +6 -6
- package/dist/components/ui/use-toast.d.ts.map +1 -1
- package/dist/components/ui/video.js +1 -1
- package/dist/components/ui/wishlist.d.ts +2 -1
- package/dist/components/ui/wishlist.d.ts.map +1 -1
- package/dist/components/ui/wishlist.js +3 -3
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -0
- package/dist/styles.css +210 -72
- package/package.json +9 -3
- package/dist/components/ThemeProvider.d.ts +0 -3
- package/dist/components/ThemeProvider.d.ts.map +0 -1
- package/dist/components/ThemeProvider.js +0 -18
- package/dist/components/ThemeToggle.d.ts +0 -2
- package/dist/components/ThemeToggle.d.ts.map +0 -1
- package/dist/components/ThemeToggle.js +0 -8
package/dist/styles.css
CHANGED
|
@@ -425,7 +425,9 @@ video {
|
|
|
425
425
|
|
|
426
426
|
--radius: 0.5rem;
|
|
427
427
|
|
|
428
|
-
--
|
|
428
|
+
--fontRegular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
|
429
|
+
--fontMedium: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
|
430
|
+
--fontBold: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
|
429
431
|
|
|
430
432
|
--coreColors-pageColor: #ffffff;
|
|
431
433
|
--coreColors-shadow: #000000;
|
|
@@ -667,6 +669,9 @@ video {
|
|
|
667
669
|
.bottom-0 {
|
|
668
670
|
bottom: 0px;
|
|
669
671
|
}
|
|
672
|
+
.bottom-10 {
|
|
673
|
+
bottom: 2.5rem;
|
|
674
|
+
}
|
|
670
675
|
.end-4 {
|
|
671
676
|
inset-inline-end: 1rem;
|
|
672
677
|
}
|
|
@@ -676,6 +681,9 @@ video {
|
|
|
676
681
|
.left-1\/2 {
|
|
677
682
|
left: 50%;
|
|
678
683
|
}
|
|
684
|
+
.left-2 {
|
|
685
|
+
left: 0.5rem;
|
|
686
|
+
}
|
|
679
687
|
.left-\[50\%\] {
|
|
680
688
|
left: 50%;
|
|
681
689
|
}
|
|
@@ -694,6 +702,9 @@ video {
|
|
|
694
702
|
.top-1\/2 {
|
|
695
703
|
top: 50%;
|
|
696
704
|
}
|
|
705
|
+
.top-10 {
|
|
706
|
+
top: 2.5rem;
|
|
707
|
+
}
|
|
697
708
|
.top-2 {
|
|
698
709
|
top: 0.5rem;
|
|
699
710
|
}
|
|
@@ -737,6 +748,10 @@ video {
|
|
|
737
748
|
margin-top: 0.75rem;
|
|
738
749
|
margin-bottom: 0.75rem;
|
|
739
750
|
}
|
|
751
|
+
.my-auto {
|
|
752
|
+
margin-top: auto;
|
|
753
|
+
margin-bottom: auto;
|
|
754
|
+
}
|
|
740
755
|
.-ml-4 {
|
|
741
756
|
margin-left: -1rem;
|
|
742
757
|
}
|
|
@@ -746,15 +761,24 @@ video {
|
|
|
746
761
|
.mb-2 {
|
|
747
762
|
margin-bottom: 0.5rem;
|
|
748
763
|
}
|
|
764
|
+
.mb-6 {
|
|
765
|
+
margin-bottom: 1.5rem;
|
|
766
|
+
}
|
|
749
767
|
.ml-2 {
|
|
750
768
|
margin-left: 0.5rem;
|
|
751
769
|
}
|
|
752
770
|
.mr-2 {
|
|
753
771
|
margin-right: 0.5rem;
|
|
754
772
|
}
|
|
773
|
+
.mt-1 {
|
|
774
|
+
margin-top: 0.25rem;
|
|
775
|
+
}
|
|
755
776
|
.mt-2 {
|
|
756
777
|
margin-top: 0.5rem;
|
|
757
778
|
}
|
|
779
|
+
.mt-3 {
|
|
780
|
+
margin-top: 0.75rem;
|
|
781
|
+
}
|
|
758
782
|
.mt-auto {
|
|
759
783
|
margin-top: auto;
|
|
760
784
|
}
|
|
@@ -782,9 +806,24 @@ video {
|
|
|
782
806
|
.aspect-\[2\/3\] {
|
|
783
807
|
aspect-ratio: 2/3;
|
|
784
808
|
}
|
|
809
|
+
.aspect-\[4\/5\] {
|
|
810
|
+
aspect-ratio: 4/5;
|
|
811
|
+
}
|
|
812
|
+
.aspect-productImages {
|
|
813
|
+
aspect-ratio: var(--productImage-aspectRatio);
|
|
814
|
+
}
|
|
785
815
|
.aspect-square {
|
|
786
816
|
aspect-ratio: 1 / 1;
|
|
787
817
|
}
|
|
818
|
+
.h-0 {
|
|
819
|
+
height: 0px;
|
|
820
|
+
}
|
|
821
|
+
.h-0\.5 {
|
|
822
|
+
height: 0.125rem;
|
|
823
|
+
}
|
|
824
|
+
.h-1 {
|
|
825
|
+
height: 0.25rem;
|
|
826
|
+
}
|
|
788
827
|
.h-10 {
|
|
789
828
|
height: 2.5rem;
|
|
790
829
|
}
|
|
@@ -812,6 +851,9 @@ video {
|
|
|
812
851
|
.h-64 {
|
|
813
852
|
height: 16rem;
|
|
814
853
|
}
|
|
854
|
+
.h-7 {
|
|
855
|
+
height: 1.75rem;
|
|
856
|
+
}
|
|
815
857
|
.h-8 {
|
|
816
858
|
height: 2rem;
|
|
817
859
|
}
|
|
@@ -836,6 +878,9 @@ video {
|
|
|
836
878
|
.h-full {
|
|
837
879
|
height: 100%;
|
|
838
880
|
}
|
|
881
|
+
.max-h-\[240px\] {
|
|
882
|
+
max-height: 240px;
|
|
883
|
+
}
|
|
839
884
|
.max-h-screen {
|
|
840
885
|
max-height: 100vh;
|
|
841
886
|
}
|
|
@@ -845,8 +890,8 @@ video {
|
|
|
845
890
|
.w-10 {
|
|
846
891
|
width: 2.5rem;
|
|
847
892
|
}
|
|
848
|
-
.w-
|
|
849
|
-
width:
|
|
893
|
+
.w-12 {
|
|
894
|
+
width: 3rem;
|
|
850
895
|
}
|
|
851
896
|
.w-14 {
|
|
852
897
|
width: 3.5rem;
|
|
@@ -860,9 +905,6 @@ video {
|
|
|
860
905
|
.w-2\.5 {
|
|
861
906
|
width: 0.625rem;
|
|
862
907
|
}
|
|
863
|
-
.w-3\/4 {
|
|
864
|
-
width: 75%;
|
|
865
|
-
}
|
|
866
908
|
.w-4 {
|
|
867
909
|
width: 1rem;
|
|
868
910
|
}
|
|
@@ -872,6 +914,9 @@ video {
|
|
|
872
914
|
.w-6 {
|
|
873
915
|
width: 1.5rem;
|
|
874
916
|
}
|
|
917
|
+
.w-7 {
|
|
918
|
+
width: 1.75rem;
|
|
919
|
+
}
|
|
875
920
|
.w-8 {
|
|
876
921
|
width: 2rem;
|
|
877
922
|
}
|
|
@@ -894,6 +939,12 @@ video {
|
|
|
894
939
|
.min-w-0 {
|
|
895
940
|
min-width: 0px;
|
|
896
941
|
}
|
|
942
|
+
.min-w-\[8rem\] {
|
|
943
|
+
min-width: 8rem;
|
|
944
|
+
}
|
|
945
|
+
.max-w-full {
|
|
946
|
+
max-width: 100%;
|
|
947
|
+
}
|
|
897
948
|
.max-w-lg {
|
|
898
949
|
max-width: 32rem;
|
|
899
950
|
}
|
|
@@ -906,6 +957,9 @@ video {
|
|
|
906
957
|
.shrink-0 {
|
|
907
958
|
flex-shrink: 0;
|
|
908
959
|
}
|
|
960
|
+
.grow {
|
|
961
|
+
flex-grow: 1;
|
|
962
|
+
}
|
|
909
963
|
.grow-0 {
|
|
910
964
|
flex-grow: 0;
|
|
911
965
|
}
|
|
@@ -953,6 +1007,9 @@ video {
|
|
|
953
1007
|
.animate-spin {
|
|
954
1008
|
animation: spin 1s linear infinite;
|
|
955
1009
|
}
|
|
1010
|
+
.cursor-default {
|
|
1011
|
+
cursor: default;
|
|
1012
|
+
}
|
|
956
1013
|
.cursor-pointer {
|
|
957
1014
|
cursor: pointer;
|
|
958
1015
|
}
|
|
@@ -1000,12 +1057,21 @@ video {
|
|
|
1000
1057
|
.items-center {
|
|
1001
1058
|
align-items: center;
|
|
1002
1059
|
}
|
|
1060
|
+
.justify-start {
|
|
1061
|
+
justify-content: flex-start;
|
|
1062
|
+
}
|
|
1063
|
+
.justify-end {
|
|
1064
|
+
justify-content: flex-end;
|
|
1065
|
+
}
|
|
1003
1066
|
.justify-center {
|
|
1004
1067
|
justify-content: center;
|
|
1005
1068
|
}
|
|
1006
1069
|
.justify-between {
|
|
1007
1070
|
justify-content: space-between;
|
|
1008
1071
|
}
|
|
1072
|
+
.gap-0 {
|
|
1073
|
+
gap: 0px;
|
|
1074
|
+
}
|
|
1009
1075
|
.gap-1 {
|
|
1010
1076
|
gap: 0.25rem;
|
|
1011
1077
|
}
|
|
@@ -1019,8 +1085,8 @@ video {
|
|
|
1019
1085
|
-moz-column-gap: 7px;
|
|
1020
1086
|
column-gap: 7px;
|
|
1021
1087
|
}
|
|
1022
|
-
.gap-y
|
|
1023
|
-
row-gap:
|
|
1088
|
+
.gap-y-4 {
|
|
1089
|
+
row-gap: 1rem;
|
|
1024
1090
|
}
|
|
1025
1091
|
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
|
|
1026
1092
|
--tw-space-y-reverse: 0;
|
|
@@ -1035,6 +1101,9 @@ video {
|
|
|
1035
1101
|
.self-start {
|
|
1036
1102
|
align-self: flex-start;
|
|
1037
1103
|
}
|
|
1104
|
+
.self-center {
|
|
1105
|
+
align-self: center;
|
|
1106
|
+
}
|
|
1038
1107
|
.overflow-hidden {
|
|
1039
1108
|
overflow: hidden;
|
|
1040
1109
|
}
|
|
@@ -1044,8 +1113,11 @@ video {
|
|
|
1044
1113
|
.overflow-x-auto {
|
|
1045
1114
|
overflow-x: auto;
|
|
1046
1115
|
}
|
|
1047
|
-
.
|
|
1048
|
-
|
|
1116
|
+
.overflow-y-auto {
|
|
1117
|
+
overflow-y: auto;
|
|
1118
|
+
}
|
|
1119
|
+
.overflow-y-hidden {
|
|
1120
|
+
overflow-y: hidden;
|
|
1049
1121
|
}
|
|
1050
1122
|
.truncate {
|
|
1051
1123
|
overflow: hidden;
|
|
@@ -1070,9 +1142,6 @@ video {
|
|
|
1070
1142
|
.rounded-full {
|
|
1071
1143
|
border-radius: 9999px;
|
|
1072
1144
|
}
|
|
1073
|
-
.rounded-lg {
|
|
1074
|
-
border-radius: var(--radius);
|
|
1075
|
-
}
|
|
1076
1145
|
.rounded-md {
|
|
1077
1146
|
border-radius: calc(var(--radius) - 2px);
|
|
1078
1147
|
}
|
|
@@ -1086,18 +1155,10 @@ video {
|
|
|
1086
1155
|
border-bottom-right-radius: var(--radius);
|
|
1087
1156
|
border-bottom-left-radius: var(--radius);
|
|
1088
1157
|
}
|
|
1089
|
-
.rounded-b-none {
|
|
1090
|
-
border-bottom-right-radius: 0px;
|
|
1091
|
-
border-bottom-left-radius: 0px;
|
|
1092
|
-
}
|
|
1093
1158
|
.rounded-t-2xl {
|
|
1094
1159
|
border-top-left-radius: 1rem;
|
|
1095
1160
|
border-top-right-radius: 1rem;
|
|
1096
1161
|
}
|
|
1097
|
-
.rounded-t-lg {
|
|
1098
|
-
border-top-left-radius: var(--radius);
|
|
1099
|
-
border-top-right-radius: var(--radius);
|
|
1100
|
-
}
|
|
1101
1162
|
.rounded-bl {
|
|
1102
1163
|
border-bottom-left-radius: 0.25rem;
|
|
1103
1164
|
}
|
|
@@ -1113,6 +1174,9 @@ video {
|
|
|
1113
1174
|
.border {
|
|
1114
1175
|
border-width: 1px;
|
|
1115
1176
|
}
|
|
1177
|
+
.border-0 {
|
|
1178
|
+
border-width: 0px;
|
|
1179
|
+
}
|
|
1116
1180
|
.border-2 {
|
|
1117
1181
|
border-width: 2px;
|
|
1118
1182
|
}
|
|
@@ -1129,6 +1193,15 @@ video {
|
|
|
1129
1193
|
--tw-border-opacity: 1;
|
|
1130
1194
|
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
|
1131
1195
|
}
|
|
1196
|
+
.border-buttonColors-primaryOutlineColor {
|
|
1197
|
+
border-color: var(--buttonColors-primaryOutlineColor);
|
|
1198
|
+
}
|
|
1199
|
+
.border-buttonColors-secondaryOutlineColor {
|
|
1200
|
+
border-color: var(--buttonColors-secondaryOutlineColor);
|
|
1201
|
+
}
|
|
1202
|
+
.border-coreColors-brandColorPrimary {
|
|
1203
|
+
border-color: var(--coreColors-brandColorPrimary);
|
|
1204
|
+
}
|
|
1132
1205
|
.border-coreColors-dividingLines {
|
|
1133
1206
|
border-color: var(--coreColors-dividingLines);
|
|
1134
1207
|
}
|
|
@@ -1188,6 +1261,9 @@ video {
|
|
|
1188
1261
|
.bg-productBadging-fill {
|
|
1189
1262
|
background-color: var(--productBadging-fill);
|
|
1190
1263
|
}
|
|
1264
|
+
.bg-stateColors-disabled {
|
|
1265
|
+
background-color: var(--stateColors-disabled);
|
|
1266
|
+
}
|
|
1191
1267
|
.bg-stateColors-error {
|
|
1192
1268
|
background-color: var(--stateColors-error);
|
|
1193
1269
|
}
|
|
@@ -1311,6 +1387,9 @@ video {
|
|
|
1311
1387
|
.pl-4 {
|
|
1312
1388
|
padding-left: 1rem;
|
|
1313
1389
|
}
|
|
1390
|
+
.pl-8 {
|
|
1391
|
+
padding-left: 2rem;
|
|
1392
|
+
}
|
|
1314
1393
|
.pr-4 {
|
|
1315
1394
|
padding-right: 1rem;
|
|
1316
1395
|
}
|
|
@@ -1326,11 +1405,23 @@ video {
|
|
|
1326
1405
|
.pt-5 {
|
|
1327
1406
|
padding-top: 1.25rem;
|
|
1328
1407
|
}
|
|
1408
|
+
.text-left {
|
|
1409
|
+
text-align: left;
|
|
1410
|
+
}
|
|
1329
1411
|
.text-center {
|
|
1330
1412
|
text-align: center;
|
|
1331
1413
|
}
|
|
1332
|
-
.
|
|
1333
|
-
|
|
1414
|
+
.text-right {
|
|
1415
|
+
text-align: right;
|
|
1416
|
+
}
|
|
1417
|
+
.text-start {
|
|
1418
|
+
text-align: start;
|
|
1419
|
+
}
|
|
1420
|
+
.font-fontMedium {
|
|
1421
|
+
font-family: var(--fontMedium);
|
|
1422
|
+
}
|
|
1423
|
+
.font-fontRegular {
|
|
1424
|
+
font-family: var(--fontRegular);
|
|
1334
1425
|
}
|
|
1335
1426
|
.text-\[10px\] {
|
|
1336
1427
|
font-size: 10px;
|
|
@@ -1368,9 +1459,15 @@ video {
|
|
|
1368
1459
|
.font-semibold {
|
|
1369
1460
|
font-weight: 600;
|
|
1370
1461
|
}
|
|
1462
|
+
.uppercase {
|
|
1463
|
+
text-transform: uppercase;
|
|
1464
|
+
}
|
|
1371
1465
|
.leading-\[130\%\] {
|
|
1372
1466
|
line-height: 130%;
|
|
1373
1467
|
}
|
|
1468
|
+
.leading-\[13px\] {
|
|
1469
|
+
line-height: 13px;
|
|
1470
|
+
}
|
|
1374
1471
|
.leading-\[160\%\] {
|
|
1375
1472
|
line-height: 160%;
|
|
1376
1473
|
}
|
|
@@ -1380,6 +1477,10 @@ video {
|
|
|
1380
1477
|
.leading-none {
|
|
1381
1478
|
line-height: 1;
|
|
1382
1479
|
}
|
|
1480
|
+
.text-black {
|
|
1481
|
+
--tw-text-opacity: 1;
|
|
1482
|
+
color: rgb(0 0 0 / var(--tw-text-opacity));
|
|
1483
|
+
}
|
|
1383
1484
|
.text-buttonColors-destructiveText {
|
|
1384
1485
|
color: var(--buttonColors-destructiveText);
|
|
1385
1486
|
}
|
|
@@ -1554,26 +1655,30 @@ video {
|
|
|
1554
1655
|
--tw-shadow-color: var(--buttonColors-secondaryShadow);
|
|
1555
1656
|
--tw-shadow: var(--tw-shadow-colored);
|
|
1556
1657
|
}
|
|
1658
|
+
.outline-none {
|
|
1659
|
+
outline: 2px solid transparent;
|
|
1660
|
+
outline-offset: 2px;
|
|
1661
|
+
}
|
|
1557
1662
|
.outline {
|
|
1558
1663
|
outline-style: solid;
|
|
1559
1664
|
}
|
|
1665
|
+
.outline-0 {
|
|
1666
|
+
outline-width: 0px;
|
|
1667
|
+
}
|
|
1560
1668
|
.outline-1 {
|
|
1561
1669
|
outline-width: 1px;
|
|
1562
1670
|
}
|
|
1563
|
-
.outline-buttonColors-primaryOutline {
|
|
1564
|
-
outline-color: var(--buttonColors-primaryOutline);
|
|
1565
|
-
}
|
|
1566
|
-
.outline-buttonColors-secondaryOutline {
|
|
1567
|
-
outline-color: var(--buttonColors-secondaryOutline);
|
|
1568
|
-
}
|
|
1569
1671
|
.outline-coreColors-brandColorPrimary {
|
|
1570
1672
|
outline-color: var(--coreColors-brandColorPrimary);
|
|
1571
1673
|
}
|
|
1572
1674
|
.outline-coreColors-dividingLines {
|
|
1573
1675
|
outline-color: var(--coreColors-dividingLines);
|
|
1574
1676
|
}
|
|
1575
|
-
.outline-
|
|
1576
|
-
outline-color:
|
|
1677
|
+
.outline-stateColors-error {
|
|
1678
|
+
outline-color: var(--stateColors-error);
|
|
1679
|
+
}
|
|
1680
|
+
.outline-stateColors-skeleton {
|
|
1681
|
+
outline-color: var(--stateColors-skeleton);
|
|
1577
1682
|
}
|
|
1578
1683
|
.ring-0 {
|
|
1579
1684
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
@@ -1583,6 +1688,10 @@ video {
|
|
|
1583
1688
|
.ring-offset-background {
|
|
1584
1689
|
--tw-ring-offset-color: hsl(var(--background));
|
|
1585
1690
|
}
|
|
1691
|
+
.drop-shadow-\[0_3px_1px_0_rgba\(0\2c 0\2c 0\2c 1\)\] {
|
|
1692
|
+
--tw-drop-shadow: drop-shadow(0 3px 1px 0 rgba(0,0,0,1));
|
|
1693
|
+
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);
|
|
1694
|
+
}
|
|
1586
1695
|
.filter {
|
|
1587
1696
|
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);
|
|
1588
1697
|
}
|
|
@@ -1612,6 +1721,12 @@ video {
|
|
|
1612
1721
|
.duration-300 {
|
|
1613
1722
|
transition-duration: 300ms;
|
|
1614
1723
|
}
|
|
1724
|
+
.duration-500 {
|
|
1725
|
+
transition-duration: 500ms;
|
|
1726
|
+
}
|
|
1727
|
+
.ease-in-out {
|
|
1728
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1729
|
+
}
|
|
1615
1730
|
@keyframes enter {
|
|
1616
1731
|
|
|
1617
1732
|
from {
|
|
@@ -1632,6 +1747,12 @@ video {
|
|
|
1632
1747
|
.duration-300 {
|
|
1633
1748
|
animation-duration: 300ms;
|
|
1634
1749
|
}
|
|
1750
|
+
.duration-500 {
|
|
1751
|
+
animation-duration: 500ms;
|
|
1752
|
+
}
|
|
1753
|
+
.ease-in-out {
|
|
1754
|
+
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1755
|
+
}
|
|
1635
1756
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
1636
1757
|
.no-scrollbar *::-webkit-scrollbar {
|
|
1637
1758
|
display: none;
|
|
@@ -1679,6 +1800,12 @@ video {
|
|
|
1679
1800
|
.placeholder-shown\:p-4:placeholder-shown {
|
|
1680
1801
|
padding: 1rem;
|
|
1681
1802
|
}
|
|
1803
|
+
.hover\:h-\[18px\]:hover {
|
|
1804
|
+
height: 18px;
|
|
1805
|
+
}
|
|
1806
|
+
.hover\:w-\[18px\]:hover {
|
|
1807
|
+
width: 18px;
|
|
1808
|
+
}
|
|
1682
1809
|
.hover\:bg-accent:hover {
|
|
1683
1810
|
background-color: hsl(var(--accent));
|
|
1684
1811
|
}
|
|
@@ -1700,12 +1827,18 @@ video {
|
|
|
1700
1827
|
.hover\:underline:hover {
|
|
1701
1828
|
text-decoration-line: underline;
|
|
1702
1829
|
}
|
|
1830
|
+
.hover\:\!line-through:hover {
|
|
1831
|
+
text-decoration-line: line-through !important;
|
|
1832
|
+
}
|
|
1703
1833
|
.focus\:border-coreColors-brandColorPrimary:focus {
|
|
1704
1834
|
border-color: var(--coreColors-brandColorPrimary);
|
|
1705
1835
|
}
|
|
1706
1836
|
.focus\:border-stateColors-error:focus {
|
|
1707
1837
|
border-color: var(--stateColors-error);
|
|
1708
1838
|
}
|
|
1839
|
+
.focus\:bg-stateColors-skeleton:focus {
|
|
1840
|
+
background-color: var(--stateColors-skeleton);
|
|
1841
|
+
}
|
|
1709
1842
|
.focus\:opacity-100:focus {
|
|
1710
1843
|
opacity: 1;
|
|
1711
1844
|
}
|
|
@@ -1747,6 +1880,9 @@ video {
|
|
|
1747
1880
|
.focus-visible\:ring-offset-background:focus-visible {
|
|
1748
1881
|
--tw-ring-offset-color: hsl(var(--background));
|
|
1749
1882
|
}
|
|
1883
|
+
.active\:text-coreColors-brandColorPrimary:active {
|
|
1884
|
+
color: var(--coreColors-brandColorPrimary);
|
|
1885
|
+
}
|
|
1750
1886
|
.active\:opacity-70:active {
|
|
1751
1887
|
opacity: 0.7;
|
|
1752
1888
|
}
|
|
@@ -1777,12 +1913,15 @@ video {
|
|
|
1777
1913
|
.disabled\:opacity-50:disabled {
|
|
1778
1914
|
opacity: 0.5;
|
|
1779
1915
|
}
|
|
1780
|
-
.disabled\:
|
|
1781
|
-
|
|
1916
|
+
.disabled\:opacity-70:disabled {
|
|
1917
|
+
opacity: 0.7;
|
|
1782
1918
|
}
|
|
1783
1919
|
.group:hover .group-hover\:opacity-100 {
|
|
1784
1920
|
opacity: 1;
|
|
1785
1921
|
}
|
|
1922
|
+
.group:active .group-active\:text-coreColors-brandColorPrimary {
|
|
1923
|
+
color: var(--coreColors-brandColorPrimary);
|
|
1924
|
+
}
|
|
1786
1925
|
.group:disabled .group-disabled\:text-stateColors-disabled {
|
|
1787
1926
|
color: var(--stateColors-disabled);
|
|
1788
1927
|
}
|
|
@@ -1828,8 +1967,11 @@ video {
|
|
|
1828
1967
|
.peer:disabled ~ .peer-disabled\:opacity-70 {
|
|
1829
1968
|
opacity: 0.7;
|
|
1830
1969
|
}
|
|
1831
|
-
.data-\[
|
|
1832
|
-
|
|
1970
|
+
.data-\[disabled\]\:pointer-events-none[data-disabled] {
|
|
1971
|
+
pointer-events: none;
|
|
1972
|
+
}
|
|
1973
|
+
.data-\[state\=checked\]\:translate-x-6[data-state=checked] {
|
|
1974
|
+
--tw-translate-x: 1.5rem;
|
|
1833
1975
|
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));
|
|
1834
1976
|
}
|
|
1835
1977
|
.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
|
|
@@ -1874,14 +2016,14 @@ video {
|
|
|
1874
2016
|
.data-\[state\=open\]\:animate-accordion-down[data-state=open] {
|
|
1875
2017
|
animation: accordion-down 0.2s ease-out;
|
|
1876
2018
|
}
|
|
1877
|
-
.data-\[state\=checked\]\:bg-
|
|
1878
|
-
background-color:
|
|
2019
|
+
.data-\[state\=checked\]\:bg-stateColors-success[data-state=checked] {
|
|
2020
|
+
background-color: var(--stateColors-success);
|
|
1879
2021
|
}
|
|
1880
2022
|
.data-\[state\=on\]\:bg-accent[data-state=on] {
|
|
1881
2023
|
background-color: hsl(var(--accent));
|
|
1882
2024
|
}
|
|
1883
|
-
.data-\[state\=unchecked\]\:bg-
|
|
1884
|
-
background-color:
|
|
2025
|
+
.data-\[state\=unchecked\]\:bg-stateColors-disabled[data-state=unchecked] {
|
|
2026
|
+
background-color: var(--stateColors-disabled);
|
|
1885
2027
|
}
|
|
1886
2028
|
.data-\[icon\=true\]\:pr-10[data-icon=true] {
|
|
1887
2029
|
padding-right: 2.5rem;
|
|
@@ -1892,6 +2034,9 @@ video {
|
|
|
1892
2034
|
.data-\[state\=on\]\:text-accent-foreground[data-state=on] {
|
|
1893
2035
|
color: hsl(var(--accent-foreground));
|
|
1894
2036
|
}
|
|
2037
|
+
.data-\[disabled\]\:opacity-50[data-disabled] {
|
|
2038
|
+
opacity: 0.5;
|
|
2039
|
+
}
|
|
1895
2040
|
.data-\[swipe\=move\]\:transition-none[data-swipe=move] {
|
|
1896
2041
|
transition-property: none;
|
|
1897
2042
|
}
|
|
@@ -1937,6 +2082,18 @@ video {
|
|
|
1937
2082
|
.data-\[state\=open\]\:zoom-in-95[data-state=open] {
|
|
1938
2083
|
--tw-enter-scale: .95;
|
|
1939
2084
|
}
|
|
2085
|
+
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
|
|
2086
|
+
--tw-enter-translate-y: -0.5rem;
|
|
2087
|
+
}
|
|
2088
|
+
.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
|
|
2089
|
+
--tw-enter-translate-x: 0.5rem;
|
|
2090
|
+
}
|
|
2091
|
+
.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
|
|
2092
|
+
--tw-enter-translate-x: -0.5rem;
|
|
2093
|
+
}
|
|
2094
|
+
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
|
|
2095
|
+
--tw-enter-translate-y: 0.5rem;
|
|
2096
|
+
}
|
|
1940
2097
|
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
|
|
1941
2098
|
--tw-exit-translate-x: -50%;
|
|
1942
2099
|
}
|
|
@@ -2002,18 +2159,8 @@ video {
|
|
|
2002
2159
|
.\[\&\>div\>button\]\:border-coreColors-brandColorPrimary>div>button {
|
|
2003
2160
|
border-color: var(--coreColors-brandColorPrimary);
|
|
2004
2161
|
}
|
|
2005
|
-
.\[\&\>
|
|
2006
|
-
|
|
2007
|
-
color: rgb(0 0 0 / var(--tw-text-opacity));
|
|
2008
|
-
}
|
|
2009
|
-
.\[\&\>p\]\:text-buttonColors-primaryText>p {
|
|
2010
|
-
color: var(--buttonColors-primaryText);
|
|
2011
|
-
}
|
|
2012
|
-
.\[\&\>p\]\:text-buttonColors-secondaryText>p {
|
|
2013
|
-
color: var(--buttonColors-secondaryText);
|
|
2014
|
-
}
|
|
2015
|
-
.\[\&\>p\]\:text-coreColors-pageColor>p {
|
|
2016
|
-
color: var(--coreColors-pageColor);
|
|
2162
|
+
.\[\&\>div\]\:w-full>div {
|
|
2163
|
+
width: 100%;
|
|
2017
2164
|
}
|
|
2018
2165
|
.\[\&\>p\]\:text-stateColors-disabled>p {
|
|
2019
2166
|
color: var(--stateColors-disabled);
|
|
@@ -2027,8 +2174,18 @@ video {
|
|
|
2027
2174
|
.\[\&\>p\]\:\!line-through>p {
|
|
2028
2175
|
text-decoration-line: line-through !important;
|
|
2029
2176
|
}
|
|
2030
|
-
|
|
2031
|
-
color:
|
|
2177
|
+
.\[\&\[data-state\=open\]\]\:outline-coreColors-brandColorPrimary[data-state=open] {
|
|
2178
|
+
outline-color: var(--coreColors-brandColorPrimary);
|
|
2179
|
+
}
|
|
2180
|
+
.\[\&\[data-state\=open\]_\.chevron-icon\]\:rotate-180[data-state=open] .chevron-icon {
|
|
2181
|
+
--tw-rotate: 180deg;
|
|
2182
|
+
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));
|
|
2183
|
+
}
|
|
2184
|
+
.\[\&\[data-state\=open\]_\.label\]\:text-coreColors-brandColorPrimary[data-state=open] .label {
|
|
2185
|
+
color: var(--coreColors-brandColorPrimary);
|
|
2186
|
+
}
|
|
2187
|
+
.\[\&\[data-state\=open\]_\.label\]\:text-textColors-secondaryColor[data-state=open] .label {
|
|
2188
|
+
color: var(--textColors-secondaryColor, #727272ff);
|
|
2032
2189
|
}
|
|
2033
2190
|
.\[\&\[data-state\=open\]_svg\]\:rotate-180[data-state=open] svg {
|
|
2034
2191
|
--tw-rotate: 180deg;
|
|
@@ -2043,25 +2200,6 @@ video {
|
|
|
2043
2200
|
.\[\&_p\]\:text-stateColors-disabled p {
|
|
2044
2201
|
color: var(--stateColors-disabled);
|
|
2045
2202
|
}
|
|
2046
|
-
.\[\&_svg\]\:text-black svg {
|
|
2047
|
-
--tw-text-opacity: 1;
|
|
2048
|
-
color: rgb(0 0 0 / var(--tw-text-opacity));
|
|
2049
|
-
}
|
|
2050
|
-
.\[\&_svg\]\:text-buttonColors-primaryText svg {
|
|
2051
|
-
color: var(--buttonColors-primaryText);
|
|
2052
|
-
}
|
|
2053
|
-
.\[\&_svg\]\:text-buttonColors-secondaryText svg {
|
|
2054
|
-
color: var(--buttonColors-secondaryText);
|
|
2055
|
-
}
|
|
2056
|
-
.\[\&_svg\]\:text-coreColors-pageColor svg {
|
|
2057
|
-
color: var(--coreColors-pageColor);
|
|
2058
|
-
}
|
|
2059
|
-
.\[\&_svg\]\:text-textColors-primaryColor svg {
|
|
2060
|
-
color: var(--textColors-primaryColor, #121212ff);
|
|
2061
|
-
}
|
|
2062
|
-
.hover\:\[\&_svg\]\:text-accent-foreground svg:hover {
|
|
2063
|
-
color: hsl(var(--accent-foreground));
|
|
2064
|
-
}
|
|
2065
2203
|
.active\:\[\&_svg\]\:text-stateColors-favorites svg:active {
|
|
2066
2204
|
color: var(--stateColors-favorites);
|
|
2067
2205
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tapcart/mobile-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"style": "dist/styles.css",
|
|
@@ -17,7 +17,9 @@
|
|
|
17
17
|
"build:styles": "postcss styles/globals.css -o dist/styles.css",
|
|
18
18
|
"build:ts": "tsc -p tsconfig.json && tsc-alias",
|
|
19
19
|
"build": "pnpm run build:ts && pnpm run build:styles",
|
|
20
|
-
"dev": "tsc -w -p tsconfig.json"
|
|
20
|
+
"dev:ts": "tsc -w -p tsconfig.json",
|
|
21
|
+
"dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
|
|
22
|
+
"dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
|
|
21
23
|
},
|
|
22
24
|
"peerDependencies": {
|
|
23
25
|
"react": "^17.0.2 || ^18.0.0",
|
|
@@ -28,6 +30,9 @@
|
|
|
28
30
|
"@types/react": "^18.2.0",
|
|
29
31
|
"@types/react-dom": "^18.2.0",
|
|
30
32
|
"autoprefixer": "^10.4.14",
|
|
33
|
+
"chokidar-cli": "^3.0.0",
|
|
34
|
+
"app-studio-types": "workspace:*",
|
|
35
|
+
"concurrently": "^8.2.2",
|
|
31
36
|
"eslint": "^7.32.0",
|
|
32
37
|
"eslint-config-custom": "workspace:*",
|
|
33
38
|
"postcss": "^8.4.24",
|
|
@@ -41,12 +46,13 @@
|
|
|
41
46
|
"@radix-ui/react-alert-dialog": "^1.0.5",
|
|
42
47
|
"@radix-ui/react-aspect-ratio": "^1.0.3",
|
|
43
48
|
"@radix-ui/react-checkbox": "^1.0.4",
|
|
44
|
-
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
|
45
49
|
"@radix-ui/react-dialog": "^1.0.5",
|
|
50
|
+
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
|
46
51
|
"@radix-ui/react-label": "^2.0.2",
|
|
47
52
|
"@radix-ui/react-radio-group": "^1.1.3",
|
|
48
53
|
"@radix-ui/react-scroll-area": "^1.0.5",
|
|
49
54
|
"@radix-ui/react-separator": "^1.0.3",
|
|
55
|
+
"@radix-ui/react-slider": "^1.1.2",
|
|
50
56
|
"@radix-ui/react-slot": "^1.0.2",
|
|
51
57
|
"@radix-ui/react-switch": "^1.0.3",
|
|
52
58
|
"@radix-ui/react-toast": "^1.1.5",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../components/ThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEvE"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
|
15
|
-
export function ThemeProvider(_a) {
|
|
16
|
-
var { children } = _a, props = __rest(_a, ["children"]);
|
|
17
|
-
return _jsx(NextThemesProvider, Object.assign({}, props, { children: children }), void 0);
|
|
18
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../components/ThemeToggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAc1B"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useTheme } from "next-themes";
|
|
4
|
-
import { Button } from "../components/ui/button";
|
|
5
|
-
export function ThemeToggle() {
|
|
6
|
-
const { setTheme, theme } = useTheme();
|
|
7
|
-
return (_jsxs(Button, Object.assign({ variant: "ghost", size: "sm", onClick: () => setTheme(theme === "light" ? "dark" : "light") }, { children: [_jsx("div", { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }, void 0), _jsx("div", { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }, void 0), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Toggle theme" }), void 0)] }), void 0));
|
|
8
|
-
}
|