sellmate-design-system-react 7.0.0 → 8.0.0

package/dist/styles.css

@@ -682,6 +682,9 @@
   .z-\[2\] {
     z-index: 2;
   }
+  .z-\[3\] {
+    z-index: 3;
+  }
   .z-\[5\] {
     z-index: 5;
   }
@@ -849,9 +852,16 @@
     width: 24px;
     height: 24px;
   }
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
   .h-\(--cmp-sectionHeaderCard-topBorder-thickness\) {
     height: var(--cmp-sectionHeaderCard-topBorder-thickness);
   }
+  .h-\(--cmp-splitter-border-width\) {
+    height: var(--cmp-splitter-border-width);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -903,6 +913,15 @@
   .h-\[80vh\] {
     height: 80vh;
   }
+  .h-\[140px\] {
+    height: 140px;
+  }
+  .h-\[200px\] {
+    height: 200px;
+  }
+  .h-\[220px\] {
+    height: 220px;
+  }
   .h-\[240px\] {
     height: 240px;
   }
@@ -1041,6 +1060,9 @@
   .w-\(--cmp-listItem-accentStripe-width\) {
     width: var(--cmp-listItem-accentStripe-width);
   }
+  .w-\(--cmp-splitter-border-width\) {
+    width: var(--cmp-splitter-border-width);
+  }
   .w-11 {
     width: calc(var(--spacing) * 11);
   }
@@ -1107,9 +1129,18 @@
   .w-\[360px\] {
     width: 360px;
   }
+  .w-\[420px\] {
+    width: 420px;
+  }
+  .w-\[520px\] {
+    width: 520px;
+  }
   .w-\[528px\] {
     width: 528px;
   }
+  .w-\[600px\] {
+    width: 600px;
+  }
   .w-\[680px\] {
     width: 680px;
   }
@@ -1119,6 +1150,9 @@
   .w-\[1000px\] {
     width: 1000px;
   }
+  .w-\[1080px\] {
+    width: 1080px;
+  }
   .w-\[calc\(14px\+var\(--cmp-tree-item-arrow-icon\)\)\] {
     width: calc(14px + var(--cmp-tree-item-arrow-icon));
   }
@@ -1230,6 +1264,9 @@
   .grow {
     flex-grow: 1;
   }
+  .basis-0 {
+    flex-basis: 0;
+  }
   .table-fixed {
     table-layout: fixed;
   }
@@ -1308,6 +1345,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .cursor-row-resize {
+    cursor: row-resize;
+  }
   .cursor-text {
     cursor: text;
   }
@@ -1963,6 +2003,9 @@
   .border-\[color\:var\(--rd-border\)\] {
     border-color: var(--rd-border);
   }
+  .border-\[color\:var\(--sys-color-border-default\)\] {
+    border-color: var(--sys-color-border-default);
+  }
   .border-\[var\(--cmp-table-border-color\)\] {
     border-color: var(--cmp-table-border-color);
   }
@@ -2050,6 +2093,9 @@
   .bg-\(--cmp-sectionHeaderCard-topBorder-color-default\) {
     background-color: var(--cmp-sectionHeaderCard-topBorder-color-default);
   }
+  .bg-\(--cmp-splitter-border-color\) {
+    background-color: var(--cmp-splitter-border-color);
+  }
   .bg-\(--cmp-tree-connector-line-color\) {
     background-color: var(--cmp-tree-connector-line-color);
   }
@@ -2059,9 +2105,15 @@
   .bg-\(--sys-color-bg-frame\) {
     background-color: var(--sys-color-bg-frame);
   }
+  .bg-\(--sys-color-bg-neutralBright\) {
+    background-color: var(--sys-color-bg-neutralBright);
+  }
   .bg-\(--sys-color-bg-neutralLight\) {
     background-color: var(--sys-color-bg-neutralLight);
   }
+  .bg-\(--sys-color-bg-screen\) {
+    background-color: var(--sys-color-bg-screen);
+  }
   .bg-\(--sys-color-bg-tableHeader\) {
     background-color: var(--sys-color-bg-tableHeader);
   }
@@ -2669,6 +2721,10 @@
     --tw-leading: 26px;
     line-height: 26px;
   }
+  .leading-\[28px\] {
+    --tw-leading: 28px;
+    line-height: 28px;
+  }
   .leading-\[30px\] {
     --tw-leading: 30px;
     line-height: 30px;
@@ -2821,6 +2877,9 @@
   .text-\(--sys-color-fg-secondary\) {
     color: var(--sys-color-fg-secondary);
   }
+  .text-\(--sys-color-fg-tertiary\) {
+    color: var(--sys-color-fg-tertiary);
+  }
   .text-\(--sys-color-fg-warning\) {
     color: var(--sys-color-fg-warning);
   }
@@ -3190,6 +3249,13 @@
   .\[length\:var\(--x\)\] {
     length: var(--x);
   }
+  .group-hover\:bg-\(--cmp-splitter-border-color\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--cmp-splitter-border-color);
+      }
+    }
+  }
   .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
     &:is(:where(.group\/filepicker):hover *) {
       @media (hover: hover) {
@@ -3211,6 +3277,11 @@
       }
     }
   }
+  .group-focus-visible\:bg-\(--cmp-splitter-border-color\) {
+    &:is(:where(.group):focus-visible *) {
+      background-color: var(--cmp-splitter-border-color);
+    }
+  }
   .placeholder\:text-\(--cmp-chipInput-text-placeholder\) {
     &::placeholder {
       color: var(--cmp-chipInput-text-placeholder);
@@ -3391,6 +3462,21 @@
       content: var(--tw-content);
     }
   }
+  .autofill\:\[box-shadow\:0_0_0_1000px_var\(--sys-color-field-bg-default\)_inset\] {
+    &:autofill {
+      box-shadow: 0 0 0 1000px var(--sys-color-field-bg-default) inset;
+    }
+  }
+  .autofill\:\[-webkit-text-fill-color\:currentColor\] {
+    &:autofill {
+      -webkit-text-fill-color: currentColor;
+    }
+  }
+  .autofill\:\[transition\:background-color_5000s_ease-in-out_0s\] {
+    &:autofill {
+      transition: background-color 5000s ease-in-out 0s;
+    }
+  }
   .empty\:hidden {
     &:empty {
       display: none;
@@ -4000,6 +4086,21 @@
       }
     }
   }
+  .\[\&\:-webkit-autofill\]\:\[box-shadow\:0_0_0_1000px_var\(--sys-color-field-bg-default\)_inset\] {
+    &:-webkit-autofill {
+      box-shadow: 0 0 0 1000px var(--sys-color-field-bg-default) inset;
+    }
+  }
+  .\[\&\:-webkit-autofill\]\:\[-webkit-text-fill-color\:currentColor\] {
+    &:-webkit-autofill {
+      -webkit-text-fill-color: currentColor;
+    }
+  }
+  .\[\&\:-webkit-autofill\]\:\[transition\:background-color_5000s_ease-in-out_0s\] {
+    &:-webkit-autofill {
+      transition: background-color 5000s ease-in-out 0s;
+    }
+  }
   .\[\&\:\:-webkit-scrollbar\]\:hidden {
     &::-webkit-scrollbar {
       display: none;
@@ -5209,6 +5310,7 @@
   --cmp-chipFilter-chip-applied-bg: #EFF6FF;
   --cmp-chipFilter-chip-applied-border: #93C4FF;
   --cmp-chipFilter-chip-applied-text-label: #222222;
+  --cmp-chipFilter-chip-applied-text-data: #005CC9;
   --cmp-chipFilter-chip-disabled-bg: #F6F6F6;
   --cmp-chipFilter-chip-disabled-border: #CCCCCC;
   --cmp-chipFilter-chip-disabled-text: #888888;
@@ -5242,6 +5344,9 @@
   --cmp-chipFilter-item-multi-paddingX: 12px;
   --cmp-chipFilter-item-text-default: #222222;
   --cmp-chipFilter-item-text-selected: #0075FF;
+  --cmp-splitter-border-width: 4px;
+  --cmp-splitter-border-padding: 4px;
+  --cmp-splitter-border-color: #64ABFF;
 }
 @layer base {
   body {

package/dist/theme.css

@@ -1411,6 +1411,7 @@
   --cmp-chipFilter-chip-applied-bg: #EFF6FF;
   --cmp-chipFilter-chip-applied-border: #93C4FF;
   --cmp-chipFilter-chip-applied-text-label: #222222;
+  --cmp-chipFilter-chip-applied-text-data: #005CC9;
   --cmp-chipFilter-chip-disabled-bg: #F6F6F6;
   --cmp-chipFilter-chip-disabled-border: #CCCCCC;
   --cmp-chipFilter-chip-disabled-text: #888888;
@@ -1444,6 +1445,9 @@
   --cmp-chipFilter-item-multi-paddingX: 12px;
   --cmp-chipFilter-item-text-default: #222222;
   --cmp-chipFilter-item-text-selected: #0075FF;
+  --cmp-splitter-border-width: 4px;
+  --cmp-splitter-border-padding: 4px;
+  --cmp-splitter-border-color: #64ABFF;
 }
 
 /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [