sellmate-design-system-react 9.0.0-beta.91 → 9.0.0-beta.93

package/AGENTS.md

@@ -533,6 +533,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 정해진 범위 안에서 수치 하나·구간을 끌어서 고르게 한다 | `SSlider` | §3-7-16 |
 | 바코드를 스캔해 받는다 | `SBarcodeInput` | |
 | 목록에서 하나 고르게 한다 | `SSelect` | §3-7-2 |
+| 계층(카테고리 > 세부분류)을 접고 펴며 드롭다운에서 고르게 한다 | `SSelect` `type="tree"`·`"multi_tree"` | §3-7-2 — 계층을 늘 펼쳐 보여도 되면 `default_depth`·`multi_depth` |
 | 선택지를 항상 펼쳐 두고 하나 고르게 한다 | `SRadioGroup` | §3-7-2 |
 | 버튼 모양으로 모드를 하나 고르게 한다 | `SRadioButton` | §3-7-2 |
 | 선택지마다 설명이 붙어 한 줄로는 안 된다 | `SRadioCardGroup` | §3-7-2 |
@@ -569,13 +570,14 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 대화의 메시지 한 건을 보여준다 | `SChatMessage` | |
 | 대화 중간에 시스템이 알리는 사실을 끼운다 (상담사 배정·대화 종료 등) | `SChatSystemMessage` | 사람이 보낸 말이면 `SChatMessage` |
 | 나열한 항목을 펼쳐 하위 내용을 보여준다 | `SExpansionList` + `SExpansionItem` | §3-7-7 |
-| 부모-자식 계층을 들여쓰기로 보여준다 | `STree` | §3-7-7 |
+| 부모-자식 계층을 들여쓰기로 보여준다 | `STree` | §3-7-7 — 폼 값으로 드롭다운에서 고르는 것이면 `SSelect` `type="tree"` |
 | 계층을 이루는 행들을 여러 열로 보여준다 (카테고리 > 상품 > 옵션) | `STreeTable` | §3-7-7 — 한 줄에 라벨 하나면 `STree` |
 | 사용자가 순서를 드래그로 바꾸게 한다 | `SDraggableList` + `SDraggableItem` | §3-7-6 |
 | 날짜별 일정을 한 달치 격자로 펼쳐 보여준다 | `SCalendarBoard` | §3-7-4 |
 | 항목끼리 크기를 눈으로 견주게 한다 (채널별 매출·상품별 판매량) | `SBarChart` | 정확한 값을 읽어야 하면 `STable` — 그래프는 "어느 쪽이 큰가" 를 답하지 "얼마인가" 를 답하지 않는다 |
 | 순서가 있는 항목의 **추이**를 보여준다 (일·월별 매출 흐름, 기간별 방문 수) | `SLineChart` | 항목 순서에 뜻이 없으면(채널별·상품별) `SBarChart` — 선은 "이어진다" 는 뜻을 덤으로 얹어, 순서 없는 항목을 이으면 없는 흐름을 만든다. 항목이 대여섯 개 안쪽이고 크기를 견주는 것이 목적이면 막대가 낫다 |
 | 여러 항목의 추이를 **합계와 함께** 보여준다 (채널별 매출이 쌓여 전체가 되는 흐름) | `SLineChart stacked area` | 합계가 뜻을 갖는 값일 때만 쌓는다. 음수가 섞이거나 더해서 뜻이 없는 값(비율·평균)은 쌓지 말고 겹쳐 그린다 |
+| 항목 이름이 길어 가로축에서 서로 겹친다 (상품명·채널명, `2026-10-01` 같은 날짜) | 순서 없는 항목은 `SBarChart direction="horizontal"` — 이름 열이 가장 긴 이름에 맞춰 넓어진다. 순서가 있어 세로 축을 지켜야 하면(날짜순 막대·`SLineChart`) `rotateCategoryLabels` | 이름이 짧아 겹치지 않으면 켜지 않는다 — 켜면 늘 기울어 읽기만 나빠진다. 기울여도 너무 긴 이름은 차트가 말줄임하고 전체 이름은 툴팁에 뜬다. 말줄임 폭·각도를 직접 주지 않는다. 나란히 놓인 차트는 켜고 끄기를 맞춰야 그림 높이가 같다 |
 | 항목의 크기와 **그 안의 구성**을 함께 보여준다 (주문 상태별 내역, 유입 경로별 몫) | `SBarChart stacked` | 계열끼리 견주는 것이 목적이면 `stacked` 없이 나란히 세운다. 더해서 뜻이 없는 값(비율·평균)은 쌓지 않는다 — 합계 라벨이 거짓말이 된다 |
 | 한 시점의 **전체를 몇 개의 몫으로** 나눠 보여준다 (채널별 매출 비중, 회원 등급 구성) | `SPieChart` | 조각이 대여섯 개를 넘거나 몫끼리 크기를 견주는 것이 목적이면 `SBarChart` — 사람은 각도보다 길이를 정확히 견준다. 순서가 있는 추이(월별)는 몫이 아니라 흐름이라 `SLineChart`. 0·음수는 그려지지 않으므로 증감은 원으로 나타내지 않는다. 조각은 큰 순으로 넘긴다. 폭은 부모를 따르고 그림은 그 폭의 정사각형이다 — 폭이 필요하면 `className` 으로 폭만 주고 높이는 주지 않는다 (`SDonutChart` 도 같다) |
 | 한 시점의 전체를 몫으로 나누되 **가운데가 빈 고리 모양**으로 보여준다 (시안이 도넛일 때) | `SDonutChart` | 쓰임·데이터 규칙은 `SPieChart` 와 같고 모양만 다르다 — 시안이 정한 쪽을 쓴다. **구멍에 합계·라벨을 겹쳐 올리지 않는다.** 합계 같은 값이 필요하면 차트 바깥(카드 제목·요약 값)에 적는다. 여러 기간에 걸친 구성 변화는 원을 여러 개 늘어놓지 말고 `SBarChart stacked` |
@@ -1768,9 +1770,25 @@ tableRef.current.scrollToRow(row);                  // 복원
 - 카드 안에 상태 배지를 넣으려면 `tag` 슬롯에 `STag` 를 준다. 라벨 문자열에 "(추천)" 처럼 섞어 쓰지 않는다.
 - **카드처럼 생겼다고 `SCard`/`SSectionHeaderCard` 로 감싸지 않는다.** `SRadioCard` 자체가 완결된 요소이고, 나열 간격은 `SRadioCardGroup` 의 `direction` 이 맞춘다 (§2-2).
 
+##### 후보에 상하 관계가 있으면 — depth vs tree
+
+계층은 `options` 의 `children` 으로 만든다. 평평한 `default`·`multi` 에 분류명을 라벨에 섞어 늘어놓지 않는다. 남는 선택은 **계층을 어떻게 보여주는가**와 **그룹이 값이 되는가**다.
+
+| 상황 | `type` |
+| --- | --- |
+| 그룹이 몇 개 안 돼 늘 펼쳐 둬도 한눈에 읽힌다. 그룹은 분류 헤더일 뿐 값이 아니다 | `default_depth` · `multi_depth` |
+| 그룹·단계가 많아 다 펼치면 목록이 길어진다 — 접어 두고 필요한 갈래만 편다 | `tree` · `multi_tree` |
+| **그룹 자체도 값**이다 (예: "패션의류" 전체를 하나의 조건으로 고른다) — 단일 선택 | `tree` |
+
+- **값에 무엇이 담기는가.** `default_depth`·`multi_depth`·`multi_tree` 는 언제나 **리프만** 담긴다 — `multi_tree`·`multi_depth` 의 그룹 체크박스는 그 아래 리프를 한꺼번에 넣고 뺄 뿐, 그룹의 `value` 는 값이 되지 않는다. 그룹의 `value` 가 값으로 오는 것은 `tree` 뿐이다.
+- **펼침 상태는 `SSelect` 가 쥔다.** 열 때마다 선택값을 품은 그룹이 펼쳐지고, 검색 중에는 걸린 줄이 보이도록 결과를 전부 펼친다. 앱이 펼칠 그룹을 따로 들고 있지 않는다.
+- 그룹의 `disabled` 는 그 줄의 선택만 막는다 — 마우스(화살표)로도 키보드(→)로도 접고 펴기는 되므로 아래의 고를 수 있는 자식에 닿는 길은 남는다.
+- 하위가 전부 비활성이면 `multi_tree`·depth 타입은 그룹도 함께 잠그므로 앱이 어미에 `disabled` 를 다시 달 필요가 없다. `tree` 는 그룹 자체가 값이라 하위가 막혀도 그룹은 고를 수 있다 — 그룹까지 막으려면 그룹에 `disabled` 를 직접 준다.
+- 드롭다운 없이 화면에 계층을 펼쳐 두고 여러 개를 체크하게 하는 것이면 `SSelect` 가 아니라 `STree` 다 (§3-7-7).
+
 ##### 여러 개 고른 값을 칩으로 보여줄 때 — `valueDisplay="chip"`
 
-- **`type="multi"`·`"multi_depth"` 에서 `valueDisplay="chip"` 을 주면** 선택값이 트리거에 칩으로 뜨고, 칩의 × 로 하나씩 뺄 수 있다. 기본(`text`)은 라벨을 쉼표로 이어 한 줄로 말줄임한다. 고른 값 하나하나를 확인하고 바로 빼야 하는 자리면 `chip`, 몇 개 골랐는지만 보이면 되는 조회 필터면 `text` 를 쓴다.
+- **`type="multi"`·`"multi_depth"`·`"multi_tree"` 에서 `valueDisplay="chip"` 을 주면** 선택값이 트리거에 칩으로 뜨고, 칩의 × 로 하나씩 뺄 수 있다. 기본(`text`)은 라벨을 쉼표로 이어 한 줄로 말줄임한다. 고른 값 하나하나를 확인하고 바로 빼야 하는 자리면 `chip`, 몇 개 골랐는지만 보이면 되는 조회 필터면 `text` 를 쓴다.
 - **후보가 정해진 목록에서 고르는 것이면 `SSelect` 의 `chip` 이고, 사용자가 값을 직접 타이핑해 쌓는 것이면 `SChipInput` 이다.** 목록에서 고른 값을 `SChipInput` 에 옮겨 담거나, `SSelect` 옆에 `SChip` 을 따로 나열해 선택값을 흉내 내지 않는다.
 - **단일 선택 type 에는 주지 않는다.** 무시되고 `text` 로 보인다. 단일 선택의 값 비우기는 `clearable` 이 맡는다.
 - 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. 높이·칩 간격은 `SSelect` 가 토큰으로 넣는다 — 직접 주지 않는다.
@@ -1888,6 +1906,13 @@ useEffect(() => {
 
 **`SKeyValueTable` 안에서는 필드마다 `maxWidth` 를 주지 않는다.** 표 안에서 이 상한이 거슬리는 이유는 대개 "같은 행의 다른 필드와 오른쪽 끝이 어긋난다" 이고, 그건 표 전체의 문제다. 표의 `fieldWidth="fill"` 로 한 번에 정한다 (§4-3). 그 표에서 한 필드만 예외로 둘 때만 `options.maxWidth` 를 쓴다.
 
+##### 시간 피커 — 분 간격은 `minuteStep`, 범위 순서는 `rangeOrder`
+
+`STimePicker`·`STimeRangePicker` 는 `[오전/오후] | 시 | 분` 리스트에서 고른다 (직접 타이핑하지 않는다).
+
+- **분 간격은 `minuteStep` 으로 정한다.** 분 리스트에 그 간격의 분만 나열되므로, 고른 값을 앱에서 다시 반올림하거나 `rules` 로 간격을 검사하지 않는다.
+- **`STimeRangePicker` 의 "종료가 시작보다 이르면 안 된다" 는 앱이 검증하지 않는다.** 기본 `rangeOrder="strict"` 가 종료 리스트에서 그 시각을 비활성으로 막는다. 자정을 넘는 범위(야간 근무 22:00~02:00 등)를 받아야 할 때만 `rangeOrder="allow-cross-day"` 를 준다.
+
 ##### 값을 지울 수 있게 하려면 `clearable`
 
 `SSelect` · `SDatePicker` · `SDateRangePicker` · `STimePicker` · `STimeRangePicker` 가 같은 규칙으로 갖는다. 값이 있을 때만 지우기 버튼이 나타나고, 누르면 **`onValueChange` 로 `null` 이 온다** (빈 문자열이 아니다). 받는 쪽 상태도 `null` 을 담을 수 있어야 한다.

package/dist/components/SBarChart/README.md

@@ -20,6 +20,7 @@
 | `tickCount?` | `number` | `8` | 값 축 눈금 개수 |
 | `barSize?` | `number` | `BAR_SIZE_MAX` | 막대 두께 상한(px, 24~80). 낮추면 좌우 여백 상한도 같은 비율로 따라 내려온다 |
 | `showValueLabel?` | `boolean` | `true` | 막대마다 값을 적는다 |
+| `rotateCategoryLabels?` | `boolean` | `false` | 항목 이름을 -45° 기울인다. 이름이 막대 묶음 폭보다 길어 서로 겹칠 때 쓴다. 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다. 이름이 아주 길면 기울이기보다 `direction='horizontal'` 이 먼저다. 세로 막대에서만 쓴다 — 가로 막대는 이름 열이 가장 긴 이름에 맞춰 넓어지므로 무시한다 |
 | `showLegend?` | `boolean` | `true` | 범례를 보인다 |
 | `legendPosition?` | `SBarChartLegendPosition` | `'top'` | 범례 위치 |
 | `showTooltip?` | `boolean` | `true` | 막대에 마우스를 올리면 값 상자를 띄운다 |

package/dist/components/SBarChart/SBarChart.d.ts

@@ -70,6 +70,13 @@ export interface SBarChartProps {
     barSize?: number;
     /** 막대마다 값을 적는다 */
     showValueLabel?: boolean;
+    /**
+     * 항목 이름을 -45° 기울인다. 이름이 막대 묶음 폭보다 길어 서로 겹칠 때 쓴다.
+     * 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다.
+     * 이름이 아주 길면 기울이기보다 `direction='horizontal'` 이 먼저다.
+     * 세로 막대에서만 쓴다 — 가로 막대는 이름 열이 가장 긴 이름에 맞춰 넓어지므로 무시한다
+     */
+    rotateCategoryLabels?: boolean;
     /** 범례를 보인다 */
     showLegend?: boolean;
     /** 범례 위치 */

package/dist/components/SBarcodeInput/README.md

@@ -63,6 +63,7 @@ export type SBarcodeInputSize = SFieldSize;
 
 - [SField](../SField)
 - [SGhostButton](../SGhostButton)
+- [STag](../STag)
 
 ### Graph
 
@@ -70,5 +71,6 @@ export type SBarcodeInputSize = SFieldSize;
 graph TD;
   SBarcodeInput --> SField
   SBarcodeInput --> SGhostButton
+  SBarcodeInput --> STag
   style SBarcodeInput fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SCheckbox/README.md

@@ -36,6 +36,7 @@ export type SCheckboxValue = boolean | unknown[] | null;
 ### Used by
 
  - [SKeyValueTable](../SKeyValueTable)
+ - [SSelect](../SSelect)
  - [STable](../STable)
  - [STree](../STree)
 
@@ -49,6 +50,7 @@ export type SCheckboxValue = boolean | unknown[] | null;
 graph TD;
   SCheckbox --> SIcon
   SKeyValueTable --> SCheckbox
+  SSelect --> SCheckbox
   STable --> SCheckbox
   STree --> SCheckbox
   style SCheckbox fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SGhostButton/README.md

@@ -66,6 +66,7 @@ export type SGhostButtonIntent =
  - [SPage](../SPage)
  - [SPopover](../SPopover)
  - [SSearchInput](../SSearchInput)
+ - [SSelect](../SSelect)
  - [STable](../STable)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
@@ -103,6 +104,7 @@ graph TD;
   SPage --> SGhostButton
   SPopover --> SGhostButton
   SSearchInput --> SGhostButton
+  SSelect --> SGhostButton
   STable --> SGhostButton
   STimePicker --> SGhostButton
   STimeRangePicker --> SGhostButton

package/dist/components/SGnbSystem/README.md

@@ -52,7 +52,7 @@ export interface SGnbSystemAlert {
   /** 라벨 텍스트. 기본 `'알림'` */
   label?: string;
   /**
-   * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수가 붙는다.
+   * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수 배지가 붙는다.
    * 개수를 적을 가로가 모자란 자리(접힌 레일 · 기본 폭보다 좁게 줄인 판)에서는 점 배지로 바뀐다.
    * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
    */
@@ -154,7 +154,9 @@ export interface SGnbSystemAccount {
  * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
  *   domainTag.typography      → typo-body-sm-medium   (12/500/20)
  *   item.label.typography     → typo-body-sm-semibold (12/600/20)
- *   alertButton.count         → typo-body-md-bold     (13/700/22)
+ *
+ * 알림 개수는 글자가 아니라 배지(`STag` xs · deep)로 그린다 — 배경·글자색·치수는 태그 토큰
+ * (`--cmp-tag-*`)이 쥔다.
  */
 
 /** 색상(표면). light = 흰 면, dark = 오션블루 면. GNB 의 color 를 그대로 따라간다 */
@@ -170,6 +172,7 @@ export const GNB_SYSTEM_COLORS = ['light', 'dark'] as const;
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
 - [SSystemActionButton](../SSystemActionButton)
+- [STag](../STag)
 - [STooltip](../STooltip)
 
 ### Graph
@@ -181,6 +184,7 @@ graph TD;
   SGnbSystem --> SIcon
   SGnbSystem --> SPortal
   SGnbSystem --> SSystemActionButton
+  SGnbSystem --> STag
   SGnbSystem --> STooltip
   style SGnbSystem fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SGnbSystem/SGnbSystem.d.ts

@@ -23,7 +23,7 @@ export interface SGnbSystemAlert {
     /** 라벨 텍스트. 기본 `'알림'` */
     label?: string;
     /**
-     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수가 붙는다.
+     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수 배지가 붙는다.
      * 개수를 적을 가로가 모자란 자리(접힌 레일 · 기본 폭보다 좁게 줄인 판)에서는 점 배지로 바뀐다.
      * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
      */
@@ -156,8 +156,8 @@ export interface SGnbSystemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
  * 접힌 패널은 렌더되지 않으므로, 접힌 상태에서도 닿아야 하는 것은 SGnb 의 `foldedTop`·`foldedFooter` 에 둔다.
  * 상단바는 접어도 남으므로 `top` 에는 접힘 형태가 없다.
  *
- * `alert.count` 가 1 이상이면 벨이 울리는 아이콘(`bellRinging`)과 강조색으로 바뀐다 — light 는 파랑,
- * 어두운 면은 노랑(토큰이 정한다). 0 이거나 없으면 조용한 벨(`bell`)에 기본 색이다.
+ * `alert.count` 가 1 이상이면 벨이 울리는 아이콘(`bellRinging`)과 강조색으로 바뀌고 개수 배지가 붙는다 —
+ * light 는 파랑 배지에 흰 글자, 어두운 면은 노랑 배지에 검은 글자(토큰이 정한다). 0 이거나 없으면 조용한 벨(`bell`)에 기본 색이다.
  *
  * 안내 툴팁(`alert.tooltip`)은 문구를 받은 동안 떠 있다가 알림을 누르거나 커서를 빼면 닫힌다.
  * 다시 띄우는 신호는 문구가 **없음 → 있음** 으로 바뀌는 것이라, 같은 문구도 비웠다 다시 넘기면

package/dist/components/SGnbSystem/gnbSystem.config.d.ts

@@ -13,7 +13,9 @@ import type { SSystemActionButtonColor } from '../SSystemActionButton';
  * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
  *   domainTag.typography      → typo-body-sm-medium   (12/500/20)
  *   item.label.typography     → typo-body-sm-semibold (12/600/20)
- *   alertButton.count         → typo-body-md-bold     (13/700/22)
+ *
+ * 알림 개수는 글자가 아니라 배지(`STag` xs · deep)로 그린다 — 배경·글자색·치수는 태그 토큰
+ * (`--cmp-tag-*`)이 쥔다.
  */
 /** 색상(표면). light = 흰 면, dark = 오션블루 면. GNB 의 color 를 그대로 따라간다 */
 export declare const GNB_SYSTEM_COLORS: readonly ["light", "dark"];
@@ -48,7 +50,7 @@ export interface GnbSystemColorTokens {
     domainText: string;
     /** 알림이 있을 때의 벨 글리프색 */
     alertIcon: string;
-    /** 알림 개수(펼침) · 점 배지(접힘) 색 */
+    /** 점 배지(접힘·좁은 판) 색 */
     alertCount: string;
     /** 알림이 있을 때의 hover 배경. 없으면 행 기본 hover 를 쓴다 */
     alertHoverBg?: string;
@@ -73,7 +75,7 @@ export interface GnbSystemTopColorTokens {
     domainText: string;
     /** 알림이 있을 때의 벨 글리프색 */
     alertIcon: string;
-    /** 알림 개수 색 */
+    /** 점 배지 색 (상단바는 점 배지를 쓰지 않지만 색표를 패널과 맞춰 둔다) */
     alertCount: string;
     /** 알림이 있을 때의 hover 배경. 없으면 행 기본 hover 를 쓴다 */
     alertHoverBg?: string;

package/dist/components/SIcon/README.md

@@ -48,6 +48,7 @@
  - [SLauncherListBox](../SLauncherListBox)
  - [SListItem](../SListItem)
  - [SLoadingModal](../SLoadingModal)
+ - [SMeatballButton](../SMeatballButton)
  - [SNumberInput](../SNumberInput)
  - [SPagination](../SPagination)
  - [SPopover](../SPopover)
@@ -96,6 +97,7 @@ graph TD;
   SLauncherListBox --> SIcon
   SListItem --> SIcon
   SLoadingModal --> SIcon
+  SMeatballButton --> SIcon
   SNumberInput --> SIcon
   SPagination --> SIcon
   SPopover --> SIcon

package/dist/components/SInput/README.md

@@ -57,6 +57,7 @@
 
 - [SField](../SField)
 - [SGhostButton](../SGhostButton)
+- [STag](../STag)
 
 ### Graph
 
@@ -64,6 +65,7 @@
 graph TD;
   SInput --> SField
   SInput --> SGhostButton
+  SInput --> STag
   SEditor --> SInput
   SKeyValueTable --> SInput
   style SInput fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SLineChart/README.md

@@ -22,6 +22,7 @@
 | `tickCount?` | `number` | `8` | 값 축 눈금 개수 |
 | `showPoint?` | `boolean` | `true` | 데이터 지점마다 점을 찍는다. 꺼도 짚은 항목의 점은 뜬다 |
 | `showValueLabel?` | `boolean` | `false` | 점마다 값을 적는다. 기본은 끔 — 선 그래프는 항목이 많은 데이터에 쓰는 일이 잦아 숫자가 서로 붙는다. 항목이 대여섯 개 안쪽일 때만 켠다 |
+| `rotateCategoryLabels?` | `boolean` | `false` | 항목 이름을 -45° 기울인다. 이름이 점 간격보다 길어 서로 겹칠 때 쓴다. 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다 |
 | `showLegend?` | `boolean` | `true` | 범례를 보인다 |
 | `legendPosition?` | `SLineChartLegendPosition` | `'top'` | 범례 위치 |
 | `showTooltip?` | `boolean` | `true` | 항목에 마우스를 올리면 값 상자를 띄운다 |

package/dist/components/SLineChart/SLineChart.d.ts

@@ -78,6 +78,11 @@ export interface SLineChartProps {
      * 숫자가 서로 붙는다. 항목이 대여섯 개 안쪽일 때만 켠다
      */
     showValueLabel?: boolean;
+    /**
+     * 항목 이름을 -45° 기울인다. 이름이 점 간격보다 길어 서로 겹칠 때 쓴다.
+     * 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다
+     */
+    rotateCategoryLabels?: boolean;
     /** 범례를 보인다 */
     showLegend?: boolean;
     /** 범례 위치 */

package/dist/components/SLineChart/lineChart.config.d.ts

@@ -48,8 +48,7 @@ export declare const POINT_HOVER_RADIUS = 6;
 export declare const POINT_HALO_RADIUS = 12;
 export declare const POINT_HALO_OPACITY = "var(--cmp-chart-line-point-opacity-bg)";
 /**
- * 짚은 점이 실제로 차지하는 반지름 — 바탕 원까지다. 툴팁이 이만큼 비켜서고,
- * 양끝 점이 잘리지 않게 스크롤 컨테이너도 이만큼 넓어진다.
+ * 짚은 점이 실제로 차지하는 반지름 — 바탕 원까지다. 툴팁이 이만큼 비켜선다.
  */
 export declare const POINT_HOVER_EXTENT = 12;
 /**

package/dist/components/SMeatballButton/README.md

@@ -57,11 +57,13 @@ export type SMeatballButtonItem = SDropdownButtonItem;
 ### Depends on
 
 - [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
 
 ### Graph
 
 ```mermaid
 graph TD;
   SMeatballButton --> SGhostButton
+  SMeatballButton --> SIcon
   style SMeatballButton fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SNumberInput/README.md

@@ -73,6 +73,7 @@ export type SNumberInputSize = SFieldSize;
 
 - [SField](../SField)
 - [SIcon](../SIcon)
+- [STag](../STag)
 
 ### Graph
 
@@ -80,6 +81,7 @@ export type SNumberInputSize = SFieldSize;
 graph TD;
   SNumberInput --> SField
   SNumberInput --> SIcon
+  SNumberInput --> STag
   SKeyValueTable --> SNumberInput
   style SNumberInput fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SSelect/README.md

@@ -12,8 +12,8 @@
 | `valueAsPrimitive?` | `boolean` | `false` | `value`·`onValueChange` 가 옵션 객체 대신 원시값(string|number)을 주고받는다. **기본값 `false`(옵션 객체)는 유지한다** — 원본(sd-select) 호환 때문이고, 뒤집으면 이 값을 주지 않던 화면이 조용히 다른 모양의 값을 받게 되어 타입으로도 잡히지 않는다. 새로 쓰는 화면은 켜는 쪽이 다루기 쉽다 — 서버로 보내는 것도, 폼 상태에 담는 것도 결국 값 하나이기 때문이다. |
 | `name?` | `string` | — | 폼 연동용 name 속성 |
 | `options?` | `SSelectOption[]` | `[]` | 옵션 목록 (children으로 계층 표현) |
-| `type?` | `SSelectType` | `'default'` | 타입: default | multi | default_depth | multi_depth |
-| `valueDisplay?` | `SSelectValueDisplay` | `'text'` | 트리거에 선택값을 보여주는 방식. - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다. - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다. 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다. 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다. `multi_depth` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고, 그 칩의 × 는 그룹의 리프를 한꺼번에 뺀다. 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다. |
+| `type?` | `SSelectType` | `'default'` | 타입 — 단일/다중 선택과 계층을 어떻게 보여주는지를 정한다. - `default` · `multi`: 평평한 목록 - `default_depth` · `multi_depth`: 계층을 늘 펼친 그룹 헤더로 보여준다. `default_depth` 의 그룹은 고를 수 없고, `multi_depth` 의 그룹 체크박스는 하위 리프를 한꺼번에 토글한다. - `tree` · `multi_tree`: 계층을 접고 펼 수 있는 트리로 보여준다. 처음에는 접혀 있고, 열 때 선택값을 품은 그룹만 펼친다. 검색 중에는 걸린 줄이 보이도록 전부 펼친다. `tree` 는 그룹(부모)도 값으로 고를 수 있다. `multi_tree` 의 그룹 체크박스는 하위 리프를 한꺼번에 토글하고, 방출값에는 리프만 담긴다(`multi_depth` 와 같다). 키보드 → 는 그룹을 펼치거나(펼쳐져 있으면 첫 자식으로 들어가고), ← 는 접거나 부모 줄로 올라간다. 검색 입력에 포커스가 있으면 커서가 그 방향 끝에 닿아 있을 때만 트리 조작으로 쓴다. 그룹의 `disabled` 는 선택만 막고 접고 펴기는 그대로 된다. `tree` 는 하위가 전부 비활성이어도 그룹을 고를 수 있다 (그룹까지 막으려면 그룹에 `disabled` 를 직접 준다). 드롭다운 안의 줄은 `STree` 와 같은 모양(연결선·화살표·체크박스·라벨 타이포)으로 그린다. |
+| `valueDisplay?` | `SSelectValueDisplay` | `'text'` | 트리거에 선택값을 보여주는 방식. - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다. - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다. 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. `chip` 은 `multi`·`multi_depth`·`multi_tree` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다. 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다. `multi_depth`·`multi_tree` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고, 그 칩의 × 는 그룹의 리프를 한꺼번에 뺀다. 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다. |
 | `showSearch?` | `boolean` | `false` | 검색 입력 사용 |
 | `showSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
@@ -94,7 +94,8 @@ export interface SSelectOption {
 ### SSelectType
 
 ```ts
-export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+export type SSelectType =
+  'default' | 'multi' | 'default_depth' | 'multi_depth' | 'tree' | 'multi_tree';
 ```
 
 ### SSelectValueDisplay
@@ -113,8 +114,10 @@ export type SSelectValueDisplay = 'text' | 'chip';
 
 ### Depends on
 
+- [SCheckbox](../SCheckbox)
 - [SCircleProgress](../SCircleProgress)
 - [SField](../SField)
+- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
 - [SSearchInput](../SSearchInput)
@@ -123,8 +126,10 @@ export type SSelectValueDisplay = 'text' | 'chip';
 
 ```mermaid
 graph TD;
+  SSelect --> SCheckbox
   SSelect --> SCircleProgress
   SSelect --> SField
+  SSelect --> SGhostButton
   SSelect --> SIcon
   SSelect --> SPortal
   SSelect --> SSearchInput

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

@@ -42,7 +42,21 @@ export interface SSelectProps<TValue extends SSelectChangeValue = SSelectChangeV
     name?: string;
     /** 옵션 목록 (children으로 계층 표현) */
     options?: SSelectOption[];
-    /** 타입: default | multi | default_depth | multi_depth */
+    /**
+     * 타입 — 단일/다중 선택과 계층을 어떻게 보여주는지를 정한다.
+     * - `default` · `multi`: 평평한 목록
+     * - `default_depth` · `multi_depth`: 계층을 늘 펼친 그룹 헤더로 보여준다.
+     *   `default_depth` 의 그룹은 고를 수 없고, `multi_depth` 의 그룹 체크박스는 하위 리프를 한꺼번에 토글한다.
+     * - `tree` · `multi_tree`: 계층을 접고 펼 수 있는 트리로 보여준다. 처음에는 접혀 있고, 열 때 선택값을 품은
+     *   그룹만 펼친다. 검색 중에는 걸린 줄이 보이도록 전부 펼친다.
+     *   `tree` 는 그룹(부모)도 값으로 고를 수 있다. `multi_tree` 의 그룹 체크박스는 하위 리프를 한꺼번에
+     *   토글하고, 방출값에는 리프만 담긴다(`multi_depth` 와 같다).
+     *   키보드 → 는 그룹을 펼치거나(펼쳐져 있으면 첫 자식으로 들어가고), ← 는 접거나 부모 줄로 올라간다.
+     *   검색 입력에 포커스가 있으면 커서가 그 방향 끝에 닿아 있을 때만 트리 조작으로 쓴다.
+     *   그룹의 `disabled` 는 선택만 막고 접고 펴기는 그대로 된다. `tree` 는 하위가 전부 비활성이어도 그룹을 고를 수 있다
+     *   (그룹까지 막으려면 그룹에 `disabled` 를 직접 준다).
+     *   드롭다운 안의 줄은 `STree` 와 같은 모양(연결선·화살표·체크박스·라벨 타이포)으로 그린다.
+     */
     type?: SSelectType;
     /**
      * 트리거에 선택값을 보여주는 방식.
@@ -50,9 +64,9 @@ export interface SSelectProps<TValue extends SSelectChangeValue = SSelectChangeV
      * - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다.
      *   칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다.
      *
-     * `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다.
+     * `chip` 은 `multi`·`multi_depth`·`multi_tree` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다.
      * 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다.
-     * `multi_depth` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고,
+     * `multi_depth`·`multi_tree` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고,
      * 그 칩의 × 는 그룹의 리프를 한꺼번에 뺀다.
      * 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다.
      */

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

@@ -4,7 +4,7 @@ export interface SSelectOption {
     disabled?: boolean;
     children?: SSelectOption[];
 }
-export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth' | 'tree' | 'multi_tree';
 /** 트리거에 선택값을 보여주는 방식 — 쉼표로 이은 텍스트 | 값마다 칩 */
 export type SSelectValueDisplay = 'text' | 'chip';
 export interface FlatOption {
@@ -12,12 +12,18 @@ export interface FlatOption {
     label: string;
     disabled: boolean;
     depth: number;
-    /** children 을 가진 그룹(비선택) 노드 */
+    /** children 을 가진 그룹 노드 — 그 자체가 값이 되는 것은 `tree` 타입뿐이다 */
     isGroup: boolean;
     raw: string | number;
 }
-/** 트리 옵션을 depth 정보를 유지한 평탄 리스트로 변환. */
-export declare function flattenOptions(options: SSelectOption[], depth?: number): FlatOption[];
+/**
+ * 트리 옵션을 depth 정보를 유지한 평탄 리스트로 변환.
+ *
+ * @param inheritDisabled 하위가 전부 비활성인 그룹을 비활성으로 칠 것인가. 그룹이 값이 아닌 타입에서는
+ *   고를 것이 없는 그룹이라 잠그는 게 맞지만, 그룹 자체가 값인 `tree` 에서는 자식이 막혔다고 그룹까지
+ *   고를 수 없게 되면 안 된다 — 그때는 그룹에 직접 준 `disabled` 만 본다.
+ */
+export declare function flattenOptions(options: SSelectOption[], depth?: number, inheritDisabled?: boolean): FlatOption[];
 /** 선택 가능한(비그룹) 옵션만 */
 export declare const selectableOptions: (flat: FlatOption[]) => FlatOption[];
 /**
@@ -27,6 +33,30 @@ export declare const selectableOptions: (flat: FlatOption[]) => FlatOption[];
  * (multi_depth 부모 체크박스의 상태/카운트/토글 계산에 사용)
  */
 export declare function collectGroupLeafValues(flat: FlatOption[], groupIndex: number): string[];
+/**
+ * 트리 타입에서 접힌 그룹의 자손을 걷어내고 화면에 남는 줄만 돌려준다.
+ * `sourceIndex[i]` 는 남은 i 번째 줄이 입력 `rows` 에서 몇 번째였는가 — 접힌 그룹의 하위 리프는
+ * 화면에 없어도 그룹 체크박스가 세야 하므로, 그 계산은 입력 `rows` 기준으로 한다.
+ */
+export declare function visibleTreeRows(rows: FlatOption[], isExpanded: (group: FlatOption) => boolean): {
+    rows: FlatOption[];
+    sourceIndex: number[];
+};
+/**
+ * 트리 줄마다의 자리 정보 — 화면에 남은 줄(접힘·검색 반영 뒤) 기준이다.
+ * - `isLast`·`ancestorLast`: 연결선용. 자기가 같은 부모 아래 마지막 줄인가, 조상(depth 1 부터 부모까지)이
+ *   각자 마지막 줄인가. STree 가 재귀로 내려가며 넘기는 값과 같은 모양을 펴진 목록에서 구한다.
+ * - `posInSet`·`setSize`: 같은 부모 아래 몇 번째 / 형제가 모두 몇 개. 가상 스크롤로 일부 줄만 DOM 에
+ *   있어도 보조기기가 창 안 줄을 트리 전부로 읽지 않게 `aria-posinset`·`aria-setsize` 로 알린다.
+ */
+export declare function treeLineInfo(rows: FlatOption[]): {
+    isLast: boolean;
+    ancestorLast: boolean[];
+    posInSet: number;
+    setSize: number;
+}[];
+/** 선택값을 품은 그룹들의 value — 트리를 열 때 고른 항목이 보이도록 펼쳐 둘 그룹이다 */
+export declare function ancestorGroupValues(flat: FlatOption[], selected: Set<string>): Set<string>;
 /** 라벨에 HTML 태그가 있는지 (원본 isHtmlLabel) */
 export declare const isHtmlLabel: (label: string) => boolean;
 /** HTML 라벨에서 태그를 제거한 텍스트 (검색 매칭용, 원본 extractText) */

package/dist/components/STable/README.md

@@ -67,7 +67,7 @@
 | `getIsAllChecked` | `(rows: TRow[]) => boolean \| null` | 주어진 행들의 전체 선택 상태 (true/false/null=indeterminate) |
 | `getPaginationInfo` | `<union 2종>` | 내부 페이지네이션 정보 (internalPagination 아니면 null) |
 | `getStickyStyle` | `(colIdx: number) => CSSProperties` | 컬럼 sticky 스타일 (CSS 변수 + 고정폭) |
-| `getScrollElement` | `() => HTMLDivElement \| null` | 본문의 세로 스크롤 컨테이너. 본문이 슬롯으로 대체됐거나 아직 안 그려졌으면 `null`. 스크롤 위치를 읽고 되돌리거나, 표 안에서 스크롤 여지를 재야 할 때 쓴다 — **DOM 을 뒤져 컨테이너를 찾지 않는다.** 내부 구조는 예고 없이 바뀐다. ⚠️ `virtualScroll` 에서 **위치를 픽셀로 저장했다 되돌리는 것은 미덥지 않다.** 다시 그릴 때 아직 안 그려진 행은 추정 높이로 잡히므로, 실측이 쌓이기 전의 같은 `scrollTop` 이 다른 행을 가리킨다. 그 경우엔 위치가 아니라 **보고 있던 행**을 기억해 두는 편이 맞다. |
+| `getScrollElement` | `() => HTMLDivElement \| null` | 본문의 세로 스크롤 컨테이너. 본문이 슬롯으로 대체됐거나 아직 안 그려졌으면 `null`. 스크롤 위치를 읽고 되돌리거나, 표 안에서 스크롤 여지를 재야 할 때 쓴다 — **DOM 을 뒤져 컨테이너를 찾지 않는다.** 내부 구조는 예고 없이 바뀐다. 헤더도 이 안에 위로 붙어(sticky) 있다 — `clientHeight` 에는 헤더 높이가 들어 있다. `scrollTop` 은 본문 기준이라 `scrollTop` 이 y 이면 본문의 y 자리가 헤더 바로 아래에 온다. ⚠️ `virtualScroll` 에서 **위치를 픽셀로 저장했다 되돌리는 것은 미덥지 않다.** 다시 그릴 때 아직 안 그려진 행은 추정 높이로 잡히므로, 실측이 쌓이기 전의 같은 `scrollTop` 이 다른 행을 가리킨다. 그 경우엔 위치가 아니라 **보고 있던 행**을 기억해 두는 편이 맞다. |
 | `getFirstVisibleRow` | `() => number` | 지금 본문 맨 위에 걸린 행의 인덱스 (`rows` 기준). 행이 없으면 `0`. **스크롤 위치를 저장할 때는 픽셀이 아니라 이 값을 저장한다** — `virtualScroll` 에서 픽셀은 좌표계가 실측으로 움직이는 값이라, 되돌릴 때 다른 행을 가리킨다. |
 | `scrollToRow` | `(index: number) => void` | 그 행이 본문 맨 위에 오도록 스크롤한다 (`rows` 기준 인덱스, 범위를 벗어나면 잘린다). `virtualScroll` 에서는 **실측이 정착할 때까지 그 행을 계속 다시 겨냥한다** — 옮기는 시점의 좌표는 아직 추정치라 한 번만 옮기면 몇 행씩 밀린다. 사용자가 직접 스크롤하면 겨냥을 놓는다. 페이지네이션을 쓰는 표에서는 **지금 페이지에 그려진 행만** 닿는다 — 다른 페이지의 행이라면 페이지를 먼저 옮긴다. |
 | `setRowCount` | `(count: number) => void` | 가상 스크롤 총 행 수 설정 |

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

@@ -208,6 +208,9 @@ export interface STableHandle<TRow extends SRow = SRow> {
      * 스크롤 위치를 읽고 되돌리거나, 표 안에서 스크롤 여지를 재야 할 때 쓴다 —
      * **DOM 을 뒤져 컨테이너를 찾지 않는다.** 내부 구조는 예고 없이 바뀐다.
      *
+     * 헤더도 이 안에 위로 붙어(sticky) 있다 — `clientHeight` 에는 헤더 높이가 들어 있다.
+     * `scrollTop` 은 본문 기준이라 `scrollTop` 이 y 이면 본문의 y 자리가 헤더 바로 아래에 온다.
+     *
      * ⚠️ `virtualScroll` 에서 **위치를 픽셀로 저장했다 되돌리는 것은 미덥지 않다.** 다시 그릴 때
      * 아직 안 그려진 행은 추정 높이로 잡히므로, 실측이 쌓이기 전의 같은 `scrollTop` 이 다른 행을
      * 가리킨다. 그 경우엔 위치가 아니라 **보고 있던 행**을 기억해 두는 편이 맞다.

package/dist/components/STag/README.md

@@ -69,11 +69,15 @@ export const TAG_COLORS = [
 
 ### Used by
 
+ - [SBarcodeInput](../SBarcodeInput)
  - [SChipFilter](../SChipFilter)
  - [SConfirmModal](../SConfirmModal)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
+ - [SGnbSystem](../SGnbSystem)
+ - [SInput](../SInput)
  - [SLauncherListBox](../SLauncherListBox)
+ - [SNumberInput](../SNumberInput)
  - [SRadioCard](../SRadioCard)
  - [SSystemActionButton](../SSystemActionButton)
  - [STabs](../STabs)
@@ -88,11 +92,15 @@ export const TAG_COLORS = [
 ```mermaid
 graph TD;
   STag --> SIcon
+  SBarcodeInput --> STag
   SChipFilter --> STag
   SConfirmModal --> STag
   SGhostButton --> STag
   SGnb --> STag
+  SGnbSystem --> STag
+  SInput --> STag
   SLauncherListBox --> STag
+  SNumberInput --> STag
   SRadioCard --> STag
   SSystemActionButton --> STag
   STabs --> STag

package/dist/components/STimePicker/README.md

@@ -15,7 +15,7 @@
 | `disabled?` | `boolean` | `false` |  |
 | `clearable?` | `boolean` | `false` |  |
 | `showMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
-| `minuteStep?` | `number` | `1` |  |
+| `minuteStep?` | `number` | `1` | 분 리스트에 나열할 간격(분). 10 이면 `00 10 20 30 40 50` 만 고를 수 있다 |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm`)에 맞춘 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |

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

@@ -7,6 +7,7 @@ import { type STooltipProps } from '../STooltip';
 import { type STimePickerSize, type STimePickerType } from './timepicker.config';
 import { type SFieldWidth } from '../../lib/field-width';
 export type { STimePickerSize, STimePickerType } from './timepicker.config';
+export { TimeListbox } from './TimeListbox';
 export interface STimePickerProps {
     /** 선택 시간 (HH:mm) */
     value?: string | null;
@@ -22,6 +23,7 @@ export interface STimePickerProps {
     clearable?: boolean;
     /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
     showMeridiem?: boolean;
+    /** 분 리스트에 나열할 간격(분). 10 이면 `00 10 20 30 40 50` 만 고를 수 있다 */
     minuteStep?: number;
     /**
      * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
@@ -70,11 +72,5 @@ export interface STimePickerProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function TimeSelector({ value, showMeridiem, minuteStep, onChange, }: {
-    value?: string | null;
-    showMeridiem: boolean;
-    minuteStep: number;
-    onChange: (time: string) => void;
-}): import("react").JSX.Element;
-/** STimePicker — sd-time-picker 포팅. SField + Popover(TimeSelector). */
+/** STimePicker — sd-time-picker 포팅. SField + Popover(TimeListbox). */
 export declare function STimePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimePickerProps): import("react").JSX.Element;

package/dist/components/STimePicker/TimeListbox.d.ts

@@ -0,0 +1,21 @@
+/** 리스트에서 고른 열 — STimePicker 는 분을 고르면 팝오버를 닫는다 */
+export type TimeListboxPart = 'meridiem' | 'hour' | 'minute';
+interface TimeListboxProps {
+    /** 선택 시간 (HH:mm). 비어 있으면 아무것도 선택되지 않은 채 열린다 */
+    value?: string | null;
+    showMeridiem: boolean;
+    /** 분 열에 나열할 간격 (분) */
+    minuteStep: number;
+    /** 고를 수 없는 시각 — 자정부터 센 분(0~1439)을 받는다. 시·오전/오후 항목은 그 안의 모든
+     *  분을 고를 수 없을 때만 비활성이 된다 */
+    isDisabled?: (minutes: number) => boolean;
+    onChange: (time: string, part: TimeListboxPart) => void;
+    /** 열 접근성 레이블 앞에 붙는 말 — STimeRangePicker 의 "시작"·"종료" */
+    labelPrefix?: string;
+    /** 그림자·모서리를 두른 떠 있는 상자로 그린다. 다른 상자 안에 넣을 때는 끈다 */
+    elevated?: boolean;
+}
+/** TimeListbox — `[오전/오후] | 시 | 분` 을 세로 리스트에서 고르는 시간 선택 조각.
+ *  SDatePickerMonthListbox(연 | 월)와 같은 스펙이며, STimePicker·STimeRangePicker 팝오버가 쓴다. */
+export declare function TimeListbox({ value, showMeridiem, minuteStep, isDisabled, onChange, labelPrefix, elevated, }: TimeListboxProps): import("react").JSX.Element;
+export {};

package/dist/components/STimeRangePicker/README.md

@@ -15,8 +15,8 @@
 | `disabled?` | `boolean` | `false` |  |
 | `clearable?` | `boolean` | `false` |  |
 | `showMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
-| `minuteStep?` | `number` | `1` |  |
-| `rangeOrder?` | `STimeRangePickerRangeOrder` | `'strict'` | 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. |
+| `minuteStep?` | `number` | `1` | 분 리스트에 나열할 간격(분). 10 이면 `00 10 20 30 40 50` 만 고를 수 있다 |
+| `rangeOrder?` | `STimeRangePickerRangeOrder` | `'strict'` | 범위 순서 정책. `strict` 는 종료 리스트에서 시작보다 이른 시각을 비활성으로 막고, 시작을 종료 뒤로 옮기면 종료가 따라온다. `allow-cross-day` 는 제약 없이 고른다(자정을 넘는 범위). |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm ~ HH:mm`)에 맞춘 내장 상한이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |