sellmate-design-system-react 9.0.0-beta.17 → 9.0.0-beta.19

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`에 전달되는 컨텍스트 */
@@ -53,9 +51,6 @@ interface STableColumnBase {
     /** 표시 포맷 */
     format?: (value: any, row: SRow) => string;
     visible?: boolean;
-    icon?: SIconName;
-    /** 헤더 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
-    iconColor?: SColor;
     /**
      * 헤더 라벨 뒤 도움말 툴팁 (각 항목이 한 줄). `SKeyValueTable` 의 `field.helpText` 와 같은 역할 —
      * 라벨만으로 뜻이 통하지 않는 컬럼의 산출 기준·단위를 설명한다.
@@ -63,6 +58,30 @@ interface STableColumnBase {
      * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
      */
     helpText?: string[];
+    /**
+     * 라벨 뒤 필수 표시(`*`). `SKeyValueTable` 의 `field.required` 와 같은 규칙 —
+     * 그 열의 값을 반드시 채워야 하는 입력 열에만 쓴다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    required?: boolean;
+    /**
+     * 셀 값을 직접 고칠 수 있는 열. 라벨 뒤에 `pageEdit` 표식이 붙는다.
+     *
+     * **표식일 뿐 버튼이 아니다** — 실제로 고치는 UI 는 셀(`render`)이 그린다. 표식만 켜 두면
+     * 고칠 수 있다고 해 놓고 고칠 방법이 없는 열이 된다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    editable?: boolean;
+    /**
+     * 셀을 눌러 다른 화면으로 넘어가는 열. 라벨 뒤에 `pageMove` 표식이 붙는다.
+     *
+     * **표식일 뿐 버튼이 아니다** — 넘어가는 것은 셀(`render`)의 링크·클릭이 한다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    navigable?: boolean;
     /**
      * 정렬 가능한 열인지. 켜면 헤더 라벨 뒤에 정렬 버튼이 붙는다 — 누르는 곳은 그 버튼뿐이고
      * 헤더 셀 전체가 클릭 영역이 되지는 않는다.
@@ -199,7 +218,14 @@ export interface STableProps {
      */
     noDataSlot?: ReactNode;
     isLoading?: boolean;
+    /** 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로) */
     dense?: boolean;
+    /**
+     * 밀도 변경 (`useDensityToggle` 로 띄운 토글을 눌렀을 때). 컴포넌트는 밀도 상태를 갖지 않는다 —
+     * `dense` 가 곧 현재 상태이고, 그 진실은 페이지에 있다. 사용자가 고른 밀도를 다음 방문까지
+     * 기억해 두는 것(로컬 저장 등)도 페이지 몫이다.
+     */
+    onDenseChange?: (dense: boolean) => void;
     /** true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 */
     noHover?: boolean;
     /** 페이지네이션 (있으면 하단 표시) */
@@ -209,6 +235,14 @@ export interface STableProps {
     useInternalPagination?: boolean;
     /** 페이지당 행 수 셀렉트 표시 */
     useRowsPerPageSelect?: boolean;
+    /**
+     * 페이지네이션 바에 밀도 토글(`좁게 보기` · `넓게 보기`) 표시.
+     *
+     * **페이지네이션이 있을 때만 나타난다** — 토글이 사는 곳이 그 바이기 때문이다.
+     * `onDenseChange` 와 함께 준다. 밀도는 컴포넌트가 갖지 않으므로, 핸들러 없이 켜면 눌러도
+     * 아무 일도 일어나지 않는다.
+     */
+    useDensityToggle?: boolean;
     rowsPerPageOption?: SSelectOption[];
     onRowsPerPageChange?: (perPage: number) => void;
     /** 가상 스크롤 */

package/dist/components/STextLink/README.md

@@ -11,6 +11,7 @@
 | `label?` | `string` | `''` | 레이블 |
 | `icon?` | `SIconName` | — | 좌측 아이콘 |
 | `iconColor?` | `SColor` | — | 좌측 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 |
+| `iconRotate?` | `0 \| 90 \| 180 \| 270` | — | 좌측 아이콘 회전 각도. 같은 아이콘을 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) |
 | `labelClass?` | `string` | — | 레이블 span에 추가할 클래스 |
 | `rightArrow?` | `STextLinkArrow` | `'none'` | 우측 화살표 |
 | `underline?` | `boolean` | `false` | 밑줄 여부 |
@@ -45,6 +46,7 @@ export type STextLinkSize = 'sm' | 'md' | 'lg';
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
  - [SPopover](../SPopover)
+ - [STable](../STable)
 
 ### Depends on
 
@@ -60,5 +62,6 @@ graph TD;
   SChipFilter --> STextLink
   SChipInput --> STextLink
   SPopover --> STextLink
+  STable --> STextLink
   style STextLink fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/STextLink/STextLink.d.ts

@@ -10,6 +10,8 @@ export interface STextLinkProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'o
     icon?: SIconName;
     /** 좌측 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
     iconColor?: SColor;
+    /** 좌측 아이콘 회전 각도. 같은 아이콘을 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) */
+    iconRotate?: 0 | 90 | 180 | 270;
     /** 레이블 span에 추가할 클래스 */
     labelClass?: string;
     /** 우측 화살표 */