sellmate-design-system-react 9.0.0-beta.111 → 9.0.0-beta.112

package/AGENTS.md

@@ -554,10 +554,10 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 연도 선택 리스트만 커스텀 조합에 넣는다 | `SDatePickerYearListbox` | §3-7-4 |
 | 연도+월 선택 리스트만 커스텀 조합에 넣는다 | `SDatePickerMonthListbox` | §3-7-4 |
 | 날짜 기간을 받는다 | `SDateRangePicker` | §3-7-4 |
-| 시각 하나를 받는다 | `STimePicker` | |
-| 시각 범위를 받는다 | `STimeRangePicker` | |
+| 시각(시·분) 하나를 입력받는다 | `STimePicker` | 날짜는 `SDatePicker` · 시각 범위는 `STimeRangePicker` |
+| 시각(시·분) 범위를 입력받는다 | `STimeRangePicker` | 시각 하나는 `STimePicker` |
 | 달력 자체를 화면에 펼쳐 보여준다 | `SCalendar` | §3-7-4 |
-| 컨트롤에 라벨·필수·에러를 붙인다 | `SField` | §3-7-5 |
+| 디자인 시스템에 없는 컨트롤(`input type="color"` 등)에 라벨·필수·에러를 붙인다 | `SField` | `SInput`·`SSelect` 같은 DS 입력은 자기 `label`·`required` prop 으로 붙인다 — `SField` 로 감싸지 않는다 (§3-7-5) |
 | 입력 여러 개를 묶어 한 번에 검증한다 | `SForm` | §4-3 |
 | 폼·필터를 표 형태로 배치한다 | `SKeyValueTable` | §4 |
 | 필요한 검색 조건만 칩으로 골라 붙이게 한다 | `SChipFilter` | §3-7-11 |
@@ -603,7 +603,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 아이콘 하나로 뜻이 통하는 부가 조작을 준다 | `SGhostButton` | §3-5-5 |
 | 자리가 좁아 부가 조작 여러 개를 ⋯ 뒤 메뉴로 접어 둔다 | `SMeatballButton` | §3-5-5 |
 | 한 버튼에 여러 선택지를 매단다 | `SDropdownButton` | §3-5-4 |
-| GNB system 패널에서 한 줄짜리 행 액션을 준다 | `SSystemActionButton` | §3-5-7 |
+| GNB system 패널에서 한 줄짜리 행 액션을 준다 | `SSystemActionButton` (`SGnbSystem` 의 `actions` 로 넘긴다 — 직접 배치하지 않는다) | §3-5-7 |
 
 #### D. 화면을 담고 나눈다
 
@@ -1374,7 +1374,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 | **부가 조작 여러 개를 ⋯ 메뉴로 접기** | **`SMeatballButton`** — ⋯ 아이콘 버튼 + `SDropdownButton` 과 같은 메뉴 (아래 3-5-5) |
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
-| **GNB system 패널의 한 줄 액션** | **`SSystemActionButton`** — 행 전체가 버튼인 표면형 (아래 3-5-7) |
+| **GNB system 패널의 한 줄 액션** | **`SSystemActionButton`** (`SGnbSystem` 의 `actions` 로 넘긴다 — 직접 배치하지 않는다) — 행 전체가 버튼인 표면형 (아래 3-5-7) |
 | **본문·목록 사이에 끼어 서는 작은 부가 버튼** (추천 질문·출처 바로가기) | **`SButton shape="pill" color="neutral" outline`** (아래 3-5-6) |
 
 #### 3-5-1. 채움 버튼은 페이지당 개수 제한이 있다
@@ -1553,7 +1553,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 | 페이지·모달의 일반 액션 | `SButton` — 라벨 폭만큼만 차지한다 |
 | 목록에서 항목 하나를 고르게 한다 | `SListItem` · `STree` (§3-7-6·§3-7-7) |
 | 앱 셸 좌측 내비게이션의 메뉴 | `SGnb` 의 `menus` (§4-1) |
-| **GNB system 패널에서 설정·연결 상태를 한 줄씩 쌓고, 그 줄을 눌러 들어가게 한다** | **`SSystemActionButton`** |
+| **GNB system 패널에서 설정·연결 상태를 한 줄씩 쌓고, 그 줄을 눌러 들어가게 한다** | **`SSystemActionButton`** (`SGnbSystem` 의 `actions` 로 넘긴다 — 직접 배치하지 않는다) |
 
 **무엇이 그려지는지는 `type` 이 정한다.** 타입마다 다른 값만 `option` 으로 받으므로, 타입에 맞지 않는 `option` 은 타입 에러가 된다.
 

package/dist/components/STable/README.md

@@ -162,7 +162,8 @@ export interface STableStickyColumn {
 ### STablePagination
 
 ```ts
-export interface STablePagination {
+/** 표 하단 페이지네이션. `simple`·`groupSize` 는 `SPagination` 의 같은 이름 prop 을 그대로 쓴다 */
+export interface STablePagination extends Pick<SPaginationProps, 'simple' | 'groupSize'> {
   page: number;
   rowsPerPage: number;
   lastPage?: number;

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

@@ -1,5 +1,6 @@
 import { type CSSProperties, type UIEvent as ReactUIEvent, type ForwardedRef, type ReactElement, type ReactNode } from 'react';
 import { type SIconName } from '../SIcon';
+import { type SPaginationProps } from '../SPagination';
 import { type SSelectOption } from '../SSelect';
 /**
  * 행 데이터의 기본 타입 — 키만 아는 느슨한 레코드다.
@@ -178,7 +179,8 @@ export type STableColumn<TRow extends SRow = SRow> = STableColumnBase<TRow> & ({
     autoWidth?: false;
     field: STableColumnField<TRow>;
 });
-export interface STablePagination {
+/** 표 하단 페이지네이션. `simple`·`groupSize` 는 `SPagination` 의 같은 이름 prop 을 그대로 쓴다 */
+export interface STablePagination extends Pick<SPaginationProps, 'simple' | 'groupSize'> {
     page: number;
     rowsPerPage: number;
     lastPage?: number;

package/dist/index.cjs

@@ -20559,7 +20559,16 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                 bordered && "-mt-px border border-solid border-[color:var(--cmp-table-border-color)]"
               ),
               children: [
-                showPagination && /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
+                showPagination && /* @__PURE__ */ jsxRuntime.jsx(
+                  SPagination,
+                  {
+                    currentPage: displayPage,
+                    lastPage,
+                    simple: pagination?.simple,
+                    groupSize: pagination?.groupSize,
+                    onPageChange: changePage
+                  }
+                ),
                 showRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
                   dense && /* @__PURE__ */ jsxRuntime.jsx(
                     STextLink,