sellmate-design-system-react 9.0.0-beta.61 → 9.0.0-beta.62

package/AGENTS.md

@@ -39,13 +39,13 @@
 
 | 분류 | 컴포넌트 |
 | --- | --- |
-| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
+| **버튼·링크** | `SButton` `SGhostButton` `SMeatballButton`(⋯ 로 '더 보기' 메뉴를 여는 아이콘 버튼) `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SChatInput`(대화 입력창) `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SCalendarBoard`(한 달치 일정 판) `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
 | **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(입력창 위, 아직 보내지 않은 첨부 한 칸) `SChatFile`(대화 흐름에 선, 보낸 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
 | **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SLauncherListBox`(런처 버튼을 눌러 뜨는 서비스 목록) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SLoginCard`(통합 계정 로그인 화면의 카드) `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
-| **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 몫과 함께 가운데에 합계를 적는다) |
+| **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 가운데가 빈 원그래프. 구멍에 글자를 두지 않는다) |
 | **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(브랜드 로고를 아이콘처럼 — size 는 높이다) `SImage` `SCallout` `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
@@ -72,7 +72,7 @@ AI 에이전트는 코드를 생성하기 전에 이 목록을 반드시 지킨
 
 | 금지 | 대신 사용 |
 | --- | --- |
-| `<button>` | `SButton`, `SGhostButton`, `SDropdownButton`, `STextLink` |
+| `<button>` | `SButton`, `SGhostButton`, `SMeatballButton`, `SDropdownButton`, `STextLink` |
 | `<input type="text/password/...">` | `SInput` |
 | `<input type="search">` | `SSearchInput` |
 | `<input type="number">` | `SNumberInput` |
@@ -168,7 +168,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SGnbSystem`(GNB 맨 아래 판 · 전폭 상단바 오른쪽 끝) `SPage` `SPageHeader`(`SLayout` 안에서 `SPage` 앞에 둔다) |
 | **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `SBarChart` `SLineChart` `SPieChart` `SDonutChart` `STabs` `SStepper` `SPagination` `SDivider` |
-| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SChatAttachedFile` `SChatFile` `SImage` `SLinearProgress` `SCircleProgress` |
+| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SMeatballButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SChatAttachedFile` `SChatFile` `SImage` `SLinearProgress` `SCircleProgress` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `SLogo` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SAccountListBox`(계정 행에 붙어 뜬다 — 직접 띄우지 않는다) `SLauncherListBox`(런처 버튼에 붙어 뜬다 — 직접 띄우지 않는다) `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
 
@@ -325,7 +325,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | `SCheckbox` | **`gap-sd-24`** | `gap-sd-8` |
 | `SRadio` | **`gap-sd-24`** | `gap-sd-8` |
 | `STextLink` | **`gap-sd-16`**(sm) / **`gap-sd-24`**(md·lg) | `gap-sd-4` |
-| `SGhostButton` | `gap-sd-4` | `gap-sd-4` |
+| `SGhostButton` · `SMeatballButton` | `gap-sd-4` | `gap-sd-4` |
 | `SButton` | `gap-sd-8` (xs·sm·md) / **`gap-sd-12`**(lg) | 〃 |
 | `STag` | `gap-sd-8` | `gap-sd-8` |
 | `SToggle` | `gap-sd-8` | `gap-sd-8` |
@@ -571,7 +571,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 여러 항목의 추이를 **합계와 함께** 보여준다 (채널별 매출이 쌓여 전체가 되는 흐름) | `SLineChart stacked area` | 합계가 뜻을 갖는 값일 때만 쌓는다. 음수가 섞이거나 더해서 뜻이 없는 값(비율·평균)은 쌓지 말고 겹쳐 그린다 |
 | 항목의 크기와 **그 안의 구성**을 함께 보여준다 (주문 상태별 내역, 유입 경로별 몫) | `SBarChart stacked` | 계열끼리 견주는 것이 목적이면 `stacked` 없이 나란히 세운다. 더해서 뜻이 없는 값(비율·평균)은 쌓지 않는다 — 합계 라벨이 거짓말이 된다 |
 | 한 시점의 **전체를 몇 개의 몫으로** 나눠 보여준다 (채널별 매출 비중, 회원 등급 구성) | `SPieChart` | 조각이 대여섯 개를 넘거나 몫끼리 크기를 견주는 것이 목적이면 `SBarChart` — 사람은 각도보다 길이를 정확히 견준다. 순서가 있는 추이(월별)는 몫이 아니라 흐름이라 `SLineChart`. 0·음수는 그려지지 않으므로 증감은 원으로 나타내지 않는다. 조각은 큰 순으로 넘긴다. 폭은 부모를 따르고 그림은 그 폭의 정사각형이다 — 폭이 필요하면 `className` 으로 폭만 주고 높이는 주지 않는다 (`SDonutChart` 도 같다) |
-| 몫과 함께 **전체의 크기(합계)** 를 먼저 읽게 한다 (주문 상태별 구성 + 총 주문 수, 목표 달성률) | `SDonutChart` | 합계가 필요 없으면 `SPieChart`. 가운데 값은 기본이 그려진 조각의 합계이고, 합계가 아닌 대표값(달성률 등)은 `centerValue` 로 준다. 여러 기간에 걸친 구성 변화는 원을 여러 개 늘어놓지 말고 `SBarChart stacked` |
+| 한 시점의 전체를 몫으로 나누되 **가운데가 빈 고리 모양**으로 보여준다 (시안이 도넛일 때) | `SDonutChart` | 쓰임·데이터 규칙은 `SPieChart` 와 같고 모양만 다르다 — 시안이 정한 쪽을 쓴다. **구멍에 합계·라벨을 겹쳐 올리지 않는다.** 합계 같은 값이 필요하면 차트 바깥(카드 제목·요약 값)에 적는다. 여러 기간에 걸친 구성 변화는 원을 여러 개 늘어놓지 말고 `SBarChart stacked` |
 | 표 위에 건수 요약과 액션을 얹는다 | `STableBar` | 표의 이름도 여기 `title` 슬롯에 넣는다 — 제목만으로 블록을 따로 세우지 않는다. §4-2 |
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
@@ -586,6 +586,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | 라벨이 있는 일반 액션을 준다 | `SButton` | §3-5 |
 | 아이콘 하나로 뜻이 통하는 부가 조작을 준다 | `SGhostButton` | §3-5-5 |
+| 자리가 좁아 부가 조작 여러 개를 ⋯ 뒤 메뉴로 접어 둔다 | `SMeatballButton` | §3-5-5 |
 | 한 버튼에 여러 선택지를 매단다 | `SDropdownButton` | §3-5-4 |
 | GNB system 패널에서 한 줄짜리 행 액션을 준다 | `SSystemActionButton` | §3-5-7 |
 
@@ -685,7 +686,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- |
 | `default` | 흰 면 위 (`SPage background="frame"`) — 옅은 회색 면이라 페이지와 구분된다 |
 | `white` | 회색 면 위 (`background="neutral"`·`"screen"`) — 그 위에서는 `default` 가 배경에 묻힌다 |
-| `danger` | 경고. 좌측에 "주의사항" 타이틀이 붙으므로 단순 안내에는 쓰지 않는다 |
+| `danger` | 경고. 좌측에 "주의사항" 타이틀이 붙으므로 단순 안내에는 쓰지 않는다. 주변에 이미 경고 맥락(제목 등)이 있어 타이틀이 중복되면 `showTitle={false}` 로 타이틀만 뺀다 — 경고 면은 유지된다 |
 
 ### 3-3. 플로팅/오버레이류
 
@@ -1208,6 +1209,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 | 일반 액션 | `SButton` (`color`: `primary` / `secondary` / `neutral` / `danger`, `outline`, `size`: xs~md) |
 | **삭제 등 파괴적 액션** | **`SButton color="danger"`** 또는 **`color="danger" outline`** (아래 3-5-3) |
 | **아이콘 하나로 뜻이 통하는 부가 조작** | **`SGhostButton`** — 라벨이 없는 아이콘 전용 버튼 (아래 3-5-5) |
+| **부가 조작 여러 개를 ⋯ 메뉴로 접기** | **`SMeatballButton`** — ⋯ 아이콘 버튼 + `SDropdownButton` 과 같은 메뉴 (아래 3-5-5) |
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
 | **GNB system 패널의 한 줄 액션** | **`SSystemActionButton`** — 행 전체가 버튼인 표면형 (아래 3-5-7) |
@@ -1321,6 +1323,24 @@ tableRef.current.scrollToRow(row);                  // 복원
 ❌ <SGhostButton icon="download" ariaLabel="엑셀 다운로드" />              // 목록의 주 액션 → SButton
 ```
 
+##### `SMeatballButton` — ⋯ 뒤에 메뉴를 접어 둘 때
+
+자리가 좁아 부가 조작을 하나하나 아이콘으로 늘어놓을 수 없을 때, **⋯ 하나로 접고 누르면 메뉴를 띄운다.** 버튼의 크기·색·hover·툴팁은 `SGhostButton` 과, 메뉴 모양은 `SDropdownButton` 과 같다.
+
+- **메뉴는 컴포넌트가 띄운다.** `items` 를 넘기고 선택은 `onItemClick(value)` 로 받는다. 메뉴를 따로 만들어 붙이지 않고, 열림 상태(`aria-expanded`)도 직접 넣지 않는다.
+- **`SGhostButton icon="etc"` 로 직접 만들지 않는다.** '더 보기' 메뉴는 항상 `SMeatballButton` 이다.
+- **`intent` 는 `default` / `inverse` 뿐이다.** ⋯ 는 조작이 아니라 메뉴를 여는 것이므로 `action`·`danger` 색을 받지 않는다. 어두운 배경 위에서만 `inverse`.
+- 툴팁·`ariaLabel` 은 기본 문구가 들어 있어 **주지 않아도 된다.** 한 화면에 ⋯ 가 여러 개라 무엇의 메뉴인지 구분해야 할 때만 `tooltipText` 를 바꾼다(`ariaLabel` 이 따라간다).
+- 메인 액션에 변형 동작을 곁들이는 것이면 `SMeatballButton` 이 아니라 `SDropdownButton split`(§3-5-4)이다.
+
+```tsx
+✅ <SMeatballButton size="xs"                                   // 행 끝 부가 조작 묶음
+     items={[{ value: 'copy', label: '복제', icon: 'copy' }, { value: 'remove', label: '삭제', icon: 'remove' }]}
+     onItemClick={v => handleRowAction(row, v)} />
+✅ <SMeatballButton intent="inverse" items={items} onItemClick={onAction} />  // 어두운 배경 위
+❌ <SGhostButton icon="etc" ariaLabel="더 보기" onClick={openMyMenu} />       // 직접 조립 → SMeatballButton
+```
+
 #### 3-5-6. 그 밖
 
 - 라벨은 **동사(+목적어)** — `저장` · `적치 지시` · `송장 재출력`

package/dist/components/SBarChart/README.md

@@ -23,6 +23,7 @@
 | `showTooltip?` | `boolean` | `true` | 막대에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
 | `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SBarChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -103,3 +104,17 @@ export interface SBarChartPoint {
 }
 ```
 
+### SBarChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SBarChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다 */
+  points: SBarChartPoint[];
+}
+```
+

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

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 /** 막대가 자라는 방향. */
 export type SBarChartDirection = 'vertical' | 'horizontal';
 /** 범례 위치. */
@@ -25,6 +25,15 @@ export interface SBarChartPoint {
     /** 그 지점의 값 */
     value: number;
 }
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SBarChartTooltipCategory {
+    /** 카테고리 인덱스 */
+    categoryIndex: number;
+    /** 카테고리 이름 */
+    name: string;
+    /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다 */
+    points: SBarChartPoint[];
+}
 /** 한 계열 — 범례 한 줄에 대응한다. */
 export interface SBarChartSeries {
     /** 범례·툴팁에 표시할 이름 */
@@ -69,6 +78,11 @@ export interface SBarChartProps {
     height?: number | string;
     /** 막대를 눌렀을 때 */
     onBarClick?: (point: SBarChartPoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락
+     * (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (category: SBarChartTooltipCategory) => ReactNode;
     className?: string;
     style?: CSSProperties;
 }

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

@@ -1,2 +1,2 @@
-export { SBarChart, type SBarChartProps, type SBarChartSeries, type SBarChartPoint, type SBarChartPalette, type SBarChartColor, type SBarChartDirection, type SBarChartLegendPosition, } from './SBarChart';
+export { SBarChart, type SBarChartProps, type SBarChartSeries, type SBarChartPoint, type SBarChartTooltipCategory, type SBarChartPalette, type SBarChartColor, type SBarChartDirection, type SBarChartLegendPosition, } from './SBarChart';
 export { BAR_SIZE_MIN, BAR_SIZE_MAX, BAR_GAP } from './barChart.config';

package/dist/components/SCallout/README.md

@@ -9,6 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `type?` | `SCalloutType` | `'default'` | 콜아웃 타입 (색상·아이콘·타이틀 결정). - `default` — 옅은 회색 면. 흰 페이지(`background="frame"`) 위의 기본 안내. - `white` — 같은 안내인데 배경만 흰 면. 회색 면(`neutral`·`screen`) 위에서 default 가 묻힐 때. - `danger` — 좌측에 주의사항 타이틀이 붙는 경고. |
+| `showTitle?` | `boolean` | `true` | `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`. `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다. |
 | `message?` | `SCalloutMessage[]` | `[]` | 표시할 메시지 목록 (배열 중첩으로 depth 표현). 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다. |
 | `children?` | `ReactNode` | — | message 대신 직접 본문을 넣을 때 |
 | `className?` | `string` | — |  |

package/dist/components/SCallout/SCallout.d.ts

@@ -10,6 +10,11 @@ export interface SCalloutProps {
      * - `danger` — 좌측에 주의사항 타이틀이 붙는 경고.
      */
     type?: SCalloutType;
+    /**
+     * `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`.
+     * `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다.
+     */
+    showTitle?: boolean;
     /**
      * 표시할 메시지 목록 (배열 중첩으로 depth 표현).
      * 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다.
@@ -22,7 +27,7 @@ export interface SCalloutProps {
 }
 /**
  * SCallout — sd-callout 포팅.
- * default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시.
+ * default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시(showTitle 로 끌 수 있다).
  * 색상은 `--cmp-callout-*` 토큰 참조(white 만 예외 — SURFACE 주석 참고).
  * message 각 항목은 sanitizeInlineHtml 로 살균한 뒤 innerHTML 로 렌더한다 (원본 sd-callout 과 동일).
  */

package/dist/components/SDonutChart/README.md

@@ -11,14 +11,12 @@
 | `data` | `SDonutChartSlice[]` | — | 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 |
 | `palette?` | `SDonutChartPalette` | `'multi'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
 | `colors?` | `SDonutChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 |
-| `centerLabel?` | `ReactNode` | — | 가운데 윗줄에 적을 이름 (예: "총 주문") |
-| `centerValue?` | `ReactNode` | — | 가운데 큰 값. 주지 않으면 그려진 조각의 합계를 `formatValue` 로 적는다 |
-| `hideCenter?` | `boolean` | `false` | 가운데를 비운다 — 합계 대신 범례·툴팁만으로 읽게 할 때 |
 | `showValueLabel?` | `boolean` | `false` | 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 |
 | `showLegend?` | `boolean` | `true` | 범례를 보인다 |
 | `legendPosition?` | `SDonutChartLegendPosition` | `'top'` | 범례 위치 |
 | `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
-| `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 — 툴팁과 가운데 합계에 함께 쓰인다 |
+| `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
+| `tooltipFooter?` | `(slice: SDonutChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — | 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SDonutChart/SDonutChart.d.ts

@@ -36,12 +36,6 @@ export interface SDonutChartProps {
     palette?: SDonutChartPalette;
     /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */
     colors?: SDonutChartColor[];
-    /** 가운데 윗줄에 적을 이름 (예: "총 주문") */
-    centerLabel?: ReactNode;
-    /** 가운데 큰 값. 주지 않으면 그려진 조각의 합계를 `formatValue` 로 적는다 */
-    centerValue?: ReactNode;
-    /** 가운데를 비운다 — 합계 대신 범례·툴팁만으로 읽게 할 때 */
-    hideCenter?: boolean;
     /** 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 */
     showValueLabel?: boolean;
     /** 범례를 보인다 */
@@ -50,10 +44,15 @@ export interface SDonutChartProps {
     legendPosition?: SDonutChartLegendPosition;
     /** 조각에 마우스를 올리면 값 상자를 띄운다 */
     showTooltip?: boolean;
-    /** 값 표시 형식 — 툴팁과 가운데 합계에 함께 쓰인다 */
+    /** 값 표시 형식 */
     formatValue?: (value: number) => string;
     /** 조각을 눌렀을 때 */
     onSliceClick?: (slice: SDonutChartSlicePoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락
+     * (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (slice: SDonutChartSlicePoint) => ReactNode;
     /** 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 */
     className?: string;
     style?: CSSProperties;
@@ -61,11 +60,11 @@ export interface SDonutChartProps {
 /**
  * SDonutChart — 도넛 그래프.
  *
- * `SPieChart` 와 같이 **한 시점의 전체를 몫으로 나눈 것**을 보여주되, 가운데에 **합계**
- * (또는 그 전체를 대표하는 값)를 함께 적는다. 몫보다 전체 크기가 먼저 읽혀야 할 때 쓴다.
+ * 가운데가 빈 원그래프. `SPieChart` 와 같이 **한 시점의 전체를 몫으로 나눈 것**을 보여준다.
+ * 가운데 구멍에는 글자를 두지 않는다 — 합계 같은 값은 차트 바깥에 적는다.
  * 조각이 대여섯 개를 넘거나 몫끼리 견주는 것이 목적이면 `SBarChart` 가 맞다.
  *
  * 폭은 부모를 따르고(기본 100%), 그림은 그 폭을 한 변으로 하는 정사각형이다.
- * 고리 두께와 가운데 글자 자리도 폭에 비례해 늘고 준다.
+ * 구멍과 고리 두께도 폭에 비례해 늘고 준다.
  */
 export declare const SDonutChart: import("react").ForwardRefExoticComponent<SDonutChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SGhostButton/README.md

@@ -57,6 +57,7 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
  - [SInput](../SInput)
+ - [SMeatballButton](../SMeatballButton)
  - [SModalContainer](../SModalContainer)
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
@@ -92,6 +93,7 @@ graph TD;
   SGnb --> SGhostButton
   SGuide --> SGhostButton
   SInput --> SGhostButton
+  SMeatballButton --> SGhostButton
   SModalContainer --> SGhostButton
   SOverlayHeader --> SGhostButton
   SPage --> SGhostButton

package/dist/components/SLineChart/README.md

@@ -24,6 +24,7 @@
 | `showTooltip?` | `boolean` | `true` | 항목에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
 | `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SLineChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -104,3 +105,17 @@ export interface SLineChartPoint {
 }
 ```
 
+### SLineChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SLineChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다. 누적이어도 각 계열이 제 몫으로 가진 값이다 */
+  points: SLineChartPoint[];
+}
+```
+

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

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 /** 점과 점을 잇는 방식. */
 export type SLineChartCurve = 'linear' | 'smooth';
 /** 범례 위치. */
@@ -25,6 +25,15 @@ export interface SLineChartPoint {
     /** 그 지점의 값. 누적이어도 **그 계열이 제 몫으로 가진 값**이다 */
     value: number;
 }
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SLineChartTooltipCategory {
+    /** 카테고리 인덱스 */
+    categoryIndex: number;
+    /** 카테고리 이름 */
+    name: string;
+    /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다. 누적이어도 각 계열이 제 몫으로 가진 값이다 */
+    points: SLineChartPoint[];
+}
 /** 한 계열 — 선 하나, 범례 한 줄에 대응한다. */
 export interface SLineChartSeries {
     /** 범례·툴팁에 표시할 이름 */
@@ -73,6 +82,11 @@ export interface SLineChartProps {
     height?: number | string;
     /** 점을 눌렀을 때 */
     onPointClick?: (point: SLineChartPoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락
+     * (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (category: SLineChartTooltipCategory) => ReactNode;
     className?: string;
     style?: CSSProperties;
 }

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

@@ -1 +1 @@
-export { SLineChart, type SLineChartProps, type SLineChartSeries, type SLineChartPoint, type SLineChartCurve, type SLineChartPalette, type SLineChartColor, type SLineChartLegendPosition, } from './SLineChart';
+export { SLineChart, type SLineChartProps, type SLineChartSeries, type SLineChartPoint, type SLineChartTooltipCategory, type SLineChartCurve, type SLineChartPalette, type SLineChartColor, type SLineChartLegendPosition, } from './SLineChart';

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

@@ -47,13 +47,16 @@ export declare const BAND_MIN = 40;
 /** 점과 값 라벨 사이 간격(px) — 막대 차트와 같다. */
 export declare const VALUE_LABEL_GAP = 6;
 /**
- * 영역 채움의 불투명도.
+ * 영역 채움의 불투명도 — 선 바로 아래가 가장 진하고 바닥으로 갈수록 옅어진다.
  *
- * 선은 또렷하게 두고 영역만 물리는 값이다. 계열이 여럿이면 채움끼리 겹쳐 색이 탁해지는데,
- * 그건 채움을 진하게 잡아서가 아니라 겹쳐 그리는 것 자체의 한계다 — 계열이 많으면
- * `area` 를 끄거나 `stacked` 로 쌓는다.
+ * 선은 또렷하게 두고 영역만 물리는 값이다. 세로 그라데이션이라 채움이 바닥에서 거의
+ * 사라져, 계열이 여럿일 때 채움끼리 겹쳐 색이 탁해지는 것도 덜하다. 그래도 겹쳐 그리는
+ * 것 자체의 한계는 남으므로, 계열이 많으면 `area` 를 끄거나 `stacked` 로 쌓는다.
+ *
+ * 위쪽 30% 는 맞는 토큰이 없어 값으로 둔다(불투명도 토큰은 5·8·40·60·80 뿐이다).
  */
-export declare const AREA_OPACITY = "var(--opacity-040)";
+export declare const AREA_OPACITY_TOP = "30%";
+export declare const AREA_OPACITY_BOTTOM = "var(--opacity-005)";
 export declare const LINE_DATA_LABEL_COLOR = "var(--cmp-chart-bar-dataLabel-color-default)";
 /** 값 라벨의 타이포 — 짚은 항목만 굵고 크게 뜬다(막대 차트와 같은 규칙). */
 export declare const LINE_DATA_LABEL_TYPO = "typo-body-sm-medium";

package/dist/components/SMeatballButton/README.md

@@ -0,0 +1,67 @@
+# SMeatballButton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SMeatballButton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size?` | `SMeatballButtonSize` | `'sm'` | 버튼 크기 |
+| `intent?` | `SMeatballButtonIntent` | `'default'` | 색상 의도. 어두운 배경 위에서는 inverse |
+| `items?` | `SMeatballButtonItem[]` | `[]` | 메뉴 항목 목록 |
+| `tooltipText?` | `string` | `'기능 더 보기'` | 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다. |
+| `ariaLabel?` | `string` | — | 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 '기능 더 보기' |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `className?` | `string` | — | 버튼을 감싸는 요소의 클래스. 위치 조정(absolute 배치 등)용 |
+| `style?` | `CSSProperties` | — | 버튼을 감싸는 요소의 스타일. 위치 조정용 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onItemClick` | `(value: string \| number) => void` | 메뉴 항목 선택 |
+| `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `open` | `() => void` | 메뉴 열기 |
+| `close` | `() => void` | 메뉴 닫기 |
+
+## Types
+
+### SMeatballButtonSize
+
+```ts
+export type SMeatballButtonSize = SGhostButtonSize;
+```
+
+### SMeatballButtonIntent
+
+```ts
+export type SMeatballButtonIntent = 'default' | 'inverse';
+```
+
+### SMeatballButtonItem
+
+```ts
+/** 메뉴 항목 — SDropdownButton 과 같은 모양이다 */
+export type SMeatballButtonItem = SDropdownButtonItem;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+
+### Graph
+
+```mermaid
+graph TD;
+  SMeatballButton --> SGhostButton
+  style SMeatballButton fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SMeatballButton/SMeatballButton.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties } from 'react';
+import { type SGhostButtonSize } from '../SGhostButton';
+import type { SDropdownButtonItem } from '../SDropdownButton';
+export type SMeatballButtonSize = SGhostButtonSize;
+export type SMeatballButtonIntent = 'default' | 'inverse';
+/** 메뉴 항목 — SDropdownButton 과 같은 모양이다 */
+export type SMeatballButtonItem = SDropdownButtonItem;
+export interface SMeatballButtonHandle {
+    /** 메뉴 열기 */
+    open: () => void;
+    /** 메뉴 닫기 */
+    close: () => void;
+}
+export interface SMeatballButtonProps {
+    /** 버튼 크기 */
+    size?: SMeatballButtonSize;
+    /** 색상 의도. 어두운 배경 위에서는 inverse */
+    intent?: SMeatballButtonIntent;
+    /** 메뉴 항목 목록 */
+    items?: SMeatballButtonItem[];
+    /** 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다. */
+    tooltipText?: string;
+    /** 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 '기능 더 보기' */
+    ariaLabel?: string;
+    /** 비활성 */
+    disabled?: boolean;
+    /** 메뉴 항목 선택 */
+    onItemClick?: (value: string | number) => void;
+    /** 열림/닫힘 변경 */
+    onOpenChange?: (open: boolean) => void;
+    /** 버튼을 감싸는 요소의 클래스. 위치 조정(absolute 배치 등)용 */
+    className?: string;
+    /** 버튼을 감싸는 요소의 스타일. 위치 조정용 */
+    style?: CSSProperties;
+}
+export declare const SMeatballButton: import("react").ForwardRefExoticComponent<SMeatballButtonProps & import("react").RefAttributes<SMeatballButtonHandle>>;

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

@@ -0,0 +1 @@
+export { SMeatballButton, type SMeatballButtonProps, type SMeatballButtonHandle, type SMeatballButtonItem, type SMeatballButtonSize, type SMeatballButtonIntent, } from './SMeatballButton';

package/dist/components/SPieChart/README.md

@@ -16,6 +16,7 @@
 | `legendPosition?` | `SPieChartLegendPosition` | `'top'` | 범례 위치 |
 | `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
+| `tooltipFooter?` | `(slice: SPieChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — | 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SPieChart/SPieChart.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 /** 범례 위치. */
 export type SPieChartLegendPosition = 'top' | 'bottom';
 /**
@@ -48,6 +48,11 @@ export interface SPieChartProps {
     formatValue?: (value: number) => string;
     /** 조각을 눌렀을 때 */
     onSliceClick?: (slice: SPieChartSlicePoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락
+     * (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (slice: SPieChartSlicePoint) => ReactNode;
     /** 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 */
     className?: string;
     style?: CSSProperties;