sellmate-design-system-react 0.6.0 → 0.7.0

package/dist/lib/scrollbar.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+// src/lib/scrollbar.ts
+var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
+var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+
+exports.SCROLLBAR_CLASS = SCROLLBAR_CLASS;
+exports.SCROLLBAR_TRACK_BG_CLASS = SCROLLBAR_TRACK_BG_CLASS;
+exports.SCROLLBAR_TRACK_BORDER_CLASS = SCROLLBAR_TRACK_BORDER_CLASS;
+//# sourceMappingURL=scrollbar.cjs.map
+//# sourceMappingURL=scrollbar.cjs.map

package/dist/lib/scrollbar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/scrollbar.ts"],"names":[],"mappings":";;;AAYA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA;AAMrB,IAAM,wBAAA,GACX;AAUK,IAAM,4BAAA,GACX","file":"scrollbar.cjs","sourcesContent":["/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/** background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n"]}

package/dist/lib/scrollbar.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 공용 커스텀 스크롤바 클래스.
+ * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,
+ * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.
+ *
+ * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).
+ * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.
+ */
+/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */
+export declare const SCROLLBAR_CLASS: string;
+/** background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */
+export declare const SCROLLBAR_TRACK_BG_CLASS: string;
+/**
+ * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.
+ * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.
+ * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을
+ * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).
+ * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.
+ */
+export declare const SCROLLBAR_TRACK_BORDER_CLASS: string;

package/dist/lib/scrollbar.js

@@ -0,0 +1,9 @@
+// src/lib/scrollbar.ts
+var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
+var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+
+export { SCROLLBAR_CLASS, SCROLLBAR_TRACK_BG_CLASS, SCROLLBAR_TRACK_BORDER_CLASS };
+//# sourceMappingURL=scrollbar.js.map
+//# sourceMappingURL=scrollbar.js.map

package/dist/lib/scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/scrollbar.ts"],"names":[],"mappings":";AAYA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA;AAMrB,IAAM,wBAAA,GACX;AAUK,IAAM,4BAAA,GACX","file":"scrollbar.js","sourcesContent":["/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/** background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n"]}

package/dist/styles.css

@@ -863,6 +863,9 @@
   .h-\[80vh\] {
     height: 80vh;
   }
+  .h-\[240px\] {
+    height: 240px;
+  }
   .h-\[364px\] {
     height: 364px;
   }
@@ -980,6 +983,12 @@
   .w-\[220px\] {
     width: 220px;
   }
+  .w-\[280px\] {
+    width: 280px;
+  }
+  .w-\[320px\] {
+    width: 320px;
+  }
   .w-\[328px\] {
     width: 328px;
   }
@@ -1004,6 +1013,9 @@
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .w-px {
     width: 1px;
   }
@@ -1131,9 +1143,6 @@
   .resize-y {
     resize: vertical;
   }
-  .\[scrollbar-width\:auto\] {
-    scrollbar-width: auto;
-  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -1362,9 +1371,21 @@
   .overflow-visible {
     overflow: visible;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-\(--cmp-listBox-radius\) {
     border-radius: var(--cmp-listBox-radius);
   }
@@ -1518,6 +1539,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -1589,6 +1614,9 @@
   .border-grey-30 {
     border-color: var(--color-grey-30);
   }
+  .border-grey-45 {
+    border-color: var(--color-grey-45);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1721,6 +1749,9 @@
   .p-0 {
     padding: 0;
   }
+  .p-2 {
+    padding: var(--spacing-2);
+  }
   .p-8 {
     padding: var(--spacing-8);
   }
@@ -1832,6 +1863,9 @@
   .py-1 {
     padding-block: var(--spacing);
   }
+  .py-2 {
+    padding-block: var(--spacing-2);
+  }
   .py-4 {
     padding-block: var(--spacing-4);
   }
@@ -2881,24 +2915,66 @@
       }
     }
   }
+  .supports-\[not_selector\(\:\:-webkit-scrollbar\)\]\:\[scrollbar-width\:thin\] {
+    @supports (not selector(::-webkit-scrollbar)) {
+      scrollbar-width: thin;
+    }
+  }
+  .supports-\[not_selector\(\:\:-webkit-scrollbar\)\]\:\[scrollbar-color\:var\(--color-grey-45\)_transparent\] {
+    @supports (not selector(::-webkit-scrollbar)) {
+      scrollbar-color: var(--color-grey-45) transparent;
+    }
+  }
+  .supports-\[not_selector\(\:\:-webkit-scrollbar\)\]\:\[scrollbar-color\:var\(--color-grey-45\)_var\(--color-grey-10\)\] {
+    @supports (not selector(::-webkit-scrollbar)) {
+      scrollbar-color: var(--color-grey-45) var(--color-grey-10);
+    }
+  }
   .\[\&\:\:-webkit-scrollbar\]\:hidden {
     &::-webkit-scrollbar {
       display: none;
     }
   }
-  .\[\&\:\:-webkit-scrollbar\]\:w-\[8px\] {
+  .\[\&\:\:-webkit-scrollbar\]\:h-\[12px\] {
+    &::-webkit-scrollbar {
+      height: 12px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:w-\[12px\] {
+    &::-webkit-scrollbar {
+      width: 12px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:bg-\[var\(--color-grey-10\)\] {
     &::-webkit-scrollbar {
-      width: 8px;
+      background-color: var(--color-grey-10);
     }
   }
-  .\[\&\:\:-webkit-scrollbar\]\:bg-\[var\(--color-grey-25\)\] {
+  .\[\&\:\:-webkit-scrollbar\]\:bg-transparent {
     &::-webkit-scrollbar {
-      background-color: var(--color-grey-25);
+      background-color: transparent;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full {
+    &::-webkit-scrollbar-thumb {
+      border-radius: var(--radius-full);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:border-2 {
+    &::-webkit-scrollbar-thumb {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:border-solid {
+    &::-webkit-scrollbar-thumb {
+      --tw-border-style: solid;
+      border-style: solid;
     }
   }
-  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-\[4px\] {
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:border-transparent {
     &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
+      border-color: transparent;
     }
   }
   .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-\[var\(--color-grey-45\)\] {
@@ -2906,14 +2982,39 @@
       background-color: var(--color-grey-45);
     }
   }
-  .\[\&\:\:-webkit-scrollbar-track\]\:bg-\[var\(--color-grey-25\)\] {
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-clip-padding {
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\:horizontal\]\:\[border-top-width\:3px\] {
+    &::-webkit-scrollbar-thumb:horizontal {
+      border-top-width: 3px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\:vertical\]\:\[border-left-width\:3px\] {
+    &::-webkit-scrollbar-thumb:vertical {
+      border-left-width: 3px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\]\:bg-\[var\(--color-grey-10\)\] {
+    &::-webkit-scrollbar-track {
+      background-color: var(--color-grey-10);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent {
     &::-webkit-scrollbar-track {
-      background-color: var(--color-grey-25);
+      background-color: transparent;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\:horizontal\]\:\[border-top\:1px_solid_var\(--sys-color-border-default\)\] {
+    &::-webkit-scrollbar-track:horizontal {
+      border-top: 1px solid var(--sys-color-border-default);
     }
   }
-  .\[\&\:\:-webkit-scrollbar\:horizontal\]\:h-\[8px\] {
-    &::-webkit-scrollbar:horizontal {
-      height: 8px;
+  .\[\&\:\:-webkit-scrollbar-track\:vertical\]\:\[border-left\:1px_solid_var\(--sys-color-border-default\)\] {
+    &::-webkit-scrollbar-track:vertical {
+      border-left: 1px solid var(--sys-color-border-default);
     }
   }
 }

package/package.json

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