sellmate-design-system-react 9.0.0-beta.0 → 9.0.0-beta.2

package/dist/llms-full.txt

@@ -40,7 +40,7 @@
 | **표·목록** | `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
 | **레이아웃** | `SLayout` `SGnb` `SPage`(제목 영역은 `header` prop) `SSectionHeaderCard` `SCard` `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
-| **표시·상태** | `STag` `SBadge` `SIcon` `SCallout` `SGuide` |
+| **표시·상태** | `STag` `SBadge` `SIcon` `SImage` `SCallout` `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
 | **모달** | `SModal.confirm()` `SModal.create()` + `SActionModal` `SConfirmModal` `SModalOutlet`(앱 루트 1회) |
@@ -146,7 +146,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SPage`(제목 영역은 `header` prop) |
 | **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SForm` `SSplitter` `SScrollArea` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `STabs` `SStepper` `SPagination` `SDivider` |
-| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SField` `SInput` `SNumberInput` `STextarea` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SLinearProgress` `SCircleProgress` |
+| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SField` `SInput` `SNumberInput` `STextarea` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
 
@@ -450,6 +450,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
 | 아이콘을 넣는다 | `SIcon` | |
+| 사진·썸네일을 보여준다 (로딩·실패 상태 포함) | `SImage` | §3-7-12 |
 | 문장 안에서 다른 화면으로 보낸다 | `STextLink` | §3-5-6 |
 
 #### C. 동작을 실행시킨다
@@ -1093,6 +1094,23 @@ const columns: STableColumn[] = [
 - 검색 실행 시점이 다르다 — `SKeyValueTable` 필터는 앱이 검색 버튼을 직접 놓지만, `SChipFilter` 는 편집 팝오버가 닫히거나 "검색" 을 누를 때 `onSearch` 가 값 맵과 함께 호출된다. 값이 바뀌지 않았으면 호출되지 않는다.
 - 함께 걸어야 하는 조건(예: 기간 중 하나는 필수)이 있으면 `fields` 를 그룹으로 넘긴다. 규칙을 못 채운 동안 경고 툴팁이 떠 있고 `onSearch` 가 막힌다.
 
+#### 3-7-12. 이미지 — SImage
+
+사진·썸네일은 `<img>` 를 직접 쓰지 않고 `SImage` 를 쓴다. **로딩·실패 상태를 컴포넌트가 이미 처리하기 때문이다.**
+
+- **로딩 스피너와 실패 표시를 앱이 만들지 않는다.** `src` 가 없거나 로드에 실패하면 빈 이미지 아이콘이, 로딩 중에는 스피너가 자동으로 놓인다. 크기는 상자 높이에 비례하므로 썸네일이든 큰 미리보기든 따로 맞출 것이 없다.
+- **크기는 `ratio` 와 너비로 준다.** `ratio` 기본값이 `1`(정사각형)이라 너비만 주면 정사각형이 된다. `className`/`style` 로 높이를 직접 주면 그쪽이 이기고 `ratio` 는 무시된다.
+- 상자를 채우는 방식은 `fit`(기본 `cover`), 붙는 위치는 `position` 이다. 안쪽 `<img>` 에 네이티브 속성이 필요하면 `imgProps` 로 넘긴다 — 목록에서 고스트 드래그를 막는 `imgProps={{ draggable: false }}` 가 대표적이다.
+- 썸네일이 많은 목록에서는 `loadingShowDelay` 를 준다. 캐시된 이미지가 즉시 로드될 때 스피너가 한 프레임 번쩍이는 것을 막는다.
+
+```tsx
+✅ <SImage src={item.thumbnailUrl} alt={item.name} style={{ width: 64 }} />   {/* 정사각 썸네일 */}
+✅ <SImage src={banner} ratio={16 / 9} className="w-full" />                  {/* 가로형 배너 */}
+
+❌ <img src={item.thumbnailUrl} />                                            {/* 로딩·실패 상태가 없다 */}
+❌ {loading ? <SCircleProgress indeterminate /> : <SImage src={url} />}        {/* SImage 가 이미 한다 */}
+```
+
 ---
 
 ## 4. 페이지 레시피 — 표준 골격
@@ -1575,7 +1593,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 - oceanblue: 15 25 50 60 65 70 75 80 85 90 95 99
 - brilliantblue: 10 20 25 40 50 60 70 75 80 85 90 95 99 05
 - bg: screen frame brand subtle accent accentLight accentBright accentFaint deep danger dangerLight warning caution progress success successLight neutralLight neutralBright tableHeader
-- fg: primary secondary tertiary quaternary brand subtleWarm subtleCool deep success dangerLight accent accentLight danger warning inverse
+- fg: primary secondary tertiary quaternary brand subtleWarm subtleCool deep success successLight dangerLight accent accentLight danger warning inverse
 - border: default strong bold accent accentLight danger warning success
 - disabled: bg text icon border
 - link: accent
@@ -1701,6 +1719,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-fg-subtleCool
 --sys-color-fg-subtleWarm
 --sys-color-fg-success
+--sys-color-fg-successLight
 --sys-color-fg-tertiary
 --sys-color-fg-warning
 --sys-color-field-bg-default
@@ -2194,6 +2213,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | `value?` | `number` | `0` | 진행률 (0–100) |
 | `type?` | `SCircleProgressType` | `'primary'` | 색상 테마 |
 | `indeterminate?` | `boolean` | `false` | 불확정(스피너) 모드 — value 무시 |
+| `size?` | `number \| string` | `DEFAULT_SIZE` | 링의 지름. 숫자는 px 로 해석한다. 부모 크기에 비례시키려면 컨테이너 쿼리 단위(`'45cqh'`)를 쓴다 — 퍼센트는 부모가 inline-flex 라 기준 폭이 정해지지 않아 해석되지 않는다. |
 | `label?` | `string` | — | 하단 레이블 |
 | `innerValue?` | `boolean` | `false` | true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 |
 | `className?` | `string` | — |  |
@@ -2203,6 +2223,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ### Used by
 
+ - [SImage](../SImage)
  - [SLoadingContainer](../SLoadingContainer)
  - [SLoadingModal](../SLoadingModal)
  - [STable](../STable)
@@ -3063,6 +3084,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
+ - [SImage](../SImage)
  - [SKeyValueTable](../SKeyValueTable)
  - [SListItem](../SListItem)
  - [SLoadingModal](../SLoadingModal)
@@ -3084,6 +3106,46 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ---
 
+# SImage
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SImage
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src?` | `string` | — | 이미지 경로. 없으면 빈 이미지 아이콘이 나온다 |
+| `alt?` | `string` | `''` | 대체 텍스트 |
+| `ratio?` | `number` | `1` | 가로세로 비율. 소비자가 높이를 직접 주면 그쪽이 이긴다 |
+| `fit?` | `SImageFit` | `'cover'` | 이미지가 상자를 채우는 방식 (object-fit) |
+| `position?` | `string` | `'50% 50%'` | 이미지 정렬 위치 (object-position) |
+| `loading?` | `'lazy' \| 'eager'` | `'lazy'` | 브라우저 로딩 방식 |
+| `loadingShowDelay?` | `number` | `0` | 스피너를 띄우기까지 기다리는 시간(ms). 이 시간 안에 로드되면 스피너를 아예 그리지 않는다 — 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다. |
+| `noSpinner?` | `boolean` | `false` | 로딩 중에도 스피너를 그리지 않는다 |
+| `loadingSlot?` | `ReactNode` | — | 로딩 중 표시를 직접 지정한다 (기본: 스피너) |
+| `errorSlot?` | `ReactNode` | — | 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) |
+| `imgProps?` | `ImgHTMLAttributes<HTMLImageElement>` | — | 안쪽 `<img>` 로 넘길 네이티브 속성 (srcSet · sizes · crossOrigin · draggable 등) |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onLoad` | `(src: string) => void` | 로드 완료. 로드된 src 를 넘긴다 |
+| `onError` | `(event: SyntheticEvent<HTMLImageElement>) => void` | 로드 실패 |
+
+## Dependencies
+
+### Depends on
+
+- [SCircleProgress](../SCircleProgress)
+- [SIcon](../SIcon)
+
+### Graph
+
+---
+
 # SInput
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
@@ -4758,6 +4820,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 | `value?` | `boolean` | `false` | 선택(on/off) 상태 |
 | `label?` | `string` | `''` | 라벨 |
 | `disabled?` | `boolean` | `false` | 비활성 |
+| `size?` | `SToggleSize` | `'sm'` | 크기 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/llms.txt

@@ -41,7 +41,7 @@
 | **표·목록** | `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
 | **레이아웃** | `SLayout` `SGnb` `SPage`(제목 영역은 `header` prop) `SSectionHeaderCard` `SCard` `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
-| **표시·상태** | `STag` `SBadge` `SIcon` `SCallout` `SGuide` |
+| **표시·상태** | `STag` `SBadge` `SIcon` `SImage` `SCallout` `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
 | **모달** | `SModal.confirm()` `SModal.create()` + `SActionModal` `SConfirmModal` `SModalOutlet`(앱 루트 1회) |
@@ -147,7 +147,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SPage`(제목 영역은 `header` prop) |
 | **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SForm` `SSplitter` `SScrollArea` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `STabs` `SStepper` `SPagination` `SDivider` |
-| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SField` `SInput` `SNumberInput` `STextarea` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SLinearProgress` `SCircleProgress` |
+| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SField` `SInput` `SNumberInput` `STextarea` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
 
@@ -451,6 +451,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
 | 아이콘을 넣는다 | `SIcon` | |
+| 사진·썸네일을 보여준다 (로딩·실패 상태 포함) | `SImage` | §3-7-12 |
 | 문장 안에서 다른 화면으로 보낸다 | `STextLink` | §3-5-6 |
 
 #### C. 동작을 실행시킨다
@@ -1094,6 +1095,23 @@ const columns: STableColumn[] = [
 - 검색 실행 시점이 다르다 — `SKeyValueTable` 필터는 앱이 검색 버튼을 직접 놓지만, `SChipFilter` 는 편집 팝오버가 닫히거나 "검색" 을 누를 때 `onSearch` 가 값 맵과 함께 호출된다. 값이 바뀌지 않았으면 호출되지 않는다.
 - 함께 걸어야 하는 조건(예: 기간 중 하나는 필수)이 있으면 `fields` 를 그룹으로 넘긴다. 규칙을 못 채운 동안 경고 툴팁이 떠 있고 `onSearch` 가 막힌다.
 
+#### 3-7-12. 이미지 — SImage
+
+사진·썸네일은 `<img>` 를 직접 쓰지 않고 `SImage` 를 쓴다. **로딩·실패 상태를 컴포넌트가 이미 처리하기 때문이다.**
+
+- **로딩 스피너와 실패 표시를 앱이 만들지 않는다.** `src` 가 없거나 로드에 실패하면 빈 이미지 아이콘이, 로딩 중에는 스피너가 자동으로 놓인다. 크기는 상자 높이에 비례하므로 썸네일이든 큰 미리보기든 따로 맞출 것이 없다.
+- **크기는 `ratio` 와 너비로 준다.** `ratio` 기본값이 `1`(정사각형)이라 너비만 주면 정사각형이 된다. `className`/`style` 로 높이를 직접 주면 그쪽이 이기고 `ratio` 는 무시된다.
+- 상자를 채우는 방식은 `fit`(기본 `cover`), 붙는 위치는 `position` 이다. 안쪽 `<img>` 에 네이티브 속성이 필요하면 `imgProps` 로 넘긴다 — 목록에서 고스트 드래그를 막는 `imgProps={{ draggable: false }}` 가 대표적이다.
+- 썸네일이 많은 목록에서는 `loadingShowDelay` 를 준다. 캐시된 이미지가 즉시 로드될 때 스피너가 한 프레임 번쩍이는 것을 막는다.
+
+```tsx
+✅ <SImage src={item.thumbnailUrl} alt={item.name} style={{ width: 64 }} />   {/* 정사각 썸네일 */}
+✅ <SImage src={banner} ratio={16 / 9} className="w-full" />                  {/* 가로형 배너 */}
+
+❌ <img src={item.thumbnailUrl} />                                            {/* 로딩·실패 상태가 없다 */}
+❌ {loading ? <SCircleProgress indeterminate /> : <SImage src={url} />}        {/* SImage 가 이미 한다 */}
+```
+
 ---
 
 ## 4. 페이지 레시피 — 표준 골격
@@ -1576,7 +1594,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 - oceanblue: 15 25 50 60 65 70 75 80 85 90 95 99
 - brilliantblue: 10 20 25 40 50 60 70 75 80 85 90 95 99 05
 - bg: screen frame brand subtle accent accentLight accentBright accentFaint deep danger dangerLight warning caution progress success successLight neutralLight neutralBright tableHeader
-- fg: primary secondary tertiary quaternary brand subtleWarm subtleCool deep success dangerLight accent accentLight danger warning inverse
+- fg: primary secondary tertiary quaternary brand subtleWarm subtleCool deep success successLight dangerLight accent accentLight danger warning inverse
 - border: default strong bold accent accentLight danger warning success
 - disabled: bg text icon border
 - link: accent
@@ -1702,6 +1720,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-fg-subtleCool
 --sys-color-fg-subtleWarm
 --sys-color-fg-success
+--sys-color-fg-successLight
 --sys-color-fg-tertiary
 --sys-color-fg-warning
 --sys-color-field-bg-default
@@ -1723,7 +1742,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-link-accent
 --sys-color-navigation-gnb-bg-dark
 
-## 3. 컴포넌트 인덱스 (64종)
+## 3. 컴포넌트 인덱스 (65종)
 
 **Props 는 이 문서에 없다.** 쓸 컴포넌트를 정했으면 그 컴포넌트의 README 를 읽는다.
 
@@ -1732,4 +1751,4 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 예) SButton 을 쓴다면 `dist/components/SButton/README.md`.
 prop 을 추측해서 쓰지 말고 반드시 README 로 확인한다 (분류별 용도는 §1 의 "전체 컴포넌트 인덱스" 참조).
 
-SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipFilter · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSectionHeaderCard · SSelect · SSplitter · SStepper · SSwitch · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree
+SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipFilter · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SImage · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSectionHeaderCard · SSelect · SSplitter · SStepper · SSwitch · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree

package/dist/styles.css

@@ -194,6 +194,7 @@
     --color-fg-subtleCool: #025497;
     --color-fg-deep: #004290;
     --color-fg-success: #00973C;
+    --color-fg-successLight: #12B553;
     --color-fg-dangerLight: #FB4444;
     --color-fg-accent: #0075FF;
     --color-fg-accentLight: #64ABFF;
@@ -926,9 +927,6 @@
   .h-\[56px\] {
     height: 56px;
   }
-  .h-\[80px\] {
-    height: 80px;
-  }
   .h-\[80vh\] {
     height: 80vh;
   }
@@ -1133,9 +1131,6 @@
   .w-\[61px\] {
     width: 61px;
   }
-  .w-\[80px\] {
-    width: 80px;
-  }
   .w-\[200px\] {
     width: 200px;
   }
@@ -2118,6 +2113,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .bg-\(--cmp-image-bg\) {
+    background-color: var(--cmp-image-bg);
+  }
   .bg-\(--cmp-listBox-bg\) {
     background-color: var(--cmp-listBox-bg);
   }
@@ -2406,6 +2404,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
   .p-16 {
     padding: calc(var(--spacing) * 16);
   }
@@ -3256,6 +3257,9 @@
   .opacity-40 {
     opacity: 40%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -4555,6 +4559,7 @@
   --sys-color-fg-subtleCool: #025497;
   --sys-color-fg-deep: #004290;
   --sys-color-fg-success: #00973C;
+  --sys-color-fg-successLight: #12B553;
   --sys-color-fg-dangerLight: #FB4444;
   --sys-color-fg-accent: #0075FF;
   --sys-color-fg-accentLight: #64ABFF;
@@ -4708,8 +4713,10 @@
   --cmp-switch-bg-disabled-on: #BBDAFF;
   --cmp-switch-bg-disabled-off: #E1E1E1;
   --cmp-switch-gap: 6px;
-  --cmp-toggle-height: 28px;
-  --cmp-toggle-paddingX: 12px;
+  --cmp-toggle-xs-height: 24px;
+  --cmp-toggle-xs-paddingX: 8px;
+  --cmp-toggle-sm-height: 28px;
+  --cmp-toggle-sm-paddingX: 12px;
   --cmp-toggle-radius: 9999px;
   --cmp-toggle-border-width: 1px;
   --cmp-toggle-border-default: #CCCCCC;
@@ -5239,9 +5246,10 @@
   --cmp-progress-circular-gap: 8px;
   --cmp-progress-color-track: #EEEEEE;
   --cmp-progress-color-label: #555555;
-  --cmp-progress-active-color: #2D8DFF;
-  --cmp-progress-success-color: #12B553;
-  --cmp-progress-error-color: #FB4444;
+  --cmp-progress-color-active: #2D8DFF;
+  --cmp-progress-color-success: #12B553;
+  --cmp-progress-color-error: #FB4444;
+  --cmp-progress-color-neutral: #D8D8D8;
   --cmp-progress-bar-text: #FFFFFF;
   --cmp-progress-inverse-color: #FFFFFF;
   --cmp-progress-inverse-opacity: 40%;
@@ -5550,6 +5558,8 @@
   --cmp-splitter-border-width: 4px;
   --cmp-splitter-border-padding: 4px;
   --cmp-splitter-border-color: #64ABFF;
+  --cmp-image-bg: #F9F9F9;
+  --cmp-image-icon: #D8D8D8;
 }
 @layer base {
   body {

package/dist/theme.css

@@ -154,6 +154,7 @@
   --color-fg-subtleCool: #025497;
   --color-fg-deep: #004290;
   --color-fg-success: #00973C;
+  --color-fg-successLight: #12B553;
   --color-fg-dangerLight: #FB4444;
   --color-fg-accent: #0075FF;
   --color-fg-accentLight: #64ABFF;
@@ -453,6 +454,7 @@
   --sys-color-fg-subtleCool: #025497;
   --sys-color-fg-deep: #004290;
   --sys-color-fg-success: #00973C;
+  --sys-color-fg-successLight: #12B553;
   --sys-color-fg-dangerLight: #FB4444;
   --sys-color-fg-accent: #0075FF;
   --sys-color-fg-accentLight: #64ABFF;
@@ -608,8 +610,10 @@
   --cmp-switch-bg-disabled-on: #BBDAFF;
   --cmp-switch-bg-disabled-off: #E1E1E1;
   --cmp-switch-gap: 6px;
-  --cmp-toggle-height: 28px;
-  --cmp-toggle-paddingX: 12px;
+  --cmp-toggle-xs-height: 24px;
+  --cmp-toggle-xs-paddingX: 8px;
+  --cmp-toggle-sm-height: 28px;
+  --cmp-toggle-sm-paddingX: 12px;
   --cmp-toggle-radius: 9999px;
   --cmp-toggle-border-width: 1px;
   --cmp-toggle-border-default: #CCCCCC;
@@ -1139,9 +1143,10 @@
   --cmp-progress-circular-gap: 8px;
   --cmp-progress-color-track: #EEEEEE;
   --cmp-progress-color-label: #555555;
-  --cmp-progress-active-color: #2D8DFF;
-  --cmp-progress-success-color: #12B553;
-  --cmp-progress-error-color: #FB4444;
+  --cmp-progress-color-active: #2D8DFF;
+  --cmp-progress-color-success: #12B553;
+  --cmp-progress-color-error: #FB4444;
+  --cmp-progress-color-neutral: #D8D8D8;
   --cmp-progress-bar-text: #FFFFFF;
   --cmp-progress-inverse-color: #FFFFFF;
   --cmp-progress-inverse-opacity: 40%;
@@ -1450,6 +1455,8 @@
   --cmp-splitter-border-width: 4px;
   --cmp-splitter-border-padding: 4px;
   --cmp-splitter-border-color: #64ABFF;
+  --cmp-image-bg: #F9F9F9;
+  --cmp-image-icon: #D8D8D8;
 }
 
 /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.

package/eslint/scale.gen.mjs

@@ -13,4 +13,4 @@ export const RADIUS = ["2","4","6","8","full","control-sm","control-md","feedbac
 export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
-export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];

package/package.json

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