sellmate-design-system-react 9.0.0-beta.73 → 9.0.0-beta.75

package/AGENTS.md

@@ -1580,7 +1580,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 ```
 
 - **`launcher` 를 주지 않으면 런처 버튼 자체가 렌더되지 않는다.** 옮겨 갈 서비스가 없는 앱은 이 슬롯을 비워 둔다 — 눌러도 아무것도 없는 버튼을 상단바에 남기지 않는다.
-- **서비스는 키(`service`)로 고른다 — 보이는 것은 아무것도 넘기지 않는다.** 쓸 수 있는 키는 `SLogo` 가 로고를 가진 서비스 전부(`'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos'` — `SLauncherService`)이고, 서비스 로고(워드마크와 `WMS`·`Account`·`CRM` … 표기가 한 덩어리인 브랜드 로고)·아래 줄 한글 이름·상태 태그(`NEW`·`출시예정`)·출시 여부를 카탈로그(`LAUNCHER_SERVICE_CATALOG`)가 그 키로 정한다. 앱이 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다. **서비스가 늘거나 이름·상태가 바뀌면 디자인 시스템 릴리스로 따라온다** — 앱은 고칠 것이 없다.
+- **서비스는 키(`service`)로 고른다 — 보이는 것은 아무것도 넘기지 않는다.** 쓸 수 있는 키는 `SLogo` 가 로고를 가진 서비스 전부(`'sellmate' | 'wms' | 'chat' | 'chatbot' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos'` — `SLauncherService`)이고, 서비스 로고(워드마크와 `WMS`·`Account`·`CRM` … 표기가 한 덩어리인 브랜드 로고)·아래 줄 한글 이름·상태 태그(`NEW`·`출시예정`)·출시 여부를 카탈로그(`LAUNCHER_SERVICE_CATALOG`)가 그 키로 정한다. 앱이 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다. **서비스가 늘거나 이름·상태가 바뀌면 디자인 시스템 릴리스로 따라온다** — 앱은 고칠 것이 없다.
 
   ```tsx
   ✅ { service: 'wms', href: env.WMS_URL }
@@ -2046,7 +2046,7 @@ const [selectedId, setSelectedId] = useState<string>();
 
 셀메이트·서비스 로고는 `<svg>` 를 직접 붙이지 않고 `SLogo` 를 쓴다. **`SIcon` 과 같은 손맛(`name`·`size`·`color`)이지만 두 가지가 다르다.**
 
-- **`name` 에 서비스를 넣으면 그 서비스 로고가 나온다**(`sellmate` · `wms` · `chat` · `plm` · `account` · `people` · `crm` · `work` · `pos` · `console` — `SLogoName`). [셀메이트 워드마크 + 서비스 표기]가 한 덩어리다. **워드마크 옆에 표기를 앱이 따로 잇지 않는다** — 표기의 서체·자간·색이 원본과 어긋난다.
+- **`name` 에 서비스를 넣으면 그 서비스 로고가 나온다**(`sellmate` · `wms` · `chat` · `chatbot` · `plm` · `account` · `people` · `crm` · `work` · `pos` · `console` — `SLogoName`). [셀메이트 워드마크 + 서비스 표기]가 한 덩어리다. **워드마크 옆에 표기를 앱이 따로 잇지 않는다** — 표기의 서체·자간·색이 원본과 어긋난다.
 - **배경에 맞춰 `mode` 를 준다.** 밝은 면은 `light`(기본), 어두운 면(dark GNB 등)은 `dark`. 워드마크 색과 서비스 표기 색을 모드가 정하므로 색을 직접 주지 않는다.
 - **표기를 워드마크 아래에 두려면 `direction="vertical"` 을 준다**(로그인 카드처럼 폭이 좁고 로고가 가운데 서는 자리). 워드마크 아래에 표기를 앱이 따로 쌓지 않는다. 모든 서비스 로고가 세로를 가진다(`sellmate` 는 표기가 없어 어느 쪽이든 같다). 세로의 표기 색도 원본이 정하므로 색을 직접 맞추지 않는다.
 - **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다. `vertical` 에서는 두 줄 전체의 높이라, 같은 `size` 면 워드마크가 가로보다 작다.

package/dist/components/SBarcodeInput/README.md

@@ -26,6 +26,7 @@
 | `inputStyle?` | `CSSProperties` | — |  |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SBarcodeInput/SBarcodeInput.d.ts

@@ -39,6 +39,13 @@ export interface SBarcodeInputProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;

package/dist/components/SChipInput/README.md

@@ -28,6 +28,7 @@
 | `dropdownMinWidth?` | `number \| string` | `200` | 드롭다운 최소 너비 (숫자=px) |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `hint?` | `string` | — |  |
 | `errorMessage?` | `string` | — |  |

package/dist/components/SChipInput/SChipInput.d.ts

@@ -55,6 +55,13 @@ export interface SChipInputProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     hint?: string;
     errorMessage?: string;

package/dist/components/SDatePicker/README.md

@@ -41,6 +41,7 @@
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SDatePicker/SDatePicker.d.ts

@@ -58,6 +58,13 @@ export interface SDatePickerProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -102,4 +109,4 @@ export interface SDatePickerMonthListboxProps {
  * 자체 트리거/팝오버 없이 연도+월 리스트만 필요한 커스텀 조합에 재사용한다. */
 export declare function SDatePickerMonthListbox({ value, anchorYear, selectable, onValueChange, onMonthSelect, className, style, }: SDatePickerMonthListboxProps): import("react").JSX.Element;
 /** SDatePicker — sd-date-picker 포팅. SField + SPopover(SCalendar). */
-export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, clearable, width, maxWidth, name, rules, status, label, labelPosition, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;
+export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, clearable, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;

package/dist/components/SDateRangePicker/README.md

@@ -23,6 +23,7 @@
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SDateRangePicker/SDateRangePicker.d.ts

@@ -61,6 +61,13 @@ export interface SDateRangePickerProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -91,4 +98,4 @@ export interface SRangeCalendarProps {
  *  캘린더 그리드만 필요한 커스텀 조합(예: 다른 트리거에 팝오버로 얹는 경우)에 재사용한다. */
 export declare function RangeCalendar({ value, selectable, maxRange, showTimePicker, onSelect, onPendingStartChange, onViewChange, }: SRangeCalendarProps): import("react").JSX.Element;
 /** SDateRangePicker — sd-date-range-picker 포팅. SField + SPopover(범위 캘린더). */
-export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, showTimePicker, disabled, clearable, width, maxWidth, name, rules, status, label, labelPosition, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;
+export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, showTimePicker, disabled, clearable, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;

package/dist/components/SEditor/README.md

@@ -70,6 +70,7 @@
 | `editorStyle?` | `CSSProperties` | — | 편집 영역 style |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SEditor/SEditor.d.ts

@@ -76,6 +76,13 @@ export interface SEditorProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     /** 레이블 영역 아이콘 */
     icon?: SIconName;

package/dist/components/SField/README.md

@@ -10,6 +10,7 @@
 |------|------|---------|-------------|
 | `name?` | `string` | — | 폼 연동용 name 속성 |
 | `label?` | `string` | `''` | 레이블 텍스트 |
+| `subLabel?` | `string` | `''` | 보조 레이블. 레이블 오른쪽 같은 줄에 붙는다 (예: `(선택)`, `최대 50자`). 레이블보다 한 단계 약하게 보이도록 기본 타이포(body/sm/medium)·`fg.secondary` 색을 쓴다. 레이블 폭이 모자라면 레이블이 먼저 말줄임되고 보조 레이블은 그대로 남는다. `label` 이 없으면(`addonLabel` 만 있을 때 포함) 그려지지 않는다. |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘명 (크기는 size 토큰 16px 고정) |
 | `iconColor?` | `SColor` | — | 레이블 영역 아이콘 색상. 미지정 시 currentColor 상속 |
 | `labelTooltip?` | `string` | `''` | 레이블 툴팁 텍스트 |

package/dist/components/SField/SField.d.ts

@@ -18,6 +18,13 @@ export interface SFieldProps {
     name?: string;
     /** 레이블 텍스트 */
     label?: string;
+    /**
+     * 보조 레이블. 레이블 오른쪽 같은 줄에 붙는다 (예: `(선택)`, `최대 50자`).
+     * 레이블보다 한 단계 약하게 보이도록 기본 타이포(body/sm/medium)·`fg.secondary` 색을 쓴다.
+     * 레이블 폭이 모자라면 레이블이 먼저 말줄임되고 보조 레이블은 그대로 남는다.
+     * `label` 이 없으면(`addonLabel` 만 있을 때 포함) 그려지지 않는다.
+     */
+    subLabel?: string;
     /** 레이블 영역 아이콘명 (크기는 size 토큰 16px 고정) */
     icon?: SIconName;
     /** 레이블 영역 아이콘 색상. 미지정 시 currentColor 상속 */

package/dist/components/SFilePicker/README.md

@@ -26,6 +26,7 @@
 | `size?` | `SFieldSize` | `'sm'` |  |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SFilePicker/SFilePicker.d.ts

@@ -43,6 +43,13 @@ export interface SFilePickerProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -63,4 +70,4 @@ export interface SFilePickerProps {
     style?: CSSProperties;
 }
 /** SFilePicker — sd-file-picker 포팅. 단일/다중 파일 + 크기·개수 검증 + 칩 목록. */
-export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, showMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelPosition, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;
+export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, showMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;

package/dist/components/SInput/README.md

@@ -24,6 +24,7 @@
 | `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다) |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |

package/dist/components/SInput/SInput.d.ts

@@ -41,6 +41,10 @@ export interface SInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     label?: string;
     /** 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다) */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     /** 레이블 툴팁 텍스트 */
     labelTooltip?: string;

package/dist/components/SLauncherListBox/README.md

@@ -53,7 +53,7 @@ export interface SLauncherListBoxItem {
  * 있는지 보이지 않는다). 대신 아래 `LOGO_COVERAGE` 가 로고 목록과 어긋나지 않는지 타입으로 지킨다.
  */
 export type SLauncherService =
-  'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
+  'sellmate' | 'wms' | 'chat' | 'chatbot' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
 ```
 
 ## Dependencies

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

@@ -38,12 +38,12 @@ export declare const LAUNCHER_LIST_BOX_TRAILING_ICON: SIconName;
  * 문서에서 바로 읽히도록 키를 풀어 쓴다(`Exclude<SLogoName, …>` 로 두면 README·Storybook 에 무엇이
  * 있는지 보이지 않는다). 대신 아래 `LOGO_COVERAGE` 가 로고 목록과 어긋나지 않는지 타입으로 지킨다.
  */
-export type SLauncherService = 'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
+export type SLauncherService = 'sellmate' | 'wms' | 'chat' | 'chatbot' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
 /**
  * 런처에 설 수 있는 서비스 — **목록의 순서이기도 하다**(로고 순서와 같다).
  * 앱이 넘긴 순서가 아니라 이 순서로 선다: 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다.
  */
-export declare const LAUNCHER_SERVICES: readonly ["sellmate", "wms", "chat", "plm", "account", "people", "crm", "work", "pos"];
+export declare const LAUNCHER_SERVICES: readonly ["sellmate", "wms", "chat", "chatbot", "plm", "account", "people", "crm", "work", "pos"];
 /**
  * 서비스가 아닌 로고 — 런처의 서비스 줄로 세우지 않는다.
  * `console` 은 통합 콘솔이라 목록 아래 "셀메이트 콘솔로 이동" 링크가 늘 맡는다. 줄로도 세우면 같은 곳이 두 번 선다.

package/dist/components/SLogo/README.md

@@ -55,6 +55,7 @@ export const LOGO_NAMES = [
   'sellmate',
   'wms',
   'chat',
+  'chatbot',
   'plm',
   'account',
   'people',

package/dist/components/SLogo/logo.config.d.ts

@@ -8,7 +8,7 @@
  * 담고 있는 로고 — 셀메이트 본체와 서비스들, 그리고 통합 콘솔. 로고 한 벌은 [셀메이트 워드마크 + 표기]다.
  * 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다.
  */
-export declare const LOGO_NAMES: readonly ["sellmate", "wms", "chat", "plm", "account", "people", "crm", "work", "pos", "console"];
+export declare const LOGO_NAMES: readonly ["sellmate", "wms", "chat", "chatbot", "plm", "account", "people", "crm", "work", "pos", "console"];
 export type SLogoName = (typeof LOGO_NAMES)[number];
 /**
  * 로고가 서는 배경. 밝은 면에는 `light`(남색 워드마크), 어두운 면에는 `dark`(흰 워드마크).

package/dist/components/SNumberInput/README.md

@@ -32,6 +32,7 @@
 | `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SNumberInput/SNumberInput.d.ts

@@ -79,6 +79,13 @@ export interface SNumberInputProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;

package/dist/components/SRadioButton/README.md

@@ -13,6 +13,7 @@
 | `size?` | `SRadioButtonSize` | `'sm'` | 크기 |
 | `disabled?` | `boolean` | `false` | 전체 비활성 |
 | `name?` | `string` | — | input name 속성 |
+| `showTooltip?` | `boolean` | `false` | 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다. 툴팁 타입은 `accent` 고정이다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -31,6 +32,8 @@ export interface SRadioButtonOption {
   value: string | number;
   label: string;
   disabled?: boolean;
+  /** 호버 시 툴팁 문구. `showTooltip` 이 켜져 있을 때만 노출된다 */
+  tooltip?: string;
 }
 ```
 
@@ -46,10 +49,15 @@ export type SRadioButtonSize = 'xs' | 'sm' | 'md';
 
  - [SChipFilter](../SChipFilter)
 
+### Depends on
+
+- [STooltip](../STooltip)
+
 ### Graph
 
 ```mermaid
 graph TD;
+  SRadioButton --> STooltip
   SChipFilter --> SRadioButton
   style SRadioButton fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SRadioButton/SRadioButton.d.ts

@@ -4,6 +4,8 @@ export interface SRadioButtonOption {
     value: string | number;
     label: string;
     disabled?: boolean;
+    /** 호버 시 툴팁 문구. `showTooltip` 이 켜져 있을 때만 노출된다 */
+    tooltip?: string;
 }
 export interface SRadioButtonProps {
     /** 옵션 목록 */
@@ -16,6 +18,11 @@ export interface SRadioButtonProps {
     disabled?: boolean;
     /** input name 속성 */
     name?: string;
+    /**
+     * 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다.
+     * 툴팁 타입은 `accent` 고정이다.
+     */
+    showTooltip?: boolean;
     /** 변경 (sdUpdate) */
     onValueChange?: (value: string | number) => void;
     className?: string;
@@ -25,4 +32,4 @@ export interface SRadioButtonProps {
  * SRadioButton — sd-radio-button 포팅. 세그먼트형 라디오(버튼 그룹).
  * default(흰 배경/회색, hover 파란 채움) · select(흰 배경/파란 테두리·글자) · disabled.
  */
-export declare function SRadioButton({ options, value, size, disabled, name, onValueChange, className, style, }: SRadioButtonProps): import("react").JSX.Element;
+export declare function SRadioButton({ options, value, size, disabled, name, showTooltip, onValueChange, className, style, }: SRadioButtonProps): import("react").JSX.Element;

package/dist/components/SSelect/README.md

@@ -33,6 +33,7 @@
 | `searchDebounce?` | `number` | `DEFAULT_SEARCH_DEBOUNCE` | `serverSearch` 에서 검색어를 서버로 넘기기 전 기다리는 시간(ms) |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
 | `iconColor?` | `SColor` | — |  |

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

@@ -115,6 +115,13 @@ export interface SSelectProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     /** 레이블 영역 아이콘 */
     icon?: SIconName;

package/dist/components/STextarea/README.md

@@ -21,6 +21,7 @@
 | `textareaStyle?` | `CSSProperties` | — | 내부 textarea 요소 style |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/STextarea/STextarea.d.ts

@@ -57,6 +57,13 @@ export interface STextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     /** 레이블 영역 아이콘 */
     icon?: SIconName;

package/dist/components/STimePicker/README.md

@@ -23,6 +23,7 @@
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

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

@@ -50,6 +50,13 @@ export interface STimePickerProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -70,4 +77,4 @@ export declare function TimeSelector({ value, showMeridiem, minuteStep, onChange
     onChange: (time: string) => void;
 }): import("react").JSX.Element;
 /** STimePicker — sd-time-picker 포팅. SField + Popover(TimeSelector). */
-export declare function STimePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, width, maxWidth, name, rules, status, label, labelPosition, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimePickerProps): import("react").JSX.Element;
+export declare function STimePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimePickerProps): import("react").JSX.Element;

package/dist/components/STimeRangePicker/README.md

@@ -24,6 +24,7 @@
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
 | `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/STimeRangePicker/STimeRangePicker.d.ts

@@ -51,6 +51,13 @@ export interface STimeRangePickerProps {
      * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
      */
     labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -72,4 +79,4 @@ export declare function RangeTimeSelector({ value, showMeridiem, minuteStep, ran
     onChange: (range: [string, string]) => void;
 }): import("react").JSX.Element;
 /** STimeRangePicker — sd-time-range-picker 포팅. SField + Popover(RangeTimeSelector). */
-export declare function STimeRangePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, rangeOrder, width, maxWidth, name, rules, status, label, labelPosition, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimeRangePickerProps): import("react").JSX.Element;
+export declare function STimeRangePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, rangeOrder, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimeRangePickerProps): import("react").JSX.Element;