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

package/dist/components/SSectionHeaderCard/SSectionHeaderCard.d.ts

@@ -1,12 +1,14 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SFooterButton } from '../SFooter';
 export type SSectionHeaderCardBodyChildren = ReactNode;
 export type SSectionHeaderCardChildren = ReactNode;
 export type SSectionHeaderCardThickness = false | 'default' | 'accent';
 export type SSectionHeaderCardTitleSize = 'xs' | 'sm';
 export type SSectionHeaderCardBodyPadding = 'default' | 'wide' | 'none';
-export interface SSectionHeaderCardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'slot' | 'title'> {
+export type SSectionHeaderCardBodyBackground = 'frame' | 'neutral';
+export interface SSectionHeaderCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'slot' | 'title'> {
     /** 헤더 제목 */
-    title: ReactNode;
+    title?: ReactNode;
     /** 제목 크기 */
     titleSize?: SSectionHeaderCardTitleSize;
     /** 제목 앞 점 표시 여부 */
@@ -21,21 +23,36 @@ export interface SSectionHeaderCardHeaderProps extends Omit<HTMLAttributes<HTMLD
     slot?: ReactNode;
     /** 상단 border 색상 타입. false면 표시하지 않습니다. */
     thickness?: SSectionHeaderCardThickness;
-}
-export interface SSectionHeaderCardBodyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-    /** 바디 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. */
-    children?: SSectionHeaderCardBodyChildren;
+    /** 헤더 영역 클래스 */
+    headerClassName?: string;
     /**
-     * 안쪽 여백. 기본은 `default`.
+     * 바디 안쪽 여백. 기본은 `default`.
      * 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`.
      */
     padding?: SSectionHeaderCardBodyPadding;
-}
-export interface SSectionHeaderCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-    /** SSectionHeaderCard 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. */
+    /**
+     * 본문 배경. 기본은 `frame` — 카드가 깐 흰 면을 그대로 쓴다.
+     *
+     * `neutral` 은 바탕을 한 단계 눌러앉혀, 흰 면 덩어리(표·리스트)가 여럿일 때 그것들이
+     * **"면 위에 놓인 객체"로 읽히게** 한다. 위계를 한 단계 더 주고 싶을 때 고르는 선택지이며,
+     * **기본값이 틀린 것은 아니다** — 표·리스트는 테두리·라운드·헤더 줄과 간격을 이미 갖고 있어
+     * 흰 바탕에서도 경계가 읽힌다.
+     *
+     * 깔아도 **효과가 없는** 자리가 있다 — 덩어리가 가장자리까지 차는 경우(`padding="none"` 으로
+     * 표를 채우면 바탕이 완전히 가려진다), 덩어리에 회색 면이 섞인 경우(그 덩어리가 바탕에 묻힌다),
+     * 맨 텍스트나 폼 컨트롤만 있는 본문(떠오를 흰 면이 없다).
+     */
+    background?: SSectionHeaderCardBodyBackground;
+    /**
+     * 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다.
+     * `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다.
+     */
+    footerLeft?: ReactNode;
+    /** 하단 액션 영역 우측 주 액션 버튼 */
+    button?: SFooterButton;
+    /** 하단 액션 영역 클래스 */
+    footerClassName?: string;
+    /** 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. */
     children?: SSectionHeaderCardChildren;
 }
-export declare const SSectionHeaderCard: import("react").ForwardRefExoticComponent<SSectionHeaderCardProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Header: import("react").ForwardRefExoticComponent<SSectionHeaderCardHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-    Body: import("react").ForwardRefExoticComponent<SSectionHeaderCardBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-};
+export declare const SSectionHeaderCard: import("react").ForwardRefExoticComponent<SSectionHeaderCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SSectionHeaderCard/index.d.ts

@@ -1 +1 @@
-export { SSectionHeaderCard, type SSectionHeaderCardBodyChildren, type SSectionHeaderCardBodyPadding, type SSectionHeaderCardBodyProps, type SSectionHeaderCardChildren, type SSectionHeaderCardHeaderProps, type SSectionHeaderCardProps, type SSectionHeaderCardThickness, type SSectionHeaderCardTitleSize, } from './SSectionHeaderCard';
+export { SSectionHeaderCard, type SSectionHeaderCardBodyBackground, type SSectionHeaderCardBodyChildren, type SSectionHeaderCardBodyPadding, type SSectionHeaderCardChildren, type SSectionHeaderCardProps, type SSectionHeaderCardThickness, type SSectionHeaderCardTitleSize, } from './SSectionHeaderCard';

package/dist/components/SSelect/README.md

@@ -18,6 +18,7 @@
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
 | `placeholder?` | `string` | `'선택'` | placeholder |
 | `disabled?` | `boolean` | `false` | 비활성 |
+| `clearable?` | `boolean` | `false` | 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며, 누르면 드롭다운을 열지 않고 값만 비운다. |
 | `error?` | `boolean` | `false` | 에러 상태 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — 닫힐 때 자동 검증 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
@@ -33,7 +34,7 @@
 | `addonAlign?` | `SFieldAddonAlign` | — | 어드온 정렬 |
 | `hint?` | `string` | — |  |
 | `errorMessage?` | `string` | — |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. 셀렉트는 `maxLength` 개념이 없어 목록 최장값을 담는 등급으로 고른다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -51,6 +52,25 @@
 | `focus` | `() => void` | 트리거 버튼에 포커스 (sdFocus) |
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 
+## Types
+
+### SSelectOption
+
+```ts
+export interface SSelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  children?: SSelectOption[];
+}
+```
+
+### SSelectType
+
+```ts
+export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+```
+
 ## Dependencies
 
 ### Used by
@@ -61,18 +81,18 @@
 ### Depends on
 
 - [SField](../SField)
-- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
+- [SSearchInput](../SSearchInput)
 
 ### Graph
 
 ```mermaid
 graph TD;
   SSelect --> SField
-  SSelect --> SGhostButton
   SSelect --> SIcon
   SSelect --> SPortal
+  SSelect --> SSearchInput
   SKeyValueTable --> SSelect
   STable --> SSelect
   style SSelect fill:#f9f,stroke:#333,stroke-width:4px

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

@@ -5,6 +5,7 @@ import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type STooltipProps } from '../STooltip';
 import { type SSelectOption, type SSelectType } from './select.config';
+import { type SFieldWidth } from '../../lib/field-width';
 export type { SSelectOption, SSelectType } from './select.config';
 export interface SSelectHandle {
     /** 트리거 버튼에 포커스 (sdFocus) */
@@ -37,6 +38,11 @@ export interface SSelectProps {
     placeholder?: string;
     /** 비활성 */
     disabled?: boolean;
+    /**
+     * 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며,
+     * 누르면 드롭다운을 열지 않고 값만 비운다.
+     */
+    clearable?: boolean;
     /** 에러 상태 */
     error?: boolean;
     /** 유효성 규칙 — 닫힐 때 자동 검증 */
@@ -62,7 +68,13 @@ export interface SSelectProps {
     addonAlign?: SFieldAddonAlign;
     hint?: string;
     errorMessage?: string;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     * 셀렉트는 `maxLength` 개념이 없어 목록 최장값을 담는 등급으로 고른다.
+     */
+    width?: SFieldWidth;
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SSplitter/README.md

@@ -25,3 +25,18 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: number) => void` | 크기가 확정될 때. emitImmediately 가 아니면 드래그를 놓는 순간 한 번만 온다 |
 
+## Types
+
+### SSplitterUnit
+
+```ts
+/** 모델·limits 를 읽는 단위. Quasar QSplitter 의 `unit` 과 같다. */
+export type SSplitterUnit = (typeof SSPLITTER_UNITS)[number];
+```
+
+### SSPLITTER_UNITS
+
+```ts
+export const SSPLITTER_UNITS = ['%', 'px'] as const;
+```
+

package/dist/components/SStepper/README.md

@@ -30,6 +30,32 @@
 | `showItemTooltip` | `() => void` | error 아이템 중 첫 번째에 툴팁을 연다. error 아이템이 없으면 아무 일도 일어나지 않는다. |
 | `hideItemTooltip` | `() => void` | 열려있는 커스텀 툴팁을 닫는다. 활성 단계(value prop)가 바뀌면 별도 호출 없이도 자동으로 닫힌다. |
 
+## Types
+
+### SStepperItem
+
+```ts
+export type SStepperItem = {
+  label: string;
+  value?: string;
+  group?: string;
+  completed?: boolean;
+  error?: boolean;
+};
+```
+
+### SStepperSize
+
+```ts
+export type SStepperSize = (typeof STEPPER_SIZES)[number];
+```
+
+### STEPPER_SIZES
+
+```ts
+export const STEPPER_SIZES = ['sm', 'lg'] as const;
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SSwitch/README.md

@@ -22,3 +22,16 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: boolean) => void` | 변경 (sdUpdate) |
 
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+
+### Graph
+
+```mermaid
+graph TD;
+  SKeyValueTable --> SSwitch
+  style SSwitch fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/STable/README.md

@@ -13,20 +13,23 @@
 | `rowKey?` | `string` | `'id'` | 행 식별 필드 |
 | `selectable?` | `boolean` | `false` | 행 선택 체크박스 |
 | `selected?` | `SRow[]` | `[]` |  |
+| `sort?` | `STableSort \| null` | `null` | 정렬 상태 (controlled). `null`·미지정이면 정렬 없음. 컴포넌트는 정렬 상태를 갖지 않는다 — 서버 정렬이면 이 값이 곧 조회 조건이고, 뒤로가기·새로고침·링크 공유로 복원돼야 하므로 진실은 URL·store 쪽에 있어야 한다. 행을 실제로 정렬하는 것도 소비 앱 몫이다 (`STable` 은 받은 순서대로 그린다). |
 | `resizable?` | `boolean` | `false` | 컬럼 너비 조절 |
 | `width?` | `string` | — |  |
 | `height?` | `string` | — |  |
 | `stickyHeader?` | `boolean` | — |  |
 | `stickyColumn?` | `STableStickyColumn` | — | 고정할 좌/우 컬럼 수 |
 | `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
+| `bordered?` | `boolean` | `true` | 바깥 테두리. 기본은 `true`. `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 — 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다. 페이지네이션 바의 테두리와 1px 겹침(`-mt-px`)도 함께 꺼진다. 본문 테두리가 없으면 겹칠 대상이 없어, 그대로 두면 페이지네이션만 테두리를 갖고 1px 어긋난다. |
 | `noDataLabel?` | `string` | `'데이터가 없습니다.'` |  |
 | `noDataSlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
 | `isLoading?` | `boolean` | `false` |  |
-| `dense?` | `boolean` | `false` |  |
+| `dense?` | `boolean` | `false` | 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로) |
 | `noHover?` | `boolean` | `false` | true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 |
 | `pagination?` | `STablePagination` | — | 페이지네이션 (있으면 하단 표시) |
 | `useInternalPagination?` | `boolean` | `false` | 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) |
 | `useRowsPerPageSelect?` | `boolean` | `false` | 페이지당 행 수 셀렉트 표시 |
+| `useDensityToggle?` | `boolean` | `false` | 페이지네이션 바에 밀도 토글(`좁게 보기` · `넓게 보기`) 표시. **페이지네이션이 있을 때만 나타난다** — 토글이 사는 곳이 그 바이기 때문이다. `onDenseChange` 와 함께 준다. 밀도는 컴포넌트가 갖지 않으므로, 핸들러 없이 켜면 눌러도 아무 일도 일어나지 않는다. |
 | `rowsPerPageOption?` | `SSelectOption[]` | `DEFAULT_ROWS_PER_PAGE_OPTION` |  |
 | `useVirtualScroll?` | `boolean` | `false` | 가상 스크롤 |
 | `rowHeight?` | `number` | — |  |
@@ -41,6 +44,8 @@
 | Event | Type | Description |
 |-------|------|-------------|
 | `onSelectedChange` | `(rows: SRow[]) => void` |  |
+| `onSortChange` | `(sort: STableSort \| null) => void` | 정렬 헤더 클릭 (`asc → desc → 해제` 3단). 해제되면 `null` 이 온다. 다중 정렬은 1차 안에서 지원하지 않는다. |
+| `onDenseChange` | `(dense: boolean) => void` | 밀도 변경 (`useDensityToggle` 로 띄운 토글을 눌렀을 때). 컴포넌트는 밀도 상태를 갖지 않는다 — `dense` 가 곧 현재 상태이고, 그 진실은 페이지에 있다. 사용자가 고른 밀도를 다음 방문까지 기억해 두는 것(로컬 저장 등)도 페이지 몫이다. |
 | `onPageChange` | `(page: number) => void` |  |
 | `onRowsPerPageChange` | `(perPage: number) => void` |  |
 | `onVirtualUpdate` | `(range: { from: number; to: number }) => void` |  |
@@ -59,15 +64,77 @@
 | `updateRowSelect` | `(row: SRow) => void` | 단일 행 선택 토글 (sd-table updateRowSelect) — onSelectedChange 발생 |
 | `toggleSelectAll` | `(checked: boolean, rows: SRow[]) => void` | 주어진 행들 전체 선택/해제 (sd-table toggleSelectAll) — onSelectedChange 발생 |
 
+## Types
+
+### STableColumn
+
+```ts
+/**
+ * `autoWidth` 스페이서 열은 값을 그리지 않으므로 `field` 를 생략할 수 있다.
+ * 그 밖의 열은 값 접근자가 있어야 한다.
+ */
+export type STableColumn = STableColumnBase &
+  (
+    { autoWidth: true; field?: STableColumnField } | { autoWidth?: false; field: STableColumnField }
+  );
+```
+
+### SRow
+
+```ts
+export type SRow = Record<string, any>;
+```
+
+### STableSort
+
+```ts
+/** 정렬 상태 — 어느 열을 어느 방향으로 정렬했는가 */
+export interface STableSort {
+  /** 정렬 기준 컬럼의 `name` */
+  name: string;
+  dir: 'asc' | 'desc';
+}
+```
+
+### STableStickyColumn
+
+```ts
+export interface STableStickyColumn {
+  left?: number;
+  right?: number;
+}
+```
+
+### STablePagination
+
+```ts
+export interface STablePagination {
+  page: number;
+  rowsPerPage: number;
+  lastPage?: number;
+}
+```
+
+### STableColumnField
+
+```ts
+/** 값 접근: 필드명 또는 접근 함수 */
+export type STableColumnField = string | ((row: SRow) => any);
+```
+
 ## Dependencies
 
 ### Depends on
 
 - [SCheckbox](../SCheckbox)
 - [SCircleProgress](../SCircleProgress)
+- [SDivider](../SDivider)
+- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SPagination](../SPagination)
 - [SSelect](../SSelect)
+- [STextLink](../STextLink)
+- [STooltip](../STooltip)
 
 ### Graph
 
@@ -75,8 +142,12 @@
 graph TD;
   STable --> SCheckbox
   STable --> SCircleProgress
+  STable --> SDivider
+  STable --> SGhostButton
   STable --> SIcon
   STable --> SPagination
   STable --> SSelect
+  STable --> STextLink
+  STable --> STooltip
   style STable fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -1,6 +1,4 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import { type SColor } from '../../lib/color';
-import { type SIconName } from '../SIcon';
 import { type SSelectOption } from '../SSelect';
 export type SRow = Record<string, any>;
 /** `STableColumn.renderCell`에 전달되는 컨텍스트 */
@@ -20,24 +18,88 @@ export interface STableCellContext {
     /** STable이 이 셀에 적용하려던 스타일 (패딩·정렬·폭·sticky offset 포함) */
     style: CSSProperties;
 }
-export interface STableColumn {
+/** 값 접근: 필드명 또는 접근 함수 */
+export type STableColumnField = string | ((row: SRow) => any);
+interface STableColumnBase {
     name: string;
     label: string;
-    /** 값 접근: 필드명 또는 접근 함수 */
-    field: string | ((row: SRow) => any);
     align?: 'left' | 'center' | 'right';
-    width?: string;
-    /** 고정폭 없이 자동 너비 (sticky/resize 계산에서 제외) */
+    /**
+     * 컬럼 너비. **px 로만 준다** — 숫자는 px 로 해석하고, 문자열은 `'120px'` 형태만 받는다.
+     *
+     * % · `clamp()` · `min()` 은 쓰지 않는다. 폭은 `<colgroup>` 의 `<col width>` 로 들어가는데
+     * 테이블이 `table-fixed` 라 함수형 값은 계산되지 않고 통째로 무시된다 — 화면은 조용히
+     * auto 폭으로 떨어진다. `'30%'` 는 더 나쁘게 30px 로 읽힌다.
+     *
+     * 생략하면 기본 120px 이다. 내용이 들어가는 열은 값 길이에 맞춰 폭을 명시한다 —
+     * 폭을 주지 않은 열만 다른 열에 눌려 무너지거나 늘어난다.
+     */
+    width?: number | `${number}px`;
+    /**
+     * 고정폭 없이 남은 폭을 흡수한다 (sticky/resize 계산에서 제외).
+     *
+     * **남은 폭을 먹는 스페이서 열 하나에만 쓴다.** 내용이 들어가는 열에 주면 폭이 다른 열에
+     * 좌우돼 화면마다 달라진다 — 내용 열은 px 로 폭을 명시한다.
+     */
     autoWidth?: boolean;
-    /** 리사이즈 최소/최대 너비 (px) */
+    /**
+     * 리사이즈 하한/상한 (px). **`resizable` 로 끄는 손잡이의 이동 범위일 뿐, 레이아웃에는
+     * 관여하지 않는다** — 폭을 주지 않은 열이 이 값 안에서 잡히는 것이 아니다.
+     */
     minWidth?: number;
     maxWidth?: number;
     /** 표시 포맷 */
     format?: (value: any, row: SRow) => string;
     visible?: boolean;
-    icon?: SIconName;
-    /** 헤더 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
-    iconColor?: SColor;
+    /**
+     * 헤더 라벨 뒤 도움말 툴팁 (각 항목이 한 줄). `SKeyValueTable` 의 `field.helpText` 와 같은 역할 —
+     * 라벨만으로 뜻이 통하지 않는 컬럼의 산출 기준·단위를 설명한다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    helpText?: string[];
+    /**
+     * 라벨 뒤 필수 표시(`*`). `SKeyValueTable` 의 `field.required` 와 같은 규칙 —
+     * 그 열의 값을 반드시 채워야 하는 입력 열에만 쓴다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    required?: boolean;
+    /**
+     * 셀 값을 직접 고칠 수 있는 열. 라벨 뒤에 `pageEdit` 표식이 붙는다.
+     *
+     * **표식일 뿐 버튼이 아니다** — 실제로 고치는 UI 는 셀(`render`)이 그린다. 표식만 켜 두면
+     * 고칠 수 있다고 해 놓고 고칠 방법이 없는 열이 된다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    editable?: boolean;
+    /**
+     * 셀을 눌러 다른 화면으로 넘어가는 열. 라벨 뒤에 `pageMove` 표식이 붙는다.
+     *
+     * **표식일 뿐 버튼이 아니다** — 넘어가는 것은 셀(`render`)의 링크·클릭이 한다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    navigable?: boolean;
+    /**
+     * 정렬 가능한 열인지. 켜면 헤더 라벨 뒤에 정렬 버튼이 붙는다 — 누르는 곳은 그 버튼뿐이고
+     * 헤더 셀 전체가 클릭 영역이 되지는 않는다.
+     *
+     * 정렬 상태는 컴포넌트가 갖지 않는다 — `STable` 의 `sort` · `onSortChange` 로 주고받는다.
+     * `renderHeader` 로 헤더를 통째로 교체하면 버튼도 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    sortable?: boolean;
+    /**
+     * 셀에 무엇이 들어가는지. 좌우 여백이 여기서 갈린다 — 기본은 `text`(넓게).
+     *
+     * 자기 폭을 가진 컨트롤(`SInput`·`SNumberInput`·`SSelect` 등)이 들어가는 열은 `control` 로 준다.
+     * 텍스트와 같은 넓은 여백을 두면 컨트롤이 쓸 폭이 그만큼 줄어 같은 열 폭에서도 좁아 보인다.
+     *
+     * `SKeyValueTable` 은 `field.type` 으로 이 판정을 스스로 하지만, `STable` 의 셀은 소비 앱이 넘긴
+     * 임의의 `render` 결과라 컴포넌트가 알 수 없다. 그래서 열 단위로 받는다.
+     */
+    contentType?: 'text' | 'control';
     /** 셀 커스텀 렌더 (React 확장) — `<td>` 안쪽 내용만 교체한다 */
     render?: (row: SRow, value: any) => ReactNode;
     /**
@@ -59,6 +121,17 @@ export interface STableColumn {
     thClass?: string;
     thStyle?: CSSProperties;
 }
+/**
+ * `autoWidth` 스페이서 열은 값을 그리지 않으므로 `field` 를 생략할 수 있다.
+ * 그 밖의 열은 값 접근자가 있어야 한다.
+ */
+export type STableColumn = STableColumnBase & ({
+    autoWidth: true;
+    field?: STableColumnField;
+} | {
+    autoWidth?: false;
+    field: STableColumnField;
+});
 export interface STablePagination {
     page: number;
     rowsPerPage: number;
@@ -68,6 +141,12 @@ export interface STableStickyColumn {
     left?: number;
     right?: number;
 }
+/** 정렬 상태 — 어느 열을 어느 방향으로 정렬했는가 */
+export interface STableSort {
+    /** 정렬 기준 컬럼의 `name` */
+    name: string;
+    dir: 'asc' | 'desc';
+}
 /** STable ref 명령형 API (sd-table @Method 대응) */
 export interface STableHandle {
     /** 행 선택 여부 */
@@ -99,6 +178,19 @@ export interface STableProps {
     selectable?: boolean;
     selected?: SRow[];
     onSelectedChange?: (rows: SRow[]) => void;
+    /**
+     * 정렬 상태 (controlled). `null`·미지정이면 정렬 없음.
+     *
+     * 컴포넌트는 정렬 상태를 갖지 않는다 — 서버 정렬이면 이 값이 곧 조회 조건이고,
+     * 뒤로가기·새로고침·링크 공유로 복원돼야 하므로 진실은 URL·store 쪽에 있어야 한다.
+     * 행을 실제로 정렬하는 것도 소비 앱 몫이다 (`STable` 은 받은 순서대로 그린다).
+     */
+    sort?: STableSort | null;
+    /**
+     * 정렬 헤더 클릭 (`asc → desc → 해제` 3단). 해제되면 `null` 이 온다.
+     * 다중 정렬은 1차 안에서 지원하지 않는다.
+     */
+    onSortChange?: (sort: STableSort | null) => void;
     /** 컬럼 너비 조절 */
     resizable?: boolean;
     width?: string;
@@ -109,6 +201,16 @@ export interface STableProps {
     stickyColumn?: STableStickyColumn;
     /** border-radius 제어 */
     radius?: 'default' | 'useTop' | 'full';
+    /**
+     * 바깥 테두리. 기본은 `true`.
+     *
+     * `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 —
+     * 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다.
+     *
+     * 페이지네이션 바의 테두리와 1px 겹침(`-mt-px`)도 함께 꺼진다. 본문 테두리가 없으면 겹칠 대상이
+     * 없어, 그대로 두면 페이지네이션만 테두리를 갖고 1px 어긋난다.
+     */
+    bordered?: boolean;
     noDataLabel?: string;
     /**
      * 데이터가 없을 때 body 영역 전체를 대체하는 슬롯.
@@ -116,7 +218,14 @@ export interface STableProps {
      */
     noDataSlot?: ReactNode;
     isLoading?: boolean;
+    /** 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로) */
     dense?: boolean;
+    /**
+     * 밀도 변경 (`useDensityToggle` 로 띄운 토글을 눌렀을 때). 컴포넌트는 밀도 상태를 갖지 않는다 —
+     * `dense` 가 곧 현재 상태이고, 그 진실은 페이지에 있다. 사용자가 고른 밀도를 다음 방문까지
+     * 기억해 두는 것(로컬 저장 등)도 페이지 몫이다.
+     */
+    onDenseChange?: (dense: boolean) => void;
     /** true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 */
     noHover?: boolean;
     /** 페이지네이션 (있으면 하단 표시) */
@@ -126,6 +235,14 @@ export interface STableProps {
     useInternalPagination?: boolean;
     /** 페이지당 행 수 셀렉트 표시 */
     useRowsPerPageSelect?: boolean;
+    /**
+     * 페이지네이션 바에 밀도 토글(`좁게 보기` · `넓게 보기`) 표시.
+     *
+     * **페이지네이션이 있을 때만 나타난다** — 토글이 사는 곳이 그 바이기 때문이다.
+     * `onDenseChange` 와 함께 준다. 밀도는 컴포넌트가 갖지 않으므로, 핸들러 없이 켜면 눌러도
+     * 아무 일도 일어나지 않는다.
+     */
+    useDensityToggle?: boolean;
     rowsPerPageOption?: SSelectOption[];
     onRowsPerPageChange?: (perPage: number) => void;
     /** 가상 스크롤 */
@@ -155,3 +272,4 @@ export interface STableProps {
  * 내부 페이지네이션 + rows-per-page + 가상 스크롤 + 로딩 + dense.
  */
 export declare const STable: import("react").ForwardRefExoticComponent<STableProps & import("react").RefAttributes<STableHandle>>;
+export {};

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

@@ -1 +1 @@
-export { STable, type STableProps, type STableColumn, type STableCellContext, type STablePagination, type STableStickyColumn, type STableHandle, type SRow, } from './STable';
+export { STable, type STableProps, type STableColumn, type STableColumnField, type STableSort, type STableCellContext, type STablePagination, type STableStickyColumn, type STableHandle, type SRow, } from './STable';

package/dist/components/STabs/README.md

@@ -10,7 +10,6 @@
 |------|------|---------|-------------|
 | `value` | `string` | — | 현재 선택된 탭 value |
 | `tabs` | `STabOption[]` | — | 탭 옵션 목록 |
-| `size?` | `STabSize` | `'md'` | 탭 크기 (main 전용) |
 | `isSub?` | `boolean` | `false` | 서브 탭(밑줄형) 스타일 |
 | `vertical?` | `boolean` | `false` | 세로 배치 (sub 전용 — main 폴더형은 항상 가로) |
 | `className?` | `string` | — |  |
@@ -22,6 +21,18 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string) => void` | 탭 변경 (sdUpdate) |
 
+## Types
+
+### STabOption
+
+```ts
+export interface STabOption {
+  label: string;
+  value: string;
+  badge?: string | number;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/STabs/STabs.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { type STabSize, type STabOption } from './tabs.config';
+import { type STabOption } from './tabs.config';
 export interface STabsProps {
     /** 현재 선택된 탭 value */
     value: string;
@@ -7,8 +7,6 @@ export interface STabsProps {
     tabs: STabOption[];
     /** 탭 변경 (sdUpdate) */
     onValueChange?: (value: string) => void;
-    /** 탭 크기 (main 전용) */
-    size?: STabSize;
     /** 서브 탭(밑줄형) 스타일 */
     isSub?: boolean;
     /** 세로 배치 (sub 전용 — main 폴더형은 항상 가로) */
@@ -21,4 +19,4 @@ export interface STabsProps {
  * main = 폴더형(탭 줄에 파란 baseline, 탭은 위쪽만 둥글고 하단 테두리 없음),
  * sub = 밑줄형(선택 시 하단 라인). 뱃지(STag), 세로 배치, value 제어 + onValueChange(sdUpdate).
  */
-export declare function STabs({ value, tabs, onValueChange, size, isSub, vertical, className, style, }: STabsProps): import("react").JSX.Element;
+export declare function STabs({ value, tabs, onValueChange, isSub, vertical, className, style, }: STabsProps): import("react").JSX.Element;

package/dist/components/STabs/index.d.ts

@@ -1,2 +1,2 @@
 export { STabs, type STabsProps } from './STabs';
-export { type STabOption, type STabSize } from './tabs.config';
+export { type STabOption } from './tabs.config';

package/dist/components/STabs/tabs.config.d.ts

@@ -1,14 +1,13 @@
-export type STabSize = 'md' | 'lg';
 export interface STabOption {
     label: string;
     value: string;
     badge?: string | number;
 }
-/** main(분절형) 사이즈별 레이아웃 — size는 높이·패딩만 바꾸고 폰트는 고정 */
-export declare const TAB_MAIN_SIZE: Record<STabSize, {
+/** main(분절형) 레이아웃 */
+export declare const TAB_MAIN_SIZE: {
     height: number;
     paddingX: number;
-}>;
+};
 /** 탭 타이포 (main/sub 공통, token: typography.navigation.sm) */
 export declare const TAB_TYPOGRAPHY: {
     fontSize: number;