sellmate-design-system-react 9.0.0-beta.93 → 9.0.0-beta.95

package/AGENTS.md

@@ -1768,6 +1768,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 - **쓰는 자리는 설정 화면·마법사(스텝)의 소수 결정이다.** 고르고 나면 뒤 화면이 통째로 바뀌거나 되돌리기 어려운 선택 — 평가 대상자 범위(전체/특정 구성원), 상담 자동 배정 방식 같은 것. 목록 필터·표 안 조건처럼 같은 선택지가 화면마다 반복 노출되는 자리에는 `SRadioGroup` 을 쓴다.
 - `SRadioCard` 단독은 `SRadioCardGroup` 이 만들 수 없는 배치에만 쓴다 — 나열은 그룹이 맡는다 (§2-2).
 - 카드 안에 상태 배지를 넣으려면 `tag` 슬롯에 `STag` 를 준다. 라벨 문자열에 "(추천)" 처럼 섞어 쓰지 않는다.
+- **한 선택지에 딸린 추가 입력(지정일·요청 사항 등)은 그 카드의 슬롯에 넣는다** — `SRadioCard` 는 `children`, `SRadioCardGroup` 은 옵션의 `content`. 카드 아래에 따로 입력을 늘어놓지 않는다. 슬롯은 서브타이틀 아래에 들여써서 놓이고 라디오의 클릭 영역 밖이라, 입력을 눌러도 카드 선택이 바뀌지 않는다. 들여쓰기·간격은 카드가 넣으므로 직접 주지 않는다. 고른 카드에만 보여주고, 카드를 `disabled` 로 두면 슬롯의 컨트롤도 함께 `disabled` 로 둔다(카드가 대신 잠그지 않는다).
 - **카드처럼 생겼다고 `SCard`/`SSectionHeaderCard` 로 감싸지 않는다.** `SRadioCard` 자체가 완결된 요소이고, 나열 간격은 `SRadioCardGroup` 의 `direction` 이 맞춘다 (§2-2).
 
 ##### 후보에 상하 관계가 있으면 — depth vs tree

package/dist/components/SButton/button.config.d.ts

@@ -26,7 +26,8 @@ export declare const BUTTON_SIZE_CONFIG: Record<SButtonSize, {
     height: string;
     paddingX: string;
     gap: string;
-    iconSize: number;
+    iconSize: string;
+    iconOnlyWidth: string;
     fontSize: number;
     fontWeight: number;
     radius: string;

package/dist/components/SChatAttachedFile/chatAttachedFile.config.d.ts

@@ -14,8 +14,8 @@ export declare const CHAT_ATTACHED_FILE_CONFIG: {
     readonly contentGap: "gap-(--cmp-chatAttachedFile-content-gap)";
     /** 클립 아이콘이 앉는 칩 — 내부 패딩·면·라운드 (높이는 아이콘+패딩이 정한다) */
     readonly tile: "p-(--cmp-chatAttachedFile-icon-wrapper-padding) rounded-(--cmp-chatAttachedFile-icon-wrapper-radius) bg-(--cmp-chatAttachedFile-icon-wrapper-bg)";
-    /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
-    readonly iconSize: 16;
+    /** 칩 안 클립 아이콘 크기 */
+    readonly iconSize: "var(--cmp-chatAttachedFile-icon-size)";
     /** 파일명 타이포 프리셋 */
     readonly nameTypo: "typo-body-sm-default";
     /** 파일명 텍스트색 */

package/dist/components/SChatFile/chatFile.config.d.ts

@@ -21,8 +21,8 @@ export declare const CHAT_FILE_CONFIG: {
      * 디자인팀에 `icon.wrapper.bg.hover` 를 요청해 나오는 대로 갈아끼운다.
      */
     readonly tile: "p-(--cmp-chatFile-icon-wrapper-padding) rounded-(--cmp-chatFile-icon-wrapper-radius) bg-(--cmp-chatFile-icon-wrapper-bg) group-hover/chat-file:bg-(--sys-color-bg-frame)";
-    /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
-    readonly iconSize: 20;
+    /** 칩 안 클립 아이콘 크기 */
+    readonly iconSize: "var(--cmp-chatFile-icon-size)";
     /** 파일명 타이포 프리셋 */
     readonly nameTypo: "typo-body-md-bold";
     /** 파일명·부가정보 텍스트색 */

package/dist/components/SChipFilter/README.md

@@ -400,6 +400,7 @@ export interface SChipFilterDatePreset {
 
 - [SDatePicker](../SDatePicker)
 - [SDateRangePicker](../SDateRangePicker)
+- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SRadio](../SRadio)
 - [SRadioButton](../SRadioButton)
@@ -414,6 +415,7 @@ export interface SChipFilterDatePreset {
 graph TD;
   SChipFilter --> SDatePicker
   SChipFilter --> SDateRangePicker
+  SChipFilter --> SGhostButton
   SChipFilter --> SIcon
   SChipFilter --> SRadio
   SChipFilter --> SRadioButton

package/dist/components/SGhostButton/README.md

@@ -54,6 +54,7 @@ export type SGhostButtonIntent =
  - [SChatAttachedFile](../SChatAttachedFile)
  - [SChatInput](../SChatInput)
  - [SChip](../SChip)
+ - [SChipFilter](../SChipFilter)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
@@ -92,6 +93,7 @@ graph TD;
   SChatAttachedFile --> SGhostButton
   SChatInput --> SGhostButton
   SChip --> SGhostButton
+  SChipFilter --> SGhostButton
   SDatePicker --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton

package/dist/components/SGnb/gnb.config.d.ts

@@ -43,10 +43,14 @@ export declare const GNB_MENU: Record<SGnbType, {
     depth2PaddingLeft: string;
     depth3PaddingLeft: string;
     depth1Icon: string;
+    depth1Typo: string;
+    itemTypo: string;
+    itemTypoSelected: string;
     depth1FontSize: number;
     depth1LineHeight: number;
     depth1FontWeight: number;
     itemFontSize: number;
+    /** 하위 메뉴 하이픈 자리표시자 높이(px) = item 타이포 line-height */
     itemLineHeight: number;
     itemFontWeight: number;
     itemFontWeightSelected: number;
@@ -91,6 +95,8 @@ export declare const GNB_RAIL: {
     itemPaddingBottom: string;
     itemRadius: string;
     itemIcon: string;
+    itemTypo: string;
+    itemTypoSelected: string;
     itemFontSize: number;
     itemLineHeight: number;
     itemFontWeight: number;

package/dist/components/SIcon/README.md

@@ -9,7 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `name` | `SIconName` | — | 아이콘명 |
-| `size?` | `number \| string` | `24` | 아이콘 크기(px 또는 CSS 길이) |
+| `size?` | `number \| string` | `24` | 아이콘 크기(px 또는 CSS 길이). 토큰 크기 `var(--cmp-…)` 도 그대로 넘긴다 |
 | `color?` | `SColor` | — | 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 미지정 시 currentColor 상속 |
 | `rotate?` | `0 \| 90 \| 180 \| 270` | — | 회전 각도 |
 | `label?` | `string` | — | 접근성 라벨. 없으면 aria-hidden 처리 |
@@ -64,6 +64,7 @@
  - [STimeRangePicker](../STimeRangePicker)
  - [SToast](../SToast)
  - [STooltip](../STooltip)
+ - [STree](../STree)
 
 ### Graph
 
@@ -113,5 +114,6 @@ graph TD;
   STimeRangePicker --> SIcon
   SToast --> SIcon
   STooltip --> SIcon
+  STree --> SIcon
   style SIcon fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SIcon/SIcon.d.ts

@@ -4,7 +4,7 @@ import { type SIconName } from './icons.gen';
 export interface SIconProps {
     /** 아이콘명 */
     name: SIconName;
-    /** 아이콘 크기(px 또는 CSS 길이) */
+    /** 아이콘 크기(px 또는 CSS 길이). 토큰 크기 `var(--cmp-…)` 도 그대로 넘긴다 */
     size?: number | string;
     /** 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 미지정 시 currentColor 상속 */
     color?: SColor;

package/dist/components/SLauncherListBox/launcherListBox.config.d.ts

@@ -94,13 +94,8 @@ export declare const LAUNCHER_LIST_BOX_LAYOUT: {
     readonly radius: string;
     /** 패널 상하좌우 여백 */
     readonly padding: string;
-    /**
-     * 패널 그림자.
-     * 토큰(`component.gnb.launcher.listBox.shadow` = `{shadow.floating}`)은 값이 배열이라
-     * `--cmp-*` 로 나오지 않는다 — 생성기가 스칼라만 내보내기 때문이다. 그래서 그 별칭이
-     * 가리키는 스케일 토큰을 직접 쓴다(같은 값이다).
-     */
-    readonly shadow: "var(--shadow-floating)";
+    /** 패널 그림자 */
+    readonly shadow: string;
     /** 줄 왼쪽 여백 */
     readonly itemPaddingLeft: string;
     /** 줄 오른쪽 여백 — 왼쪽보다 좁다(오른쪽 끝은 hover 아이콘 자리다) */

package/dist/components/SLoadingModal/README.md

@@ -15,8 +15,8 @@
 | `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
 | `showButton?` | `boolean` | `false` | 하단 버튼 표시 |
 | `buttonLabel?` | `string` | — | 버튼 레이블 (없으면 state 기본값) |
-| `width?` | `number \| string` | `520` |  |
-| `height?` | `number \| string` | `320` |  |
+| `width?` | `number \| string` | `'var(--cmp-modal-loading-width)'` |  |
+| `height?` | `number \| string` | `'var(--cmp-modal-loading-height)'` |  |
 
 #### Events
 

package/dist/components/SRadioCard/README.md

@@ -32,6 +32,7 @@
 | `value?` | `SRadioValue \| null` | — | 그룹의 현재 선택 값 |
 | `label` | `string` | — | 라벨 (첫 줄) |
 | `subtitle?` | `string` | — | 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 |
+| `children?` | `ReactNode` | — | 서브타이틀 아래 슬롯. 서브타이틀처럼 라벨 왼쪽 끝에 맞춰 들여쓴다. 카드 테두리 안이지만 라디오의 클릭 영역 밖이라, 입력·버튼 같은 컨트롤을 넣어도 누를 때 카드가 선택되지 않는다 |
 | `tag?` | `Omit<STagProps, 'size'>` | — | 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `name?` | `string` | — | native radio name (form-agnostic 그룹핑) |
@@ -56,6 +57,8 @@ export interface SRadioCardOption {
   label: string;
   /** 서브타이틀 (둘째 줄) */
   subtitle?: string;
+  /** 서브타이틀 아래 슬롯 (`SRadioCard` 의 `children`). 라디오의 클릭 영역 밖이다 */
+  content?: ReactNode;
   /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
   tag?: Omit<STagProps, 'size'>;
   /** 이 옵션만 비활성 */

package/dist/components/SRadioCard/SRadioCard.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { type SRadioValue } from '../SRadio';
 import { type STagProps } from '../STag';
 export interface SRadioCardProps {
@@ -10,6 +10,11 @@ export interface SRadioCardProps {
     label: string;
     /** 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 */
     subtitle?: string;
+    /**
+     * 서브타이틀 아래 슬롯. 서브타이틀처럼 라벨 왼쪽 끝에 맞춰 들여쓴다.
+     * 카드 테두리 안이지만 라디오의 클릭 영역 밖이라, 입력·버튼 같은 컨트롤을 넣어도 누를 때 카드가 선택되지 않는다
+     */
+    children?: ReactNode;
     /** 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 */
     tag?: Omit<STagProps, 'size'>;
     /** 비활성 */
@@ -26,4 +31,4 @@ export interface SRadioCardProps {
  * 카드 전체가 클릭 영역이며 `value === val` 이면 선택 상태다.
  * 선택지마다 설명이 붙어 한 줄짜리 `SRadio` 로는 담기 어려울 때 쓴다.
  */
-export declare function SRadioCard({ val, value, label, subtitle, tag, disabled, name, onValueChange, className, style, }: SRadioCardProps): import("react").JSX.Element;
+export declare function SRadioCard({ val, value, label, subtitle, children, tag, disabled, name, onValueChange, className, style, }: SRadioCardProps): import("react").JSX.Element;

package/dist/components/SRadioCard/SRadioCardGroup.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { type SRadioValue } from '../SRadio';
 import { type STagProps } from '../STag';
 export interface SRadioCardOption {
@@ -8,6 +8,8 @@ export interface SRadioCardOption {
     label: string;
     /** 서브타이틀 (둘째 줄) */
     subtitle?: string;
+    /** 서브타이틀 아래 슬롯 (`SRadioCard` 의 `children`). 라디오의 클릭 영역 밖이다 */
+    content?: ReactNode;
     /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
     tag?: Omit<STagProps, 'size'>;
     /** 이 옵션만 비활성 */

package/dist/components/SSelect/README.md

@@ -61,7 +61,7 @@
 
 | Method | Type | Description |
 |--------|------|-------------|
-| `focus` | `() => void` | 트리거 버튼에 포커스 (sdFocus) |
+| `focus` | `() => void` | 트리거(combobox)에 포커스 (sdFocus) |
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 
 ## Types

package/dist/components/SSelect/SSelect.d.ts

@@ -8,7 +8,7 @@ import { type SSelectOption, type SSelectType, type SSelectValueDisplay } from '
 import { type SFieldWidth } from '../../lib/field-width';
 export type { SSelectOption, SSelectType, SSelectValueDisplay } from './select.config';
 export interface SSelectHandle {
-    /** 트리거 버튼에 포커스 (sdFocus) */
+    /** 트리거(combobox)에 포커스 (sdFocus) */
     focus: () => void;
     /** 드롭다운 열기 (sdOpen) */
     open: () => void;

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/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/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
 ```