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

package/AGENTS.md

@@ -45,7 +45,7 @@
 | **표·목록** | `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` 로 구성까지) |
+| **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 몫과 함께 가운데에 합계를 적는다) |
 | **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(브랜드 로고를 아이콘처럼 — size 는 높이다) `SImage` `SCallout` `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
@@ -167,7 +167,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` `STabs` `SStepper` `SPagination` `SDivider` |
+| **블록** | `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` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `SLogo` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SAccountListBox`(계정 행에 붙어 뜬다 — 직접 띄우지 않는다) `SLauncherListBox`(런처 버튼에 붙어 뜬다 — 직접 띄우지 않는다) `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
@@ -254,7 +254,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 용도 | 클래스 |
 | --- | --- |
 | 페이지/섹션 제목 | `typo-heading-lg`(18px) · `typo-heading-md`(16px) · `typo-heading-sm`(14px) · `typo-heading-xs`(12px) |
-| 본문 | `typo-body-lg-*` (16px) · `typo-body-md-*`(14px) · `typo-body-sm-*`(12px) · `typo-body-xs-default`(11px) — `*` = `default`/`medium`/`bold` |
+| 카드·아이템 안의 메인 수치 데이터 | `typo-heading-xl`(24px) — 제목에 쓰지 않는다 |
+| 본문 | `typo-body-lg-*` (16px) · `typo-body-md-*`(14px) · `typo-body-sm-*`(12px) · `typo-body-xs-default`(11px) — `*` = `default`/`medium`/`semibold`/`bold` |
 | 테이블 | `typo-table-header` · `typo-table-body` · `typo-table-accent` |
 | 컨트롤·필드·피드백·내비 | `typo-control-*` `typo-field-*` `typo-feedback-*` `typo-navigation-*` (컴포넌트 내부용 — 직접 쓸 일은 드묾) |
 
@@ -565,10 +566,12 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 부모-자식 계층을 들여쓰기로 보여준다 | `STree` | §3-7-7 |
 | 사용자가 순서를 드래그로 바꾸게 한다 | `SDraggableList` + `SDraggableItem` | §3-7-6 |
 | 날짜별 일정을 한 달치 격자로 펼쳐 보여준다 | `SCalendarBoard` | §3-7-4 |
-| 항목끼리 크기를 눈으로 견주게 한다 (기간별 추이·채널별 비중) | `SBarChart` | 정확한 값을 읽어야 하면 `STable` — 그래프는 "어느 쪽이 큰가" 를 답하지 "얼마인가" 를 답하지 않는다 |
+| 항목끼리 크기를 눈으로 견주게 한다 (채널별 매출·상품별 판매량) | `SBarChart` | 정확한 값을 읽어야 하면 `STable` — 그래프는 "어느 쪽이 큰가" 를 답하지 "얼마인가" 를 답하지 않는다 |
 | 순서가 있는 항목의 **추이**를 보여준다 (일·월별 매출 흐름, 기간별 방문 수) | `SLineChart` | 항목 순서에 뜻이 없으면(채널별·상품별) `SBarChart` — 선은 "이어진다" 는 뜻을 덤으로 얹어, 순서 없는 항목을 이으면 없는 흐름을 만든다. 항목이 대여섯 개 안쪽이고 크기를 견주는 것이 목적이면 막대가 낫다 |
 | 여러 항목의 추이를 **합계와 함께** 보여준다 (채널별 매출이 쌓여 전체가 되는 흐름) | `SLineChart stacked area` | 합계가 뜻을 갖는 값일 때만 쌓는다. 음수가 섞이거나 더해서 뜻이 없는 값(비율·평균)은 쌓지 말고 겹쳐 그린다 |
 | 항목의 크기와 **그 안의 구성**을 함께 보여준다 (주문 상태별 내역, 유입 경로별 몫) | `SBarChart stacked` | 계열끼리 견주는 것이 목적이면 `stacked` 없이 나란히 세운다. 더해서 뜻이 없는 값(비율·평균)은 쌓지 않는다 — 합계 라벨이 거짓말이 된다 |
+| 한 시점의 **전체를 몇 개의 몫으로** 나눠 보여준다 (채널별 매출 비중, 회원 등급 구성) | `SPieChart` | 조각이 대여섯 개를 넘거나 몫끼리 크기를 견주는 것이 목적이면 `SBarChart` — 사람은 각도보다 길이를 정확히 견준다. 순서가 있는 추이(월별)는 몫이 아니라 흐름이라 `SLineChart`. 0·음수는 그려지지 않으므로 증감은 원으로 나타내지 않는다. 조각은 큰 순으로 넘긴다. 폭은 부모를 따르고 그림은 그 폭의 정사각형이다 — 폭이 필요하면 `className` 으로 폭만 주고 높이는 주지 않는다 (`SDonutChart` 도 같다) |
+| 몫과 함께 **전체의 크기(합계)** 를 먼저 읽게 한다 (주문 상태별 구성 + 총 주문 수, 목표 달성률) | `SDonutChart` | 합계가 필요 없으면 `SPieChart`. 가운데 값은 기본이 그려진 조각의 합계이고, 합계가 아닌 대표값(달성률 등)은 `centerValue` 로 준다. 여러 기간에 걸친 구성 변화는 원을 여러 개 늘어놓지 말고 `SBarChart stacked` |
 | 표 위에 건수 요약과 액션을 얹는다 | `STableBar` | 표의 이름도 여기 `title` 슬롯에 넣는다 — 제목만으로 블록을 따로 세우지 않는다. §4-2 |
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
@@ -1683,7 +1686,7 @@ useEffect(() => {
 - **`SCalendar` 와 `SCalendarBoard` 는 방향이 반대다.** `SCalendar` 는 날짜를 **고르는** 달력(칸에는 점만 찍힌다)이고, `SCalendarBoard` 는 일정을 **읽는** 달력이다 — 칸마다 일정이 줄로 쌓이고, 칸 높이에 담기는 줄 수를 넘으면 "N개 더보기" 로 접히고, **"더보기" 또는 일정이 있는 칸 아무 데나** 누르면 **그 칸을 덮으며 뜨는 판**에 그 날짜의 일정이 전부 펼쳐진다. 폭도 다르다: `SCalendar` 는 제 폭을 갖는 요소, `SCalendarBoard` 는 페이지 폭을 채우는 블록이다.
 - **`SCalendarBoard` 는 기본이 읽기 전용 판이다.** 날짜 칸을 눌러 **고르게** 하려면 `selectable` 을 켠다 — 켜야 `onValueChange(date, events)` 로 고른 날짜와 **그 날짜의 일정**이 함께 온다. 다만 **일정이 있는 칸은 `selectable` 과 무관하게 눌린다** — 그때는 목록 판이 열린다. 둘 다 켜져 있으면 고르기와 열기가 함께 일어난다. 일정 버튼과 "N개 더보기" 도 항상 눌린다.
 - **칸 배경과 일정 색은 다른 층이다.** 그날의 성격(마감·완료·휴무 등)은 `dayColors` 로 **칸 전체**에 칠하고(`default` `danger` `accent` `complete` `dim`), 일정 하나의 색은 `events[].color` 로 준다. 둘을 섞어 쓰면 서로를 가리지 않고 함께 읽힌다.
-- 일정 왼쪽의 색 점은 `SBadge` 다 — `events[].color` 프리셋이 점 색까지 정하고, 따로 주려면 `dotColor` 에 `SBadge` 9색 중 하나를 넣는다 (§3-1).
+- 일정 왼쪽의 색 점은 `SBadge` 다 — `events[].color` 프리셋이 점 색까지 정하고, 따로 주려면 `dotColor` 에 `SBadge` 색(`SBadgeColor`) 중 하나를 넣는다 (§3-1).
 - **칸 본문을 통째로 바꾸려면 `dayContent` 다.** 일정으로 표현되지 않는 그날치 요약(재고·매출 같은)을 칸에 얹을 때 쓴다. **슬롯을 준 날짜는 그 날짜의 `events` 를 그리지 않고 목록 판도 열지 않는다** — 한 칸에 둘을 겹쳐 담지 않는다. 일정과 요약을 함께 보여야 하면 요약을 일정 한 건(`events[]`)으로 넣는다.
 - **`SCalendarBoard` 는 높이를 부모에게서 받는다.** 행이 그 높이를 균등하게 나눠 갖고, 칸 높이가 다시 "한 칸에 몇 줄이 보일지" 를 정한다. 그래서 **놓는 자리에 높이를 준다** — 페이지 본문의 남은 높이를 채우려면 `SPage` 안에서 스택을 `flex-1 min-h-0` 으로 두고 판에 `h-full` 을 준다. 높이를 주지 않으면 칸이 최소 높이로 주저앉아 한두 줄만 보인다.
 - **한 칸에 몇 줄을 펼칠지는 컴포넌트가 잰다.** 조절하는 prop 이 없다 — 칸 높이에서 나오는 값이라 따로 정할 것이 아니다. 줄이 넘치면 마지막 한 줄을 "N개 더보기" 에 내주므로 **접히든 아니든 칸 높이가 같다.** **소비 앱이 `events` 를 미리 잘라 넘기지 않는다.** 잘라 넘기면 "N개 더보기" 의 수가 실제 건수와 어긋나고, 눌러도 나머지가 나오지 않는다.

package/dist/components/SBadge/README.md

@@ -30,6 +30,7 @@ export const BADGE_COLORS = [
   'blue',
   'darkblue',
   'indigo',
+  'purple',
   'grey',
 ] as const;
 ```

package/dist/components/SBadge/SBadge.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-export declare const BADGE_COLORS: readonly ["red", "orange", "yellow", "green", "lightblue", "blue", "darkblue", "indigo", "grey"];
+export declare const BADGE_COLORS: readonly ["red", "orange", "yellow", "green", "lightblue", "blue", "darkblue", "indigo", "purple", "grey"];
 export type SBadgeColor = (typeof BADGE_COLORS)[number];
 export interface SBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** 뱃지 색상 */

package/dist/components/SCalendarBoard/README.md

@@ -62,7 +62,7 @@ export interface SCalendarBoardEvent {
   label: string;
   /** 색상 프리셋 — 배경과 점 색이 함께 정해진다 */
   color?: SCalendarBoardEventColor;
-  /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 9색을 쓴다 */
+  /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 색(`SBadgeColor`)을 쓴다 */
   dotColor?: SBadgeColor;
   /** 본문 텍스트 — 예: `"RV20260728-000006"`. 평문만 받는다 */
   description?: string;
@@ -110,6 +110,7 @@ export const CALENDAR_BOARD_EVENT_COLORS = [
   'yellow',
   'orange',
   'red',
+  'purple',
   'white',
 ] as const;
 ```

package/dist/components/SCalendarBoard/calendarBoard.config.d.ts

@@ -3,10 +3,10 @@
  *
  * 배경은 `--cmp-calendarBoard-eventButton-bg-*` 로 전부 토큰화돼 있다.
  * 점(dot)은 `SBadge` 가 그리므로 색도 `--cmp-badge-*` 를 그대로 따른다 —
- * 9색이 디자인 mock 의 점 hex 와 1:1 로 맞아떨어져 따로 매핑을 두지 않는다.
+ * badge 색이 디자인 mock 의 점 hex 와 1:1 로 맞아떨어져 따로 매핑을 두지 않는다.
  */
 import type { SBadgeColor } from '../SBadge';
-export declare const CALENDAR_BOARD_EVENT_COLORS: readonly ["default", "blue", "oceanBlue", "lightBlue", "green", "yellow", "orange", "red", "white"];
+export declare const CALENDAR_BOARD_EVENT_COLORS: readonly ["default", "blue", "oceanBlue", "lightBlue", "green", "yellow", "orange", "red", "purple", "white"];
 export type SCalendarBoardEventColor = (typeof CALENDAR_BOARD_EVENT_COLORS)[number];
 export interface CalendarBoardEventPreset {
     /** 이벤트 버튼 배경 */

package/dist/components/SCalendarBoard/types.d.ts

@@ -14,7 +14,7 @@ export interface SCalendarBoardEvent {
     label: string;
     /** 색상 프리셋 — 배경과 점 색이 함께 정해진다 */
     color?: SCalendarBoardEventColor;
-    /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 9색을 쓴다 */
+    /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 색(`SBadgeColor`)을 쓴다 */
     dotColor?: SBadgeColor;
     /** 본문 텍스트 — 예: `"RV20260728-000006"`. 평문만 받는다 */
     description?: string;

package/dist/components/SChip/README.md

@@ -8,6 +8,7 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `color?` | `SChipColor` | — | 색상. 주지 않으면 기본 회색 칩이다. 색은 기본 상태에만 입힌다 — error·편집 중·disabled 는 상태 토큰이 우선한다. 색상은 컴포넌트 토큰 `--cmp-chip-chip-<color>-{bg,content,border}` 를 참조한다. |
 | `name?` | `string` | — | 폼 연동용 name |
 | `value?` | `string` | `''` | 칩 텍스트 값 |
 | `error?` | `boolean` | — | 에러 상태 |
@@ -35,6 +36,30 @@
 | `focus` | `() => void` | 편집 input에 포커스합니다. |
 | `getNativeElement` | `() => HTMLElement \| null` | 네이티브 편집 엘리먼트를 반환합니다. |
 
+## Types
+
+### SChipColor
+
+```ts
+export type SChipColor = (typeof CHIP_COLORS)[number];
+```
+
+### CHIP_COLORS
+
+```ts
+export const CHIP_COLORS = [
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'darkblue',
+  'indigo',
+  'purple',
+  'grey',
+] as const;
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SChip/SChip.d.ts

@@ -1,6 +1,14 @@
 import { type CSSProperties } from 'react';
 import { type Rule } from '../../lib/form';
+export declare const CHIP_COLORS: readonly ["red", "orange", "yellow", "green", "blue", "darkblue", "indigo", "purple", "grey"];
+export type SChipColor = (typeof CHIP_COLORS)[number];
 export interface SChipProps {
+    /**
+     * 색상. 주지 않으면 기본 회색 칩이다.
+     * 색은 기본 상태에만 입힌다 — error·편집 중·disabled 는 상태 토큰이 우선한다.
+     * 색상은 컴포넌트 토큰 `--cmp-chip-chip-<color>-{bg,content,border}` 를 참조한다.
+     */
+    color?: SChipColor;
     /** 폼 연동용 name */
     name?: string;
     /** 칩 텍스트 값 */

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

@@ -1 +1 @@
-export { SChip, type SChipHandle, type SChipProps } from './SChip';
+export { SChip, CHIP_COLORS, type SChipColor, type SChipHandle, type SChipProps } from './SChip';

package/dist/components/SDonutChart/README.md

@@ -0,0 +1,93 @@
+# SDonutChart
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDonutChart
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `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` | 값 표시 형식 — 툴팁과 가운데 합계에 함께 쓰인다 |
+| `className?` | `string` | — | 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSliceClick` | `(slice: SDonutChartSlicePoint) => void` | 조각을 눌렀을 때 |
+
+## Types
+
+### SDonutChartSlice
+
+```ts
+/** 조각 하나 — 범례 한 줄에 대응한다. */
+export interface SDonutChartSlice {
+  /** 범례·툴팁에 표시할 이름 */
+  name: string;
+  /** 값. 0·음수는 그리지 않는다 — 원은 전체에 대한 몫만 나타낼 수 있다 */
+  value: number;
+}
+```
+
+### SDonutChartPalette
+
+```ts
+/**
+ * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로 — 조각을 큰 순으로 줄 때
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SDonutChartPalette = 'multi' | 'gradation' | 'custom';
+```
+
+### SDonutChartColor
+
+```ts
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SDonutChartColor =
+  | 'positivePrimary'
+  | 'positiveSecondary'
+  | 'negativePrimary'
+  | 'negativeSecondary'
+  | 'neutralPrimary'
+  | 'neutralSecondary';
+```
+
+### SDonutChartLegendPosition
+
+```ts
+/** 범례 위치. */
+export type SDonutChartLegendPosition = 'top' | 'bottom';
+```
+
+### SDonutChartSlicePoint
+
+```ts
+/** 클릭이 가리키는 조각. */
+export interface SDonutChartSlicePoint {
+  /** `data` 안에서의 인덱스 */
+  index: number;
+  name: string;
+  value: number;
+  /** 그려진 조각 전체의 합에 대한 몫(0~1) */
+  ratio: number;
+}
+```
+

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

@@ -0,0 +1,71 @@
+import { type CSSProperties, type ReactNode } from 'react';
+/** 범례 위치. */
+export type SDonutChartLegendPosition = 'top' | 'bottom';
+/**
+ * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로 — 조각을 큰 순으로 줄 때
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SDonutChartPalette = 'multi' | 'gradation' | 'custom';
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SDonutChartColor = 'positivePrimary' | 'positiveSecondary' | 'negativePrimary' | 'negativeSecondary' | 'neutralPrimary' | 'neutralSecondary';
+/** 조각 하나 — 범례 한 줄에 대응한다. */
+export interface SDonutChartSlice {
+    /** 범례·툴팁에 표시할 이름 */
+    name: string;
+    /** 값. 0·음수는 그리지 않는다 — 원은 전체에 대한 몫만 나타낼 수 있다 */
+    value: number;
+}
+/** 클릭이 가리키는 조각. */
+export interface SDonutChartSlicePoint {
+    /** `data` 안에서의 인덱스 */
+    index: number;
+    name: string;
+    value: number;
+    /** 그려진 조각 전체의 합에 대한 몫(0~1) */
+    ratio: number;
+}
+export interface SDonutChartProps {
+    /** 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 */
+    data: SDonutChartSlice[];
+    /** 색 팔레트. `custom` 일 때만 `colors` 를 본다 */
+    palette?: SDonutChartPalette;
+    /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */
+    colors?: SDonutChartColor[];
+    /** 가운데 윗줄에 적을 이름 (예: "총 주문") */
+    centerLabel?: ReactNode;
+    /** 가운데 큰 값. 주지 않으면 그려진 조각의 합계를 `formatValue` 로 적는다 */
+    centerValue?: ReactNode;
+    /** 가운데를 비운다 — 합계 대신 범례·툴팁만으로 읽게 할 때 */
+    hideCenter?: boolean;
+    /** 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 */
+    showValueLabel?: boolean;
+    /** 범례를 보인다 */
+    showLegend?: boolean;
+    /** 범례 위치 */
+    legendPosition?: SDonutChartLegendPosition;
+    /** 조각에 마우스를 올리면 값 상자를 띄운다 */
+    showTooltip?: boolean;
+    /** 값 표시 형식 — 툴팁과 가운데 합계에 함께 쓰인다 */
+    formatValue?: (value: number) => string;
+    /** 조각을 눌렀을 때 */
+    onSliceClick?: (slice: SDonutChartSlicePoint) => void;
+    /** 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 */
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SDonutChart — 도넛 그래프.
+ *
+ * `SPieChart` 와 같이 **한 시점의 전체를 몫으로 나눈 것**을 보여주되, 가운데에 **합계**
+ * (또는 그 전체를 대표하는 값)를 함께 적는다. 몫보다 전체 크기가 먼저 읽혀야 할 때 쓴다.
+ * 조각이 대여섯 개를 넘거나 몫끼리 견주는 것이 목적이면 `SBarChart` 가 맞다.
+ *
+ * 폭은 부모를 따르고(기본 100%), 그림은 그 폭을 한 변으로 하는 정사각형이다.
+ * 고리 두께와 가운데 글자 자리도 폭에 비례해 늘고 준다.
+ */
+export declare const SDonutChart: import("react").ForwardRefExoticComponent<SDonutChartProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { SDonutChart, type SDonutChartProps, type SDonutChartSlice, type SDonutChartSlicePoint, type SDonutChartPalette, type SDonutChartColor, type SDonutChartLegendPosition, } from './SDonutChart';

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

@@ -3,9 +3,10 @@
  *
  * **시안이 없는 컴포넌트다.** 그래서 두 가지 규칙으로 값을 정했다.
  *
- * 1. 두 차트가 공유하는 것(축 여백·눈금·격자·툴팁·범례·팔레트)은 새로 정하지 않고
+ * 1. 두 차트가 공유하는 것(눈금·격자·툴팁·범례·팔레트)은 새로 정하지 않고
  *    바 차트와 `lib/chart` 에서 그대로 가져온다 — 같은 데이터를 막대에서 선으로
- *    바꿨을 때 그림이 시작하는 자리와 눈금이 어긋나면 두 차트를 견줄 수 없다.
+ *    바꿨을 때 눈금이 어긋나면 두 차트를 견줄 수 없다. 단 항목 축 양끝 여백
+ *    (`AXIS_EDGE_PADDING`)은 쓰지 않는다 — 선은 첫·마지막 점이 그림 양끝에 선다.
  * 2. 선 고유의 것(선 두께·점 지름 따위)만 여기서 정한다. 디자인 토큰이 생기면
  *    이 파일의 상수부터 토큰 참조로 바꾼다.
  *

package/dist/components/SPieChart/README.md

@@ -0,0 +1,90 @@
+# SPieChart
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SPieChart
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `SPieChartSlice[]` | — | 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 |
+| `palette?` | `SPieChartPalette` | `'multi'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
+| `colors?` | `SPieChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 |
+| `showValueLabel?` | `boolean` | `false` | 조각 안에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 |
+| `showLegend?` | `boolean` | `true` | 범례를 보인다 |
+| `legendPosition?` | `SPieChartLegendPosition` | `'top'` | 범례 위치 |
+| `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
+| `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
+| `className?` | `string` | — | 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSliceClick` | `(slice: SPieChartSlicePoint) => void` | 조각을 눌렀을 때 |
+
+## Types
+
+### SPieChartSlice
+
+```ts
+/** 조각 하나 — 범례 한 줄에 대응한다. */
+export interface SPieChartSlice {
+  /** 범례·툴팁에 표시할 이름 */
+  name: string;
+  /** 값. 0·음수는 그리지 않는다 — 원은 전체에 대한 몫만 나타낼 수 있다 */
+  value: number;
+}
+```
+
+### SPieChartPalette
+
+```ts
+/**
+ * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로 — 조각을 큰 순으로 줄 때
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SPieChartPalette = 'multi' | 'gradation' | 'custom';
+```
+
+### SPieChartColor
+
+```ts
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SPieChartColor =
+  | 'positivePrimary'
+  | 'positiveSecondary'
+  | 'negativePrimary'
+  | 'negativeSecondary'
+  | 'neutralPrimary'
+  | 'neutralSecondary';
+```
+
+### SPieChartLegendPosition
+
+```ts
+/** 범례 위치. */
+export type SPieChartLegendPosition = 'top' | 'bottom';
+```
+
+### SPieChartSlicePoint
+
+```ts
+/** 클릭이 가리키는 조각. */
+export interface SPieChartSlicePoint {
+  /** `data` 안에서의 인덱스 */
+  index: number;
+  name: string;
+  value: number;
+  /** 그려진 조각 전체의 합에 대한 몫(0~1) */
+  ratio: number;
+}
+```
+

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

@@ -0,0 +1,64 @@
+import { type CSSProperties } from 'react';
+/** 범례 위치. */
+export type SPieChartLegendPosition = 'top' | 'bottom';
+/**
+ * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로 — 조각을 큰 순으로 줄 때
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SPieChartPalette = 'multi' | 'gradation' | 'custom';
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SPieChartColor = 'positivePrimary' | 'positiveSecondary' | 'negativePrimary' | 'negativeSecondary' | 'neutralPrimary' | 'neutralSecondary';
+/** 조각 하나 — 범례 한 줄에 대응한다. */
+export interface SPieChartSlice {
+    /** 범례·툴팁에 표시할 이름 */
+    name: string;
+    /** 값. 0·음수는 그리지 않는다 — 원은 전체에 대한 몫만 나타낼 수 있다 */
+    value: number;
+}
+/** 클릭이 가리키는 조각. */
+export interface SPieChartSlicePoint {
+    /** `data` 안에서의 인덱스 */
+    index: number;
+    name: string;
+    value: number;
+    /** 그려진 조각 전체의 합에 대한 몫(0~1) */
+    ratio: number;
+}
+export interface SPieChartProps {
+    /** 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 */
+    data: SPieChartSlice[];
+    /** 색 팔레트. `custom` 일 때만 `colors` 를 본다 */
+    palette?: SPieChartPalette;
+    /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */
+    colors?: SPieChartColor[];
+    /** 조각 안에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 */
+    showValueLabel?: boolean;
+    /** 범례를 보인다 */
+    showLegend?: boolean;
+    /** 범례 위치 */
+    legendPosition?: SPieChartLegendPosition;
+    /** 조각에 마우스를 올리면 값 상자를 띄운다 */
+    showTooltip?: boolean;
+    /** 값 표시 형식 */
+    formatValue?: (value: number) => string;
+    /** 조각을 눌렀을 때 */
+    onSliceClick?: (slice: SPieChartSlicePoint) => void;
+    /** 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 */
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SPieChart — 원그래프.
+ *
+ * **한 시점의 전체를 몇 개의 몫으로 나눈 것**을 보여줄 때 쓴다. 조각이 대여섯 개를 넘거나
+ * 몫끼리 크기를 견주는 것이 목적이면 `SBarChart` 가 맞다 — 사람은 각도보다 길이를
+ * 훨씬 정확하게 견준다. 합계를 함께 강조하려면 `SDonutChart` 를 쓴다.
+ *
+ * 폭은 부모를 따르고(기본 100%), 그림은 그 폭을 한 변으로 하는 정사각형이다.
+ */
+export declare const SPieChart: import("react").ForwardRefExoticComponent<SPieChartProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { SPieChart, type SPieChartProps, type SPieChartSlice, type SPieChartSlicePoint, type SPieChartPalette, type SPieChartColor, type SPieChartLegendPosition, } from './SPieChart';