@snacky/ui 0.4.9 → 0.5.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 (7) hide show
  1. package/dist/index.cjs +21 -19
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +136 -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,6 +1300,8 @@
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;
@@ -1237,6 +1316,8 @@
1237
1316
  font-size: var(--font-small-regular-size);
1238
1317
  line-height: 24px;
1239
1318
  color: var(--text-secondary);
1319
+ font-weight: var(--font-small-regular-weight);
1320
+ letter-spacing: var(--font-small-regular-letter-spacing);
1240
1321
  }
1241
1322
  .snacky-order-item__total {
1242
1323
  flex: 1;
@@ -1246,10 +1327,15 @@
1246
1327
  color: var(--text-primary);
1247
1328
  text-align: right;
1248
1329
  white-space: nowrap;
1330
+ font-weight: var(--font-small-regular-weight);
1331
+ letter-spacing: var(--font-small-regular-letter-spacing);
1249
1332
  }
1250
1333
  .snacky-order-item__total b {
1251
1334
  font-weight: var(--font-small-bold-weight);
1252
1335
  letter-spacing: 0.12px;
1336
+ font-family: var(--font-small-bold-family);
1337
+ font-size: var(--font-small-bold-size);
1338
+ line-height: var(--font-small-bold-line-height);
1253
1339
  }
1254
1340
  .snacky-order-item__total--cod {
1255
1341
  flex: 0 1 auto;
@@ -1278,6 +1364,8 @@
1278
1364
  font-size: var(--font-small-regular-size);
1279
1365
  line-height: 24px;
1280
1366
  color: var(--text-primary);
1367
+ font-weight: var(--font-small-regular-weight);
1368
+ letter-spacing: var(--font-small-regular-letter-spacing);
1281
1369
  }
1282
1370
  .snacky-order-item__action-row {
1283
1371
  display: flex;
@@ -1305,6 +1393,7 @@
1305
1393
  font-size: var(--font-small-semibold-size);
1306
1394
  line-height: 24px;
1307
1395
  color: var(--text-primary);
1396
+ letter-spacing: var(--font-small-semibold-letter-spacing);
1308
1397
  }
1309
1398
  .snacky-notif-item__message {
1310
1399
  font-family: var(--font-small-regular-family);
@@ -1314,6 +1403,8 @@
1314
1403
  overflow: hidden;
1315
1404
  text-overflow: ellipsis;
1316
1405
  white-space: nowrap;
1406
+ font-weight: var(--font-small-regular-weight);
1407
+ letter-spacing: var(--font-small-regular-letter-spacing);
1317
1408
  }
1318
1409
 
1319
1410
  /* src/components/Accordion/Accordion.css */
@@ -1347,11 +1438,15 @@
1347
1438
  font-family: var(--font-body-semibold-family);
1348
1439
  font-size: 14px;
1349
1440
  font-weight: var(--font-body-semibold-weight);
1441
+ line-height: var(--font-body-semibold-line-height);
1442
+ letter-spacing: var(--font-body-semibold-letter-spacing);
1350
1443
  }
1351
1444
  .snacky-accordion--icon .snacky-accordion__title {
1352
1445
  font-family: var(--font-small-semibold-family);
1353
1446
  font-size: var(--font-small-semibold-size);
1354
1447
  font-weight: var(--font-small-semibold-weight);
1448
+ line-height: var(--font-small-semibold-line-height);
1449
+ letter-spacing: var(--font-small-semibold-letter-spacing);
1355
1450
  }
1356
1451
  .snacky-accordion__chevron {
1357
1452
  width: 20px;
@@ -1371,6 +1466,9 @@
1371
1466
  font-family: var(--font-small-regular-family);
1372
1467
  font-size: var(--font-small-regular-size);
1373
1468
  color: var(--text-primary);
1469
+ font-weight: var(--font-small-regular-weight);
1470
+ line-height: var(--font-small-regular-line-height);
1471
+ letter-spacing: var(--font-small-regular-letter-spacing);
1374
1472
  }
1375
1473
 
1376
1474
  /* src/components/Modal/BottomSheet.css */
@@ -1425,6 +1523,8 @@
1425
1523
  font-size: var(--font-h3-bold-size);
1426
1524
  font-weight: var(--font-h3-bold-weight);
1427
1525
  color: var(--text-primary);
1526
+ line-height: var(--font-h3-bold-line-height);
1527
+ letter-spacing: var(--font-h3-bold-letter-spacing);
1428
1528
  }
1429
1529
  .snacky-section__action {
1430
1530
  display: inline-flex;
@@ -1538,6 +1638,9 @@
1538
1638
  color: var(--text-inverse);
1539
1639
  font-family: var(--font-small-regular-family);
1540
1640
  font-size: var(--font-small-regular-size);
1641
+ font-weight: var(--font-small-regular-weight);
1642
+ line-height: var(--font-small-regular-line-height);
1643
+ letter-spacing: var(--font-small-regular-letter-spacing);
1541
1644
  }
1542
1645
 
1543
1646
  /* src/components/ProductCard/ProductCard.css */
@@ -1561,8 +1664,19 @@
1561
1664
  }
1562
1665
  .snacky-product-card--details {
1563
1666
  width: 100%;
1564
- padding: var(--spacing-12) 0 var(--spacing-16);
1667
+ padding: 0;
1668
+ gap: 0;
1669
+ }
1670
+ .snacky-product-card__image-block {
1671
+ display: flex;
1672
+ justify-content: center;
1673
+ padding: var(--spacing-12) var(--spacing-8);
1674
+ }
1675
+ .snacky-product-card__details-body {
1676
+ display: flex;
1677
+ flex-direction: column;
1565
1678
  gap: var(--spacing-8);
1679
+ padding: var(--spacing-16) var(--spacing-24);
1566
1680
  }
1567
1681
  .snacky-product-card__image-wrap {
1568
1682
  position: relative;
@@ -1600,23 +1714,34 @@
1600
1714
  font-family: var(--font-small-regular-family);
1601
1715
  font-size: var(--font-small-regular-size);
1602
1716
  color: var(--text-primary);
1717
+ font-weight: var(--font-small-regular-weight);
1718
+ line-height: var(--font-small-regular-line-height);
1719
+ letter-spacing: var(--font-small-regular-letter-spacing);
1603
1720
  }
1604
1721
  .snacky-product-card--details .snacky-product-card__name {
1605
1722
  font-size: 14px;
1606
1723
  }
1607
1724
  .snacky-product-card__price-row {
1608
1725
  display: flex;
1609
- align-items: baseline;
1610
- gap: var(--spacing-4);
1726
+ align-items: center;
1727
+ gap: 5px;
1728
+ }
1729
+ .snacky-product-card--details .snacky-product-card__price-row {
1730
+ align-items: flex-start;
1731
+ gap: var(--spacing-8);
1611
1732
  }
1612
1733
  .snacky-product-card__price {
1613
1734
  font-family: var(--font-small-bold-family);
1614
1735
  font-weight: var(--font-small-bold-weight);
1615
1736
  color: var(--text-primary);
1737
+ font-size: var(--font-small-bold-size);
1738
+ line-height: var(--font-small-bold-line-height);
1739
+ letter-spacing: var(--font-small-bold-letter-spacing);
1616
1740
  }
1617
1741
  .snacky-product-card--details .snacky-product-card__price {
1618
1742
  font-size: 20px;
1619
1743
  font-weight: 700;
1744
+ line-height: 36px;
1620
1745
  }
1621
1746
  .snacky-product-card__original-price {
1622
1747
  font-family: var(--font-small-bold-family);
@@ -1624,10 +1749,13 @@
1624
1749
  font-size: 10px;
1625
1750
  color: var(--text-secondary);
1626
1751
  text-decoration: line-through;
1752
+ line-height: normal;
1753
+ letter-spacing: var(--font-small-bold-letter-spacing);
1627
1754
  }
1628
1755
  .snacky-product-card--details .snacky-product-card__original-price {
1629
1756
  font-size: 16px;
1630
1757
  font-weight: 700;
1758
+ line-height: 36px;
1631
1759
  }
1632
1760
  .snacky-product-card__footer-row {
1633
1761
  display: flex;
@@ -1642,6 +1770,9 @@
1642
1770
  font-family: var(--font-small-regular-family);
1643
1771
  font-size: var(--font-small-regular-size);
1644
1772
  color: var(--text-secondary);
1773
+ font-weight: var(--font-small-regular-weight);
1774
+ line-height: var(--font-small-regular-line-height);
1775
+ letter-spacing: var(--font-small-regular-letter-spacing);
1645
1776
  }
1646
1777
  .snacky-product-card__rating-icon {
1647
1778
  width: 16px;