sellmate-design-system-react 9.0.0-beta.65 → 9.0.0-beta.66

package/dist/components/SDonutChart/README.md

@@ -16,6 +16,7 @@
 | `showValueLabel?` | `boolean` | `false` | 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 |
 | `showLegend?` | `boolean` | `true` | 범례를 보인다 |
 | `legendPosition?` | `SDonutChartLegendPosition` | `'top'` | 범례 위치 |
+| `legendVariant?` | `SDonutChartLegendVariant` | `'simple'` | 범례 모양. `simple` 이름만 가로로 · `default` 이름+값을 세로로 쌓는 목록 |
 | `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
 | `tooltipFooter?` | `(slice: SDonutChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
@@ -77,6 +78,17 @@ export type SDonutChartColor =
 export type SDonutChartLegendPosition = 'top' | 'bottom';
 ```
 
+### SDonutChartLegendVariant
+
+```ts
+/**
+ * 범례 모양.
+ * - `simple` 이름만 가로로 나열한다 (값 없음)
+ * - `default` 이름 뒤에 값을 적어 세로로 쌓는 목록이다
+ */
+export type SDonutChartLegendVariant = 'simple' | 'default';
+```
+
 ### SDonutChartSlicePoint
 
 ```ts

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

@@ -1,6 +1,12 @@
 import { type CSSProperties, type ReactNode } from 'react';
 /** 범례 위치. */
 export type SDonutChartLegendPosition = 'top' | 'bottom';
+/**
+ * 범례 모양.
+ * - `simple` 이름만 가로로 나열한다 (값 없음)
+ * - `default` 이름 뒤에 값을 적어 세로로 쌓는 목록이다
+ */
+export type SDonutChartLegendVariant = 'simple' | 'default';
 /**
  * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
  * - `multi` 서로 무관한 항목(11색)을 순서대로
@@ -46,6 +52,8 @@ export interface SDonutChartProps {
     showLegend?: boolean;
     /** 범례 위치 */
     legendPosition?: SDonutChartLegendPosition;
+    /** 범례 모양. `simple` 이름만 가로로 · `default` 이름+값을 세로로 쌓는 목록 */
+    legendVariant?: SDonutChartLegendVariant;
     /** 조각에 마우스를 올리면 값 상자를 띄운다 */
     showTooltip?: boolean;
     /** 값 표시 형식 */

package/dist/components/SLineChart/README.md

@@ -13,6 +13,7 @@
 | `title?` | `string` | — | 차트 제목 — 왼쪽 위에 놓인다 |
 | `unit?` | `string` | — | 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 |
 | `curve?` | `SLineChartCurve` | `'linear'` | 점을 잇는 방식. `smooth` 는 값을 넘어가 부풀지 않는 곡선이다 |
+| `lineStyle?` | `SLineChartLineStyle` | `'solid'` | 선 모양. `dashed` 는 차트의 모든 선을 점선으로 그린다 |
 | `area?` | `boolean` | `false` | 선 아래를 계열 색으로 채운다. 크기의 변화를 함께 보여줄 때 쓴다 |
 | `stacked?` | `boolean` | `false` | 계열을 겹쳐 그리는 대신 **아래 계열 위에 쌓는다**. 전체의 크기와 그 안의 구성을 함께 볼 때 쓴다 — 맨 위 선이 곧 합계다. 툴팁은 쌓기 전 각 계열의 값을 보여준다 |
 | `palette?` | `SLineChartPalette` | `'default'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
@@ -57,6 +58,13 @@ export interface SLineChartSeries {
 export type SLineChartCurve = 'linear' | 'smooth';
 ```
 
+### SLineChartLineStyle
+
+```ts
+/** 선 모양. `dashed` 는 차트의 모든 선에 적용된다 — 일부 계열만 점선으로 구분하려면 쓰지 않는다 */
+export type SLineChartLineStyle = 'solid' | 'dashed';
+```
+
 ### SLineChartPalette
 
 ```ts

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

@@ -1,6 +1,8 @@
 import { type CSSProperties, type ReactNode } from 'react';
 /** 점과 점을 잇는 방식. */
 export type SLineChartCurve = 'linear' | 'smooth';
+/** 선 모양. `dashed` 는 차트의 모든 선에 적용된다 — 일부 계열만 점선으로 구분하려면 쓰지 않는다 */
+export type SLineChartLineStyle = 'solid' | 'dashed';
 /** 범례 위치. */
 export type SLineChartLegendPosition = 'top' | 'bottom';
 /**
@@ -52,6 +54,8 @@ export interface SLineChartProps {
     unit?: string;
     /** 점을 잇는 방식. `smooth` 는 값을 넘어가 부풀지 않는 곡선이다 */
     curve?: SLineChartCurve;
+    /** 선 모양. `dashed` 는 차트의 모든 선을 점선으로 그린다 */
+    lineStyle?: SLineChartLineStyle;
     /** 선 아래를 계열 색으로 채운다. 크기의 변화를 함께 보여줄 때 쓴다 */
     area?: boolean;
     /**

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

@@ -28,6 +28,13 @@ export declare const LINE_WIDTH = "var(--cmp-chart-line-width)";
  * 선이 진해지면 굵기 탓에 짚지 않은 이웃 계열까지 덮는다.
  */
 export declare const LINE_OPACITY = "var(--cmp-chart-line-opacity)";
+/**
+ * 점선 패턴(SVG `stroke-dasharray`, px) — dash 11·gap 11.
+ *
+ * `chart.line.*` 에 점선 토큰이 없어 시안 SVG 실측값을 그대로 옮긴다(선 두께 4px 기준
+ * dash:gap = 1:1). 토큰이 아니므로 두께가 바뀌면 이 값도 함께 검토해야 한다.
+ */
+export declare const LINE_DASH = "11 11";
 /** 점의 반지름(px) — 토큰 `chart.line.point.size.default`(지름 10)의 절반. */
 export declare const POINT_RADIUS = 5;
 /** 짚은 항목의 점 — 토큰 `chart.line.point.size.hover`(지름 12)의 절반. 색은 그대로고 커지기만 한다. */

package/dist/index.cjs

@@ -19637,8 +19637,51 @@ var ChartFrame = /* @__PURE__ */ react.forwardRef(function ChartFrame2({ title,
   );
 });
 var DOT_SIZE = 6;
-function ChartLegend({ items, align = "center", activeIndex, className }) {
+function ChartLegend({
+  items,
+  align = "center",
+  activeIndex,
+  className,
+  variant = "simple"
+}) {
   if (items.length === 0) return null;
+  const dot = (color) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "shrink-0 rounded-full",
+      style: { width: DOT_SIZE, height: DOT_SIZE, background: color }
+    }
+  );
+  if (variant === "default") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        className: cn(
+          "flex list-none flex-col gap-(--cmp-chart-doughnut-legend-data-default-gap) p-0",
+          className
+        ),
+        children: items.map((item4, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            className: cn(
+              "flex items-center gap-(--cmp-chart-legendItem-gap)",
+              "py-(--cmp-chart-legendItem-paddingY)",
+              "typo-body-sm-medium text-(--cmp-chart-legendItem-color)",
+              "transition-opacity duration-200 ease-out motion-reduce:transition-none",
+              activeIndex != null && activeIndex !== index && "opacity-(--opacity-060)"
+            ),
+            children: [
+              dot(item4.color),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: item4.name }),
+              item4.value != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto typo-body-sm-bold", style: { color: item4.valueColor }, children: item4.value })
+            ]
+          },
+          `${item4.name}-${index}`
+        ))
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
     {
@@ -19660,14 +19703,7 @@ function ChartLegend({ items, align = "center", activeIndex, className }) {
             activeIndex != null && activeIndex !== index && "opacity-(--opacity-060)"
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "shrink-0 rounded-full",
-                style: { width: DOT_SIZE, height: DOT_SIZE, background: item4.color }
-              }
-            ),
+            dot(item4.color),
             item4.name
           ]
         },
@@ -19680,6 +19716,7 @@ function ChartLegend({ items, align = "center", activeIndex, className }) {
 // src/lib/chart/palette.ts
 var V3 = (path) => `var(--cmp-chart-palette-${path})`;
 var DIMMED = (path) => `var(--cmp-chart-line-point-dimmed-palette-${path})`;
+var VALUE = (path) => `var(--cmp-chart-dataValue-palette-${path})`;
 var colorsOf = (v) => ({
   positivePrimary: v("variation-positivePrimary"),
   positiveSecondary: v("variation-positiveSecondary"),
@@ -19716,6 +19753,31 @@ var CHART_COLORS = colorsOf(V3);
 var CHART_PALETTES = palettesOf(V3);
 var DIMMED_COLORS = colorsOf(DIMMED);
 var DIMMED_PALETTES = palettesOf(DIMMED);
+var DATA_VALUE_COLORS = colorsOf(VALUE);
+var DATA_VALUE_PALETTES = {
+  default: [DATA_VALUE_COLORS.positivePrimary],
+  multi: [
+    VALUE("multi-blue"),
+    VALUE("multi-skyblue"),
+    VALUE("multi-yellow"),
+    VALUE("multi-olive"),
+    VALUE("multi-lightRed"),
+    VALUE("multi-warmBlue"),
+    VALUE("multi-orange"),
+    VALUE("multi-green"),
+    VALUE("multi-navy"),
+    VALUE("multi-grey"),
+    VALUE("multi-red")
+  ],
+  gradation: [
+    V3("gradation-1"),
+    V3("gradation-2"),
+    V3("gradation-3"),
+    V3("gradation-4"),
+    V3("gradation-5"),
+    VALUE("gradation-6")
+  ]
+};
 function pick(names, palettes, palette, index, colors) {
   if (palette === "custom") {
     if (!colors?.length) return palettes.default[0];
@@ -19730,6 +19792,9 @@ function paletteColor(palette, index, colors) {
 function linePointDimmedColor(palette, index, colors) {
   return pick(DIMMED_COLORS, DIMMED_PALETTES, palette, index, colors);
 }
+function dataValueColor(palette, index, colors) {
+  return pick(DATA_VALUE_COLORS, DATA_VALUE_PALETTES, palette, index, colors);
+}
 function useElementSize() {
   const ref = react.useRef(null);
   const [size, setSize] = react.useState({ width: 0, height: 0 });
@@ -20431,6 +20496,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
 // src/components/SLineChart/lineChart.config.ts
 var LINE_WIDTH = "var(--cmp-chart-line-width)";
 var LINE_OPACITY = "var(--cmp-chart-line-opacity)";
+var LINE_DASH = "11 11";
 var POINT_RADIUS = 5;
 var POINT_HOVER_RADIUS = 6;
 var POINT_HALO_RADIUS = 12;
@@ -20523,6 +20589,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
   title,
   unit,
   curve = "linear",
+  lineStyle = "solid",
   area = false,
   stacked = false,
   palette = "default",
@@ -20731,14 +20798,15 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
             style: {
               stroke: colorAt(seriesIndex),
               strokeWidth: LINE_WIDTH,
-              strokeOpacity: LINE_OPACITY
+              strokeOpacity: LINE_OPACITY,
+              strokeDasharray: lineStyle === "dashed" ? LINE_DASH : void 0
             }
           },
           `line-${seriesIndex}-${runIndex}`
         );
       })
     ),
-    [plotted, smooth, colorAt]
+    [plotted, smooth, colorAt, lineStyle]
   );
   const { pointHalos, pointDots } = react.useMemo(() => {
     const halos = [];
@@ -21018,6 +21086,7 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
   showValueLabel = false,
   showLegend = true,
   legendPosition = "top",
+  legendVariant = "simple",
   showTooltip = true,
   formatValue = defaultFormat3,
   onSliceClick,
@@ -21045,7 +21114,8 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
         ratio,
         start,
         end: angle,
-        color: paletteColor(effective, slice2.index, colors)
+        color: paletteColor(effective, slice2.index, colors),
+        valueColor: dataValueColor(effective, slice2.index, colors)
       };
     });
     return list;
@@ -21058,8 +21128,14 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
   const legend = showLegend ? /* @__PURE__ */ jsxRuntime.jsx(
     ChartLegend,
     {
-      items: arcs.map((arc2) => ({ name: arc2.name, color: arc2.color })),
-      activeIndex: hoveredArc ? arcs.indexOf(hoveredArc) : null
+      items: arcs.map((arc2) => ({
+        name: arc2.name,
+        color: arc2.color,
+        value: legendVariant === "default" ? formatValue(arc2.value) : void 0,
+        valueColor: arc2.valueColor
+      })),
+      activeIndex: hoveredArc ? arcs.indexOf(hoveredArc) : null,
+      variant: legendVariant
     }
   ) : null;
   const tooltipAnchor = react.useMemo(() => {
@@ -21218,6 +21294,7 @@ var SDonutChart = /* @__PURE__ */ react.forwardRef(function SDonutChart2({
   showValueLabel = false,
   showLegend = true,
   legendPosition = "top",
+  legendVariant = "simple",
   showTooltip = true,
   ...props
 }, ref) {
@@ -21230,6 +21307,7 @@ var SDonutChart = /* @__PURE__ */ react.forwardRef(function SDonutChart2({
       showValueLabel,
       showLegend,
       legendPosition,
+      legendVariant,
       showTooltip,
       innerRatio: DONUT_INNER_RATIO,
       kind: "\uB3C4\uB11B \uADF8\uB798\uD504"