@snacky/ui 0.4.9 → 0.5.1

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 (7) hide show
  1. package/dist/index.cjs +21 -19
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +138 -5
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.js +21 -19
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -193,6 +193,7 @@
193
193
  display: inline-flex;
194
194
  align-items: center;
195
195
  justify-content: center;
196
+ height: 48px;
196
197
  padding: var(--spacing-12) var(--spacing-8);
197
198
  border-radius: var(--radius-field);
198
199
  border: none;
@@ -206,11 +207,13 @@
206
207
  background-color 0.12s ease,
207
208
  border-color 0.12s ease,
208
209
  color 0.12s ease;
210
+ letter-spacing: var(--font-small-semibold-letter-spacing);
209
211
  }
210
212
  .snacky-btn:disabled {
211
213
  cursor: not-allowed;
212
214
  }
213
215
  .snacky-btn--small {
216
+ height: 40px;
214
217
  padding: var(--spacing-8) var(--spacing-8);
215
218
  }
216
219
  .snacky-btn--primary {
@@ -467,6 +470,7 @@
467
470
  font-weight: var(--font-small-regular-weight);
468
471
  line-height: var(--font-small-regular-line-height);
469
472
  color: var(--text-primary);
473
+ letter-spacing: var(--font-small-regular-letter-spacing);
470
474
  }
471
475
  .snacky-field__input::placeholder {
472
476
  color: var(--text-placeholder);
@@ -500,6 +504,9 @@
500
504
  font-family: var(--font-small-regular-family);
501
505
  font-size: var(--font-small-regular-size);
502
506
  color: var(--text-primary);
507
+ font-weight: var(--font-small-regular-weight);
508
+ line-height: var(--font-small-regular-line-height);
509
+ letter-spacing: var(--font-small-regular-letter-spacing);
503
510
  }
504
511
  .snacky-field-error {
505
512
  display: block;
@@ -507,6 +514,9 @@
507
514
  font-family: var(--font-caption-regular-family);
508
515
  font-size: var(--font-caption-regular-size);
509
516
  color: var(--text-error);
517
+ font-weight: var(--font-caption-regular-weight);
518
+ line-height: var(--font-caption-regular-line-height);
519
+ letter-spacing: var(--font-caption-regular-letter-spacing);
510
520
  }
511
521
 
512
522
  /* src/components/Input/SearchField.css */
@@ -536,6 +546,9 @@
536
546
  font-family: var(--font-small-regular-family);
537
547
  font-size: var(--font-small-regular-size);
538
548
  color: var(--text-primary);
549
+ font-weight: var(--font-small-regular-weight);
550
+ line-height: var(--font-small-regular-line-height);
551
+ letter-spacing: var(--font-small-regular-letter-spacing);
539
552
  }
540
553
  .snacky-search__input::placeholder {
541
554
  color: var(--text-placeholder);
@@ -596,7 +609,7 @@
596
609
  align-items: center;
597
610
  justify-content: space-between;
598
611
  width: 100%;
599
- height: 48px;
612
+ height: 64px;
600
613
  padding: var(--spacing-12);
601
614
  background: var(--bg-surface-variant);
602
615
  border-radius: var(--radius-field);
@@ -610,21 +623,29 @@
610
623
  overflow: hidden;
611
624
  text-overflow: ellipsis;
612
625
  white-space: nowrap;
626
+ line-height: var(--font-body-semibold-line-height);
627
+ letter-spacing: var(--font-body-semibold-letter-spacing);
613
628
  }
614
629
  .snacky-copy__action {
615
630
  flex-shrink: 0;
616
631
  margin-left: var(--spacing-12);
617
632
  background: none;
618
633
  border: none;
619
- padding: 0;
634
+ padding: var(--spacing-8);
620
635
  cursor: pointer;
621
636
  font-family: var(--font-small-bold-family);
622
637
  font-size: var(--font-small-bold-size);
623
638
  font-weight: var(--font-small-bold-weight);
624
639
  color: var(--text-link);
640
+ line-height: var(--font-small-bold-line-height);
641
+ letter-spacing: var(--font-small-bold-letter-spacing);
625
642
  }
626
643
  .snacky-copy__action--copied {
627
644
  color: var(--text-secondary);
645
+ padding: 0;
646
+ }
647
+ .snacky-copy:has(.snacky-copy__action--copied) {
648
+ height: 48px;
628
649
  }
629
650
 
630
651
  /* src/components/Input/ChatInput.css */
@@ -653,6 +674,9 @@
653
674
  font-family: var(--font-small-regular-family);
654
675
  font-size: var(--font-small-regular-size);
655
676
  color: var(--text-primary);
677
+ font-weight: var(--font-small-regular-weight);
678
+ line-height: var(--font-small-regular-line-height);
679
+ letter-spacing: var(--font-small-regular-letter-spacing);
656
680
  }
657
681
  .snacky-chatfield__input::placeholder {
658
682
  color: var(--text-placeholder);
@@ -708,6 +732,8 @@
708
732
  font-size: var(--font-small-bold-size);
709
733
  font-weight: var(--font-small-bold-weight);
710
734
  color: var(--text-primary);
735
+ line-height: var(--font-small-bold-line-height);
736
+ letter-spacing: var(--font-small-bold-letter-spacing);
711
737
  }
712
738
  .snacky-address-result__subtitle {
713
739
  margin: 0;
@@ -717,6 +743,9 @@
717
743
  overflow: hidden;
718
744
  text-overflow: ellipsis;
719
745
  white-space: nowrap;
746
+ font-weight: var(--font-small-regular-weight);
747
+ line-height: var(--font-small-regular-line-height);
748
+ letter-spacing: var(--font-small-regular-letter-spacing);
720
749
  }
721
750
 
722
751
  /* src/components/Chips/Chips.css */
@@ -733,6 +762,9 @@
733
762
  color: var(--text-primary);
734
763
  cursor: pointer;
735
764
  white-space: nowrap;
765
+ font-weight: var(--font-small-regular-weight);
766
+ line-height: var(--font-small-regular-line-height);
767
+ letter-spacing: var(--font-small-regular-letter-spacing);
736
768
  }
737
769
  .snacky-chip--selected {
738
770
  background: var(--bg-surface-highlight);
@@ -754,6 +786,9 @@
754
786
  font-family: var(--font-small-regular-family);
755
787
  font-size: var(--font-small-regular-size);
756
788
  color: var(--text-primary);
789
+ font-weight: var(--font-small-regular-weight);
790
+ line-height: var(--font-small-regular-line-height);
791
+ letter-spacing: var(--font-small-regular-letter-spacing);
757
792
  }
758
793
  .snacky-radio-option--disabled {
759
794
  cursor: not-allowed;
@@ -802,6 +837,9 @@
802
837
  font-family: var(--font-small-regular-family);
803
838
  font-size: var(--font-small-regular-size);
804
839
  color: var(--text-primary);
840
+ font-weight: var(--font-small-regular-weight);
841
+ line-height: var(--font-small-regular-line-height);
842
+ letter-spacing: var(--font-small-regular-letter-spacing);
805
843
  }
806
844
  .snacky-checkbox {
807
845
  appearance: none;
@@ -895,11 +933,17 @@
895
933
  font-family: var(--font-small-regular-family);
896
934
  font-size: var(--font-small-regular-size);
897
935
  color: var(--text-secondary);
936
+ font-weight: var(--font-small-regular-weight);
937
+ line-height: var(--font-small-regular-line-height);
938
+ letter-spacing: var(--font-small-regular-letter-spacing);
898
939
  }
899
940
  .snacky-navbar__item--active {
900
941
  font-family: var(--font-small-bold-family);
901
942
  font-weight: var(--font-small-bold-weight);
902
943
  color: var(--text-primary);
944
+ font-size: var(--font-small-bold-size);
945
+ line-height: var(--font-small-bold-line-height);
946
+ letter-spacing: var(--font-small-bold-letter-spacing);
903
947
  }
904
948
  .snacky-navbar__icon {
905
949
  display: inline-flex;
@@ -929,12 +973,17 @@
929
973
  line-height: var(--font-body-regular-line-height);
930
974
  color: var(--text-primary);
931
975
  transition: color 0.15s ease;
976
+ font-weight: var(--font-body-regular-weight);
977
+ letter-spacing: var(--font-body-regular-letter-spacing);
932
978
  }
933
979
  .snacky-tab--active {
934
980
  font-family: var(--font-body-semibold-family);
935
981
  font-weight: var(--font-body-semibold-weight);
936
982
  color: var(--text-on-action-tertiary);
937
983
  border-bottom-color: var(--color-primary-500);
984
+ font-size: var(--font-body-semibold-size);
985
+ line-height: var(--font-body-semibold-line-height);
986
+ letter-spacing: var(--font-body-semibold-letter-spacing);
938
987
  }
939
988
 
940
989
  /* src/components/Header/Header.css */
@@ -1030,12 +1079,18 @@
1030
1079
  font-family: var(--font-small-regular-family);
1031
1080
  font-size: var(--font-small-regular-size);
1032
1081
  color: var(--text-primary);
1082
+ font-weight: var(--font-small-regular-weight);
1083
+ line-height: var(--font-small-regular-line-height);
1084
+ letter-spacing: var(--font-small-regular-letter-spacing);
1033
1085
  }
1034
1086
  .snacky-banner-point-balance__value {
1035
1087
  margin: 0;
1036
1088
  font-family: var(--font-small-bold-family);
1037
1089
  font-weight: var(--font-small-bold-weight);
1038
1090
  color: var(--text-primary);
1091
+ font-size: var(--font-small-bold-size);
1092
+ line-height: var(--font-small-bold-line-height);
1093
+ letter-spacing: var(--font-small-bold-letter-spacing);
1039
1094
  }
1040
1095
  .snacky-banner-point-balance__divider {
1041
1096
  width: 1px;
@@ -1058,12 +1113,18 @@
1058
1113
  font-family: var(--font-body-regular-family);
1059
1114
  font-size: var(--font-body-regular-size);
1060
1115
  color: var(--text-inverse);
1116
+ font-weight: var(--font-body-regular-weight);
1117
+ line-height: var(--font-body-regular-line-height);
1118
+ letter-spacing: var(--font-body-regular-letter-spacing);
1061
1119
  }
1062
1120
  .snacky-banner-alert__countdown {
1063
1121
  margin: 0;
1064
1122
  font-family: var(--font-body-semibold-family);
1065
1123
  font-weight: var(--font-body-semibold-weight);
1066
1124
  color: var(--text-inverse);
1125
+ font-size: var(--font-body-semibold-size);
1126
+ line-height: var(--font-body-semibold-line-height);
1127
+ letter-spacing: var(--font-body-semibold-letter-spacing);
1067
1128
  }
1068
1129
 
1069
1130
  /* src/components/Badge/Badge.css */
@@ -1088,6 +1149,7 @@
1088
1149
  align-items: center;
1089
1150
  justify-content: center;
1090
1151
  line-height: 1;
1152
+ letter-spacing: var(--font-caption-semibold-letter-spacing);
1091
1153
  }
1092
1154
  .snacky-discount-tag {
1093
1155
  display: inline-flex;
@@ -1100,6 +1162,8 @@
1100
1162
  font-family: var(--font-caption-semibold-family);
1101
1163
  font-size: var(--font-caption-semibold-size);
1102
1164
  font-weight: var(--font-caption-semibold-weight);
1165
+ line-height: var(--font-caption-semibold-line-height);
1166
+ letter-spacing: var(--font-caption-semibold-letter-spacing);
1103
1167
  }
1104
1168
  .snacky-soldout-badge {
1105
1169
  display: inline-flex;
@@ -1111,6 +1175,9 @@
1111
1175
  color: var(--text-inverse);
1112
1176
  font-family: var(--font-small-regular-family);
1113
1177
  font-size: var(--font-small-regular-size);
1178
+ font-weight: var(--font-small-regular-weight);
1179
+ line-height: var(--font-small-regular-line-height);
1180
+ letter-spacing: var(--font-small-regular-letter-spacing);
1114
1181
  }
1115
1182
  .snacky-variant-badge {
1116
1183
  display: inline-flex;
@@ -1122,6 +1189,9 @@
1122
1189
  color: var(--text-primary);
1123
1190
  font-family: var(--font-caption-regular-family);
1124
1191
  font-size: var(--font-caption-regular-size);
1192
+ font-weight: var(--font-caption-regular-weight);
1193
+ line-height: var(--font-caption-regular-line-height);
1194
+ letter-spacing: var(--font-caption-regular-letter-spacing);
1125
1195
  }
1126
1196
 
1127
1197
  /* src/components/Callout/Callout.css */
@@ -1135,6 +1205,9 @@
1135
1205
  font-family: var(--font-body-regular-family);
1136
1206
  font-size: var(--font-body-regular-size);
1137
1207
  color: var(--text-primary);
1208
+ font-weight: var(--font-body-regular-weight);
1209
+ line-height: var(--font-body-regular-line-height);
1210
+ letter-spacing: var(--font-body-regular-letter-spacing);
1138
1211
  }
1139
1212
  .snacky-callout--received {
1140
1213
  align-self: flex-start;
@@ -1159,6 +1232,9 @@
1159
1232
  font-size: var(--font-caption-regular-size);
1160
1233
  color: var(--text-primary);
1161
1234
  text-align: right;
1235
+ font-weight: var(--font-caption-regular-weight);
1236
+ line-height: var(--font-caption-regular-line-height);
1237
+ letter-spacing: var(--font-caption-regular-letter-spacing);
1162
1238
  }
1163
1239
  .snacky-callout__meta-icon {
1164
1240
  width: 16px;
@@ -1211,6 +1287,7 @@
1211
1287
  font-size: var(--font-small-semibold-size);
1212
1288
  line-height: 24px;
1213
1289
  color: var(--text-primary);
1290
+ letter-spacing: var(--font-small-semibold-letter-spacing);
1214
1291
  }
1215
1292
  .snacky-order-item__status--cancelled {
1216
1293
  color: var(--text-error);
@@ -1223,12 +1300,15 @@
1223
1300
  overflow: hidden;
1224
1301
  text-overflow: ellipsis;
1225
1302
  white-space: nowrap;
1303
+ font-weight: var(--font-small-regular-weight);
1304
+ letter-spacing: var(--font-small-regular-letter-spacing);
1226
1305
  }
1227
1306
  .snacky-order-item__details {
1228
1307
  display: flex;
1229
1308
  align-items: center;
1230
1309
  gap: var(--spacing-8);
1231
1310
  width: 100%;
1311
+ padding: var(--spacing-8) 0;
1232
1312
  }
1233
1313
  .snacky-order-item__count {
1234
1314
  flex: 1;
@@ -1237,6 +1317,8 @@
1237
1317
  font-size: var(--font-small-regular-size);
1238
1318
  line-height: 24px;
1239
1319
  color: var(--text-secondary);
1320
+ font-weight: var(--font-small-regular-weight);
1321
+ letter-spacing: var(--font-small-regular-letter-spacing);
1240
1322
  }
1241
1323
  .snacky-order-item__total {
1242
1324
  flex: 1;
@@ -1246,10 +1328,15 @@
1246
1328
  color: var(--text-primary);
1247
1329
  text-align: right;
1248
1330
  white-space: nowrap;
1331
+ font-weight: var(--font-small-regular-weight);
1332
+ letter-spacing: var(--font-small-regular-letter-spacing);
1249
1333
  }
1250
1334
  .snacky-order-item__total b {
1251
1335
  font-weight: var(--font-small-bold-weight);
1252
1336
  letter-spacing: 0.12px;
1337
+ font-family: var(--font-small-bold-family);
1338
+ font-size: var(--font-small-bold-size);
1339
+ line-height: var(--font-small-bold-line-height);
1253
1340
  }
1254
1341
  .snacky-order-item__total--cod {
1255
1342
  flex: 0 1 auto;
@@ -1259,6 +1346,7 @@
1259
1346
  display: inline-flex;
1260
1347
  align-items: center;
1261
1348
  justify-content: center;
1349
+ height: 24px;
1262
1350
  padding: 0 var(--spacing-8);
1263
1351
  border-radius: var(--radius-field);
1264
1352
  border: 1px solid var(--border-main);
@@ -1278,6 +1366,8 @@
1278
1366
  font-size: var(--font-small-regular-size);
1279
1367
  line-height: 24px;
1280
1368
  color: var(--text-primary);
1369
+ font-weight: var(--font-small-regular-weight);
1370
+ letter-spacing: var(--font-small-regular-letter-spacing);
1281
1371
  }
1282
1372
  .snacky-order-item__action-row {
1283
1373
  display: flex;
@@ -1305,6 +1395,7 @@
1305
1395
  font-size: var(--font-small-semibold-size);
1306
1396
  line-height: 24px;
1307
1397
  color: var(--text-primary);
1398
+ letter-spacing: var(--font-small-semibold-letter-spacing);
1308
1399
  }
1309
1400
  .snacky-notif-item__message {
1310
1401
  font-family: var(--font-small-regular-family);
@@ -1314,6 +1405,8 @@
1314
1405
  overflow: hidden;
1315
1406
  text-overflow: ellipsis;
1316
1407
  white-space: nowrap;
1408
+ font-weight: var(--font-small-regular-weight);
1409
+ letter-spacing: var(--font-small-regular-letter-spacing);
1317
1410
  }
1318
1411
 
1319
1412
  /* src/components/Accordion/Accordion.css */
@@ -1347,11 +1440,15 @@
1347
1440
  font-family: var(--font-body-semibold-family);
1348
1441
  font-size: 14px;
1349
1442
  font-weight: var(--font-body-semibold-weight);
1443
+ line-height: var(--font-body-semibold-line-height);
1444
+ letter-spacing: var(--font-body-semibold-letter-spacing);
1350
1445
  }
1351
1446
  .snacky-accordion--icon .snacky-accordion__title {
1352
1447
  font-family: var(--font-small-semibold-family);
1353
1448
  font-size: var(--font-small-semibold-size);
1354
1449
  font-weight: var(--font-small-semibold-weight);
1450
+ line-height: var(--font-small-semibold-line-height);
1451
+ letter-spacing: var(--font-small-semibold-letter-spacing);
1355
1452
  }
1356
1453
  .snacky-accordion__chevron {
1357
1454
  width: 20px;
@@ -1371,6 +1468,9 @@
1371
1468
  font-family: var(--font-small-regular-family);
1372
1469
  font-size: var(--font-small-regular-size);
1373
1470
  color: var(--text-primary);
1471
+ font-weight: var(--font-small-regular-weight);
1472
+ line-height: var(--font-small-regular-line-height);
1473
+ letter-spacing: var(--font-small-regular-letter-spacing);
1374
1474
  }
1375
1475
 
1376
1476
  /* src/components/Modal/BottomSheet.css */
@@ -1425,6 +1525,8 @@
1425
1525
  font-size: var(--font-h3-bold-size);
1426
1526
  font-weight: var(--font-h3-bold-weight);
1427
1527
  color: var(--text-primary);
1528
+ line-height: var(--font-h3-bold-line-height);
1529
+ letter-spacing: var(--font-h3-bold-letter-spacing);
1428
1530
  }
1429
1531
  .snacky-section__action {
1430
1532
  display: inline-flex;
@@ -1538,6 +1640,9 @@
1538
1640
  color: var(--text-inverse);
1539
1641
  font-family: var(--font-small-regular-family);
1540
1642
  font-size: var(--font-small-regular-size);
1643
+ font-weight: var(--font-small-regular-weight);
1644
+ line-height: var(--font-small-regular-line-height);
1645
+ letter-spacing: var(--font-small-regular-letter-spacing);
1541
1646
  }
1542
1647
 
1543
1648
  /* src/components/ProductCard/ProductCard.css */
@@ -1561,8 +1666,19 @@
1561
1666
  }
1562
1667
  .snacky-product-card--details {
1563
1668
  width: 100%;
1564
- padding: var(--spacing-12) 0 var(--spacing-16);
1669
+ padding: 0;
1670
+ gap: 0;
1671
+ }
1672
+ .snacky-product-card__image-block {
1673
+ display: flex;
1674
+ justify-content: center;
1675
+ padding: var(--spacing-12) var(--spacing-8);
1676
+ }
1677
+ .snacky-product-card__details-body {
1678
+ display: flex;
1679
+ flex-direction: column;
1565
1680
  gap: var(--spacing-8);
1681
+ padding: var(--spacing-16) var(--spacing-24);
1566
1682
  }
1567
1683
  .snacky-product-card__image-wrap {
1568
1684
  position: relative;
@@ -1600,23 +1716,34 @@
1600
1716
  font-family: var(--font-small-regular-family);
1601
1717
  font-size: var(--font-small-regular-size);
1602
1718
  color: var(--text-primary);
1719
+ font-weight: var(--font-small-regular-weight);
1720
+ line-height: var(--font-small-regular-line-height);
1721
+ letter-spacing: var(--font-small-regular-letter-spacing);
1603
1722
  }
1604
1723
  .snacky-product-card--details .snacky-product-card__name {
1605
1724
  font-size: 14px;
1606
1725
  }
1607
1726
  .snacky-product-card__price-row {
1608
1727
  display: flex;
1609
- align-items: baseline;
1610
- gap: var(--spacing-4);
1728
+ align-items: center;
1729
+ gap: 5px;
1730
+ }
1731
+ .snacky-product-card--details .snacky-product-card__price-row {
1732
+ align-items: flex-start;
1733
+ gap: var(--spacing-8);
1611
1734
  }
1612
1735
  .snacky-product-card__price {
1613
1736
  font-family: var(--font-small-bold-family);
1614
1737
  font-weight: var(--font-small-bold-weight);
1615
1738
  color: var(--text-primary);
1739
+ font-size: var(--font-small-bold-size);
1740
+ line-height: var(--font-small-bold-line-height);
1741
+ letter-spacing: var(--font-small-bold-letter-spacing);
1616
1742
  }
1617
1743
  .snacky-product-card--details .snacky-product-card__price {
1618
1744
  font-size: 20px;
1619
1745
  font-weight: 700;
1746
+ line-height: 36px;
1620
1747
  }
1621
1748
  .snacky-product-card__original-price {
1622
1749
  font-family: var(--font-small-bold-family);
@@ -1624,10 +1751,13 @@
1624
1751
  font-size: 10px;
1625
1752
  color: var(--text-secondary);
1626
1753
  text-decoration: line-through;
1754
+ line-height: normal;
1755
+ letter-spacing: var(--font-small-bold-letter-spacing);
1627
1756
  }
1628
1757
  .snacky-product-card--details .snacky-product-card__original-price {
1629
1758
  font-size: 16px;
1630
1759
  font-weight: 700;
1760
+ line-height: 36px;
1631
1761
  }
1632
1762
  .snacky-product-card__footer-row {
1633
1763
  display: flex;
@@ -1642,6 +1772,9 @@
1642
1772
  font-family: var(--font-small-regular-family);
1643
1773
  font-size: var(--font-small-regular-size);
1644
1774
  color: var(--text-secondary);
1775
+ font-weight: var(--font-small-regular-weight);
1776
+ line-height: var(--font-small-regular-line-height);
1777
+ letter-spacing: var(--font-small-regular-letter-spacing);
1645
1778
  }
1646
1779
  .snacky-product-card__rating-icon {
1647
1780
  width: 16px;