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

package/dist/lib/chart/radial.d.ts

@@ -2,7 +2,7 @@
  * 원형 차트(파이·도넛)의 공용 구현 — 조각 계산과 그림.
  *
  * `SPieChart`·`SDonutChart` 는 이 위의 얇은 껍데기다. 두 차트는 가운데를 비우는지
- * (`innerRatio`)와 그 빈자리에 무엇을 적는지(`center`)만 다르다.
+ * (`innerRatio`)만 다르다. 도넛의 빈 가운데에는 글자를 두지 않는다.
  *
  * **시안이 없다.** 공용 차트 토큰(팔레트·범례·툴팁·바탕)은 그대로 쓰고, 원형 고유의
  * 치수만 아래 상수로 정했다. 디자인 토큰이 생기면 이 상수부터 토큰 참조로 바꾼다.
@@ -13,8 +13,11 @@
  */
 import { type CSSProperties, type ReactNode } from 'react';
 import type { SChartColor, SChartLegendPosition, SChartPalette } from './types';
-/** 도넛 안쪽 반지름 / 바깥 반지름. 너비에 따라 고리 두께가 함께 늘고 준다. */
-export declare const DONUT_INNER_RATIO = 0.6;
+/**
+ * 도넛 안쪽 반지름 / 바깥 반지름. 너비에 따라 구멍과 고리 두께가 함께 늘고 준다.
+ * 폭이 반응형이라 구멍을 px 로 고정하지 않고 시안의 비율(바깥 지름 248 · 구멍 지름 99)로 둔다.
+ */
+export declare const DONUT_INNER_RATIO = 0.4;
 /**
  * 비율 라벨을 적는 최소 몫. 이보다 좁은 조각은 글자가 조각 밖으로 넘쳐 이웃 조각의
  * 라벨과 겹치므로 적지 않는다 — 값은 툴팁으로 읽는다.
@@ -22,6 +25,16 @@ export declare const DONUT_INNER_RATIO = 0.6;
 export declare const LABEL_MIN_RATIO = 0.05;
 /** 파이의 비율 라벨이 놓이는 반지름(바깥 반지름에 대한 비). 가운데는 조각이 좁아 바깥쪽에 둔다. */
 export declare const PIE_LABEL_RADIUS_RATIO = 0.65;
+/**
+ * 짚은 조각이 자라는 길이(px). 각도는 그대로 두고 **안팎 양쪽으로** 자라, 이웃 조각을 덮지
+ * 않고 고리만 두꺼워진다. 배율이 아니라 px 이라 차트가 커져도 자라는 양은 늘 같게 보인다.
+ *
+ * 시안(바깥 반지름 124)에서 짚은 조각은 128 · 46.08 이다 — 바깥으로 4px, 안쪽으로 3.52px.
+ * 안쪽도 같은 4px 로 두어 규칙을 하나로 했다(시안과 0.48px 차이).
+ */
+export declare const HOVER_GROW = 4;
+/** 짚은 조각의 모서리 둥글기(px). 자란 조각만 네 모서리를 둥글린다. */
+export declare const HOVER_CORNER = 2;
 /** 조각 하나. */
 export interface RadialSlice {
     name: string;
@@ -46,12 +59,11 @@ export interface RadialChartProps {
     showTooltip?: boolean;
     formatValue?: (value: number) => string;
     onSliceClick?: (slice: RadialSlicePoint) => void;
+    tooltipFooter?: (slice: RadialSlicePoint) => ReactNode;
     className?: string;
     style?: CSSProperties;
     /** 가운데를 비우는 비율. 0 이면 파이다 */
     innerRatio: number;
-    /** 가운데 빈자리에 놓을 내용. 합계를 받아 그린다 */
-    renderCenter?: (total: number) => ReactNode;
     /** 스크린 리더가 읽는 그래프 종류 */
     kind: string;
 }
@@ -62,8 +74,12 @@ export declare function formatRatio(ratio: number): string;
  *
  * 한 바퀴 전체(조각이 하나)는 호 하나로 그릴 수 없다 — 시작점과 끝점이 같으면 SVG 가
  * 호를 그리지 않는다. 그래서 반원 둘로 나눠 그리고, 도넛은 `evenodd` 로 가운데를 뚫는다.
+ *
+ * `corner` 를 주면 네 모서리를 그 반지름으로 둥글린다. 모서리는 반지름 방향 변과 호에
+ * 동시에 닿는 원이라, 변은 접점까지 짧아지고 호는 접점까지 각도가 줄어든다. 한 바퀴
+ * 전체는 반지름 방향 변이 없어 둥글릴 모서리도 없다.
  */
-export declare function slicePath(center: number, outer: number, inner: number, start: number, end: number): string;
+export declare function slicePath(center: number, outer: number, inner: number, start: number, end: number, corner?: number): string;
 /**
  * 파이·도넛 공용 그림.
  *
@@ -71,8 +87,3 @@ export declare function slicePath(center: number, outer: number, inner: number,
  * 원의 지름은 잰 폭이라 부모가 줄면 원도 함께 준다. 범례는 정사각형 바깥에 붙는다.
  */
 export declare const RadialChart: import("react").ForwardRefExoticComponent<RadialChartProps & import("react").RefAttributes<HTMLDivElement>>;
-/** 도넛 가운데 — 윗줄 라벨과 큰 값. */
-export declare function RadialCenter({ label, value }: {
-    label?: ReactNode;
-    value: ReactNode;
-}): import("react").JSX.Element;

package/dist/lib/chart/tooltip.d.ts

@@ -1,3 +1,15 @@
+/**
+ * 차트 툴팁 — 기준 막대 옆에 서는 값 상자.
+ *
+ * 커서를 따라다니지 않는다. 커서를 따라가면 상자가 막대를 가리는 자리로 계속 밀려들고,
+ * 같은 값을 읽는 동안에도 상자가 흔들려 눈이 따라가야 한다. 대신 호출 쪽이 정한
+ * **기준 막대**(`anchor`)에 붙여 한자리에 세운다.
+ *
+ * 차트 컨테이너 **안에** absolute 로 뜬다. Portal 을 쓰지 않는 이유: 차트는 카드·모달
+ * 안에 들어가는 일이 많은데, 상자가 차트 밖으로 나갈 만큼 크지 않아 굳이 부모를
+ * 벗어날 이유가 없다. 대신 부모가 `relative` 여야 한다.
+ */
+import type { ReactNode } from 'react';
 export interface ChartTooltipItem {
     /** 계열 점 색 */
     color: string;
@@ -38,6 +50,11 @@ export interface ChartTooltipProps {
     };
     /** 기준 자리에서 띄우는 가로 거리. 기본값은 양쪽 다 4px */
     gapX?: ChartTooltipGapX;
+    /**
+     * 값 목록 아래에 붙이는 내용 — 차트의 `tooltipFooter` 가 짚은 항목을 받아 그린 것이다.
+     * 상자가 마우스를 통과시키므로 누를 수 있는 것은 넣지 못한다.
+     */
+    footer?: ReactNode;
     className?: string;
 }
-export declare function ChartTooltip({ title, items, anchor, bounds, gapX, className, }: ChartTooltipProps): import("react").JSX.Element;
+export declare function ChartTooltip({ title, items, anchor, bounds, gapX, footer, className, }: ChartTooltipProps): import("react").JSX.Element;

package/dist/lib/dropdown-menu.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import * as RDropdown from '@radix-ui/react-dropdown-menu';
+import { type SIconName } from '../components/SIcon';
+/**
+ * 버튼에 매달린 액션 메뉴(SDropdownButton · SMeatballButton)의 공용 층.
+ * 두 컴포넌트가 **같은 메뉴로 그려져야** 해서 한 곳에 둔다 — Root/Trigger 는 트리거 모양이
+ * 달라 각 컴포넌트가 갖고, 여기는 Portal + Content + Item 만 맡는다.
+ */
+export interface DropdownMenuItem {
+    value: string | number;
+    label: string;
+    icon?: SIconName;
+    disabled?: boolean;
+}
+export interface DropdownMenuContentProps extends Omit<ComponentPropsWithoutRef<typeof RDropdown.Content>, 'children'> {
+    items: readonly DropdownMenuItem[];
+    onItemClick?: (value: string | number) => void;
+}
+export declare function DropdownMenuContent({ items, onItemClick, align, className, ...contentProps }: DropdownMenuContentProps): import("react").JSX.Element;

package/dist/llms-full.txt

@@ -47,13 +47,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` |
@@ -80,7 +80,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` |
@@ -176,7 +176,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` |
 
@@ -333,7 +333,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` |
@@ -579,7 +579,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 |
@@ -594,6 +594,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | 라벨이 있는 일반 액션을 준다 | `SButton` | §3-5 |
 | 아이콘 하나로 뜻이 통하는 부가 조작을 준다 | `SGhostButton` | §3-5-5 |
+| 자리가 좁아 부가 조작 여러 개를 ⋯ 뒤 메뉴로 접어 둔다 | `SMeatballButton` | §3-5-5 |
 | 한 버튼에 여러 선택지를 매단다 | `SDropdownButton` | §3-5-4 |
 | GNB system 패널에서 한 줄짜리 행 액션을 준다 | `SSystemActionButton` | §3-5-7 |
 
@@ -693,7 +694,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- |
 | `default` | 흰 면 위 (`SPage background="frame"`) — 옅은 회색 면이라 페이지와 구분된다 |
 | `white` | 회색 면 위 (`background="neutral"`·`"screen"`) — 그 위에서는 `default` 가 배경에 묻힌다 |
-| `danger` | 경고. 좌측에 "주의사항" 타이틀이 붙으므로 단순 안내에는 쓰지 않는다 |
+| `danger` | 경고. 좌측에 "주의사항" 타이틀이 붙으므로 단순 안내에는 쓰지 않는다. 주변에 이미 경고 맥락(제목 등)이 있어 타이틀이 중복되면 `showTitle={false}` 로 타이틀만 뺀다 — 경고 면은 유지된다 |
 
 ### 3-3. 플로팅/오버레이류
 
@@ -1216,6 +1217,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) |
@@ -1329,6 +1331,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. 그 밖
 
 - 라벨은 **동사(+목적어)** — `저장` · `적치 지시` · `송장 재출력`
@@ -3149,6 +3169,7 @@ export const BADGE_COLORS = [
 | `showTooltip?` | `boolean` | `true` | 막대에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
 | `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SBarChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -3229,6 +3250,20 @@ export interface SBarChartPoint {
 }
 ```
 
+### SBarChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SBarChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다 */
+  points: SBarChartPoint[];
+}
+```
+
 ---
 
 # SBarcodeInput
@@ -3567,6 +3602,7 @@ export const CALENDAR_BOARD_EVENT_COLORS = [
 | 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` | — |  |
@@ -4792,14 +4828,12 @@ export type SDateRangePickerSize = SFieldSize;
 | `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` | — |  |
 
@@ -5790,6 +5824,7 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
  - [SInput](../SInput)
+ - [SMeatballButton](../SMeatballButton)
  - [SModalContainer](../SModalContainer)
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
@@ -6650,6 +6685,7 @@ export type SLayoutHeader = SGnbHeader;
 | `showTooltip?` | `boolean` | `true` | 항목에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
 | `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SLineChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -6730,6 +6766,20 @@ export interface SLineChartPoint {
 }
 ```
 
+### SLineChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SLineChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다. 누적이어도 각 계열이 제 몫으로 가진 값이다 */
+  points: SLineChartPoint[];
+}
+```
+
 ---
 
 # SLinearProgress
@@ -7045,6 +7095,70 @@ export const LOGO_NAMES = ['sellmate'] as const;
 
 ---
 
+# 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
+
+---
+
 # SModal
 
 > 수작성 문서 — SModal 은 컴포넌트가 아니라 **명령형 모달 서비스**라 `docs:gen`(Props/Events 표) 대상이 아니다.
@@ -7625,6 +7739,7 @@ export const PAGE_CONTENT_WIDTHS = ['full', 'fixed', 'fixedCenter'] as const;
 | `legendPosition?` | `SPieChartLegendPosition` | `'top'` | 범례 위치 |
 | `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
+| `tooltipFooter?` | `(slice: SPieChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — | 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/llms.txt

@@ -48,13 +48,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` |
@@ -81,7 +81,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` |
@@ -177,7 +177,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` |
 
@@ -334,7 +334,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` |
@@ -580,7 +580,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 |
@@ -595,6 +595,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | 라벨이 있는 일반 액션을 준다 | `SButton` | §3-5 |
 | 아이콘 하나로 뜻이 통하는 부가 조작을 준다 | `SGhostButton` | §3-5-5 |
+| 자리가 좁아 부가 조작 여러 개를 ⋯ 뒤 메뉴로 접어 둔다 | `SMeatballButton` | §3-5-5 |
 | 한 버튼에 여러 선택지를 매단다 | `SDropdownButton` | §3-5-4 |
 | GNB system 패널에서 한 줄짜리 행 액션을 준다 | `SSystemActionButton` | §3-5-7 |
 
@@ -694,7 +695,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- |
 | `default` | 흰 면 위 (`SPage background="frame"`) — 옅은 회색 면이라 페이지와 구분된다 |
 | `white` | 회색 면 위 (`background="neutral"`·`"screen"`) — 그 위에서는 `default` 가 배경에 묻힌다 |
-| `danger` | 경고. 좌측에 "주의사항" 타이틀이 붙으므로 단순 안내에는 쓰지 않는다 |
+| `danger` | 경고. 좌측에 "주의사항" 타이틀이 붙으므로 단순 안내에는 쓰지 않는다. 주변에 이미 경고 맥락(제목 등)이 있어 타이틀이 중복되면 `showTitle={false}` 로 타이틀만 뺀다 — 경고 면은 유지된다 |
 
 ### 3-3. 플로팅/오버레이류
 
@@ -1217,6 +1218,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) |
@@ -1330,6 +1332,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. 그 밖
 
 - 라벨은 **동사(+목적어)** — `저장` · `적치 지시` · `송장 재출력`
@@ -2956,7 +2976,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-purple-strong
 --sys-color-purple-subtle
 
-## 3. 컴포넌트 인덱스 (84종)
+## 3. 컴포넌트 인덱스 (85종)
 
 **Props 는 이 문서에 없다.** 쓸 컴포넌트를 정했으면 그 컴포넌트의 README 를 읽는다.
 
@@ -2965,4 +2985,4 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 예) SButton 을 쓴다면 `dist/components/SButton/README.md`.
 prop 을 추측해서 쓰지 말고 반드시 README 로 확인한다 (분류별 용도는 §1 의 "전체 컴포넌트 인덱스" 참조).
 
-SAccountListBox · SActionModal · SBadge · SBarChart · SBarcodeInput · SButton · SCalendar · SCalendarBoard · SCallout · SCard · SChatAttachedFile · SChatFile · SChatInput · SChatMessage · SChatSystemMessage · SCheckbox · SChip · SChipFilter · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDonutChart · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SEditor · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGnbSystem · SGuide · SIcon · SImage · SInput · SKeyValueTable · SLauncherListBox · SLayout · SLineChart · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SLoginCard · SLogo · SModal · SNumberInput · SPage · SPagination · SPieChart · SPopover · SPopup · SPortal · SRadio · SRadioButton · SRadioCard · SScrollArea · SSearchInput · SSectionHeaderCard · SSelect · SSplitter · SStepper · SSwitch · SSystemActionButton · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree
+SAccountListBox · SActionModal · SBadge · SBarChart · SBarcodeInput · SButton · SCalendar · SCalendarBoard · SCallout · SCard · SChatAttachedFile · SChatFile · SChatInput · SChatMessage · SChatSystemMessage · SCheckbox · SChip · SChipFilter · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDonutChart · SDraggableItem · SDraggableList · SDrawer · SDropdownButton · SEditor · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGnbSystem · SGuide · SIcon · SImage · SInput · SKeyValueTable · SLauncherListBox · SLayout · SLineChart · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SLoginCard · SLogo · SMeatballButton · SModal · SNumberInput · SPage · SPagination · SPieChart · SPopover · SPopup · SPortal · SRadio · SRadioButton · SRadioCard · SScrollArea · SSearchInput · SSectionHeaderCard · SSelect · SSplitter · SStepper · SSwitch · SSystemActionButton · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip · STree

package/dist/styles.css

@@ -635,6 +635,9 @@
   .top-\[-1px\] {
     top: -1px;
   }
+  .top-\[10px\] {
+    top: 10px;
+  }
   .top-\[12px\] {
     top: 12px;
   }
@@ -674,6 +677,9 @@
   .right-\[2px\] {
     right: 2px;
   }
+  .right-\[8px\] {
+    right: 8px;
+  }
   .right-\[10px\] {
     right: 10px;
   }
@@ -3905,9 +3911,6 @@
   .text-\(--cmp-chart-axis-color\) {
     color: var(--cmp-chart-axis-color);
   }
-  .text-\(--cmp-chart-bar-dataLabel-color-default\) {
-    color: var(--cmp-chart-bar-dataLabel-color-default);
-  }
   .text-\(--cmp-chart-chartTooltip-title-color\) {
     color: var(--cmp-chart-chartTooltip-title-color);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.61",
+  "version": "9.0.0-beta.62",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [