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

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;