sellmate-design-system-react 9.0.0-beta.7 → 9.0.0-beta.70

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

@@ -1,8 +1,15 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import { type SColor } from '../../lib/color';
+import { type CSSProperties, type UIEvent as ReactUIEvent, type ReactNode } from 'react';
 import { type SIconName } from '../SIcon';
 import { type SSelectOption } from '../SSelect';
 export type SRow = Record<string, any>;
+/** 오른쪽 클릭 메뉴의 항목 한 줄 */
+export interface STableContextMenuItem {
+    /** 클릭 시 `onContextMenuItemClick` 으로 돌아오는 값 */
+    value: string | number;
+    label: string;
+    icon?: SIconName;
+    disabled?: boolean;
+}
 /** `STableColumn.renderCell`에 전달되는 컨텍스트 */
 export interface STableCellContext {
     row: SRow;
@@ -20,24 +27,85 @@ 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` 표식이 붙는다.
+     *
+     * 셀에서 바로 고치는 것도, 수정 모달·바텀시트를 띄워 고치는 것도 모두 이쪽이다 —
+     * 모달은 현재 화면 **위에** 겹쳐 뜰 뿐 화면을 떠나는 것이 아니라서 `navigable` 이 아니다.
+     *
+     * **표식일 뿐 버튼이 아니다** — 실제로 고치는 UI 는 셀(`render`)이 그린다. 표식만 켜 두면
+     * 고칠 수 있다고 해 놓고 고칠 방법이 없는 열이 된다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    editable?: boolean;
+    /**
+     * 눌러서 **이 화면을 떠나** 다른 화면으로 가는 열 — 새 창·새 팝업으로 띄우거나 페이지를
+     * 이동한다. 라벨 뒤에 `pageMove` 표식이 붙는다.
+     *
+     * 모달로 처리하는 열은 화면을 떠나지 않으므로 여기에 해당하지 않는다. 모달에서 값을 고치면
+     * `editable`, 고치지 않고 보여주기만 하면 둘 다 붙이지 않는다.
+     *
+     * **표식일 뿐 버튼이 아니다** — 화면을 여는 것은 셀(`render`)의 링크·클릭이 한다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    navigable?: boolean;
+    /**
+     * 정렬 가능한 열인지. 켜면 헤더 라벨 뒤에 정렬 버튼이 붙는다 — 누르는 곳은 그 버튼뿐이고
+     * 헤더 셀 전체가 클릭 영역이 되지는 않는다.
+     *
+     * 정렬 상태는 컴포넌트가 갖지 않는다 — `STable` 의 `sort` · `onSortChange` 로 주고받는다.
+     * `renderHeader` 로 헤더를 통째로 교체하면 버튼도 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    sortable?: boolean;
     /**
      * 셀에 무엇이 들어가는지. 좌우 여백이 여기서 갈린다 — 기본은 `text`(넓게).
      *
@@ -69,6 +137,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;
@@ -78,13 +157,29 @@ export interface STableStickyColumn {
     left?: number;
     right?: number;
 }
+/** 정렬 상태 — 어느 열을 어느 방향으로 정렬했는가 */
+export interface STableSort {
+    /** 정렬 기준 컬럼의 `name` */
+    name: string;
+    dir: 'asc' | 'desc';
+}
+/** 2단 헤더의 상위 셀. columnNames는 visible 컬럼 기준으로 연속되어야 한다. */
+export interface STableHeaderGroup {
+    label?: ReactNode;
+    columnNames: string[];
+    rowSpan?: 1 | 2;
+    align?: 'left' | 'center' | 'right';
+    className?: string;
+    style?: CSSProperties;
+    render?: () => ReactNode;
+}
 /** STable ref 명령형 API (sd-table @Method 대응) */
 export interface STableHandle {
     /** 행 선택 여부 */
     isRowSelected: (row: SRow) => boolean;
     /** 주어진 행들의 전체 선택 상태 (true/false/null=indeterminate) */
     getIsAllChecked: (rows: SRow[]) => boolean | null;
-    /** 내부 페이지네이션 정보 (useInternalPagination 아니면 null) */
+    /** 내부 페이지네이션 정보 (internalPagination 아니면 null) */
     getPaginationInfo: () => {
         startIndex: number;
         endIndex: number;
@@ -93,6 +188,35 @@ export interface STableHandle {
     } | null;
     /** 컬럼 sticky 스타일 (CSS 변수 + 고정폭) */
     getStickyStyle: (colIdx: number) => CSSProperties;
+    /**
+     * 본문의 세로 스크롤 컨테이너. 본문이 슬롯으로 대체됐거나 아직 안 그려졌으면 `null`.
+     *
+     * 스크롤 위치를 읽고 되돌리거나, 표 안에서 스크롤 여지를 재야 할 때 쓴다 —
+     * **DOM 을 뒤져 컨테이너를 찾지 않는다.** 내부 구조는 예고 없이 바뀐다.
+     *
+     * ⚠️ `virtualScroll` 에서 **위치를 픽셀로 저장했다 되돌리는 것은 미덥지 않다.** 다시 그릴 때
+     * 아직 안 그려진 행은 추정 높이로 잡히므로, 실측이 쌓이기 전의 같은 `scrollTop` 이 다른 행을
+     * 가리킨다. 그 경우엔 위치가 아니라 **보고 있던 행**을 기억해 두는 편이 맞다.
+     */
+    getScrollElement: () => HTMLDivElement | null;
+    /**
+     * 지금 본문 맨 위에 걸린 행의 인덱스 (`rows` 기준). 행이 없으면 `0`.
+     *
+     * **스크롤 위치를 저장할 때는 픽셀이 아니라 이 값을 저장한다** — `virtualScroll` 에서
+     * 픽셀은 좌표계가 실측으로 움직이는 값이라, 되돌릴 때 다른 행을 가리킨다.
+     */
+    getFirstVisibleRow: () => number;
+    /**
+     * 그 행이 본문 맨 위에 오도록 스크롤한다 (`rows` 기준 인덱스, 범위를 벗어나면 잘린다).
+     *
+     * `virtualScroll` 에서는 **실측이 정착할 때까지 그 행을 계속 다시 겨냥한다** — 옮기는
+     * 시점의 좌표는 아직 추정치라 한 번만 옮기면 몇 행씩 밀린다. 사용자가 직접 스크롤하면
+     * 겨냥을 놓는다.
+     *
+     * 페이지네이션을 쓰는 표에서는 **지금 페이지에 그려진 행만** 닿는다 — 다른 페이지의
+     * 행이라면 페이지를 먼저 옮긴다.
+     */
+    scrollToRow: (index: number) => void;
     /** 가상 스크롤 총 행 수 설정 */
     setRowCount: (count: number) => void;
     /** 단일 행 선택 토글 (sd-table updateRowSelect) — onSelectedChange 발생 */
@@ -102,19 +226,81 @@ export interface STableHandle {
 }
 export interface STableProps {
     columns?: STableColumn[];
+    /** 상위 그룹 헤더. 지정하면 기존 컬럼 헤더가 두 번째 행에 렌더링된다. */
+    headerGroups?: STableHeaderGroup[];
     rows?: SRow[];
     /** 행 식별 필드 */
     rowKey?: string;
     /** 행 선택 체크박스 */
     selectable?: boolean;
+    /**
+     * 행을 드래그해서 고른다. 기본 `false`.
+     *
+     * 고르는 수단만 다를 뿐 `selectable` 과 같은 선택이다 — `selected` · `onSelectedChange` ·
+     * `isRowSelectable` 을 그대로 쓴다. 체크박스 열은 생기지 않고, 대신 고른 구간이 배경색과
+     * 바깥 테두리로 표시된다.
+     *
+     * **`selectable` 과 함께 켜면 `selectable` 이 이긴다** — 체크박스가 있는 표에서 드래그까지
+     * 걸리면 글자를 긁으려던 손이 선택을 갈아치운다. 둘 다 필요해 보이면 체크박스 쪽만 남긴다.
+     *
+     * 누른 자리가 구간의 기준점이고, 끌어간 자리까지가 구간이다. **새로 끌면 이전 선택은 풀린다** —
+     * 기존 선택에 더하려면 `Ctrl`(macOS 는 `Cmd`)을 짚고 끈다. 잠긴 행(`isRowSelectable`)은
+     * 구간 안에 있어도 그냥 지나간다.
+     *
+     * **켜 두면 셀 안의 글자를 긁어 복사할 수 없다** — 끌기가 곧 선택이라 글자 선택과 같은 손짓을
+     * 두고 다툰다. 값을 복사해 가는 표에는 켜지 않는다. 셀 안의 버튼·입력은 그대로 눌린다.
+     */
+    dragSelectable?: boolean;
+    /**
+     * 드래그 선택에서 **행을 오른쪽 클릭했을 때** 커서 자리에 뜨는 메뉴의 항목.
+     * 주지 않거나 비면 메뉴가 뜨지 않고 브라우저 기본 메뉴가 나온다.
+     *
+     * **`dragSelectable` 에서만 동작한다** — 체크박스 모드에서는 무시된다.
+     *
+     * 고르지 않은 행에서 누르면 **그 행만 고른 뒤** 열린다. 메뉴가 다룰 대상과 화면에 칠해진
+     * 것이 어긋나지 않게 하기 위함이다. 잠긴 행(`isRowSelectable`) 위에서는 열리지 않는다 —
+     * 고를 수 없는 행을 대상으로 삼을 수 없기 때문이다.
+     */
+    contextMenuItems?: STableContextMenuItem[];
+    /**
+     * 메뉴 항목을 골랐을 때. 고른 항목의 `value` 와 **그 메뉴가 다루는 행들**이 함께 온다.
+     *
+     * 행 목록은 메뉴가 열린 시점에 확정되므로 `selected` 를 따로 읽지 않아도 된다 — 오른쪽
+     * 클릭이 선택을 바꾸는 경우(고르지 않은 행)에도 바뀐 뒤의 행이 온다.
+     */
+    onContextMenuItemClick?: (value: string | number, rows: SRow[]) => void;
+    /**
+     * 이 행을 고를 수 있는가. 주지 않으면 모든 행을 고를 수 있다.
+     *
+     * 고를 수 없는 행은 체크박스가 잠기고, **전체 선택·Shift 구간 선택의 셈에서도 빠진다** —
+     * 잠긴 행이 셈에 남으면 "전부 선택됨"에 닿지 못해 헤더 체크박스가 해제 방향으로 가지 못한다.
+     *
+     * 목록에서 지워 버리는 것과 다르다. 실패 0건인 차수처럼 **자리는 보여야 하지만 대상이 될 수는
+     * 없는 행**에 쓴다. 아예 대상이 아니라면 `rows` 에서 거르는 편이 낫다.
+     *
+     * 잠금은 그리기 시점의 판정일 뿐이라, 이미 `selected` 에 든 행이 나중에 잠겨도 DS 가 빼지
+     * 않는다(제어 상태를 말없이 바꾸지 않는다). 다만 헤더의 전체 해제로는 걷어낼 수 있다.
+     */
+    isRowSelectable?: (row: SRow) => 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;
     height?: string;
-    /** @deprecated 헤더는 항상 세로 스크롤에서 제외되어 고정됩니다 (body만 세로 스크롤) */
-    stickyHeader?: boolean;
     /** 고정할 좌/우 컬럼 수 */
     stickyColumn?: STableStickyColumn;
     /** border-radius 제어 */
@@ -129,30 +315,63 @@ export interface STableProps {
      * 없어, 그대로 두면 페이지네이션만 테두리를 갖고 1px 어긋난다.
      */
     bordered?: boolean;
-    noDataLabel?: string;
+    emptyLabel?: string;
     /**
      * 데이터가 없을 때 body 영역 전체를 대체하는 슬롯.
-     * 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다.
+     * 지정하면 `emptyLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다.
+     */
+    emptySlot?: ReactNode;
+    loading?: boolean;
+    /**
+     * 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로).
+     *
+     * **시작 밀도이자 밀도 토글의 스위치다.** 켜면 하단 바 우측에 `좁게 보기` · `넓게 보기` 토글이
+     * 붙는다 — 페이지네이션이 없으면 이 바를 토글만 담아 그린다.
+     *
+     * 누른 뒤의 밀도는 테이블이 내부 상태로 들고 가므로 `onDenseChange` 를 받지 않아도 토글은
+     * 동작하고, 넓게 본 뒤에도 토글은 그대로 남는다(붙일지는 이 prop 이 정한다). 이 prop 값이
+     * 바뀌면 내부 밀도도 그 값으로 맞춰진다.
      */
-    noDataSlot?: ReactNode;
-    isLoading?: boolean;
     dense?: boolean;
-    /** true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 */
-    noHover?: boolean;
+    /**
+     * 밀도 변경 (하단 바의 밀도 토글을 눌렀을 때). 표시는 테이블이 알아서 바꾸므로 받지 않아도 되고,
+     * 사용자가 고른 밀도를 다음 방문까지 기억해 두려는(로컬 저장 등) 페이지만 받으면 된다.
+     */
+    onDenseChange?: (dense: boolean) => void;
+    /** 행에 마우스를 올렸을 때 hover 배경(grey_05)을 표시할지. 기본 `true` — `false` 면 표시하지 않는다 */
+    hoverable?: boolean;
     /** 페이지네이션 (있으면 하단 표시) */
     pagination?: STablePagination;
     onPageChange?: (page: number) => void;
     /** 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) */
-    useInternalPagination?: boolean;
+    internalPagination?: boolean;
     /** 페이지당 행 수 셀렉트 표시 */
-    useRowsPerPageSelect?: boolean;
+    showRowsPerPageSelect?: boolean;
     rowsPerPageOption?: SSelectOption[];
     onRowsPerPageChange?: (perPage: number) => void;
     /** 가상 스크롤 */
-    useVirtualScroll?: boolean;
+    virtualScroll?: boolean;
+    /**
+     * 행 높이의 **출발점**(px). 미지정이면 밀도에 따라 44 / 32.
+     *
+     * 행마다 높이가 달라도 된다 — 화면에 나온 행은 실제 높이를 재서 덮으므로, 이 값은
+     * **아직 안 그려진 행의 추정치**이자 행의 최소 높이일 뿐이다. 실측이 쌓일수록 뒤쪽
+     * 추정도 그 평균으로 수렴한다.
+     *
+     * 그래서 높이가 제각각인 표에서 "가장 흔한 높이"를 넣어 두면 충분하다. 값이 실제와
+     * 멀수록 아직 안 그려진 구간의 스크롤바 길이만 덜 정확할 뿐, 그리는 위치는 어긋나지 않는다.
+     */
     rowHeight?: number;
     virtualBuffer?: number;
     virtualEndThreshold?: number;
+    /**
+     * 본문이 스크롤될 때. **실제 스크롤에만 울린다** — 행 수·컬럼 폭·로딩이 바뀌어
+     * 내부에서 위치를 다시 잴 때는 오지 않는다.
+     *
+     * `onVirtualUpdate` 는 그리는 창이 바뀔 때만 오므로 그 사이 스크롤을 알 수 없다.
+     * 스크롤 위치를 읽어 두었다 되돌리는 것처럼 **위치 자체가 필요하면** 이쪽을 쓴다.
+     */
+    onScroll?: (event: ReactUIEvent<HTMLDivElement>) => void;
     onVirtualUpdate?: (range: {
         from: number;
         to: number;
@@ -175,3 +394,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 STableHeaderGroup, type STableCellContext, type STablePagination, type STableStickyColumn, type STableHandle, type SRow, } from './STable';

package/dist/components/STableBar/README.md

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

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

@@ -1,5 +1,12 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-export interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /**
+     * 건수 앞에 서는 제목 슬롯. 이 바가 무엇의 목록인지 말한다.
+     *
+     * 문자열을 주면 바의 기본 타이포로 그린다. 다른 모양이 필요하면 요소를 통째로 넘긴다 —
+     * 슬롯이라 안에 무엇이 오든 자리만 잡아 준다.
+     */
+    title?: ReactNode;
     /** 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동) */
     total?: number;
     /** 선택 건수. 지정하면 "N건 선택" 을 표시한다 */

package/dist/components/STabs/README.md

@@ -10,8 +10,7 @@
 |------|------|---------|-------------|
 | `value` | `string` | — | 현재 선택된 탭 value |
 | `tabs` | `STabOption[]` | — | 탭 옵션 목록 |
-| `size?` | `STabSize` | `'md'` | 탭 크기 (main 전용) |
-| `isSub?` | `boolean` | `false` | 서브 탭(밑줄형) 스타일 |
+| `sub?` | `boolean` | `false` | 서브 탭(밑줄형) 스타일 |
 | `vertical?` | `boolean` | `false` | 세로 배치 (sub 전용 — main 폴더형은 항상 가로) |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -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,10 +7,8 @@ export interface STabsProps {
     tabs: STabOption[];
     /** 탭 변경 (sdUpdate) */
     onValueChange?: (value: string) => void;
-    /** 탭 크기 (main 전용) */
-    size?: STabSize;
     /** 서브 탭(밑줄형) 스타일 */
-    isSub?: boolean;
+    sub?: boolean;
     /** 세로 배치 (sub 전용 — main 폴더형은 항상 가로) */
     vertical?: boolean;
     className?: string;
@@ -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, sub, 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;

package/dist/components/STag/README.md

@@ -11,11 +11,60 @@
 | `shape?` | `STagShape` | `'square'` | 모양 |
 | `size?` | `STagSize` | `'sm'` | 크기 |
 | `color?` | `STagColor` | `'grey'` | 색상 |
+| `deep?` | `boolean` | `false` | 진한 배경(deep) 버전. 배경에 강조색을 채우고 텍스트·아이콘을 반전색으로 쓴다 |
 | `label?` | `string` | `''` | 레이블 텍스트 |
 | `icon?` | `SIconName` | — | 아이콘명 |
 | `iconLeft?` | `boolean` | `true` | 아이콘을 레이블 왼쪽에 배치 |
 | `width?` | `string \| number` | — | 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기 |
 
+## Types
+
+### STagShape
+
+```ts
+export type STagShape = (typeof TAG_SHAPES)[number];
+```
+
+### STagSize
+
+```ts
+export type STagSize = (typeof TAG_SIZES)[number];
+```
+
+### STagColor
+
+```ts
+export type STagColor = (typeof TAG_COLORS)[number];
+```
+
+### TAG_SHAPES
+
+```ts
+export const TAG_SHAPES = ['square', 'pill'] as const;
+```
+
+### TAG_SIZES
+
+```ts
+export const TAG_SIZES = ['xs', 'sm', 'md'] as const;
+```
+
+### TAG_COLORS
+
+```ts
+export const TAG_COLORS = [
+  'grey',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'darkblue',
+  'indigo',
+  'purple',
+] as const;
+```
+
 ## Dependencies
 
 ### Used by
@@ -24,6 +73,9 @@
  - [SConfirmModal](../SConfirmModal)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
+ - [SLauncherListBox](../SLauncherListBox)
+ - [SRadioCard](../SRadioCard)
+ - [SSystemActionButton](../SSystemActionButton)
  - [STabs](../STabs)
  - [STextLink](../STextLink)
 
@@ -40,6 +92,9 @@ graph TD;
   SConfirmModal --> STag
   SGhostButton --> STag
   SGnb --> STag
+  SLauncherListBox --> STag
+  SRadioCard --> STag
+  SSystemActionButton --> STag
   STabs --> STag
   STextLink --> STag
   style STag fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/STag/STag.d.ts

@@ -8,6 +8,8 @@ export interface STagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'
     size?: STagSize;
     /** 색상 */
     color?: STagColor;
+    /** 진한 배경(deep) 버전. 배경에 강조색을 채우고 텍스트·아이콘을 반전색으로 쓴다 */
+    deep?: boolean;
     /** 레이블 텍스트 */
     label?: string;
     /** 아이콘명 */
@@ -20,6 +22,6 @@ export interface STagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'
 /**
  * STag — sd-tag 포팅.
  * Stencil의 `name`(예: square_sm_grey) 프리셋을 shape/size/color 세 prop으로 분리.
- * 색상은 컴포넌트 토큰 `--cmp-tag-<color>-{bg,content}` 참조.
+ * 색상은 컴포넌트 토큰 `--cmp-tag-<color>-{bg,content}`, deep 은 `--cmp-tag-<color>-deep-*` 참조.
  */
 export declare const STag: import("react").ForwardRefExoticComponent<STagProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/STag/tag.config.d.ts

@@ -1,6 +1,6 @@
 export declare const TAG_SHAPES: readonly ["square", "pill"];
 export declare const TAG_SIZES: readonly ["xs", "sm", "md"];
-export declare const TAG_COLORS: readonly ["grey", "red", "orange", "yellow", "green", "blue", "darkblue", "indigo"];
+export declare const TAG_COLORS: readonly ["grey", "red", "orange", "yellow", "green", "blue", "darkblue", "indigo", "purple"];
 export type STagShape = (typeof TAG_SHAPES)[number];
 export type STagSize = (typeof TAG_SIZES)[number];
 export type STagColor = (typeof TAG_COLORS)[number];

package/dist/components/STextLink/README.md

@@ -11,8 +11,10 @@
 | `label?` | `string` | `''` | 레이블 |
 | `icon?` | `SIconName` | — | 좌측 아이콘 |
 | `iconColor?` | `SColor` | — | 좌측 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 |
-| `labelClass?` | `string` | — | 레이블 span에 추가할 클래스 |
+| `iconRotate?` | `0 \| 90 \| 180 \| 270` | — | 좌측 아이콘 회전 각도. 같은 아이콘을 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) |
+| `labelClassName?` | `string` | — | 레이블 span에 추가할 클래스 |
 | `rightArrow?` | `STextLinkArrow` | `'none'` | 우측 화살표 |
+| `rightArrowRotate?` | `0 \| 90 \| 180 \| 270` | — | 우측 화살표 회전 각도. 같은 화살표를 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) |
 | `underline?` | `boolean` | `false` | 밑줄 여부 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `size?` | `STextLinkSize` | `'sm'` | 크기 |
@@ -24,6 +26,20 @@
 |-------|------|-------------|
 | `onClick` | `() => void` |  |
 
+## Types
+
+### STextLinkArrow
+
+```ts
+export type STextLinkArrow = 'none' | 'chevron' | 'caret';
+```
+
+### STextLinkSize
+
+```ts
+export type STextLinkSize = 'sm' | 'md' | 'lg';
+```
+
 ## Dependencies
 
 ### Used by
@@ -31,6 +47,7 @@
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
  - [SPopover](../SPopover)
+ - [STable](../STable)
 
 ### Depends on
 
@@ -46,5 +63,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,10 +10,14 @@ 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;
+    labelClassName?: string;
     /** 우측 화살표 */
     rightArrow?: STextLinkArrow;
+    /** 우측 화살표 회전 각도. 같은 화살표를 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) */
+    rightArrowRotate?: 0 | 90 | 180 | 270;
     /** 밑줄 여부 */
     underline?: boolean;
     /** 비활성 */