@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.
Files changed (101) hide show
  1. package/dist/components/hooks/use-infinite-scroll.d.ts +2 -0
  2. package/dist/components/hooks/use-infinite-scroll.d.ts.map +1 -1
  3. package/dist/components/hooks/use-infinite-scroll.js +11 -6
  4. package/dist/components/hooks/use-scroll-direction.d.ts +8 -0
  5. package/dist/components/hooks/use-scroll-direction.d.ts.map +1 -0
  6. package/dist/components/hooks/use-scroll-direction.js +42 -0
  7. package/dist/components/ui/accordion.js +3 -3
  8. package/dist/components/ui/alert-dialog.js +8 -8
  9. package/dist/components/ui/badge.d.ts +4 -3
  10. package/dist/components/ui/badge.d.ts.map +1 -1
  11. package/dist/components/ui/badge.js +25 -7
  12. package/dist/components/ui/button.d.ts +3 -1
  13. package/dist/components/ui/button.d.ts.map +1 -1
  14. package/dist/components/ui/button.js +50 -15
  15. package/dist/components/ui/carousel.d.ts +5 -5
  16. package/dist/components/ui/carousel.d.ts.map +1 -1
  17. package/dist/components/ui/carousel.js +5 -5
  18. package/dist/components/ui/checkbox.d.ts.map +1 -1
  19. package/dist/components/ui/checkbox.js +6 -6
  20. package/dist/components/ui/chip.d.ts +2 -2
  21. package/dist/components/ui/chip.d.ts.map +1 -1
  22. package/dist/components/ui/chip.js +4 -4
  23. package/dist/components/ui/container.js +1 -1
  24. package/dist/components/ui/drawer.d.ts +3 -3
  25. package/dist/components/ui/drawer.d.ts.map +1 -1
  26. package/dist/components/ui/drawer.js +15 -13
  27. package/dist/components/ui/dropdown.d.ts +22 -0
  28. package/dist/components/ui/dropdown.d.ts.map +1 -0
  29. package/dist/components/ui/dropdown.js +60 -0
  30. package/dist/components/ui/favorite.d.ts +4 -2
  31. package/dist/components/ui/favorite.d.ts.map +1 -1
  32. package/dist/components/ui/favorite.js +11 -5
  33. package/dist/components/ui/grid.js +5 -5
  34. package/dist/components/ui/icon.d.ts +2 -2
  35. package/dist/components/ui/icon.d.ts.map +1 -1
  36. package/dist/components/ui/icon.js +36 -7
  37. package/dist/components/ui/image.d.ts +157 -0
  38. package/dist/components/ui/image.d.ts.map +1 -0
  39. package/dist/components/ui/image.js +318 -0
  40. package/dist/components/ui/input.js +1 -1
  41. package/dist/components/ui/label.js +1 -1
  42. package/dist/components/ui/line-item-text-icons.d.ts +14 -0
  43. package/dist/components/ui/line-item-text-icons.d.ts.map +1 -0
  44. package/dist/components/ui/line-item-text-icons.js +22 -0
  45. package/dist/components/ui/money.js +1 -1
  46. package/dist/components/ui/price.d.ts +2 -1
  47. package/dist/components/ui/price.d.ts.map +1 -1
  48. package/dist/components/ui/price.js +6 -6
  49. package/dist/components/ui/product-card.d.ts +79 -27
  50. package/dist/components/ui/product-card.d.ts.map +1 -1
  51. package/dist/components/ui/product-card.js +194 -34
  52. package/dist/components/ui/product-grid.d.ts +1 -1
  53. package/dist/components/ui/product-grid.d.ts.map +1 -1
  54. package/dist/components/ui/product-grid.js +5 -5
  55. package/dist/components/ui/quantity-picker.d.ts +14 -0
  56. package/dist/components/ui/quantity-picker.d.ts.map +1 -0
  57. package/dist/components/ui/quantity-picker.js +23 -0
  58. package/dist/components/ui/radio-group.js +4 -4
  59. package/dist/components/ui/scroll-area.d.ts +1 -1
  60. package/dist/components/ui/scroll-area.d.ts.map +1 -1
  61. package/dist/components/ui/scroll-area.js +2 -2
  62. package/dist/components/ui/selectors.d.ts +3 -3
  63. package/dist/components/ui/selectors.d.ts.map +1 -1
  64. package/dist/components/ui/selectors.js +22 -6
  65. package/dist/components/ui/separator.js +1 -1
  66. package/dist/components/ui/skeleton.js +2 -2
  67. package/dist/components/ui/slider.d.ts +14 -0
  68. package/dist/components/ui/slider.d.ts.map +1 -0
  69. package/dist/components/ui/slider.js +50 -0
  70. package/dist/components/ui/subscription.d.ts +15 -0
  71. package/dist/components/ui/subscription.d.ts.map +1 -0
  72. package/dist/components/ui/subscription.js +24 -0
  73. package/dist/components/ui/switch.d.ts.map +1 -1
  74. package/dist/components/ui/switch.js +2 -2
  75. package/dist/components/ui/tabs.js +4 -4
  76. package/dist/components/ui/text.js +6 -6
  77. package/dist/components/ui/toast.d.ts +3 -3
  78. package/dist/components/ui/toast.d.ts.map +1 -1
  79. package/dist/components/ui/toast.js +7 -7
  80. package/dist/components/ui/toaster.js +2 -2
  81. package/dist/components/ui/toggle-group.d.ts +2 -2
  82. package/dist/components/ui/toggle-group.js +2 -2
  83. package/dist/components/ui/toggle.d.ts +2 -2
  84. package/dist/components/ui/toggle.js +2 -2
  85. package/dist/components/ui/use-toast.d.ts +6 -6
  86. package/dist/components/ui/use-toast.d.ts.map +1 -1
  87. package/dist/components/ui/video.js +1 -1
  88. package/dist/components/ui/wishlist.d.ts +2 -1
  89. package/dist/components/ui/wishlist.d.ts.map +1 -1
  90. package/dist/components/ui/wishlist.js +3 -3
  91. package/dist/index.d.ts +7 -0
  92. package/dist/index.d.ts.map +1 -1
  93. package/dist/index.js +7 -0
  94. package/dist/styles.css +210 -72
  95. package/package.json +9 -3
  96. package/dist/components/ThemeProvider.d.ts +0 -3
  97. package/dist/components/ThemeProvider.d.ts.map +0 -1
  98. package/dist/components/ThemeProvider.js +0 -18
  99. package/dist/components/ThemeToggle.d.ts +0 -2
  100. package/dist/components/ThemeToggle.d.ts.map +0 -1
  101. 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
- --coreFonts-sfpro-roboto: "-apple-system", "Roboto", "sans-serif";
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-11 {
849
- width: 2.75rem;
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-\[7px\] {
1023
- row-gap: 7px;
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
- .overscroll-y-none {
1048
- overscroll-behavior-y: none;
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
- .font-sfpro-roboto {
1333
- font-family: var(--coreFonts-sfpro-roboto);
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-input {
1576
- outline-color: hsl(var(--input));
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\:outline-stateColors-disabled:disabled {
1781
- outline-color: var(--stateColors-disabled);
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-\[state\=checked\]\:translate-x-5[data-state=checked] {
1832
- --tw-translate-x: 1.25rem;
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-primary[data-state=checked] {
1878
- background-color: hsl(var(--primary));
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-input[data-state=unchecked] {
1884
- background-color: hsl(var(--input));
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
- .\[\&\>p\]\:text-black>p {
2006
- --tw-text-opacity: 1;
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
- .hover\:\[\&\>p\]\:text-accent-foreground>p:hover {
2031
- color: hsl(var(--accent-foreground));
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.2.11",
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,3 +0,0 @@
1
- import { ThemeProviderProps } from "next-themes/dist/types";
2
- export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
3
- //# sourceMappingURL=ThemeProvider.d.ts.map
@@ -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,2 +0,0 @@
1
- export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
2
- //# sourceMappingURL=ThemeToggle.d.ts.map
@@ -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
- }