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

package/dist/index.js

@@ -19609,8 +19609,51 @@ var ChartFrame = /* @__PURE__ */ forwardRef(function ChartFrame2({ title, unit,
   );
 });
 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__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "shrink-0 rounded-full",
+      style: { width: DOT_SIZE, height: DOT_SIZE, background: color }
+    }
+  );
+  if (variant === "default") {
+    return /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { children: item4.name }),
+              item4.value != null && /* @__PURE__ */ jsx("span", { className: "ml-auto typo-body-sm-bold", style: { color: item4.valueColor }, children: item4.value })
+            ]
+          },
+          `${item4.name}-${index}`
+        ))
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "ul",
     {
@@ -19632,14 +19675,7 @@ function ChartLegend({ items, align = "center", activeIndex, className }) {
             activeIndex != null && activeIndex !== index && "opacity-(--opacity-060)"
           ),
           children: [
-            /* @__PURE__ */ 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
           ]
         },
@@ -19652,6 +19688,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"),
@@ -19688,6 +19725,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];
@@ -19702,6 +19764,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 = useRef(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
@@ -20403,6 +20468,7 @@ var SBarChart = /* @__PURE__ */ 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;
@@ -20495,6 +20561,7 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
   title,
   unit,
   curve = "linear",
+  lineStyle = "solid",
   area = false,
   stacked = false,
   palette = "default",
@@ -20703,14 +20770,15 @@ var SLineChart = /* @__PURE__ */ 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 } = useMemo(() => {
     const halos = [];
@@ -20990,6 +21058,7 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
   showValueLabel = false,
   showLegend = true,
   legendPosition = "top",
+  legendVariant = "simple",
   showTooltip = true,
   formatValue = defaultFormat3,
   onSliceClick,
@@ -21017,7 +21086,8 @@ var RadialChart = /* @__PURE__ */ 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;
@@ -21030,8 +21100,14 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
   const legend = showLegend ? /* @__PURE__ */ 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 = useMemo(() => {
@@ -21190,6 +21266,7 @@ var SDonutChart = /* @__PURE__ */ forwardRef(function SDonutChart2({
   showValueLabel = false,
   showLegend = true,
   legendPosition = "top",
+  legendVariant = "simple",
   showTooltip = true,
   ...props
 }, ref) {
@@ -21202,6 +21279,7 @@ var SDonutChart = /* @__PURE__ */ forwardRef(function SDonutChart2({
       showValueLabel,
       showLegend,
       legendPosition,
+      legendVariant,
       showTooltip,
       innerRatio: DONUT_INNER_RATIO,
       kind: "\uB3C4\uB11B \uADF8\uB798\uD504"