sellmate-design-system-react 9.0.0-beta.102 → 9.0.0-beta.104

package/dist/components/SSystemActionButton/SSystemActionButton.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes } from 'react';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
 import { type SAccountListBoxContent } from '../SAccountListBox';
 import { type SIconName } from '../SIcon';
 import { type STagColor } from '../STag';
@@ -93,6 +93,13 @@ export interface SSystemActionButtonAccountProps extends SSystemActionButtonBase
     type: 'account';
     /** 라벨 텍스트 */
     label?: string;
+    /**
+     * 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다.
+     * 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로
+     * 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다.
+     * 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩).
+     */
+    labelSlot?: ReactNode;
     /**
      * 누르면 뜨는 계정 리스트박스. **필수다** — 계정 행은 늘 이 패널의 트리거이고, 눌러도 아무것도
      * 뜨지 않는 계정 행은 없다. 아이콘은 `user` 로 고정이라 여기서 받지 않는다.
@@ -105,6 +112,13 @@ export interface SSystemActionButtonSelectProps extends SSystemActionButtonBaseP
     type: 'select';
     /** 라벨 텍스트 */
     label?: string;
+    /**
+     * 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다.
+     * 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로
+     * 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다.
+     * 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩).
+     */
+    labelSlot?: ReactNode;
     /** 선행 아이콘. 아이콘 없이 라벨만 두는 행이면 통째로 생략한다 */
     option?: SSystemActionButtonIconOption;
 }
@@ -114,6 +128,13 @@ export interface SSystemActionButtonSwitchProps extends SSystemActionButtonBaseP
     type: 'switch';
     /** 라벨 텍스트 */
     label?: string;
+    /**
+     * 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다.
+     * 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로
+     * 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다.
+     * 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩).
+     */
+    labelSlot?: ReactNode;
     /** 선행 아이콘 + 우측 액션 텍스트. 둘 다 두지 않으면 통째로 생략한다 */
     option?: SSystemActionButtonTextOption;
 }
@@ -123,6 +144,13 @@ export interface SSystemActionButtonSubSelectProps extends SSystemActionButtonBa
     type: 'subSelect';
     /** 라벨 텍스트 */
     label?: string;
+    /**
+     * 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다.
+     * 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로
+     * 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다.
+     * 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩).
+     */
+    labelSlot?: ReactNode;
     /** 선행 아이콘 + 우측 값 + 고를 목록 */
     option: SSystemActionButtonSubSelectOption;
 }
@@ -134,6 +162,8 @@ export interface SSystemActionButtonStatusProps extends SSystemActionButtonBaseP
     type: 'status';
     /** 태그가 라벨 자리를 차지하므로 받지 않는다 */
     label?: never;
+    /** 태그가 라벨 자리를 차지하므로 받지 않는다 */
+    labelSlot?: never;
     /**
      * 상태 태그 + 고를 목록. **필수다** — 상태 행은 늘 그 상태를 바꾸는 메뉴의 트리거다.
      */

package/dist/components/STable/README.md

@@ -14,7 +14,7 @@
 | `rowKey?` | `string` | `'id'` | 행 식별 필드 |
 | `selectable?` | `boolean` | `false` | 행 선택 체크박스 |
 | `rowSelectLabel?` | `(row: TRow) => string` | — | 행 선택 체크박스의 접근성 이름 — 화면 낭독기가 어느 행의 체크박스인지 읽게 한다. 그 행을 가리키는 글자(주문번호·상품명 등)로 만든다: `row => \`${row.orderNo} 선택\``. 주지 않으면 모든 행이 `행 선택` 으로 읽혀 행끼리 구분되지 않는다. |
-| `selectAllLabel?` | `string` | `'전체 선택'` | 헤더 전체 선택 체크박스의 접근성 이름 |
+| `selectAllLabel?` | `string` | — | 헤더 전체 선택 체크박스의 접근성 이름. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "전체 선택")를 쓴다 |
 | `dragSelectable?` | `boolean` | `false` | 행을 드래그해서 고른다. 기본 `false`. 고르는 수단만 다를 뿐 `selectable` 과 같은 선택이다 — `selected` · `onSelectedChange` · `isRowSelectable` 을 그대로 쓴다. 체크박스 열은 생기지 않고, 대신 고른 구간이 배경색과 바깥 테두리로 표시된다. **`selectable` 과 함께 켜면 `selectable` 이 이긴다** — 체크박스가 있는 표에서 드래그까지 걸리면 글자를 긁으려던 손이 선택을 갈아치운다. 둘 다 필요해 보이면 체크박스 쪽만 남긴다. 누른 자리가 구간의 기준점이고, 끌어간 자리까지가 구간이다. **새로 끌면 이전 선택은 풀린다** — 기존 선택에 더하려면 `Ctrl`(macOS 는 `Cmd`)을 짚고 끈다. 잠긴 행(`isRowSelectable`)은 구간 안에 있어도 그냥 지나간다. **켜 두면 셀 안의 글자를 긁어 복사할 수 없다** — 끌기가 곧 선택이라 글자 선택과 같은 손짓을 두고 다툰다. 값을 복사해 가는 표에는 켜지 않는다. 셀 안의 버튼·입력은 그대로 눌린다. |
 | `contextMenuItems?` | `STableContextMenuItem[]` | — | 드래그 선택에서 **행을 오른쪽 클릭했을 때** 커서 자리에 뜨는 메뉴의 항목. 주지 않거나 비면 메뉴가 뜨지 않고 브라우저 기본 메뉴가 나온다. **`dragSelectable` 에서만 동작한다** — 체크박스 모드에서는 무시된다. 고르지 않은 행에서 누르면 **그 행만 고른 뒤** 열린다. 메뉴가 다룰 대상과 화면에 칠해진 것이 어긋나지 않게 하기 위함이다. 잠긴 행(`isRowSelectable`) 위에서는 열리지 않는다 — 고를 수 없는 행을 대상으로 삼을 수 없기 때문이다. |
 | `isRowSelectable?` | `(row: TRow) => boolean` | — | 이 행을 고를 수 있는가. 주지 않으면 모든 행을 고를 수 있다. 고를 수 없는 행은 체크박스가 잠기고, **전체 선택·Shift 구간 선택의 셈에서도 빠진다** — 잠긴 행이 셈에 남으면 "전부 선택됨"에 닿지 못해 헤더 체크박스가 해제 방향으로 가지 못한다. 목록에서 지워 버리는 것과 다르다. 실패 0건인 차수처럼 **자리는 보여야 하지만 대상이 될 수는 없는 행**에 쓴다. 아예 대상이 아니라면 `rows` 에서 거르는 편이 낫다. 잠금은 그리기 시점의 판정일 뿐이라, 이미 `selected` 에 든 행이 나중에 잠겨도 DS 가 빼지 않는다(제어 상태를 말없이 바꾸지 않는다). 다만 헤더의 전체 해제로는 걷어낼 수 있다. |
@@ -28,7 +28,7 @@
 | `stickyColumn?` | `STableStickyColumn` | — | 고정할 좌/우 컬럼 수 |
 | `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
 | `bordered?` | `boolean` | `true` | 바깥 테두리. 기본은 `true`. `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 — 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다. 페이지네이션 바의 테두리와 1px 겹침(`-mt-px`)도 함께 꺼진다. 본문 테두리가 없으면 겹칠 대상이 없어, 그대로 두면 페이지네이션만 테두리를 갖고 1px 어긋난다. |
-| `emptyLabel?` | `string` | `'데이터가 없습니다.'` |  |
+| `emptyLabel?` | `string` | — | 데이터가 없을 때 문구. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "데이터가 없습니다.")를 쓴다 |
 | `emptySlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `emptyLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
 | `loading?` | `boolean` | `false` |  |
 | `dense?` | `boolean` | `false` | 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로). **시작 밀도이자 밀도 토글의 스위치다.** 켜면 하단 바 우측에 `좁게 보기` · `넓게 보기` 토글이 붙는다 — 페이지네이션이 없으면 이 바를 토글만 담아 그린다. 누른 뒤의 밀도는 테이블이 내부 상태로 들고 가므로 `onDenseChange` 를 받지 않아도 토글은 동작하고, 넓게 본 뒤에도 토글은 그대로 남는다(붙일지는 이 prop 이 정한다). 이 prop 값이 바뀌면 내부 밀도도 그 값으로 맞춰진다. |
@@ -36,7 +36,7 @@
 | `pagination?` | `STablePagination` | — | 페이지네이션 (있으면 하단 표시) |
 | `internalPagination?` | `boolean` | `false` | 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) |
 | `showRowsPerPageSelect?` | `boolean` | `false` | 페이지당 행 수 셀렉트 표시 |
-| `rowsPerPageOption?` | `SSelectOption[]` | `DEFAULT_ROWS_PER_PAGE_OPTION` |  |
+| `rowsPerPageOption?` | `SSelectOption[]` | — | 페이지당 행 수 선택지. 생략하면 10·25·50·100 을 `SLocaleProvider` 로케일 문구(ko: "10개씩 보기")로 보여 준다 |
 | `virtualScroll?` | `boolean` | `false` | 가상 스크롤 |
 | `rowHeight?` | `number` | — | 행 높이의 **출발점**(px). 미지정이면 밀도에 따라 44 / 32. 행마다 높이가 달라도 된다 — 화면에 나온 행은 실제 높이를 재서 덮으므로, 이 값은 **아직 안 그려진 행의 추정치**이자 행의 최소 높이일 뿐이다. 실측이 쌓일수록 뒤쪽 추정도 그 평균으로 수렴한다. 그래서 높이가 제각각인 표에서 "가장 흔한 높이"를 넣어 두면 충분하다. 값이 실제와 멀수록 아직 안 그려진 구간의 스크롤바 길이만 덜 정확할 뿐, 그리는 위치는 어긋나지 않는다. |
 | `virtualBuffer?` | `number` | `5` |  |

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

@@ -259,7 +259,7 @@ export interface STableProps<TRow extends SRow = SRow> {
      * 주지 않으면 모든 행이 `행 선택` 으로 읽혀 행끼리 구분되지 않는다.
      */
     rowSelectLabel?: (row: TRow) => string;
-    /** 헤더 전체 선택 체크박스의 접근성 이름 */
+    /** 헤더 전체 선택 체크박스의 접근성 이름. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "전체 선택")를 쓴다 */
     selectAllLabel?: string;
     /**
      * 행을 드래그해서 고른다. 기본 `false`.
@@ -363,6 +363,7 @@ export interface STableProps<TRow extends SRow = SRow> {
      * 없어, 그대로 두면 페이지네이션만 테두리를 갖고 1px 어긋난다.
      */
     bordered?: boolean;
+    /** 데이터가 없을 때 문구. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "데이터가 없습니다.")를 쓴다 */
     emptyLabel?: string;
     /**
      * 데이터가 없을 때 body 영역 전체를 대체하는 슬롯.
@@ -395,6 +396,7 @@ export interface STableProps<TRow extends SRow = SRow> {
     internalPagination?: boolean;
     /** 페이지당 행 수 셀렉트 표시 */
     showRowsPerPageSelect?: boolean;
+    /** 페이지당 행 수 선택지. 생략하면 10·25·50·100 을 `SLocaleProvider` 로케일 문구(ko: "10개씩 보기")로 보여 준다 */
     rowsPerPageOption?: SSelectOption[];
     onRowsPerPageChange?: (perPage: number) => void;
     /** 가상 스크롤 */

package/dist/components/STableBar/README.md

@@ -9,7 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `title?` | `ReactNode` | — | 건수 앞에 서는 제목 슬롯. 이 바가 무엇의 목록인지 말한다. 문자열을 주면 바의 기본 타이포로 그린다. 다른 모양이 필요하면 요소를 통째로 넘긴다 — 슬롯이라 안에 무엇이 오든 자리만 잡아 준다. |
-| `total?` | `number` | — | 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동) |
+| `total?` | `number` | — | 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동, 문구는 `SLocaleProvider` 로케일을 따른다) |
 | `selected?` | `number` | — | 선택 건수. 지정하면 "N건 선택" 을 표시한다 |
 | `actions?` | `ReactNode` | — | 구분선 오른쪽 좌측 액션 영역 |
 | `rightActions?` | `ReactNode` | — | 우측 정렬 액션 영역 |

package/dist/components/STableBar/STableBar.d.ts

@@ -7,7 +7,7 @@ export interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch
      * 슬롯이라 안에 무엇이 오든 자리만 잡아 준다.
      */
     title?: ReactNode;
-    /** 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동) */
+    /** 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동, 문구는 `SLocaleProvider` 로케일을 따른다) */
     total?: number;
     /** 선택 건수. 지정하면 "N건 선택" 을 표시한다 */
     selected?: number;

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

@@ -1,3 +1,4 @@
+import { type SLocaleMessages } from '../../lib/locale';
 import { type SFieldWidthGrade } from '../../lib/field-width';
 export type STimePickerSize = 'sm' | 'md';
 export type STimePickerType = 'default' | 'midday';
@@ -30,4 +31,4 @@ export declare function parseTimeValue(value: string | null | undefined): {
     minute: number;
 };
 export declare function formatTimeValue(hour: number, minute: number): string;
-export declare function formatTimeDisplay(value: string | null | undefined, type: STimePickerType): string;
+export declare function formatTimeDisplay(value: string | null | undefined, type: STimePickerType, t: SLocaleMessages['date']): string;

package/dist/components/STimeRangePicker/time-range-picker.config.d.ts

@@ -1,3 +1,4 @@
+import { type SLocaleMessages } from '../../lib/locale';
 import { TIMEPICKER_SIZE_CONFIG, clampTimePart, formatTimeDisplay, formatTimeValue, parseTimeValue, type STimePickerMeridiem, type STimePickerSize, type STimePickerType } from '../STimePicker/timepicker.config';
 export type STimeRangePickerSize = STimePickerSize;
 export type STimeRangePickerType = STimePickerType;
@@ -6,4 +7,4 @@ export type STimeRangePickerRangeOrder = 'strict' | 'allow-cross-day';
 export type STimeRangeValue = [string, string] | null;
 export { TIMEPICKER_SIZE_CONFIG as TIME_RANGE_PICKER_SIZE_CONFIG, clampTimePart, formatTimeDisplay, formatTimeValue, parseTimeValue, };
 export declare function normalizeTimeRangeValue(value: STimeRangeValue, rangeOrder?: STimeRangePickerRangeOrder): STimeRangeValue;
-export declare function formatTimeRangeDisplay(value: STimeRangeValue, type: STimeRangePickerType): string;
+export declare function formatTimeRangeDisplay(value: STimeRangeValue, type: STimeRangePickerType, t: SLocaleMessages['date']): string;

package/dist/components/STimeline/README.md

@@ -9,7 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `groups` | `STimelineGroup[]` | — | 머리글로 묶은 항목 목록. 순서 그대로 그린다 |
-| `emptyText?` | `ReactNode` | `'내역이 없습니다.'` | 항목이 하나도 없을 때 가운데 띄우는 안내. 불러오는 중에는 `null` 을 넘겨 빈 안내가 먼저 깜빡이지 않게 한다. |
+| `emptyText?` | `ReactNode` | — | 항목이 하나도 없을 때 가운데 띄우는 안내. 불러오는 중에는 `null` 을 넘겨 빈 안내가 먼저 깜빡이지 않게 한다. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "내역이 없습니다.")를 쓴다. |
 
 ## Types
 

package/dist/components/STimeline/STimeline.d.ts

@@ -21,6 +21,7 @@ export interface STimelineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch
     /**
      * 항목이 하나도 없을 때 가운데 띄우는 안내.
      * 불러오는 중에는 `null` 을 넘겨 빈 안내가 먼저 깜빡이지 않게 한다.
+     * 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "내역이 없습니다.")를 쓴다.
      */
     emptyText?: ReactNode;
 }