sellmate-design-system-react 9.0.0-beta.77 → 9.0.0-beta.78

package/dist/llms-full.txt

@@ -678,6 +678,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | **상태·분류를 라벨로 표시 (기본값)** | **`STag`** — `<STag size="sm" color="..." label="판매중" />`. 목록의 상태 컬럼, 상세의 분류 태그 등 대부분이 여기 해당한다 |
 | 라벨 없이 **색 점만**으로 상태를 찍을 때 | `SBadge` — 점(dot)만 그리는 인디케이터. 텍스트가 이미 있고 앞에 점만 붙이는 좁은 경우에만 |
 | 사용자가 입력·삭제·편집하는 **토큰** | `SChip` (단독) / `SChipInput` (입력 필드 안에서) |
+| 목록에서 **여러 개 고른 값**을 칩으로 보여주고 하나씩 빼게 할 때 | `SSelect` `type="multi"` + `valueDisplay="chip"` (§3-7-2) — `SChip` 을 따로 나열하지 않는다 |
 
 > 상태 표시는 **`STag size="sm"` 이 기본**이다. 색 점 + 텍스트 조합(`SBadge`)을 기본으로 쓰지 않는다.
 
@@ -1760,6 +1761,14 @@ tableRef.current.scrollToRow(row);                  // 복원
 - 카드 안에 상태 배지를 넣으려면 `tag` 슬롯에 `STag` 를 준다. 라벨 문자열에 "(추천)" 처럼 섞어 쓰지 않는다.
 - **카드처럼 생겼다고 `SCard`/`SSectionHeaderCard` 로 감싸지 않는다.** `SRadioCard` 자체가 완결된 요소이고, 나열 간격은 `SRadioCardGroup` 의 `direction` 이 맞춘다 (§2-2).
 
+##### 여러 개 고른 값을 칩으로 보여줄 때 — `valueDisplay="chip"`
+
+- **`type="multi"`·`"multi_depth"` 에서 `valueDisplay="chip"` 을 주면** 선택값이 트리거에 칩으로 뜨고, 칩의 × 로 하나씩 뺄 수 있다. 기본(`text`)은 라벨을 쉼표로 이어 한 줄로 말줄임한다. 고른 값 하나하나를 확인하고 바로 빼야 하는 자리면 `chip`, 몇 개 골랐는지만 보이면 되는 조회 필터면 `text` 를 쓴다.
+- **후보가 정해진 목록에서 고르는 것이면 `SSelect` 의 `chip` 이고, 사용자가 값을 직접 타이핑해 쌓는 것이면 `SChipInput` 이다.** 목록에서 고른 값을 `SChipInput` 에 옮겨 담거나, `SSelect` 옆에 `SChip` 을 따로 나열해 선택값을 흉내 내지 않는다.
+- **단일 선택 type 에는 주지 않는다.** 무시되고 `text` 로 보인다. 단일 선택의 값 비우기는 `clearable` 이 맡는다.
+- 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. 높이·칩 간격은 `SSelect` 가 토큰으로 넣는다 — 직접 주지 않는다.
+- 전체 선택이면 칩 대신 `allSelectedLabel` 이 뜬다. 비활성 옵션의 칩과 비활성 셀렉트의 칩에는 × 가 없다.
+
 ##### 옵션을 서버에서 받는 동안 — `loading`
 
 - **받는 동안 `loading` 을 켠다.** 트리거의 펼침 아이콘 자리에 스피너가, 드롭다운에 로딩 행이 뜬다. 첫 조회든 다음 페이지든 같은 prop 이다.
@@ -9167,6 +9176,7 @@ export type SSectionHeaderCardChildren = ReactNode;
 | `name?` | `string` | — | 폼 연동용 name 속성 |
 | `options?` | `SSelectOption[]` | `[]` | 옵션 목록 (children으로 계층 표현) |
 | `type?` | `SSelectType` | `'default'` | 타입: default | multi | default_depth | multi_depth |
+| `valueDisplay?` | `SSelectValueDisplay` | `'text'` | 트리거에 선택값을 보여주는 방식. - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다. - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다. 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다. 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다. 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다. |
 | `showSearch?` | `boolean` | `false` | 검색 입력 사용 |
 | `showSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
@@ -9197,6 +9207,7 @@ export type SSectionHeaderCardChildren = ReactNode;
 | `hint?` | `string` | — |  |
 | `errorMessage?` | `string` | — |  |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. 셀렉트는 `maxLength` 개념이 없어 목록 최장값을 담는 등급으로 고른다. |
+| `size?` | `SFieldSize` | `'sm'` | 트리거 크기 (기본값 `'sm'`). 높이·패딩·간격·글자 크기를 `--cmp-select-{size}-*` 토큰으로 바꾼다. 드롭다운 목록은 크기와 무관하게 같다. `valueDisplay="chip"` 이면 `md` 는 SChip 과 같은 칩을, `sm` 은 28px 트리거에 맞춘 낮은 칩을 낸다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -9249,6 +9260,13 @@ export interface SSelectOption {
 export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
 ```
 
+### SSelectValueDisplay
+
+```ts
+/** 트리거에 선택값을 보여주는 방식 — 쉼표로 이은 텍스트 | 값마다 칩 */
+export type SSelectValueDisplay = 'text' | 'chip';
+```
+
 ## Dependencies
 
 ### Used by
@@ -10478,6 +10496,7 @@ export type STooltipType = 'default' | 'danger' | 'warning' | 'accent';
  - [SField](../SField)
  - [SGnbSystem](../SGnbSystem)
  - [SKeyValueTable](../SKeyValueTable)
+ - [SRadioButton](../SRadioButton)
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SStepper](../SStepper)
  - [STable](../STable)

package/dist/llms.txt

@@ -679,6 +679,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | **상태·분류를 라벨로 표시 (기본값)** | **`STag`** — `<STag size="sm" color="..." label="판매중" />`. 목록의 상태 컬럼, 상세의 분류 태그 등 대부분이 여기 해당한다 |
 | 라벨 없이 **색 점만**으로 상태를 찍을 때 | `SBadge` — 점(dot)만 그리는 인디케이터. 텍스트가 이미 있고 앞에 점만 붙이는 좁은 경우에만 |
 | 사용자가 입력·삭제·편집하는 **토큰** | `SChip` (단독) / `SChipInput` (입력 필드 안에서) |
+| 목록에서 **여러 개 고른 값**을 칩으로 보여주고 하나씩 빼게 할 때 | `SSelect` `type="multi"` + `valueDisplay="chip"` (§3-7-2) — `SChip` 을 따로 나열하지 않는다 |
 
 > 상태 표시는 **`STag size="sm"` 이 기본**이다. 색 점 + 텍스트 조합(`SBadge`)을 기본으로 쓰지 않는다.
 
@@ -1761,6 +1762,14 @@ tableRef.current.scrollToRow(row);                  // 복원
 - 카드 안에 상태 배지를 넣으려면 `tag` 슬롯에 `STag` 를 준다. 라벨 문자열에 "(추천)" 처럼 섞어 쓰지 않는다.
 - **카드처럼 생겼다고 `SCard`/`SSectionHeaderCard` 로 감싸지 않는다.** `SRadioCard` 자체가 완결된 요소이고, 나열 간격은 `SRadioCardGroup` 의 `direction` 이 맞춘다 (§2-2).
 
+##### 여러 개 고른 값을 칩으로 보여줄 때 — `valueDisplay="chip"`
+
+- **`type="multi"`·`"multi_depth"` 에서 `valueDisplay="chip"` 을 주면** 선택값이 트리거에 칩으로 뜨고, 칩의 × 로 하나씩 뺄 수 있다. 기본(`text`)은 라벨을 쉼표로 이어 한 줄로 말줄임한다. 고른 값 하나하나를 확인하고 바로 빼야 하는 자리면 `chip`, 몇 개 골랐는지만 보이면 되는 조회 필터면 `text` 를 쓴다.
+- **후보가 정해진 목록에서 고르는 것이면 `SSelect` 의 `chip` 이고, 사용자가 값을 직접 타이핑해 쌓는 것이면 `SChipInput` 이다.** 목록에서 고른 값을 `SChipInput` 에 옮겨 담거나, `SSelect` 옆에 `SChip` 을 따로 나열해 선택값을 흉내 내지 않는다.
+- **단일 선택 type 에는 주지 않는다.** 무시되고 `text` 로 보인다. 단일 선택의 값 비우기는 `clearable` 이 맡는다.
+- 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. 높이·칩 간격은 `SSelect` 가 토큰으로 넣는다 — 직접 주지 않는다.
+- 전체 선택이면 칩 대신 `allSelectedLabel` 이 뜬다. 비활성 옵션의 칩과 비활성 셀렉트의 칩에는 × 가 없다.
+
 ##### 옵션을 서버에서 받는 동안 — `loading`
 
 - **받는 동안 `loading` 을 켠다.** 트리거의 펼침 아이콘 자리에 스피너가, 드롭다운에 로딩 행이 뜬다. 첫 조회든 다음 페이지든 같은 prop 이다.

package/dist/styles.css

@@ -1001,6 +1001,9 @@
   .h-\(--cmp-calendarBoard-item-height\) {
     height: var(--cmp-calendarBoard-item-height);
   }
+  .h-\(--cmp-chip-height\) {
+    height: var(--cmp-chip-height);
+  }
   .h-\(--cmp-gnb-top-height\) {
     height: var(--cmp-gnb-top-height);
   }
@@ -1493,6 +1496,9 @@
   .max-w-\[420px\] {
     max-width: 420px;
   }
+  .max-w-\[440px\] {
+    max-width: 440px;
+  }
   .max-w-\[640px\] {
     max-width: 640px;
   }
@@ -1795,6 +1801,9 @@
   .content-center {
     align-content: center;
   }
+  .content-start {
+    align-content: flex-start;
+  }
   .items-center {
     align-items: center;
   }
@@ -1885,6 +1894,9 @@
   .gap-\(--cmp-chatMessage-subData-gap\) {
     gap: var(--cmp-chatMessage-subData-gap);
   }
+  .gap-\(--cmp-chip-gap\) {
+    gap: var(--cmp-chip-gap);
+  }
   .gap-\(--cmp-chipInput-chip-gap\) {
     gap: var(--cmp-chipInput-chip-gap);
   }
@@ -1924,6 +1936,12 @@
   .gap-\(--cmp-sectionHeaderCard-header-gap\) {
     gap: var(--cmp-sectionHeaderCard-header-gap);
   }
+  .gap-\(--cmp-select-md-gap\) {
+    gap: var(--cmp-select-md-gap);
+  }
+  .gap-\(--cmp-select-sm-gap\) {
+    gap: var(--cmp-select-sm-gap);
+  }
   .gap-\(--cmp-tree-item-contentGap\) {
     gap: var(--cmp-tree-item-contentGap);
   }
@@ -1951,6 +1969,9 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-10 {
+    gap: calc(var(--spacing) * 10);
+  }
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
@@ -2155,6 +2176,9 @@
   .gap-sd-4 {
     gap: var(--spacing-sd-4);
   }
+  .gap-sd-6 {
+    gap: var(--spacing-sd-6);
+  }
   .gap-sd-8 {
     gap: var(--spacing-sd-8);
   }
@@ -3305,6 +3329,9 @@
   .px-\(--cmp-chatSystemMessage-paddingX\) {
     padding-inline: var(--cmp-chatSystemMessage-paddingX);
   }
+  .px-\(--cmp-chip-paddingX\) {
+    padding-inline: var(--cmp-chip-paddingX);
+  }
   .px-\(--cmp-chipInput-md-paddingX\) {
     padding-inline: var(--cmp-chipInput-md-paddingX);
   }
@@ -3341,6 +3368,12 @@
   .px-\(--cmp-sectionHeaderCard-header-paddingX\) {
     padding-inline: var(--cmp-sectionHeaderCard-header-paddingX);
   }
+  .px-\(--cmp-select-md-paddingX\) {
+    padding-inline: var(--cmp-select-md-paddingX);
+  }
+  .px-\(--cmp-select-sm-paddingX\) {
+    padding-inline: var(--cmp-select-sm-paddingX);
+  }
   .px-\(--cmp-tree-item-paddingX\) {
     padding-inline: var(--cmp-tree-item-paddingX);
   }
@@ -4724,8 +4757,8 @@
       }
     }
   }
-  .group-hover\/select-clear\:opacity-5 {
-    &:is(:where(.group\/select-clear):hover *) {
+  .group-hover\/select-remove\:opacity-5 {
+    &:is(:where(.group\/select-remove):hover *) {
       @media (hover: hover) {
         opacity: 5%;
       }

package/package.json

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