sellmate-design-system-react 9.0.0-beta.92 → 9.0.0-beta.94

package/dist/components/SStepper/stepper.config.d.ts

@@ -9,10 +9,14 @@ export type SStepperItem = {
 };
 export declare const STEPPER_SIZE_CONFIG: Record<SStepperSize, {
     sequenceSize: string;
+    /** 루트에 거는 글자 크기 — 시퀀스 배지와 typoActive 가 없는 진행 중 타이틀이 상속한다 */
     fontSize: string;
     lineHeight: string;
+    /** 기본·완료 타이틀 타이포 (stepper.<size>.typography.default) */
+    typoDefault: string;
+    /** 진행 중 타이틀 타이포 (stepper.<size>.typography.active). null 이면 fontWeightActive 로 그린다 */
+    typoActive: string | null;
     fontWeightActive: number;
-    fontWeightDefault: number;
 }>;
 export declare const STEPPER_LAYOUT: {
     containerGap: string;
@@ -52,14 +56,15 @@ export declare const STEPPER_HORIZONTAL_COMPLETED_COLORS: {
     text: string;
 };
 export declare const STEPPER_VERTICAL_LAYOUT: {
+    /** 세로형 폭. 대응 토큰이 없어 디자인 값을 그대로 쓴다(stepper.vertical 에 width 가 없음). */
     width: string;
     itemGap: string;
     itemPaddingX: string;
     itemPaddingY: string;
     titlePaddingTop: string;
     titlePaddingBottom: string;
-    titleFontSize: string;
-    titleLineHeight: string;
+    /** 구간 제목 타이포 — stepper.vertical.title.typography (= heading.xxs) */
+    titleTypo: string;
     accentStripeWidth: string;
     accentStripeColor: string;
 };
@@ -69,6 +74,7 @@ export declare const STEPPER_VERTICAL_COLORS: {
         hover: string;
         selected: string;
     };
+    titleBg: string;
     titleText: string;
     textDefault: string;
     textCompleted: string;

package/dist/components/STable/README.md

@@ -67,7 +67,7 @@
 | `getIsAllChecked` | `(rows: TRow[]) => boolean \| null` | 주어진 행들의 전체 선택 상태 (true/false/null=indeterminate) |
 | `getPaginationInfo` | `<union 2종>` | 내부 페이지네이션 정보 (internalPagination 아니면 null) |
 | `getStickyStyle` | `(colIdx: number) => CSSProperties` | 컬럼 sticky 스타일 (CSS 변수 + 고정폭) |
-| `getScrollElement` | `() => HTMLDivElement \| null` | 본문의 세로 스크롤 컨테이너. 본문이 슬롯으로 대체됐거나 아직 안 그려졌으면 `null`. 스크롤 위치를 읽고 되돌리거나, 표 안에서 스크롤 여지를 재야 할 때 쓴다 — **DOM 을 뒤져 컨테이너를 찾지 않는다.** 내부 구조는 예고 없이 바뀐다. ⚠️ `virtualScroll` 에서 **위치를 픽셀로 저장했다 되돌리는 것은 미덥지 않다.** 다시 그릴 때 아직 안 그려진 행은 추정 높이로 잡히므로, 실측이 쌓이기 전의 같은 `scrollTop` 이 다른 행을 가리킨다. 그 경우엔 위치가 아니라 **보고 있던 행**을 기억해 두는 편이 맞다. |
+| `getScrollElement` | `() => HTMLDivElement \| null` | 본문의 세로 스크롤 컨테이너. 본문이 슬롯으로 대체됐거나 아직 안 그려졌으면 `null`. 스크롤 위치를 읽고 되돌리거나, 표 안에서 스크롤 여지를 재야 할 때 쓴다 — **DOM 을 뒤져 컨테이너를 찾지 않는다.** 내부 구조는 예고 없이 바뀐다. 헤더도 이 안에 위로 붙어(sticky) 있다 — `clientHeight` 에는 헤더 높이가 들어 있다. `scrollTop` 은 본문 기준이라 `scrollTop` 이 y 이면 본문의 y 자리가 헤더 바로 아래에 온다. ⚠️ `virtualScroll` 에서 **위치를 픽셀로 저장했다 되돌리는 것은 미덥지 않다.** 다시 그릴 때 아직 안 그려진 행은 추정 높이로 잡히므로, 실측이 쌓이기 전의 같은 `scrollTop` 이 다른 행을 가리킨다. 그 경우엔 위치가 아니라 **보고 있던 행**을 기억해 두는 편이 맞다. |
 | `getFirstVisibleRow` | `() => number` | 지금 본문 맨 위에 걸린 행의 인덱스 (`rows` 기준). 행이 없으면 `0`. **스크롤 위치를 저장할 때는 픽셀이 아니라 이 값을 저장한다** — `virtualScroll` 에서 픽셀은 좌표계가 실측으로 움직이는 값이라, 되돌릴 때 다른 행을 가리킨다. |
 | `scrollToRow` | `(index: number) => void` | 그 행이 본문 맨 위에 오도록 스크롤한다 (`rows` 기준 인덱스, 범위를 벗어나면 잘린다). `virtualScroll` 에서는 **실측이 정착할 때까지 그 행을 계속 다시 겨냥한다** — 옮기는 시점의 좌표는 아직 추정치라 한 번만 옮기면 몇 행씩 밀린다. 사용자가 직접 스크롤하면 겨냥을 놓는다. 페이지네이션을 쓰는 표에서는 **지금 페이지에 그려진 행만** 닿는다 — 다른 페이지의 행이라면 페이지를 먼저 옮긴다. |
 | `setRowCount` | `(count: number) => void` | 가상 스크롤 총 행 수 설정 |

package/dist/components/STable/STable.d.ts

@@ -208,6 +208,9 @@ export interface STableHandle<TRow extends SRow = SRow> {
      * 스크롤 위치를 읽고 되돌리거나, 표 안에서 스크롤 여지를 재야 할 때 쓴다 —
      * **DOM 을 뒤져 컨테이너를 찾지 않는다.** 내부 구조는 예고 없이 바뀐다.
      *
+     * 헤더도 이 안에 위로 붙어(sticky) 있다 — `clientHeight` 에는 헤더 높이가 들어 있다.
+     * `scrollTop` 은 본문 기준이라 `scrollTop` 이 y 이면 본문의 y 자리가 헤더 바로 아래에 온다.
+     *
      * ⚠️ `virtualScroll` 에서 **위치를 픽셀로 저장했다 되돌리는 것은 미덥지 않다.** 다시 그릴 때
      * 아직 안 그려진 행은 추정 높이로 잡히므로, 실측이 쌓이기 전의 같은 `scrollTop` 이 다른 행을
      * 가리킨다. 그 경우엔 위치가 아니라 **보고 있던 행**을 기억해 두는 편이 맞다.

package/dist/components/STabs/tabs.config.d.ts

@@ -3,15 +3,10 @@ export interface STabOption {
     value: string;
     badge?: string | number;
 }
-/** main(분절형) 레이아웃 */
+/** main(분절형) 레이아웃 (토큰) */
 export declare const TAB_MAIN_SIZE: {
-    height: number;
-    paddingX: number;
-};
-/** 탭 타이포 (main/sub 공통, token: typography.navigation.sm) */
-export declare const TAB_TYPOGRAPHY: {
-    fontSize: number;
-    lineHeight: number;
+    height: string;
+    paddingX: string;
 };
 export declare const TAB_MAIN_COLORS: {
     selected: {

package/dist/components/STag/README.md

@@ -69,11 +69,15 @@ export const TAG_COLORS = [
 
 ### Used by
 
+ - [SBarcodeInput](../SBarcodeInput)
  - [SChipFilter](../SChipFilter)
  - [SConfirmModal](../SConfirmModal)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
+ - [SGnbSystem](../SGnbSystem)
+ - [SInput](../SInput)
  - [SLauncherListBox](../SLauncherListBox)
+ - [SNumberInput](../SNumberInput)
  - [SRadioCard](../SRadioCard)
  - [SSystemActionButton](../SSystemActionButton)
  - [STabs](../STabs)
@@ -88,11 +92,15 @@ export const TAG_COLORS = [
 ```mermaid
 graph TD;
   STag --> SIcon
+  SBarcodeInput --> STag
   SChipFilter --> STag
   SConfirmModal --> STag
   SGhostButton --> STag
   SGnb --> STag
+  SGnbSystem --> STag
+  SInput --> STag
   SLauncherListBox --> STag
+  SNumberInput --> STag
   SRadioCard --> STag
   SSystemActionButton --> STag
   STabs --> STag

package/dist/components/STag/tag.config.d.ts

@@ -4,14 +4,15 @@ export declare const TAG_COLORS: readonly ["grey", "red", "orange", "yellow", "g
 export type STagShape = (typeof TAG_SHAPES)[number];
 export type STagSize = (typeof TAG_SIZES)[number];
 export type STagColor = (typeof TAG_COLORS)[number];
-/** 사이즈별 레이아웃/타이포 (token.json component.tag 기준) */
+/**
+ * 사이즈별 레이아웃/타이포 — `--cmp-tag-<size>-*` 토큰.
+ * typography 는 `tag.<size>.typography` 가 가리키는 typo 클래스.
+ */
 export declare const TAG_SIZE_CONFIG: Record<STagSize, {
-    height: number;
-    paddingX: number;
-    gap: number;
-    radius: number;
-    iconSize: number;
-    fontSize: number;
-    fontWeight: number;
-    lineHeight: number;
+    height: string;
+    paddingX: string;
+    gap: string;
+    radius: string;
+    iconSize: string;
+    typography: string;
 }>;

package/dist/components/STimePicker/timepicker.config.d.ts

@@ -9,6 +9,9 @@ export declare const TIMEPICKER_SIZE_CONFIG: Record<STimePickerSize, {
     gap: string;
     icon: string;
     radius: string;
+    /** 입력값 타이포 클래스 (`timepicker.<size>.typography`). 렌더는 이 클래스로 한다 */
+    typography: string;
+    /** 공개 export 라 남겨 둔 같은 값 — 렌더에는 쓰지 않는다 */
     fontSize: number;
     lineHeight: number;
     minWidth: number;

package/dist/components/STree/README.md

@@ -99,6 +99,7 @@ export interface STreeItemRenderState {
 
 - [SCheckbox](../SCheckbox)
 - [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
 
 ### Graph
 
@@ -106,5 +107,6 @@ export interface STreeItemRenderState {
 graph TD;
   STree --> SCheckbox
   STree --> SGhostButton
+  STree --> SIcon
   style STree fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/STreeTable/STreeTable.examples.d.ts

@@ -20,6 +20,13 @@ export declare const treeTableColumns: STableColumn<TreeTableExampleRow>[];
 export declare const treeTableWideColumns: STableColumn<TreeTableExampleRow>[];
 /** 하위 행을 가진 모든 행의 키 — "모두 펼치기" 예시에 쓴다 */
 export declare const treeTableParentKeys: string[];
+/** 많은 행 예시에서 카테고리 하나가 차지하는 행 수 — 자기 + 상품 10 + 옵션 50 */
+export declare const TREE_TABLE_ROWS_PER_CATEGORY = 61;
+/** 많은 행 예시 — 카테고리 `categoryCount`개 × 상품 10개 × 옵션 5개 */
+export declare const createManyTreeTableRows: (categoryCount: number) => TreeTableExampleRow[];
+/** 가상 스크롤 예시 — 6,100행 */
+export declare const treeTableManyRows: TreeTableExampleRow[];
+export declare const treeTableManyParentKeys: string[];
 /** 깊은 트리 예시 — 창고 > 구역 > 랙 > 단 > 칸, 5단계 로케이션 */
 export interface TreeTableLocationRow {
     id: string;