sellmate-design-system-react 7.1.0 → 8.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.
package/dist/styles.css CHANGED
@@ -852,9 +852,16 @@
852
852
  width: 24px;
853
853
  height: 24px;
854
854
  }
855
+ .size-full {
856
+ width: 100%;
857
+ height: 100%;
858
+ }
855
859
  .h-\(--cmp-sectionHeaderCard-topBorder-thickness\) {
856
860
  height: var(--cmp-sectionHeaderCard-topBorder-thickness);
857
861
  }
862
+ .h-\(--cmp-splitter-border-width\) {
863
+ height: var(--cmp-splitter-border-width);
864
+ }
858
865
  .h-10 {
859
866
  height: calc(var(--spacing) * 10);
860
867
  }
@@ -906,6 +913,15 @@
906
913
  .h-\[80vh\] {
907
914
  height: 80vh;
908
915
  }
916
+ .h-\[140px\] {
917
+ height: 140px;
918
+ }
919
+ .h-\[200px\] {
920
+ height: 200px;
921
+ }
922
+ .h-\[220px\] {
923
+ height: 220px;
924
+ }
909
925
  .h-\[240px\] {
910
926
  height: 240px;
911
927
  }
@@ -1044,6 +1060,9 @@
1044
1060
  .w-\(--cmp-listItem-accentStripe-width\) {
1045
1061
  width: var(--cmp-listItem-accentStripe-width);
1046
1062
  }
1063
+ .w-\(--cmp-splitter-border-width\) {
1064
+ width: var(--cmp-splitter-border-width);
1065
+ }
1047
1066
  .w-11 {
1048
1067
  width: calc(var(--spacing) * 11);
1049
1068
  }
@@ -1110,9 +1129,18 @@
1110
1129
  .w-\[360px\] {
1111
1130
  width: 360px;
1112
1131
  }
1132
+ .w-\[420px\] {
1133
+ width: 420px;
1134
+ }
1135
+ .w-\[520px\] {
1136
+ width: 520px;
1137
+ }
1113
1138
  .w-\[528px\] {
1114
1139
  width: 528px;
1115
1140
  }
1141
+ .w-\[600px\] {
1142
+ width: 600px;
1143
+ }
1116
1144
  .w-\[680px\] {
1117
1145
  width: 680px;
1118
1146
  }
@@ -1122,6 +1150,9 @@
1122
1150
  .w-\[1000px\] {
1123
1151
  width: 1000px;
1124
1152
  }
1153
+ .w-\[1080px\] {
1154
+ width: 1080px;
1155
+ }
1125
1156
  .w-\[calc\(14px\+var\(--cmp-tree-item-arrow-icon\)\)\] {
1126
1157
  width: calc(14px + var(--cmp-tree-item-arrow-icon));
1127
1158
  }
@@ -1233,6 +1264,9 @@
1233
1264
  .grow {
1234
1265
  flex-grow: 1;
1235
1266
  }
1267
+ .basis-0 {
1268
+ flex-basis: 0;
1269
+ }
1236
1270
  .table-fixed {
1237
1271
  table-layout: fixed;
1238
1272
  }
@@ -1311,6 +1345,9 @@
1311
1345
  .cursor-pointer {
1312
1346
  cursor: pointer;
1313
1347
  }
1348
+ .cursor-row-resize {
1349
+ cursor: row-resize;
1350
+ }
1314
1351
  .cursor-text {
1315
1352
  cursor: text;
1316
1353
  }
@@ -1966,6 +2003,9 @@
1966
2003
  .border-\[color\:var\(--rd-border\)\] {
1967
2004
  border-color: var(--rd-border);
1968
2005
  }
2006
+ .border-\[color\:var\(--sys-color-border-default\)\] {
2007
+ border-color: var(--sys-color-border-default);
2008
+ }
1969
2009
  .border-\[var\(--cmp-table-border-color\)\] {
1970
2010
  border-color: var(--cmp-table-border-color);
1971
2011
  }
@@ -2053,6 +2093,9 @@
2053
2093
  .bg-\(--cmp-sectionHeaderCard-topBorder-color-default\) {
2054
2094
  background-color: var(--cmp-sectionHeaderCard-topBorder-color-default);
2055
2095
  }
2096
+ .bg-\(--cmp-splitter-border-color\) {
2097
+ background-color: var(--cmp-splitter-border-color);
2098
+ }
2056
2099
  .bg-\(--cmp-tree-connector-line-color\) {
2057
2100
  background-color: var(--cmp-tree-connector-line-color);
2058
2101
  }
@@ -2062,9 +2105,15 @@
2062
2105
  .bg-\(--sys-color-bg-frame\) {
2063
2106
  background-color: var(--sys-color-bg-frame);
2064
2107
  }
2108
+ .bg-\(--sys-color-bg-neutralBright\) {
2109
+ background-color: var(--sys-color-bg-neutralBright);
2110
+ }
2065
2111
  .bg-\(--sys-color-bg-neutralLight\) {
2066
2112
  background-color: var(--sys-color-bg-neutralLight);
2067
2113
  }
2114
+ .bg-\(--sys-color-bg-screen\) {
2115
+ background-color: var(--sys-color-bg-screen);
2116
+ }
2068
2117
  .bg-\(--sys-color-bg-tableHeader\) {
2069
2118
  background-color: var(--sys-color-bg-tableHeader);
2070
2119
  }
@@ -2672,6 +2721,10 @@
2672
2721
  --tw-leading: 26px;
2673
2722
  line-height: 26px;
2674
2723
  }
2724
+ .leading-\[28px\] {
2725
+ --tw-leading: 28px;
2726
+ line-height: 28px;
2727
+ }
2675
2728
  .leading-\[30px\] {
2676
2729
  --tw-leading: 30px;
2677
2730
  line-height: 30px;
@@ -2824,6 +2877,9 @@
2824
2877
  .text-\(--sys-color-fg-secondary\) {
2825
2878
  color: var(--sys-color-fg-secondary);
2826
2879
  }
2880
+ .text-\(--sys-color-fg-tertiary\) {
2881
+ color: var(--sys-color-fg-tertiary);
2882
+ }
2827
2883
  .text-\(--sys-color-fg-warning\) {
2828
2884
  color: var(--sys-color-fg-warning);
2829
2885
  }
@@ -3193,6 +3249,13 @@
3193
3249
  .\[length\:var\(--x\)\] {
3194
3250
  length: var(--x);
3195
3251
  }
3252
+ .group-hover\:bg-\(--cmp-splitter-border-color\) {
3253
+ &:is(:where(.group):hover *) {
3254
+ @media (hover: hover) {
3255
+ background-color: var(--cmp-splitter-border-color);
3256
+ }
3257
+ }
3258
+ }
3196
3259
  .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
3197
3260
  &:is(:where(.group\/filepicker):hover *) {
3198
3261
  @media (hover: hover) {
@@ -3214,6 +3277,11 @@
3214
3277
  }
3215
3278
  }
3216
3279
  }
3280
+ .group-focus-visible\:bg-\(--cmp-splitter-border-color\) {
3281
+ &:is(:where(.group):focus-visible *) {
3282
+ background-color: var(--cmp-splitter-border-color);
3283
+ }
3284
+ }
3217
3285
  .placeholder\:text-\(--cmp-chipInput-text-placeholder\) {
3218
3286
  &::placeholder {
3219
3287
  color: var(--cmp-chipInput-text-placeholder);
@@ -3394,6 +3462,21 @@
3394
3462
  content: var(--tw-content);
3395
3463
  }
3396
3464
  }
3465
+ .autofill\:\[box-shadow\:0_0_0_1000px_var\(--sys-color-field-bg-default\)_inset\] {
3466
+ &:autofill {
3467
+ box-shadow: 0 0 0 1000px var(--sys-color-field-bg-default) inset;
3468
+ }
3469
+ }
3470
+ .autofill\:\[-webkit-text-fill-color\:currentColor\] {
3471
+ &:autofill {
3472
+ -webkit-text-fill-color: currentColor;
3473
+ }
3474
+ }
3475
+ .autofill\:\[transition\:background-color_5000s_ease-in-out_0s\] {
3476
+ &:autofill {
3477
+ transition: background-color 5000s ease-in-out 0s;
3478
+ }
3479
+ }
3397
3480
  .empty\:hidden {
3398
3481
  &:empty {
3399
3482
  display: none;
@@ -4003,6 +4086,21 @@
4003
4086
  }
4004
4087
  }
4005
4088
  }
4089
+ .\[\&\:-webkit-autofill\]\:\[box-shadow\:0_0_0_1000px_var\(--sys-color-field-bg-default\)_inset\] {
4090
+ &:-webkit-autofill {
4091
+ box-shadow: 0 0 0 1000px var(--sys-color-field-bg-default) inset;
4092
+ }
4093
+ }
4094
+ .\[\&\:-webkit-autofill\]\:\[-webkit-text-fill-color\:currentColor\] {
4095
+ &:-webkit-autofill {
4096
+ -webkit-text-fill-color: currentColor;
4097
+ }
4098
+ }
4099
+ .\[\&\:-webkit-autofill\]\:\[transition\:background-color_5000s_ease-in-out_0s\] {
4100
+ &:-webkit-autofill {
4101
+ transition: background-color 5000s ease-in-out 0s;
4102
+ }
4103
+ }
4006
4104
  .\[\&\:\:-webkit-scrollbar\]\:hidden {
4007
4105
  &::-webkit-scrollbar {
4008
4106
  display: none;
@@ -5212,6 +5310,7 @@
5212
5310
  --cmp-chipFilter-chip-applied-bg: #EFF6FF;
5213
5311
  --cmp-chipFilter-chip-applied-border: #93C4FF;
5214
5312
  --cmp-chipFilter-chip-applied-text-label: #222222;
5313
+ --cmp-chipFilter-chip-applied-text-data: #005CC9;
5215
5314
  --cmp-chipFilter-chip-disabled-bg: #F6F6F6;
5216
5315
  --cmp-chipFilter-chip-disabled-border: #CCCCCC;
5217
5316
  --cmp-chipFilter-chip-disabled-text: #888888;
@@ -5245,6 +5344,9 @@
5245
5344
  --cmp-chipFilter-item-multi-paddingX: 12px;
5246
5345
  --cmp-chipFilter-item-text-default: #222222;
5247
5346
  --cmp-chipFilter-item-text-selected: #0075FF;
5347
+ --cmp-splitter-border-width: 4px;
5348
+ --cmp-splitter-border-padding: 4px;
5349
+ --cmp-splitter-border-color: #64ABFF;
5248
5350
  }
5249
5351
  @layer base {
5250
5352
  body {
package/dist/theme.css CHANGED
@@ -1411,6 +1411,7 @@
1411
1411
  --cmp-chipFilter-chip-applied-bg: #EFF6FF;
1412
1412
  --cmp-chipFilter-chip-applied-border: #93C4FF;
1413
1413
  --cmp-chipFilter-chip-applied-text-label: #222222;
1414
+ --cmp-chipFilter-chip-applied-text-data: #005CC9;
1414
1415
  --cmp-chipFilter-chip-disabled-bg: #F6F6F6;
1415
1416
  --cmp-chipFilter-chip-disabled-border: #CCCCCC;
1416
1417
  --cmp-chipFilter-chip-disabled-text: #888888;
@@ -1444,6 +1445,9 @@
1444
1445
  --cmp-chipFilter-item-multi-paddingX: 12px;
1445
1446
  --cmp-chipFilter-item-text-default: #222222;
1446
1447
  --cmp-chipFilter-item-text-selected: #0075FF;
1448
+ --cmp-splitter-border-width: 4px;
1449
+ --cmp-splitter-border-padding: 4px;
1450
+ --cmp-splitter-border-color: #64ABFF;
1447
1451
  }
1448
1452
 
1449
1453
  /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sellmate-design-system-react",
3
- "version": "7.1.0",
3
+ "version": "8.0.0",
4
4
  "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
5
5
  "license": "UNLICENSED",
6
6
  "keywords": [