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

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

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

@@ -0,0 +1,91 @@
+# 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` | — | 값 표시 형식 |
+| `tooltipFooter?` | `(slice: SPieChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
+| `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,69 @@
+import { type CSSProperties, type ReactNode } 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;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락
+     * (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (slice: SPieChartSlicePoint) => ReactNode;
+    /** 폭은 기본 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';