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

package/dist/lib/list-box-item.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 드롭다운 목록 행(SSelect · SChipFilter · SChipInput 의 리스트박스 항목)이 함께 쓰는 여백.
+ * 스펙(`--cmp-listBoxItem-*`)이 하나라 한곳에 둔다. 행 모양 자체는 아직 컴포넌트마다 따로 그린다.
+ */
+/** 항목 좌측 패딩 — depth1(그룹 헤더·비계층 항목) / depth2 / depth3 */
+export declare const LIST_BOX_ITEM_PADDING_LEFT: {
+    readonly 1: "var(--cmp-listBoxItem-paddingLeft-depth1)";
+    readonly 2: "var(--cmp-listBoxItem-paddingLeft-depth2)";
+    readonly 3: "var(--cmp-listBoxItem-paddingLeft-depth3)";
+};
+/** 항목 상하·우측 패딩 — 모든 depth 에서 같다 */
+export declare const LIST_BOX_ITEM_PADDING_Y_RIGHT: {
+    readonly paddingTop: "var(--cmp-listBoxItem-paddingY)";
+    readonly paddingBottom: "var(--cmp-listBoxItem-paddingY)";
+    readonly paddingRight: "var(--cmp-listBoxItem-paddingRight)";
+};

package/dist/lib/tree-row.d.ts

@@ -13,17 +13,35 @@ export declare const TREE_LABEL_TYPOGRAPHY: Record<TreeRowSize, {
 /** 줄 바탕 — 배경·hover·좌우 여백·연결선과 내용 사이 간격 */
 export declare const TREE_ROW_CLASS = "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)";
 /** 줄 아래 구분선 */
-export declare const TREE_ROW_BORDER_CLASS = "border-b border-(--cmp-tree-item-border-default)";
+export declare const TREE_ROW_BORDER_CLASS = "border-b-(length:--cmp-tree-item-border-width-default) border-(--cmp-tree-item-border-default)";
 /** 키보드가 가리키는 줄 — hover 와 같은 배경 (SSelect 처럼 포커스를 줄로 옮기지 않는 쪽이 쓴다) */
 export declare const TREE_ROW_ACTIVE_CLASS = "bg-(--cmp-tree-item-bg-hover)";
 /** 화살표·체크박스·라벨을 담는 칸 */
 export declare const TREE_CONTENT_CLASS = "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)";
-/** 라벨 — 고른(또는 일부 고른) 줄은 굵게, 비활성은 흐리게 */
+/**
+ * 라벨 — 고른(또는 일부 고른) 줄은 굵게, 비활성은 흐리게. 고를 수 있으면 `TreeSelectZone` 에
+ * 올렸을 때 밑줄이 생긴다. 글자 폭만큼만 차지한다(줄의 남은 폭은 접고 펴는 자리다)
+ */
 export declare function treeLabelClass(size: TreeRowSize, { emphasized, disabled, selectable, }: {
     emphasized: boolean;
     disabled: boolean;
     selectable: boolean;
 }): string;
+/**
+ * 줄에서 고르는 자리 — 체크박스(있으면)+라벨을 담는다. 글자 폭만큼만 차지해 그 오른쪽 빈 자리는
+ * 접고 펴는 자리로 남는다. 고를 수 있으면 올렸을 때 라벨 밑줄(`treeLabelClass`)과 chevron 이 나와
+ * 접고 펴는 자리와 구분된다. 줄의 클릭이 이 자리에 떨어졌는지는 `isRowSelectClick` 으로 가른다.
+ */
+export declare function TreeSelectZone({ selectable, disabled, control, children, }: {
+    selectable: boolean;
+    disabled?: boolean;
+    /** 라벨 앞의 체크박스 */
+    control?: ReactNode;
+    /** 라벨 */
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** 줄의 클릭이 고르는 자리(`TreeSelectZone`)에 떨어졌는가 */
+export declare function isRowSelectClick(event: MouseEvent<HTMLElement>): boolean;
 /**
  * 줄 안의 컨트롤(체크박스·화살표)이 받은 클릭인가. 컨트롤은 스스로 값을 바꾸므로 줄의 클릭 처리는
  * 손대지 않는다 — 컨트롤마다 감싸서 전파를 끊는 대신 줄 하나가 클릭을 받아 가른다.

package/dist/llms-full.txt

@@ -1776,6 +1776,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 - **쓰는 자리는 설정 화면·마법사(스텝)의 소수 결정이다.** 고르고 나면 뒤 화면이 통째로 바뀌거나 되돌리기 어려운 선택 — 평가 대상자 범위(전체/특정 구성원), 상담 자동 배정 방식 같은 것. 목록 필터·표 안 조건처럼 같은 선택지가 화면마다 반복 노출되는 자리에는 `SRadioGroup` 을 쓴다.
 - `SRadioCard` 단독은 `SRadioCardGroup` 이 만들 수 없는 배치에만 쓴다 — 나열은 그룹이 맡는다 (§2-2).
 - 카드 안에 상태 배지를 넣으려면 `tag` 슬롯에 `STag` 를 준다. 라벨 문자열에 "(추천)" 처럼 섞어 쓰지 않는다.
+- **한 선택지에 딸린 추가 입력(지정일·요청 사항 등)은 그 카드의 슬롯에 넣는다** — `SRadioCard` 는 `children`, `SRadioCardGroup` 은 옵션의 `content`. 카드 아래에 따로 입력을 늘어놓지 않는다. 슬롯은 서브타이틀 아래에 들여써서 놓이고 라디오의 클릭 영역 밖이라, 입력을 눌러도 카드 선택이 바뀌지 않는다. 들여쓰기·간격은 카드가 넣으므로 직접 주지 않는다. 고른 카드에만 보여주고, 카드를 `disabled` 로 두면 슬롯의 컨트롤도 함께 `disabled` 로 둔다(카드가 대신 잠그지 않는다).
 - **카드처럼 생겼다고 `SCard`/`SSectionHeaderCard` 로 감싸지 않는다.** `SRadioCard` 자체가 완결된 요소이고, 나열 간격은 `SRadioCardGroup` 의 `direction` 이 맞춘다 (§2-2).
 
 ##### 후보에 상하 관계가 있으면 — depth vs tree
@@ -7134,6 +7135,7 @@ export interface SChipFilterDatePreset {
 
 - [SDatePicker](../SDatePicker)
 - [SDateRangePicker](../SDateRangePicker)
+- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SRadio](../SRadio)
 - [SRadioButton](../SRadioButton)
@@ -8682,6 +8684,7 @@ export type SGhostButtonIntent =
  - [SChatAttachedFile](../SChatAttachedFile)
  - [SChatInput](../SChatInput)
  - [SChip](../SChip)
+ - [SChipFilter](../SChipFilter)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
@@ -9100,7 +9103,7 @@ export type SGuideMessage = string | SGuideMessage[];
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `name` | `SIconName` | — | 아이콘명 |
-| `size?` | `number \| string` | `24` | 아이콘 크기(px 또는 CSS 길이) |
+| `size?` | `number \| string` | `24` | 아이콘 크기(px 또는 CSS 길이). 토큰 크기 `var(--cmp-…)` 도 그대로 넘긴다 |
 | `color?` | `SColor` | — | 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 미지정 시 currentColor 상속 |
 | `rotate?` | `0 \| 90 \| 180 \| 270` | — | 회전 각도 |
 | `label?` | `string` | — | 접근성 라벨. 없으면 aria-hidden 처리 |
@@ -9155,6 +9158,7 @@ export type SGuideMessage = string | SGuideMessage[];
  - [STimeRangePicker](../STimeRangePicker)
  - [SToast](../SToast)
  - [STooltip](../STooltip)
+ - [STree](../STree)
 
 ### Graph
 
@@ -9875,8 +9879,8 @@ export interface SListItemRenderState {
 | `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
 | `showButton?` | `boolean` | `false` | 하단 버튼 표시 |
 | `buttonLabel?` | `string` | — | 버튼 레이블 (없으면 state 기본값) |
-| `width?` | `number \| string` | `520` |  |
-| `height?` | `number \| string` | `320` |  |
+| `width?` | `number \| string` | `'var(--cmp-modal-loading-width)'` |  |
+| `height?` | `number \| string` | `'var(--cmp-modal-loading-height)'` |  |
 
 #### Events
 
@@ -11143,6 +11147,7 @@ export type SRadioButtonSize = 'xs' | 'sm' | 'md';
 | `value?` | `SRadioValue \| null` | — | 그룹의 현재 선택 값 |
 | `label` | `string` | — | 라벨 (첫 줄) |
 | `subtitle?` | `string` | — | 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 |
+| `children?` | `ReactNode` | — | 서브타이틀 아래 슬롯. 서브타이틀처럼 라벨 왼쪽 끝에 맞춰 들여쓴다. 카드 테두리 안이지만 라디오의 클릭 영역 밖이라, 입력·버튼 같은 컨트롤을 넣어도 누를 때 카드가 선택되지 않는다 |
 | `tag?` | `Omit<STagProps, 'size'>` | — | 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `name?` | `string` | — | native radio name (form-agnostic 그룹핑) |
@@ -11167,6 +11172,8 @@ export interface SRadioCardOption {
   label: string;
   /** 서브타이틀 (둘째 줄) */
   subtitle?: string;
+  /** 서브타이틀 아래 슬롯 (`SRadioCard` 의 `children`). 라디오의 클릭 영역 밖이다 */
+  content?: ReactNode;
   /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
   tag?: Omit<STagProps, 'size'>;
   /** 이 옵션만 비활성 */
@@ -11416,7 +11423,7 @@ export type SSectionHeaderCardChildren = ReactNode;
 
 | Method | Type | Description |
 |--------|------|-------------|
-| `focus` | `() => void` | 트리거 버튼에 포커스 (sdFocus) |
+| `focus` | `() => void` | 트리거(combobox)에 포커스 (sdFocus) |
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 
 ## Types
@@ -13011,6 +13018,7 @@ export interface STreeItemRenderState {
 
 - [SCheckbox](../SCheckbox)
 - [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
 
 ### Graph
 

package/dist/llms.txt

@@ -1777,6 +1777,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 - **쓰는 자리는 설정 화면·마법사(스텝)의 소수 결정이다.** 고르고 나면 뒤 화면이 통째로 바뀌거나 되돌리기 어려운 선택 — 평가 대상자 범위(전체/특정 구성원), 상담 자동 배정 방식 같은 것. 목록 필터·표 안 조건처럼 같은 선택지가 화면마다 반복 노출되는 자리에는 `SRadioGroup` 을 쓴다.
 - `SRadioCard` 단독은 `SRadioCardGroup` 이 만들 수 없는 배치에만 쓴다 — 나열은 그룹이 맡는다 (§2-2).
 - 카드 안에 상태 배지를 넣으려면 `tag` 슬롯에 `STag` 를 준다. 라벨 문자열에 "(추천)" 처럼 섞어 쓰지 않는다.
+- **한 선택지에 딸린 추가 입력(지정일·요청 사항 등)은 그 카드의 슬롯에 넣는다** — `SRadioCard` 는 `children`, `SRadioCardGroup` 은 옵션의 `content`. 카드 아래에 따로 입력을 늘어놓지 않는다. 슬롯은 서브타이틀 아래에 들여써서 놓이고 라디오의 클릭 영역 밖이라, 입력을 눌러도 카드 선택이 바뀌지 않는다. 들여쓰기·간격은 카드가 넣으므로 직접 주지 않는다. 고른 카드에만 보여주고, 카드를 `disabled` 로 두면 슬롯의 컨트롤도 함께 `disabled` 로 둔다(카드가 대신 잠그지 않는다).
 - **카드처럼 생겼다고 `SCard`/`SSectionHeaderCard` 로 감싸지 않는다.** `SRadioCard` 자체가 완결된 요소이고, 나열 간격은 `SRadioCardGroup` 의 `direction` 이 맞춘다 (§2-2).
 
 ##### 후보에 상하 관계가 있으면 — depth vs tree