sellmate-design-system-react 9.0.0-beta.49 → 9.0.0-beta.50

package/dist/index.js

@@ -939,6 +939,29 @@ var Icon_caretUp = (p) => {
     }
   );
 };
+var Icon_chat = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.2961 2.25C15.6684 2.25008 18.4344 4.83725 18.7228 8.13477C21.4143 9.74397 22.7011 13.2749 21.1398 16.3975C20.6005 17.4762 20.4853 18.7183 20.8166 19.8779L21.048 20.6885C21.2975 21.5618 20.3398 22.2835 19.5695 21.8027L16.2853 19.75H12.0002C9.43974 19.75 7.24026 18.2099 6.27457 16.0059L4.16129 17.3037C3.38392 17.7807 2.42724 17.0507 2.6818 16.1748L2.92301 15.3428C3.27732 14.1243 3.1547 12.8165 2.57926 11.6855C0.381511 7.36716 3.51808 2.25032 8.36344 2.25H12.2961ZM8.36344 3.75C4.63792 3.75032 2.22559 7.6845 3.9152 11.0049C4.60038 12.3512 4.79173 13.8901 4.46598 15.3564L6.89567 13.8643L7.06656 13.7744C7.24277 13.6973 7.43434 13.6572 7.62809 13.6572H12.2961C15.0317 13.6571 17.2499 11.4397 17.2502 8.7041C17.2502 5.9683 15.0318 3.75008 12.2961 3.75H8.36344Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_check = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsx(
@@ -1650,6 +1673,59 @@ var Icon_event = (p) => {
     }
   );
 };
+var Icon_focus = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3 16.25C3.41421 16.25 3.75 16.5858 3.75 17V20C3.75 20.1381 3.86193 20.25 4 20.25H7C7.41421 20.25 7.75 20.5858 7.75 21C7.75 21.4142 7.41421 21.75 7 21.75H4C3.0335 21.75 2.25 20.9665 2.25 20V17C2.25 16.5858 2.58579 16.25 3 16.25Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M21 16.25C21.4142 16.25 21.75 16.5858 21.75 17V20C21.75 20.9665 20.9665 21.75 20 21.75H17C16.5858 21.75 16.25 21.4142 16.25 21C16.25 20.5858 16.5858 20.25 17 20.25H20C20.1381 20.25 20.25 20.1381 20.25 20V17C20.25 16.5858 20.5858 16.25 21 16.25Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M12 8.25C14.0711 8.25 15.75 9.92893 15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25ZM12 9.75C10.7574 9.75 9.75 10.7574 9.75 12C9.75 13.2426 10.7574 14.25 12 14.25C13.2426 14.25 14.25 13.2426 14.25 12C14.25 10.7574 13.2426 9.75 12 9.75Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M7 2.25C7.41421 2.25 7.75 2.58579 7.75 3C7.75 3.41421 7.41421 3.75 7 3.75H4C3.86193 3.75 3.75 3.86193 3.75 4V7C3.75 7.41421 3.41421 7.75 3 7.75C2.58579 7.75 2.25 7.41421 2.25 7V4C2.25 3.0335 3.0335 2.25 4 2.25H7Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M20 2.25C20.9665 2.25 21.75 3.0335 21.75 4V7C21.75 7.41421 21.4142 7.75 21 7.75C20.5858 7.75 20.25 7.41421 20.25 7V4C20.25 3.86193 20.1381 3.75 20 3.75H17C16.5858 3.75 16.25 3.41421 16.25 3C16.25 2.58579 16.5858 2.25 17 2.25H20Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_global = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsx(
@@ -2010,6 +2086,43 @@ var Icon_line = (p) => {
     }
   );
 };
+var Icon_link = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10 6.25C10.4142 6.25 10.75 6.58579 10.75 7C10.75 7.41421 10.4142 7.75 10 7.75H7C4.65279 7.75 2.75 9.65279 2.75 12C2.75 14.3472 4.65279 16.25 7 16.25H10C10.4142 16.25 10.75 16.5858 10.75 17C10.75 17.4142 10.4142 17.75 10 17.75H7C3.82436 17.75 1.25 15.1756 1.25 12C1.25 8.82436 3.82436 6.25 7 6.25H10Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M17 6.25C20.1756 6.25 22.75 8.82436 22.75 12C22.75 15.1756 20.1756 17.75 17 17.75H14C13.5858 17.75 13.25 17.4142 13.25 17C13.25 16.5858 13.5858 16.25 14 16.25H17C19.3472 16.25 21.25 14.3472 21.25 12C21.25 9.65279 19.3472 7.75 17 7.75H14C13.5858 7.75 13.25 7.41421 13.25 7C13.25 6.58579 13.5858 6.25 14 6.25H17Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M16 11.25C16.4142 11.25 16.75 11.5858 16.75 12C16.75 12.4142 16.4142 12.75 16 12.75H8C7.58579 12.75 7.25 12.4142 7.25 12C7.25 11.5858 7.58579 11.25 8 11.25H16Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_location = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsx(
@@ -3221,6 +3334,7 @@ var ICONS = {
   caretLeft: Icon_caretLeft,
   caretRight: Icon_caretRight,
   caretUp: Icon_caretUp,
+  chat: Icon_chat,
   check: Icon_check,
   checkFill: Icon_checkFill,
   checkOutline: Icon_checkOutline,
@@ -3247,6 +3361,7 @@ var ICONS = {
   edit: Icon_edit,
   etc: Icon_etc,
   event: Icon_event,
+  focus: Icon_focus,
   global: Icon_global,
   helpFill: Icon_helpFill,
   helpOutline: Icon_helpOutline,
@@ -3257,6 +3372,7 @@ var ICONS = {
   launcher: Icon_launcher,
   leftRight: Icon_leftRight,
   line: Icon_line,
+  link: Icon_link,
   location: Icon_location,
   logout: Icon_logout,
   minus: Icon_minus,
@@ -4996,6 +5112,11 @@ var SChatMessageImpl = /* @__PURE__ */ forwardRef(function SChatMessage({
         // items-start 라 이름이 있든 없든 아바타는 언제나 첫 줄에 붙는다.
         "flex items-start gap-(--cmp-chatMessage-avatarGap)",
         outgoing && "flex-row-reverse",
+        // 반대편은 비워 둔다 — 받은 메시지는 오른쪽, 보낸 메시지는 왼쪽. 긴 메시지가 화면 폭을
+        // 다 차지하면 어느 쪽이 말한 것인지가 자리로 읽히지 않으므로, 말풍선이 반대편 끝까지
+        // 가지 못하게 막는다. 논리 속성(ps/pe)을 쓰지 않는 이유: flex-row-reverse 는 글 방향을
+        // 뒤집지 않아 보낸 메시지에서 여백이 같은 쪽에 남는다.
+        outgoing ? "pl-(--cmp-chatMessage-row-paddingInset)" : "pr-(--cmp-chatMessage-row-paddingInset)",
         className
       ),
       ...rest,
@@ -17692,6 +17813,7 @@ var cssLen2 = (v) => v == null ? void 0 : typeof v === "number" ? `${v}px` : v;
 function SKeyValueTable({
   fields = [],
   values = {},
+  dense = false,
   search = false,
   radius = "default",
   bordered = true,
@@ -17706,8 +17828,8 @@ function SKeyValueTable({
     value,
     values: { ...values, [name]: value }
   });
-  const cellHeight = "var(--cmp-table-keyValue-height)";
-  const cellPadY = "var(--cmp-table-keyValue-body-paddingY)";
+  const cellHeight = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-keyValue-height)";
+  const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-keyValue-body-paddingY)";
   const renderField = (f) => {
     if (f.render) return f.render;
     const opt = { ...f.options ?? {} };
@@ -18225,6 +18347,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
   categories,
   series,
   direction = "vertical",
+  stacked = false,
   palette = "default",
   colors: customColors,
   max,
@@ -18244,6 +18367,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
   const { ref: plotRef, size } = useElementSize();
   const { ref: axisTextRef, size: axisText } = useElementSize();
   const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const clipId = useId();
   const [hovered, setHovered] = useState(null);
   const hoveredCategory = hovered?.category ?? null;
   const perCategory = series.length === 1;
@@ -18251,23 +18375,37 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
     (seriesIndex, categoryIndex) => paletteColor(palette, perCategory ? categoryIndex : seriesIndex, customColors),
     [palette, customColors, perCategory]
   );
+  const stackTotals = useMemo(
+    () => categories.map(
+      (_, categoryIndex) => series.reduce(
+        (acc, s) => {
+          const value = s.data[categoryIndex];
+          if (value == null || !Number.isFinite(value)) return acc;
+          return value < 0 ? { positive: acc.positive, negative: acc.negative + value } : { positive: acc.positive + value, negative: acc.negative };
+        },
+        { positive: 0, negative: 0 }
+      )
+    ),
+    [categories, series]
+  );
   const scale = useMemo(
     () => niceScale(
-      series.flatMap((s) => s.data),
+      stacked ? stackTotals.flatMap((total) => [total.positive, total.negative]) : series.flatMap((s) => s.data),
       tickCount,
       max
     ),
-    [series, tickCount, max]
+    [stacked, stackTotals, series, tickCount, max]
   );
+  const barSlots = stacked ? 1 : series.length;
   const axisLength = vertical ? size.width : size.height;
   const layout = useMemo(
-    () => bandLayout(axisLength, categories.length, series.length, barSize),
-    [axisLength, categories.length, series.length, barSize]
+    () => bandLayout(axisLength, categories.length, barSlots, barSize),
+    [axisLength, categories.length, barSlots, barSize]
   );
   const zeroRatio = ratioOf(0, scale);
-  const minPlotWidth = vertical ? categories.length * minBand(series.length) : 0;
+  const minPlotWidth = vertical ? categories.length * minBand(barSlots) : 0;
   const totalHeight = height ?? (vertical ? 320 : void 0);
-  const plotHeight = totalHeight == null ? Math.max(1, categories.length) * minBand(series.length) : typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
+  const plotHeight = totalHeight == null ? Math.max(1, categories.length) * minBand(barSlots) : typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
   const legend = showLegend ? /* @__PURE__ */ jsx(ChartLegend, { items: series.map((s, i) => ({ name: s.name, color: colorAt(i, 0) })) }) : null;
   const handleMove = (event) => {
     if (!showTooltip || categories.length === 0 || series.length === 0) return;
@@ -18324,7 +18462,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
     }
   );
   const bars = useMemo(
-    () => size.width > 0 && size.height > 0 ? series.flatMap(
+    () => !stacked && size.width > 0 && size.height > 0 ? series.flatMap(
       (s, seriesIndex) => categories.map((_, categoryIndex) => {
         const value = s.data[categoryIndex];
         if (value == null || !Number.isFinite(value)) return null;
@@ -18401,9 +18539,105 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
       formatValue,
       onBarClick,
       colorAt,
-      hoveredCategory
+      hoveredCategory,
+      stacked
     ]
   );
+  const stackedBars = useMemo(() => {
+    if (!stacked || size.width <= 0 || size.height <= 0) return [];
+    const pxOf = (value) => vertical ? size.height - ratioOf(value, scale) * size.height : ratioOf(value, scale) * size.width;
+    return categories.map((_, categoryIndex) => {
+      const dimmed = hoveredCategory != null && hoveredCategory !== categoryIndex;
+      const barStart = layout.offset + categoryIndex * layout.band + (layout.band - layout.bar) / 2;
+      let positive = 0;
+      let negative = 0;
+      const segments = series.flatMap((s, seriesIndex) => {
+        const value = s.data[categoryIndex];
+        if (value == null || !Number.isFinite(value) || value === 0) return [];
+        const from = value < 0 ? negative + value : positive;
+        const to = value < 0 ? negative : positive + value;
+        if (value < 0) negative += value;
+        else positive += value;
+        return [{ seriesIndex, name: s.name, value, from, to }];
+      });
+      if (segments.length === 0) return null;
+      const boxOf = (from, to) => {
+        const a = pxOf(from);
+        const b = pxOf(to);
+        return vertical ? { x: barStart, y: Math.min(a, b), width: layout.bar, height: Math.abs(a - b) } : { x: Math.min(a, b), y: barStart, width: Math.abs(a - b), height: layout.bar };
+      };
+      const outlineOf = (extent, negativeSide) => {
+        const box3 = negativeSide ? boxOf(extent, 0) : boxOf(0, extent);
+        return barPath(box3.x, box3.y, box3.width, box3.height, direction, negativeSide);
+      };
+      const positiveClip = `${clipId}-p-${categoryIndex}`;
+      const negativeClip = `${clipId}-n-${categoryIndex}`;
+      const total = positive + negative;
+      const outer = pxOf(total >= 0 ? positive : negative);
+      const labelX = vertical ? barStart + layout.bar / 2 : total >= 0 ? outer + VALUE_LABEL_GAP : outer - VALUE_LABEL_GAP;
+      const labelY = vertical ? total >= 0 ? outer - VALUE_LABEL_GAP : outer + VALUE_LABEL_GAP + 10 : barStart + layout.bar / 2;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          positive > 0 && /* @__PURE__ */ jsx("clipPath", { id: positiveClip, children: /* @__PURE__ */ jsx("path", { d: outlineOf(positive, false) }) }),
+          negative < 0 && /* @__PURE__ */ jsx("clipPath", { id: negativeClip, children: /* @__PURE__ */ jsx("path", { d: outlineOf(negative, true) }) })
+        ] }),
+        segments.map((segment) => {
+          const box3 = boxOf(segment.from, segment.to);
+          return /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: box3.x,
+              y: box3.y,
+              width: box3.width,
+              height: box3.height,
+              clipPath: `url(#${segment.value < 0 ? negativeClip : positiveClip})`,
+              style: {
+                fill: colorAt(segment.seriesIndex, categoryIndex),
+                // 흐림은 조각에만 건다 — 묶음에 걸면 합계 라벨까지 같이 흐려진다.
+                opacity: dimmed ? BAR_OPACITY_DIMMED : BAR_OPACITY_DEFAULT,
+                cursor: onBarClick ? "pointer" : void 0
+              },
+              onClick: onBarClick ? () => onBarClick({
+                seriesIndex: segment.seriesIndex,
+                categoryIndex,
+                value: segment.value
+              }) : void 0,
+              children: /* @__PURE__ */ jsx("title", { children: `${categories[categoryIndex]} ${segment.name} ${formatValue(segment.value)}` })
+            },
+            segment.seriesIndex
+          );
+        }),
+        showValueLabel && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: labelX,
+            y: labelY,
+            className: "typo-body-sm-medium",
+            style: { fill: BAR_VALUE_COLOR },
+            textAnchor: vertical ? "middle" : total >= 0 ? "start" : "end",
+            dominantBaseline: vertical ? "auto" : "central",
+            children: formatValue(total)
+          }
+        )
+      ] }, categoryIndex);
+    });
+  }, [
+    stacked,
+    size.width,
+    size.height,
+    series,
+    categories,
+    layout,
+    scale,
+    vertical,
+    direction,
+    showValueLabel,
+    formatValue,
+    onBarClick,
+    colorAt,
+    hoveredCategory,
+    clipId
+  ]);
   const axisLabels = /* @__PURE__ */ jsx(
     ChartAxisLabels,
     {
@@ -18437,7 +18671,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
                   width: size.width,
                   height: size.height,
                   role: "img",
-                  "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 \uB9C9\uB300 \uADF8\uB798\uD504`,
+                  "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uB9C9\uB300 \uADF8\uB798\uD504`,
                   children: [
                     /* @__PURE__ */ jsx(
                       ChartGrid,
@@ -18462,7 +18696,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
                         }
                       }
                     ),
-                    bars
+                    stacked ? stackedBars : bars
                   ]
                 }
               ),