sellmate-design-system-react 2.2.0 → 3.0.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 (41) hide show
  1. package/dist/components/SCallout/SCallout.cjs +76 -1
  2. package/dist/components/SCallout/SCallout.cjs.map +1 -1
  3. package/dist/components/SCallout/SCallout.d.ts +6 -2
  4. package/dist/components/SCallout/SCallout.js +76 -1
  5. package/dist/components/SCallout/SCallout.js.map +1 -1
  6. package/dist/components/SDraggableItem/SDraggableItem.cjs +3079 -0
  7. package/dist/components/SDraggableItem/SDraggableItem.cjs.map +1 -0
  8. package/dist/components/SDraggableItem/SDraggableItem.d.ts +33 -0
  9. package/dist/components/SDraggableItem/SDraggableItem.js +3077 -0
  10. package/dist/components/SDraggableItem/SDraggableItem.js.map +1 -0
  11. package/dist/components/SDraggableItem/index.d.ts +1 -0
  12. package/dist/components/SExpansionItem/SExpansionItem.cjs +6 -15
  13. package/dist/components/SExpansionItem/SExpansionItem.cjs.map +1 -1
  14. package/dist/components/SExpansionItem/SExpansionItem.js +6 -15
  15. package/dist/components/SExpansionItem/SExpansionItem.js.map +1 -1
  16. package/dist/components/SList/SList.cjs +38 -0
  17. package/dist/components/SList/SList.cjs.map +1 -0
  18. package/dist/components/SList/SList.d.ts +10 -0
  19. package/dist/components/SList/SList.js +36 -0
  20. package/dist/components/SList/SList.js.map +1 -0
  21. package/dist/components/SList/index.d.ts +1 -0
  22. package/dist/components/SListItem/SListItem.cjs +83 -0
  23. package/dist/components/SListItem/SListItem.cjs.map +1 -0
  24. package/dist/components/SListItem/SListItem.d.ts +26 -0
  25. package/dist/components/SListItem/SListItem.js +81 -0
  26. package/dist/components/SListItem/SListItem.js.map +1 -0
  27. package/dist/components/SListItem/index.d.ts +1 -0
  28. package/dist/components/SSectionHeaderCard/SSectionHeaderCard.cjs +3414 -0
  29. package/dist/components/SSectionHeaderCard/SSectionHeaderCard.cjs.map +1 -0
  30. package/dist/components/SSectionHeaderCard/SSectionHeaderCard.d.ts +32 -0
  31. package/dist/components/SSectionHeaderCard/SSectionHeaderCard.js +3392 -0
  32. package/dist/components/SSectionHeaderCard/SSectionHeaderCard.js.map +1 -0
  33. package/dist/components/SSectionHeaderCard/index.d.ts +1 -0
  34. package/dist/index.cjs +815 -419
  35. package/dist/index.cjs.map +1 -1
  36. package/dist/index.d.ts +4 -0
  37. package/dist/index.js +815 -423
  38. package/dist/index.js.map +1 -1
  39. package/dist/styles.css +336 -19
  40. package/dist/theme.css +14 -0
  41. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -699,6 +699,9 @@
699
699
  .bottom-80 {
700
700
  bottom: var(--spacing-80);
701
701
  }
702
+ .bottom-\[-1px\] {
703
+ bottom: -1px;
704
+ }
702
705
  .left-0 {
703
706
  left: 0;
704
707
  }
@@ -750,6 +753,9 @@
750
753
  .z-\[1001\] {
751
754
  z-index: 1001;
752
755
  }
756
+ .z-\[999999\] {
757
+ z-index: 999999;
758
+ }
753
759
  .col-start-1 {
754
760
  grid-column-start: 1;
755
761
  }
@@ -864,6 +870,13 @@
864
870
  .table {
865
871
  display: table;
866
872
  }
873
+ .size-\[24px\] {
874
+ width: 24px;
875
+ height: 24px;
876
+ }
877
+ .h-\(--cmp-sectionHeaderCard-topBorder-thickness\) {
878
+ height: var(--cmp-sectionHeaderCard-topBorder-thickness);
879
+ }
867
880
  .h-8 {
868
881
  height: var(--spacing-8);
869
882
  }
@@ -873,6 +886,9 @@
873
886
  .h-48 {
874
887
  height: var(--spacing-48);
875
888
  }
889
+ .h-\[2px\] {
890
+ height: 2px;
891
+ }
876
892
  .h-\[10px\] {
877
893
  height: 10px;
878
894
  }
@@ -888,6 +904,12 @@
888
904
  .h-\[28px\] {
889
905
  height: 28px;
890
906
  }
907
+ .h-\[32px\] {
908
+ height: 32px;
909
+ }
910
+ .h-\[40px\] {
911
+ height: 40px;
912
+ }
891
913
  .h-\[48px\] {
892
914
  height: 48px;
893
915
  }
@@ -978,8 +1000,8 @@
978
1000
  .min-h-0 {
979
1001
  min-height: 0;
980
1002
  }
981
- .min-h-8 {
982
- min-height: var(--spacing-8);
1003
+ .min-h-6 {
1004
+ min-height: var(--spacing-6);
983
1005
  }
984
1006
  .min-h-10 {
985
1007
  min-height: var(--spacing-10);
@@ -1005,6 +1027,12 @@
1005
1027
  .min-h-screen {
1006
1028
  min-height: 100vh;
1007
1029
  }
1030
+ .w-\(--cmp-listDraggableItem-accentStripe-width\) {
1031
+ width: var(--cmp-listDraggableItem-accentStripe-width);
1032
+ }
1033
+ .w-\(--cmp-listItem-accentStripe-width\) {
1034
+ width: var(--cmp-listItem-accentStripe-width);
1035
+ }
1008
1036
  .w-8 {
1009
1037
  width: var(--spacing-8);
1010
1038
  }
@@ -1050,6 +1078,9 @@
1050
1078
  .w-\[280px\] {
1051
1079
  width: 280px;
1052
1080
  }
1081
+ .w-\[291px\] {
1082
+ width: 291px;
1083
+ }
1053
1084
  .w-\[320px\] {
1054
1085
  width: 320px;
1055
1086
  }
@@ -1059,6 +1090,9 @@
1059
1090
  .w-\[500px\] {
1060
1091
  width: 500px;
1061
1092
  }
1093
+ .w-\[528px\] {
1094
+ width: 528px;
1095
+ }
1062
1096
  .w-\[var\(--cmp-checkbox-size\)\] {
1063
1097
  width: var(--cmp-checkbox-size);
1064
1098
  }
@@ -1205,6 +1239,9 @@
1205
1239
  .cursor-default {
1206
1240
  cursor: default;
1207
1241
  }
1242
+ .cursor-grab {
1243
+ cursor: grab;
1244
+ }
1208
1245
  .cursor-not-allowed {
1209
1246
  cursor: not-allowed;
1210
1247
  }
@@ -1280,9 +1317,18 @@
1280
1317
  .gap-\(--cmp-field-addonLabel-gap\) {
1281
1318
  gap: var(--cmp-field-addonLabel-gap);
1282
1319
  }
1320
+ .gap-\(--cmp-list-group-gap\) {
1321
+ gap: var(--cmp-list-group-gap);
1322
+ }
1323
+ .gap-\(--cmp-listDraggableItem-gap\) {
1324
+ gap: var(--cmp-listDraggableItem-gap);
1325
+ }
1283
1326
  .gap-\(--cmp-listExpansionItem-title-gap\) {
1284
1327
  gap: var(--cmp-listExpansionItem-title-gap);
1285
1328
  }
1329
+ .gap-\(--cmp-listItem-gap\) {
1330
+ gap: var(--cmp-listItem-gap);
1331
+ }
1286
1332
  .gap-2 {
1287
1333
  gap: var(--spacing-2);
1288
1334
  }
@@ -1490,6 +1536,12 @@
1490
1536
  .rounded-\(--cmp-listBox-radius\) {
1491
1537
  border-radius: var(--cmp-listBox-radius);
1492
1538
  }
1539
+ .rounded-\(--cmp-listDraggableItem-radius-bordered\) {
1540
+ border-radius: var(--cmp-listDraggableItem-radius-bordered);
1541
+ }
1542
+ .rounded-\(--cmp-listItem-radius-bordered\) {
1543
+ border-radius: var(--cmp-listItem-radius-bordered);
1544
+ }
1493
1545
  .rounded-\[2px\] {
1494
1546
  border-radius: 2px;
1495
1547
  }
@@ -1619,6 +1671,10 @@
1619
1671
  border-style: var(--tw-border-style);
1620
1672
  border-width: var(--cmp-guide-button-border-width);
1621
1673
  }
1674
+ .border-\[length\:var\(--cmp-listDraggableItem-bordered-dragging-border-width\)\] {
1675
+ border-style: var(--tw-border-style);
1676
+ border-width: var(--cmp-listDraggableItem-bordered-dragging-border-width);
1677
+ }
1622
1678
  .border-\[length\:var\(--cmp-table-border-width\)\] {
1623
1679
  border-style: var(--tw-border-style);
1624
1680
  border-width: var(--cmp-table-border-width);
@@ -1662,12 +1718,27 @@
1662
1718
  .\!border-\[\#93C4FF\] {
1663
1719
  border-color: #93C4FF !important;
1664
1720
  }
1721
+ .border-\(--cmp-listDraggableItem-border-default\) {
1722
+ border-color: var(--cmp-listDraggableItem-border-default);
1723
+ }
1724
+ .border-\(--cmp-listDraggableItem-bordered-border-selected\) {
1725
+ border-color: var(--cmp-listDraggableItem-bordered-border-selected);
1726
+ }
1727
+ .border-\(--cmp-listDraggableItem-bordered-dragging-border-color\) {
1728
+ border-color: var(--cmp-listDraggableItem-bordered-dragging-border-color);
1729
+ }
1665
1730
  .border-\(--cmp-listExpansionItem-title-border\) {
1666
1731
  border-color: var(--cmp-listExpansionItem-title-border);
1667
1732
  }
1733
+ .border-\(--cmp-listItem-border-default\) {
1734
+ border-color: var(--cmp-listItem-border-default);
1735
+ }
1668
1736
  .border-\(--field-bc\) {
1669
1737
  border-color: var(--field-bc);
1670
1738
  }
1739
+ .border-\(--sys-color-border-default\) {
1740
+ border-color: var(--sys-color-border-default);
1741
+ }
1671
1742
  .border-\[\#E1E1E1\] {
1672
1743
  border-color: #E1E1E1;
1673
1744
  }
@@ -1752,9 +1823,45 @@
1752
1823
  .bg-\(--cmp-listBoxItem-bg-hover\) {
1753
1824
  background-color: var(--cmp-listBoxItem-bg-hover);
1754
1825
  }
1826
+ .bg-\(--cmp-listDraggableItem-accentStripe-color\) {
1827
+ background-color: var(--cmp-listDraggableItem-accentStripe-color);
1828
+ }
1829
+ .bg-\(--cmp-listDraggableItem-bg-default\) {
1830
+ background-color: var(--cmp-listDraggableItem-bg-default);
1831
+ }
1832
+ .bg-\(--cmp-listDraggableItem-bg-selected\) {
1833
+ background-color: var(--cmp-listDraggableItem-bg-selected);
1834
+ }
1835
+ .bg-\(--cmp-listDraggableItem-bordered-dragging-bg\) {
1836
+ background-color: var(--cmp-listDraggableItem-bordered-dragging-bg);
1837
+ }
1838
+ .bg-\(--cmp-listExpansionItem-body-bg\) {
1839
+ background-color: var(--cmp-listExpansionItem-body-bg);
1840
+ }
1841
+ .bg-\(--cmp-listExpansionItem-title-bg-default\) {
1842
+ background-color: var(--cmp-listExpansionItem-title-bg-default);
1843
+ }
1755
1844
  .bg-\(--cmp-listExpansionItem-title-bg-expanded\) {
1756
1845
  background-color: var(--cmp-listExpansionItem-title-bg-expanded);
1757
1846
  }
1847
+ .bg-\(--cmp-listItem-accentStripe-color\) {
1848
+ background-color: var(--cmp-listItem-accentStripe-color);
1849
+ }
1850
+ .bg-\(--cmp-listItem-bg-default\) {
1851
+ background-color: var(--cmp-listItem-bg-default);
1852
+ }
1853
+ .bg-\(--cmp-sectionHeaderCard-topBorder-color-accent\) {
1854
+ background-color: var(--cmp-sectionHeaderCard-topBorder-color-accent);
1855
+ }
1856
+ .bg-\(--cmp-sectionHeaderCard-topBorder-color-default\) {
1857
+ background-color: var(--cmp-sectionHeaderCard-topBorder-color-default);
1858
+ }
1859
+ .bg-\(--sys-color-bg-frame\) {
1860
+ background-color: var(--sys-color-bg-frame);
1861
+ }
1862
+ .bg-\(--sys-color-bg-neutralLight\) {
1863
+ background-color: var(--sys-color-bg-neutralLight);
1864
+ }
1758
1865
  .bg-\[\#F2F2F2\] {
1759
1866
  background-color: #F2F2F2;
1760
1867
  }
@@ -1809,12 +1916,6 @@
1809
1916
  .bg-\[var\(--cmp-listBoxItem-depth2-middle-bg\)\] {
1810
1917
  background-color: var(--cmp-listBoxItem-depth2-middle-bg);
1811
1918
  }
1812
- .bg-\[var\(--cmp-listExpansionItem-body-bg\)\] {
1813
- background-color: var(--cmp-listExpansionItem-body-bg);
1814
- }
1815
- .bg-\[var\(--cmp-listExpansionItem-title-bg-default\)\] {
1816
- background-color: var(--cmp-listExpansionItem-title-bg-default);
1817
- }
1818
1919
  .bg-\[var\(--cmp-modal-bg\)\] {
1819
1920
  background-color: var(--cmp-modal-bg);
1820
1921
  }
@@ -1863,6 +1964,12 @@
1863
1964
  .bg-\[var\(--sys-color-divider-default\)\] {
1864
1965
  background-color: var(--sys-color-divider-default);
1865
1966
  }
1967
+ .bg-black\/5 {
1968
+ background-color: color-mix(in srgb, #000000 5%, transparent);
1969
+ @supports (color: color-mix(in lab, red, red)) {
1970
+ background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
1971
+ }
1972
+ }
1866
1973
  .bg-black\/40 {
1867
1974
  background-color: color-mix(in srgb, #000000 40%, transparent);
1868
1975
  @supports (color: color-mix(in lab, red, red)) {
@@ -1899,6 +2006,9 @@
1899
2006
  background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
1900
2007
  }
1901
2008
  }
2009
+ .p-\(--cmp-list-group-padding\) {
2010
+ padding: var(--cmp-list-group-padding);
2011
+ }
1902
2012
  .p-\(--cmp-listExpansionItem-body-padding\) {
1903
2013
  padding: var(--cmp-listExpansionItem-body-padding);
1904
2014
  }
@@ -1935,9 +2045,6 @@
1935
2045
  .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
1936
2046
  padding: var(--cmp-datepicker-calendar-paddingXY);
1937
2047
  }
1938
- .p-\[var\(--cmp-listExpansionItem-body-padding\)\] {
1939
- padding: var(--cmp-listExpansionItem-body-padding);
1940
- }
1941
2048
  .px-\(--cmp-chipInput-md-paddingX\) {
1942
2049
  padding-inline: var(--cmp-chipInput-md-paddingX);
1943
2050
  }
@@ -1947,6 +2054,9 @@
1947
2054
  .px-\(--cmp-field-addonLabel-paddingX\) {
1948
2055
  padding-inline: var(--cmp-field-addonLabel-paddingX);
1949
2056
  }
2057
+ .px-\(--cmp-listDraggableItem-paddingX\) {
2058
+ padding-inline: var(--cmp-listDraggableItem-paddingX);
2059
+ }
1950
2060
  .px-3 {
1951
2061
  padding-inline: calc(var(--spacing) * 3);
1952
2062
  }
@@ -2028,12 +2138,24 @@
2028
2138
  .py-\(--cmp-chipInput-sm-paddingY\) {
2029
2139
  padding-block: var(--cmp-chipInput-sm-paddingY);
2030
2140
  }
2141
+ .py-\(--cmp-listDraggableItem-paddingY-dense\) {
2142
+ padding-block: var(--cmp-listDraggableItem-paddingY-dense);
2143
+ }
2144
+ .py-\(--cmp-listDraggableItem-paddingY-normal\) {
2145
+ padding-block: var(--cmp-listDraggableItem-paddingY-normal);
2146
+ }
2031
2147
  .py-\(--cmp-listExpansionItem-title-paddingY-dense\) {
2032
2148
  padding-block: var(--cmp-listExpansionItem-title-paddingY-dense);
2033
2149
  }
2034
2150
  .py-\(--cmp-listExpansionItem-title-paddingY-normal\) {
2035
2151
  padding-block: var(--cmp-listExpansionItem-title-paddingY-normal);
2036
2152
  }
2153
+ .py-\(--cmp-listItem-paddingY-dense\) {
2154
+ padding-block: var(--cmp-listItem-paddingY-dense);
2155
+ }
2156
+ .py-\(--cmp-listItem-paddingY-normal\) {
2157
+ padding-block: var(--cmp-listItem-paddingY-normal);
2158
+ }
2037
2159
  .py-1 {
2038
2160
  padding-block: var(--spacing);
2039
2161
  }
@@ -2103,6 +2225,9 @@
2103
2225
  .pr-\(--cmp-listExpansionItem-title-paddingX\) {
2104
2226
  padding-right: var(--cmp-listExpansionItem-title-paddingX);
2105
2227
  }
2228
+ .pr-\(--cmp-listItem-paddingX\) {
2229
+ padding-right: var(--cmp-listItem-paddingX);
2230
+ }
2106
2231
  .pr-\[12px\] {
2107
2232
  padding-right: 12px;
2108
2233
  }
@@ -2115,6 +2240,9 @@
2115
2240
  .pl-\(--cmp-listExpansionItem-title-paddingX\) {
2116
2241
  padding-left: var(--cmp-listExpansionItem-title-paddingX);
2117
2242
  }
2243
+ .pl-\(--cmp-listItem-paddingX\) {
2244
+ padding-left: var(--cmp-listItem-paddingX);
2245
+ }
2118
2246
  .pl-\[26px\] {
2119
2247
  padding-left: 26px;
2120
2248
  }
@@ -2127,6 +2255,12 @@
2127
2255
  .pl-\[calc\(var\(--cmp-listExpansionItem-title-paddingX\)\+64px\)\] {
2128
2256
  padding-left: calc(var(--cmp-listExpansionItem-title-paddingX) + 64px);
2129
2257
  }
2258
+ .pl-\[calc\(var\(--cmp-listItem-paddingX\)\+32px\)\] {
2259
+ padding-left: calc(var(--cmp-listItem-paddingX) + 32px);
2260
+ }
2261
+ .pl-\[calc\(var\(--cmp-listItem-paddingX\)\+64px\)\] {
2262
+ padding-left: calc(var(--cmp-listItem-paddingX) + 64px);
2263
+ }
2130
2264
  .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
2131
2265
  padding-left: var(--cmp-overlay-header-paddingX);
2132
2266
  }
@@ -2311,15 +2445,39 @@
2311
2445
  .text-\(--cmp-listBoxItem-content-selected\) {
2312
2446
  color: var(--cmp-listBoxItem-content-selected);
2313
2447
  }
2448
+ .text-\(--cmp-listDraggableItem-text-default\) {
2449
+ color: var(--cmp-listDraggableItem-text-default);
2450
+ }
2451
+ .text-\(--cmp-listDraggableItem-text-selected\) {
2452
+ color: var(--cmp-listDraggableItem-text-selected);
2453
+ }
2454
+ .text-\(--cmp-listExpansionItem-title-text-default\) {
2455
+ color: var(--cmp-listExpansionItem-title-text-default);
2456
+ }
2314
2457
  .text-\(--cmp-listExpansionItem-title-text-expanded\) {
2315
2458
  color: var(--cmp-listExpansionItem-title-text-expanded);
2316
2459
  }
2460
+ .text-\(--cmp-listItem-text-default\) {
2461
+ color: var(--cmp-listItem-text-default);
2462
+ }
2317
2463
  .text-\(--color-grey-65\) {
2318
2464
  color: var(--color-grey-65);
2319
2465
  }
2320
2466
  .text-\(--color-var\) {
2321
2467
  color: var(--color-var);
2322
2468
  }
2469
+ .text-\(--sys-color-disabled-text\) {
2470
+ color: var(--sys-color-disabled-text);
2471
+ }
2472
+ .text-\(--sys-color-fg-brand\) {
2473
+ color: var(--sys-color-fg-brand);
2474
+ }
2475
+ .text-\(--sys-color-fg-primary\) {
2476
+ color: var(--sys-color-fg-primary);
2477
+ }
2478
+ .text-\(--sys-color-fg-secondary\) {
2479
+ color: var(--sys-color-fg-secondary);
2480
+ }
2323
2481
  .text-\(--sys-color-fg-warning\) {
2324
2482
  color: var(--sys-color-fg-warning);
2325
2483
  }
@@ -2431,9 +2589,6 @@
2431
2589
  .text-\[var\(--cmp-field-hint-color\)\] {
2432
2590
  color: var(--cmp-field-hint-color);
2433
2591
  }
2434
- .text-\[var\(--cmp-listExpansionItem-title-text-default\)\] {
2435
- color: var(--cmp-listExpansionItem-title-text-default);
2436
- }
2437
2592
  .text-\[var\(--cmp-timepicker-border-focus\)\] {
2438
2593
  color: var(--cmp-timepicker-border-focus);
2439
2594
  }
@@ -2509,6 +2664,9 @@
2509
2664
  .underline {
2510
2665
  text-decoration-line: underline;
2511
2666
  }
2667
+ .opacity-\(--cmp-listDraggableItem-dragging-content-opacity\) {
2668
+ opacity: var(--cmp-listDraggableItem-dragging-content-opacity);
2669
+ }
2512
2670
  .opacity-0 {
2513
2671
  opacity: 0%;
2514
2672
  }
@@ -2703,6 +2861,36 @@
2703
2861
  color: var(--sys-color-field-text-placeholder);
2704
2862
  }
2705
2863
  }
2864
+ .before\:absolute {
2865
+ &::before {
2866
+ content: var(--tw-content);
2867
+ position: absolute;
2868
+ }
2869
+ }
2870
+ .before\:top-0 {
2871
+ &::before {
2872
+ content: var(--tw-content);
2873
+ top: 0;
2874
+ }
2875
+ }
2876
+ .before\:right-0 {
2877
+ &::before {
2878
+ content: var(--tw-content);
2879
+ right: 0;
2880
+ }
2881
+ }
2882
+ .before\:left-0 {
2883
+ &::before {
2884
+ content: var(--tw-content);
2885
+ left: 0;
2886
+ }
2887
+ }
2888
+ .before\:z-10 {
2889
+ &::before {
2890
+ content: var(--tw-content);
2891
+ z-index: 10;
2892
+ }
2893
+ }
2706
2894
  .before\:mr-\[12px\] {
2707
2895
  &::before {
2708
2896
  content: var(--tw-content);
@@ -2721,6 +2909,12 @@
2721
2909
  display: block;
2722
2910
  }
2723
2911
  }
2912
+ .before\:h-\[2px\] {
2913
+ &::before {
2914
+ content: var(--tw-content);
2915
+ height: 2px;
2916
+ }
2917
+ }
2724
2918
  .before\:w-\[6px\] {
2725
2919
  &::before {
2726
2920
  content: var(--tw-content);
@@ -2733,6 +2927,18 @@
2733
2927
  flex-shrink: 0;
2734
2928
  }
2735
2929
  }
2930
+ .before\:bg-\(--sys-color-border-accent\) {
2931
+ &::before {
2932
+ content: var(--tw-content);
2933
+ background-color: var(--sys-color-border-accent);
2934
+ }
2935
+ }
2936
+ .before\:content-\[\'\'\] {
2937
+ &::before {
2938
+ --tw-content: '';
2939
+ content: var(--tw-content);
2940
+ }
2941
+ }
2736
2942
  .before\:content-\[\'-\'\] {
2737
2943
  &::before {
2738
2944
  --tw-content: '-';
@@ -2745,6 +2951,54 @@
2745
2951
  content: var(--tw-content);
2746
2952
  }
2747
2953
  }
2954
+ .after\:absolute {
2955
+ &::after {
2956
+ content: var(--tw-content);
2957
+ position: absolute;
2958
+ }
2959
+ }
2960
+ .after\:right-0 {
2961
+ &::after {
2962
+ content: var(--tw-content);
2963
+ right: 0;
2964
+ }
2965
+ }
2966
+ .after\:bottom-0 {
2967
+ &::after {
2968
+ content: var(--tw-content);
2969
+ bottom: 0;
2970
+ }
2971
+ }
2972
+ .after\:left-0 {
2973
+ &::after {
2974
+ content: var(--tw-content);
2975
+ left: 0;
2976
+ }
2977
+ }
2978
+ .after\:z-10 {
2979
+ &::after {
2980
+ content: var(--tw-content);
2981
+ z-index: 10;
2982
+ }
2983
+ }
2984
+ .after\:h-\[2px\] {
2985
+ &::after {
2986
+ content: var(--tw-content);
2987
+ height: 2px;
2988
+ }
2989
+ }
2990
+ .after\:bg-\(--sys-color-border-accent\) {
2991
+ &::after {
2992
+ content: var(--tw-content);
2993
+ background-color: var(--sys-color-border-accent);
2994
+ }
2995
+ }
2996
+ .after\:content-\[\'\'\] {
2997
+ &::after {
2998
+ --tw-content: '';
2999
+ content: var(--tw-content);
3000
+ }
3001
+ }
2748
3002
  .empty\:hidden {
2749
3003
  &:empty {
2750
3004
  display: none;
@@ -2811,6 +3065,20 @@
2811
3065
  }
2812
3066
  }
2813
3067
  }
3068
+ .hover\:border-\(--cmp-listDraggableItem-bordered-border-hover\) {
3069
+ &:hover {
3070
+ @media (hover: hover) {
3071
+ border-color: var(--cmp-listDraggableItem-bordered-border-hover);
3072
+ }
3073
+ }
3074
+ }
3075
+ .hover\:border-\(--cmp-listItem-bordered-border-hover\) {
3076
+ &:hover {
3077
+ @media (hover: hover) {
3078
+ border-color: var(--cmp-listItem-bordered-border-hover);
3079
+ }
3080
+ }
3081
+ }
2814
3082
  .hover\:border-\(--sys-color-field-border-focus\) {
2815
3083
  &:hover {
2816
3084
  @media (hover: hover) {
@@ -2867,6 +3135,13 @@
2867
3135
  }
2868
3136
  }
2869
3137
  }
3138
+ .hover\:bg-\(--cmp-listDraggableItem-bg-hover\) {
3139
+ &:hover {
3140
+ @media (hover: hover) {
3141
+ background-color: var(--cmp-listDraggableItem-bg-hover);
3142
+ }
3143
+ }
3144
+ }
2870
3145
  .hover\:bg-\(--cmp-listExpansionItem-title-bg-hover\) {
2871
3146
  &:hover {
2872
3147
  @media (hover: hover) {
@@ -2874,6 +3149,13 @@
2874
3149
  }
2875
3150
  }
2876
3151
  }
3152
+ .hover\:bg-\(--cmp-listItem-bg-hover\) {
3153
+ &:hover {
3154
+ @media (hover: hover) {
3155
+ background-color: var(--cmp-listItem-bg-hover);
3156
+ }
3157
+ }
3158
+ }
2877
3159
  .hover\:bg-\[var\(--btn-bg-hover\)\] {
2878
3160
  &:hover {
2879
3161
  @media (hover: hover) {
@@ -2930,6 +3212,16 @@
2930
3212
  }
2931
3213
  }
2932
3214
  }
3215
+ .hover\:bg-black\/5 {
3216
+ &:hover {
3217
+ @media (hover: hover) {
3218
+ background-color: color-mix(in srgb, #000000 5%, transparent);
3219
+ @supports (color: color-mix(in lab, red, red)) {
3220
+ background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
3221
+ }
3222
+ }
3223
+ }
3224
+ }
2933
3225
  .hover\:bg-gray-100 {
2934
3226
  &:hover {
2935
3227
  @media (hover: hover) {
@@ -3040,7 +3332,7 @@
3040
3332
  outline-width: 2px;
3041
3333
  }
3042
3334
  }
3043
- .focus-visible\:outline-\[var\(--sys-color-border-accent\)\] {
3335
+ .focus-visible\:outline-\(--sys-color-border-accent\) {
3044
3336
  &:focus-visible {
3045
3337
  outline-color: var(--sys-color-border-accent);
3046
3338
  }
@@ -3051,19 +3343,24 @@
3051
3343
  outline-style: none;
3052
3344
  }
3053
3345
  }
3346
+ .active\:cursor-grabbing {
3347
+ &:active {
3348
+ cursor: grabbing;
3349
+ }
3350
+ }
3054
3351
  .disabled\:cursor-not-allowed {
3055
3352
  &:disabled {
3056
3353
  cursor: not-allowed;
3057
3354
  }
3058
3355
  }
3059
- .disabled\:text-\[color\:var\(--cmp-listBoxItem-content-disabled\)\] {
3356
+ .disabled\:text-\(--sys-color-disabled-text\) {
3060
3357
  &:disabled {
3061
- color: var(--cmp-listBoxItem-content-disabled);
3358
+ color: var(--sys-color-disabled-text);
3062
3359
  }
3063
3360
  }
3064
- .disabled\:text-\[var\(--sys-color-disabled-text\)\] {
3361
+ .disabled\:text-\[color\:var\(--cmp-listBoxItem-content-disabled\)\] {
3065
3362
  &:disabled {
3066
- color: var(--sys-color-disabled-text);
3363
+ color: var(--cmp-listBoxItem-content-disabled);
3067
3364
  }
3068
3365
  }
3069
3366
  .has-\[\>div\:empty\]\:hidden {
@@ -3376,6 +3673,12 @@
3376
3673
  border-color: #AAAAAA;
3377
3674
  }
3378
3675
  }
3676
+ .\[\&\>\*\:not\(\:last-child\)\]\:border-b {
3677
+ &>*:not(:last-child) {
3678
+ border-bottom-style: var(--tw-border-style);
3679
+ border-bottom-width: 1px;
3680
+ }
3681
+ }
3379
3682
  .\[\&\>button\]\:bg-\[var\(--sys-color-bg-tableHeader\)\] {
3380
3683
  &>button {
3381
3684
  background-color: var(--sys-color-bg-tableHeader);
@@ -4321,6 +4624,8 @@
4321
4624
  --cmp-gnb-rail-item-radius: 8px;
4322
4625
  --cmp-gnb-rail-item-icon: 24px;
4323
4626
  --cmp-gnb-rail-item-width: 44px;
4627
+ --cmp-list-group-gap: 8px;
4628
+ --cmp-list-group-padding: 16px;
4324
4629
  --cmp-listItem-paddingX: 16px;
4325
4630
  --cmp-listItem-paddingY-normal: 8px;
4326
4631
  --cmp-listItem-paddingY-dense: 4px;
@@ -4394,6 +4699,18 @@
4394
4699
  --cmp-sectionHeaderCard-required-icon: 16px;
4395
4700
  --cmp-sectionHeaderCard-subtitle-color: #555555;
4396
4701
  --cmp-sectionHeaderCard-body-bg: #FFFFFF;
4702
+ --cmp-tree-item-bg-default: #FFFFFF;
4703
+ --cmp-tree-item-bg-hover: #F9F9F9;
4704
+ --cmp-tree-item-border-default: #E1E1E1;
4705
+ --cmp-tree-item-border-width-default: 1px;
4706
+ --cmp-tree-item-paddingX: 16px;
4707
+ --cmp-tree-item-paddingY: 4px;
4708
+ --cmp-tree-item-rowGap: 8px;
4709
+ --cmp-tree-item-contentGap: 12px;
4710
+ --cmp-tree-item-text-default: #222222;
4711
+ --cmp-tree-item-text-selected: #0075FF;
4712
+ --cmp-tree-item-arrow-icon: 12px;
4713
+ --cmp-tree-connector-line-color: #AAAAAA;
4397
4714
  }
4398
4715
  @layer base {
4399
4716
  *::-webkit-scrollbar {
package/dist/theme.css CHANGED
@@ -1344,6 +1344,8 @@
1344
1344
  --cmp-gnb-rail-item-radius: 8px;
1345
1345
  --cmp-gnb-rail-item-icon: 24px;
1346
1346
  --cmp-gnb-rail-item-width: 44px;
1347
+ --cmp-list-group-gap: 8px;
1348
+ --cmp-list-group-padding: 16px;
1347
1349
  --cmp-listItem-paddingX: 16px;
1348
1350
  --cmp-listItem-paddingY-normal: 8px;
1349
1351
  --cmp-listItem-paddingY-dense: 4px;
@@ -1417,6 +1419,18 @@
1417
1419
  --cmp-sectionHeaderCard-required-icon: 16px;
1418
1420
  --cmp-sectionHeaderCard-subtitle-color: #555555;
1419
1421
  --cmp-sectionHeaderCard-body-bg: #FFFFFF;
1422
+ --cmp-tree-item-bg-default: #FFFFFF;
1423
+ --cmp-tree-item-bg-hover: #F9F9F9;
1424
+ --cmp-tree-item-border-default: #E1E1E1;
1425
+ --cmp-tree-item-border-width-default: 1px;
1426
+ --cmp-tree-item-paddingX: 16px;
1427
+ --cmp-tree-item-paddingY: 4px;
1428
+ --cmp-tree-item-rowGap: 8px;
1429
+ --cmp-tree-item-contentGap: 12px;
1430
+ --cmp-tree-item-text-default: #222222;
1431
+ --cmp-tree-item-text-selected: #0075FF;
1432
+ --cmp-tree-item-arrow-icon: 12px;
1433
+ --cmp-tree-connector-line-color: #AAAAAA;
1420
1434
  }
1421
1435
 
1422
1436
  /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sellmate-design-system-react",
3
- "version": "2.2.0",
3
+ "version": "3.0.0",
4
4
  "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
5
5
  "license": "UNLICENSED",
6
6
  "keywords": [