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

package/dist/index.cjs

@@ -4945,11 +4945,19 @@ var SChatFileImpl = /* @__PURE__ */ react.forwardRef(function SChatFile({ name,
 });
 var SChatFile2 = /* @__PURE__ */ withDisplayName(SChatFileImpl, "SChatFile");
 var CHAT_MESSAGE_DIRECTIONS = ["incoming", "outgoing"];
-var CHAT_MESSAGE_VARIANTS = ["default", "template"];
+var CHAT_MESSAGE_VARIANTS = ["default", "template", "admin"];
 var BUBBLE_SURFACE = {
   incoming: "bg-(--cmp-chatBubble-incoming-bg) text-(--cmp-chatBubble-incoming-content)",
-  outgoing: "bg-(--cmp-chatBubble-outgoing-bg) text-(--cmp-chatBubble-outgoing-content)",
-  template: "bg-(--cmp-chatBubble-templete-bg) text-(--cmp-chatBubble-templete-content)"
+  outgoing: "bg-(--cmp-chatBubble-outgoing-general-bg) text-(--cmp-chatBubble-outgoing-general-content)",
+  template: "bg-(--cmp-chatBubble-templete-bg) text-(--cmp-chatBubble-templete-content)",
+  // TODO: `chatBubble.outgoing.admin` 토큰이 생기면 둘 다 그쪽으로 교체한다.
+  // 지금은 admin 면을 가리키는 컴포넌트 토큰이 없어 글자색만 시맨틱 토큰을 직접 쓴다.
+  admin: "bg-(--cmp-chatBubble-outgoing-default-bg) text-(--sys-color-fg-deep)"
+};
+var OUTGOING_SURFACE = {
+  default: "outgoing",
+  template: "template",
+  admin: "admin"
 };
 var CHAT_MESSAGE_READ_STATUSES = ["read", "unread"];
 var READ_STATUS_LABEL = {
@@ -5004,7 +5012,7 @@ var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
   ...rest
 }, ref) {
   const outgoing = direction === "outgoing";
-  const surface = direction === "outgoing" && variant === "template" ? "template" : direction;
+  const surface = outgoing ? OUTGOING_SURFACE[variant] : "incoming";
   const bubbles = messages ?? [];
   const files = attachments ?? [];
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -17877,6 +17885,673 @@ function SKeyValueTable({
     )
   ] });
 }
+
+// src/lib/chart/scale.ts
+function niceNum(range, round) {
+  if (range <= 0) return 1;
+  const exponent = Math.floor(Math.log10(range));
+  const fraction = range / 10 ** exponent;
+  let nice;
+  if (round) {
+    nice = fraction < 1.5 ? 1 : fraction < 3 ? 2 : fraction < 7 ? 5 : 10;
+  } else {
+    nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10;
+  }
+  return nice * 10 ** exponent;
+}
+function trim(value, step) {
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+  return Number(value.toFixed(Math.min(decimals, 10)));
+}
+function niceScale(values, tickCount, fixedMax) {
+  const finite = values.filter(Number.isFinite);
+  const count = Math.max(2, Math.floor(tickCount));
+  const rawMin = Math.min(0, ...finite);
+  const rawMax = fixedMax ?? Math.max(0, ...finite);
+  if (!Number.isFinite(rawMin) || !Number.isFinite(rawMax) || rawMax === rawMin) {
+    const ticks2 = Array.from({ length: count }, (_, i) => i);
+    return { min: 0, max: count - 1, ticks: ticks2 };
+  }
+  const range = niceNum(rawMax - rawMin, false);
+  const step = niceNum(range / (count - 1), true);
+  const min = trim(Math.floor(rawMin / step) * step, step);
+  const max = trim(Math.ceil(rawMax / step) * step, step);
+  const ticks = [];
+  for (let v = min; v <= max + step / 2; v += step) ticks.push(trim(v, step));
+  return { min, max, ticks };
+}
+function ratioOf(value, scale) {
+  const span = scale.max - scale.min;
+  if (span <= 0) return 0;
+  return (value - scale.min) / span;
+}
+var AXIS_LABEL_GAP = 8;
+function ChartGrid({ scale, direction, width, height }) {
+  const vertical = direction === "vertical";
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { "aria-hidden": true, children: scale.ticks.map((tick) => {
+    const ratio = ratioOf(tick, scale);
+    const isBaseline = tick === 0;
+    const color = isBaseline ? "var(--cmp-chart-baseline-color)" : "var(--cmp-chart-grid-line-color)";
+    const position = vertical ? height - ratio * height : ratio * width;
+    const extent = vertical ? height : width;
+    const snapped = Math.min(Math.max(Math.round(position), 0), Math.max(0, extent - 1)) + 0.5;
+    return vertical ? /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: 0,
+        x2: width,
+        y1: snapped,
+        y2: snapped,
+        stroke: color,
+        strokeWidth: 1
+      },
+      tick
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: snapped,
+        x2: snapped,
+        y1: 0,
+        y2: height,
+        stroke: color,
+        strokeWidth: 1
+      },
+      tick
+    );
+  }) });
+}
+function ChartAxisLabels({
+  scale,
+  direction,
+  format,
+  className,
+  style,
+  sampleRef
+}) {
+  const vertical = direction === "vertical";
+  const widest = scale.ticks.reduce((longest, tick) => {
+    const text = format(tick);
+    return text.length > longest.length ? text : longest;
+  }, "");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "relative typo-body-sm-medium text-(--cmp-chart-axis-color)",
+        vertical ? "h-full" : "w-full",
+        className
+      ),
+      style,
+      children: [
+        scale.ticks.map((tick) => {
+          const ratio = ratioOf(tick, scale);
+          return vertical ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute right-0 -translate-y-1/2 whitespace-nowrap",
+              style: { top: `${(1 - ratio) * 100}%` },
+              children: format(tick)
+            },
+            tick
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+              style: { left: `${ratio * 100}%` },
+              children: format(tick)
+            },
+            tick
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { ref: sampleRef, "aria-hidden": true, className: "invisible inline-block whitespace-nowrap", children: vertical ? widest : "0" })
+      ]
+    }
+  );
+}
+var ChartFrame = /* @__PURE__ */ react.forwardRef(function ChartFrame2({ legend, legendPosition = "top", children, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex w-full flex-col gap-(--cmp-chart-gap)",
+        "p-(--cmp-chart-paddingAll) bg-(--cmp-chart-bg)",
+        className
+      ),
+      style,
+      ...props,
+      children: [
+        legend && legendPosition === "top" && legend,
+        children,
+        legend && legendPosition === "bottom" && legend
+      ]
+    }
+  );
+});
+var DOT_SIZE = 6;
+function ChartLegend({ items, align = "center", activeIndex, className }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      className: cn(
+        "flex list-none flex-wrap items-center gap-x-(--cmp-chart-legend-group-gap) p-0",
+        align === "start" && "justify-start",
+        align === "center" && "justify-center",
+        align === "end" && "justify-end",
+        className
+      ),
+      children: items.map((item4, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: cn(
+            "flex items-center gap-(--cmp-chart-legend-legendItem-gap)",
+            "py-(--cmp-chart-legend-legendItem-paddingY)",
+            "typo-body-sm-medium text-(--cmp-chart-legend-legendItem-color)",
+            "transition-opacity",
+            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 }
+              }
+            ),
+            item4.name
+          ]
+        },
+        `${item4.name}-${index}`
+      ))
+    }
+  );
+}
+
+// src/lib/chart/palette.ts
+var V3 = (path) => `var(--cmp-chart-palette-${path})`;
+var CHART_COLORS = {
+  positivePrimary: V3("variation-positivePrimary"),
+  positiveSecondary: V3("variation-positiveSecondary"),
+  negativePrimary: V3("variation-negativePrimary"),
+  negativeSecondary: V3("variation-negativeSecondary"),
+  neutralPrimary: V3("variation-neutralPrimary"),
+  neutralSecondary: V3("variation-neutralSecondary")
+};
+var CHART_PALETTES = {
+  default: [V3("single")],
+  multi: [
+    V3("multi-blue"),
+    V3("multi-skyblue"),
+    V3("multi-yellow"),
+    V3("multi-olive"),
+    V3("multi-lightRed"),
+    V3("multi-warmBlue"),
+    V3("multi-orange"),
+    V3("multi-green"),
+    V3("multi-navy"),
+    V3("multi-grey"),
+    V3("multi-red")
+  ],
+  gradation: [
+    V3("gradation-1"),
+    V3("gradation-2"),
+    V3("gradation-3"),
+    V3("gradation-4"),
+    V3("gradation-5"),
+    V3("gradation-6")
+  ]
+};
+function paletteColor(palette, index, colors) {
+  if (palette === "custom") {
+    if (!colors?.length) return CHART_PALETTES.default[0];
+    return CHART_COLORS[colors[index % colors.length]];
+  }
+  const list = CHART_PALETTES[palette] ?? CHART_PALETTES.default;
+  return list[index % list.length];
+}
+function useElementSize() {
+  const ref = react.useRef(null);
+  const [size, setSize] = react.useState({ width: 0, height: 0 });
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const update = () => {
+      const { width, height } = element.getBoundingClientRect();
+      setSize(
+        (prev) => Math.abs(prev.width - width) < 0.5 && Math.abs(prev.height - height) < 0.5 ? prev : { width, height }
+      );
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return { ref, size };
+}
+var DOT_SIZE2 = 6;
+var CURSOR_OFFSET = 12;
+function place(cursor, size, extent) {
+  if (!extent || !size) return cursor + CURSOR_OFFSET;
+  const after = cursor + CURSOR_OFFSET;
+  if (after + size <= extent) return after;
+  const before = cursor - CURSOR_OFFSET - size;
+  if (before >= 0) return before;
+  return Math.max(0, Math.min(after, extent - size));
+}
+function ChartTooltip({ title, items, x, y, bounds, className }) {
+  const { ref, size } = useElementSize();
+  const measured = size.width > 0 && size.height > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "tooltip",
+      className: cn(
+        // left/top 대신 transform 으로 옮긴다. 좌표를 바꾸면 마우스가 움직일 때마다
+        // 리플로우가 나 차트가 미세하게 흔들려 보인다. transform 은 레이아웃을
+        // 건드리지 않으므로, 크기를 재기 전에 잠깐 밖으로 나가도 스크롤이 생기지 않는다.
+        "pointer-events-none absolute top-0 left-0 z-10 w-max",
+        "flex flex-col gap-(--cmp-chart-chartTooltip-gap)",
+        "px-(--cmp-chart-chartTooltip-paddingX) py-(--cmp-chart-chartTooltip-paddingY)",
+        "rounded-(--cmp-chart-chartTooltip-radius) bg-(--cmp-chart-chartTooltip-bg) shadow-floating",
+        className
+      ),
+      style: {
+        // 크기를 재기 전에는 원점에 숨겨 둔다. 커서 옆에 그려 두면 그림 밖으로
+        // 넘쳐 스크롤 영역이 잠깐 늘어나고, 차트 전체가 한 번 흔들린다.
+        // transform 도 스크롤 영역 계산에는 포함되므로 위치만 바꿔서는 못 막는다.
+        transform: measured ? `translate(${place(x, size.width, bounds?.width ?? 0)}px, ${place(
+          y,
+          size.height,
+          bounds?.height ?? 0
+        )}px)` : void 0,
+        visibility: measured ? void 0 : "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-bold text-(--cmp-chart-chartTooltip-title-color)", children: title }),
+        items.map((item4, index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-sd-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "shrink-0 rounded-full",
+              style: { width: DOT_SIZE2, height: DOT_SIZE2, background: item4.color }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default text-(--sys-color-fg-primary)", children: item4.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-bold ml-auto text-(--sys-color-fg-primary)", children: item4.value })
+        ] }, `${item4.label}-${index}`))
+      ]
+    }
+  );
+}
+
+// src/components/SBarChart/barChart.config.ts
+var BAR_SIZE_MIN = 24;
+var BAR_SIZE_MAX = 80;
+var BAR_GAP = 6;
+var GROUP_PADDING_MIN = 8;
+var GROUP_PADDING_MAX = 24;
+var VALUE_LABEL_GAP = 6;
+var BAR_RADIUS = 8;
+var BAR_OPACITY_DEFAULT = "var(--opacity-080)";
+var BAR_OPACITY_DIMMED = "var(--opacity-060)";
+var BAR_VALUE_COLOR = "var(--sys-color-field-text-readOnly)";
+function bandLayout(size, categoryCount, seriesCount, barSizeMax = BAR_SIZE_MAX) {
+  const categories = Math.max(1, categoryCount);
+  const series = Math.max(1, seriesCount);
+  const gaps = (series - 1) * BAR_GAP;
+  const barRange = BAR_SIZE_MAX - BAR_SIZE_MIN;
+  const padRange = GROUP_PADDING_MAX - GROUP_PADDING_MIN;
+  const maxBar = Math.min(Math.max(BAR_SIZE_MIN, barSizeMax), BAR_SIZE_MAX);
+  const tMax = (maxBar - BAR_SIZE_MIN) / barRange;
+  const bandMin = BAR_SIZE_MIN * series + gaps + GROUP_PADDING_MIN * 2;
+  const span = barRange * series + padRange * 2;
+  const band = Math.min(size / categories, bandMin + span * tMax);
+  const t = Math.min(Math.max((band - bandMin) / span, 0), tMax);
+  const bar = BAR_SIZE_MIN + barRange * t;
+  const padding = GROUP_PADDING_MIN + padRange * t;
+  const group = bar * series + gaps;
+  return {
+    band,
+    bar,
+    group,
+    padding,
+    offset: Math.max(0, (size - band * categories) / 2)
+  };
+}
+var defaultFormat = (value) => value.toLocaleString();
+function minBand(seriesCount) {
+  const series = Math.max(1, seriesCount);
+  return series * BAR_SIZE_MIN + (series - 1) * BAR_GAP + GROUP_PADDING_MIN * 2;
+}
+function barPath(x, y, width, height, direction, negative) {
+  const r = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
+  if (r === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
+  if (direction === "vertical") {
+    return negative ? (
+      // 아래로 자란다 — 아래쪽 두 모서리가 둥글다
+      `M${x} ${y}h${width}v${height - r}a${r} ${r} 0 0 1 ${-r} ${r}h${-(width - 2 * r)}a${r} ${r} 0 0 1 ${-r} ${-r}Z`
+    ) : (
+      // 위로 자란다 — 위쪽 두 모서리가 둥글다
+      `M${x} ${y + height}v${-(height - r)}a${r} ${r} 0 0 1 ${r} ${-r}h${width - 2 * r}a${r} ${r} 0 0 1 ${r} ${r}v${height - r}Z`
+    );
+  }
+  return negative ? (
+    // 왼쪽으로 자란다
+    `M${x + width} ${y}h${-(width - r)}a${r} ${r} 0 0 0 ${-r} ${r}v${height - 2 * r}a${r} ${r} 0 0 0 ${r} ${r}h${width - r}Z`
+  ) : (
+    // 오른쪽으로 자란다
+    `M${x} ${y}h${width - r}a${r} ${r} 0 0 1 ${r} ${r}v${height - 2 * r}a${r} ${r} 0 0 1 ${-r} ${r}h${-(width - r)}Z`
+  );
+}
+var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
+  categories,
+  series,
+  direction = "vertical",
+  palette = "default",
+  colors: customColors,
+  max,
+  tickCount = 8,
+  barSize = BAR_SIZE_MAX,
+  showValueLabel = true,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  formatValue = defaultFormat,
+  height,
+  onBarClick,
+  className,
+  style
+}, ref) {
+  const vertical = direction === "vertical";
+  const { ref: plotRef, size } = useElementSize();
+  const { ref: axisTextRef, size: axisText } = useElementSize();
+  const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const [hovered, setHovered] = react.useState(null);
+  const hoveredCategory = hovered?.category ?? null;
+  const perCategory = series.length === 1;
+  const colorAt = react.useCallback(
+    (seriesIndex, categoryIndex) => paletteColor(palette, perCategory ? categoryIndex : seriesIndex, customColors),
+    [palette, customColors, perCategory]
+  );
+  const scale = react.useMemo(
+    () => niceScale(
+      series.flatMap((s) => s.data),
+      tickCount,
+      max
+    ),
+    [series, tickCount, max]
+  );
+  const axisLength = vertical ? size.width : size.height;
+  const layout = react.useMemo(
+    () => bandLayout(axisLength, categories.length, series.length, barSize),
+    [axisLength, categories.length, series.length, barSize]
+  );
+  const zeroRatio = ratioOf(0, scale);
+  const minPlotWidth = vertical ? categories.length * minBand(series.length) : 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 legend = showLegend ? /* @__PURE__ */ jsxRuntime.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;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const along = (vertical ? x : y) - layout.offset;
+    const category = Math.floor(along / layout.band);
+    if (category < 0 || category >= categories.length) {
+      setHovered(null);
+      return;
+    }
+    setHovered({ category, x, y });
+  };
+  const tooltipItems = hovered == null ? [] : series.flatMap((s, i) => {
+    const value = s.data[hovered.category];
+    if (value == null || !Number.isFinite(value)) return [];
+    return [
+      { color: colorAt(i, hovered.category), label: s.name, value: formatValue(value) }
+    ];
+  });
+  const categoryLabels = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "relative typo-body-sm-medium text-(--cmp-chart-axis-color)",
+        vertical ? "w-full" : "h-full"
+      ),
+      style: vertical ? { minWidth: minPlotWidth || void 0 } : { height: plotHeight },
+      children: [
+        categories.map((label, index) => {
+          const center = layout.offset + (index + 0.5) * layout.band;
+          return vertical ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+              style: { left: center },
+              children: label
+            },
+            `${label}-${index}`
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute right-0 -translate-y-1/2 whitespace-nowrap",
+              style: { top: center },
+              children: label
+            },
+            `${label}-${index}`
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "invisible block whitespace-nowrap", children: vertical ? "0" : categories.reduce((longest, c) => c.length > longest.length ? c : longest, "") })
+      ]
+    }
+  );
+  const bars = react.useMemo(
+    () => 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;
+        const dimmed = hoveredCategory != null && hoveredCategory !== categoryIndex;
+        const groupStart = layout.offset + categoryIndex * layout.band + (layout.band - layout.group) / 2;
+        const offset = groupStart + seriesIndex * (layout.bar + BAR_GAP);
+        const valueRatio = ratioOf(value, scale);
+        const negative = value < 0;
+        let x;
+        let y;
+        let width;
+        let barHeight;
+        let labelX;
+        let labelY;
+        if (vertical) {
+          const zeroY = size.height - zeroRatio * size.height;
+          const valueY = size.height - valueRatio * size.height;
+          x = offset;
+          width = layout.bar;
+          y = Math.min(zeroY, valueY);
+          barHeight = Math.abs(zeroY - valueY);
+          labelX = offset + layout.bar / 2;
+          labelY = negative ? y + barHeight + VALUE_LABEL_GAP + 10 : y - VALUE_LABEL_GAP;
+        } else {
+          const zeroX = zeroRatio * size.width;
+          const valueX = valueRatio * size.width;
+          x = Math.min(zeroX, valueX);
+          width = Math.abs(zeroX - valueX);
+          y = offset;
+          barHeight = layout.bar;
+          labelX = negative ? x - VALUE_LABEL_GAP : x + width + VALUE_LABEL_GAP;
+          labelY = offset + layout.bar / 2;
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: barPath(x, y, width, barHeight, direction, negative),
+              style: {
+                fill: colorAt(seriesIndex, categoryIndex),
+                opacity: dimmed ? BAR_OPACITY_DIMMED : BAR_OPACITY_DEFAULT,
+                cursor: onBarClick ? "pointer" : void 0
+              },
+              onClick: onBarClick ? () => onBarClick({ seriesIndex, categoryIndex, value }) : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${categories[categoryIndex]} ${s.name} ${formatValue(value)}` })
+            }
+          ),
+          showValueLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: labelX,
+              y: labelY,
+              className: "typo-body-sm-medium",
+              style: { fill: BAR_VALUE_COLOR },
+              textAnchor: vertical ? "middle" : negative ? "end" : "start",
+              dominantBaseline: vertical ? "auto" : "central",
+              children: formatValue(value)
+            }
+          )
+        ] }, `${seriesIndex}-${categoryIndex}`);
+      })
+    ) : [],
+    [
+      size.width,
+      size.height,
+      series,
+      categories,
+      layout,
+      scale,
+      zeroRatio,
+      vertical,
+      direction,
+      showValueLabel,
+      formatValue,
+      onBarClick,
+      colorAt,
+      hoveredCategory
+    ]
+  );
+  const axisLabels = /* @__PURE__ */ jsxRuntime.jsx(
+    ChartAxisLabels,
+    {
+      scale,
+      direction,
+      format: formatValue,
+      sampleRef: axisSampleRef
+    }
+  );
+  const inset = vertical ? { paddingTop: axisSample.height / 2, paddingBottom: axisSample.height / 2 } : { paddingLeft: axisSample.width / 2, paddingRight: axisSample.width / 2 };
+  const plot = (
+    // 바깥은 자리(높이·물러남)를, 안쪽은 그림을 맡는다. minWidth 는 바깥에 둬야
+    // 스크롤 컨테이너가 넘치는 폭을 알아본다 — 안쪽에 두면 바깥이 부모 폭에 맞춰져
+    // 스크롤이 생기지 않는다.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "relative min-w-0",
+        style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: plotRef,
+            className: "relative h-full w-full",
+            onMouseMove: handleMove,
+            onMouseLeave: () => setHovered(null),
+            children: [
+              size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  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`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ChartGrid,
+                      {
+                        scale,
+                        direction,
+                        width: size.width,
+                        height: size.height
+                      }
+                    ),
+                    hovered != null && /* @__PURE__ */ jsxRuntime.jsx(
+                      "rect",
+                      {
+                        "aria-hidden": true,
+                        x: vertical ? layout.offset + hovered.category * layout.band : 0,
+                        y: vertical ? 0 : layout.offset + hovered.category * layout.band,
+                        width: vertical ? layout.band : size.width,
+                        height: vertical ? size.height : layout.band,
+                        style: {
+                          fill: "var(--cmp-chart-barContainer-hover-bg)",
+                          fillOpacity: "var(--cmp-chart-barContainer-hover-opacity)"
+                        }
+                      }
+                    ),
+                    bars
+                  ]
+                }
+              ),
+              showTooltip && hovered != null && series.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                ChartTooltip,
+                {
+                  title: categories[hovered.category] ?? "",
+                  items: tooltipItems,
+                  x: hovered.x,
+                  y: hovered.y,
+                  bounds: size
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartFrame,
+    {
+      ref,
+      legend,
+      legendPosition,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "grid",
+          style: {
+            columnGap: AXIS_LABEL_GAP,
+            // 눈금은 왼쪽 한 줄뿐이다 — 오른쪽에도 적으면 서로 다른 단위처럼 읽힌다.
+            gridTemplateColumns: "max-content 1fr"
+          },
+          children: vertical ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: plotHeight, ...inset }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ChartAxisLabels,
+              {
+                scale,
+                direction,
+                format: formatValue,
+                sampleRef: axisSampleRef
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 overflow-x-auto", children: [
+              plot,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, children: categoryLabels })
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            categoryLabels,
+            plot,
+            /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, style: inset, children: axisLabels })
+          ] })
+        }
+      )
+    }
+  );
+});
 var BUTTON_STYLE = {
   default: { color: "secondary" },
   danger: { color: "danger", outline: true },
@@ -22775,15 +23450,15 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
 );
 
 // src/components/STimePicker/timepicker.config.ts
-var V3 = (path) => `var(--cmp-timepicker-${path})`;
+var V4 = (path) => `var(--cmp-timepicker-${path})`;
 var TIMEPICKER_SIZES = ["sm", "md"];
 var TIMEPICKER_SIZE_CONFIG = {
   sm: {
-    height: V3("sm-height"),
-    paddingX: V3("sm-paddingX"),
-    gap: V3("sm-gap"),
-    icon: V3("sm-icon"),
-    radius: V3("sm-radius"),
+    height: V4("sm-height"),
+    paddingX: V4("sm-paddingX"),
+    gap: V4("sm-gap"),
+    icon: V4("sm-icon"),
+    radius: V4("sm-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 12,
     lineHeight: 20,
@@ -22792,11 +23467,11 @@ var TIMEPICKER_SIZE_CONFIG = {
     fieldMaxWidth: "md"
   },
   md: {
-    height: V3("md-height"),
-    paddingX: V3("md-paddingX"),
-    gap: V3("md-gap"),
-    icon: V3("md-icon"),
-    radius: V3("md-radius"),
+    height: V4("md-height"),
+    paddingX: V4("md-paddingX"),
+    gap: V4("md-gap"),
+    icon: V4("md-icon"),
+    radius: V4("md-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 14,
     lineHeight: 24,
@@ -23692,6 +24367,9 @@ exports.ACCOUNT_LIST_BOX_LABELS = ACCOUNT_LIST_BOX_LABELS;
 exports.ACCOUNT_LIST_BOX_LAYOUT = ACCOUNT_LIST_BOX_LAYOUT;
 exports.ACCOUNT_LIST_BOX_TONE_CONFIG = ACCOUNT_LIST_BOX_TONE_CONFIG;
 exports.BADGE_COLORS = BADGE_COLORS;
+exports.BAR_GAP = BAR_GAP;
+exports.BAR_SIZE_MAX = BAR_SIZE_MAX;
+exports.BAR_SIZE_MIN = BAR_SIZE_MIN;
 exports.BUTTON_COLORS = BUTTON_COLORS;
 exports.BUTTON_SIZES = BUTTON_SIZES;
 exports.CALENDAR_BOARD_DAY_BG = CALENDAR_BOARD_DAY_BG;
@@ -23730,6 +24408,7 @@ exports.RangeCalendar = RangeCalendar;
 exports.SAccountListBox = SAccountListBox;
 exports.SActionModal = SActionModal;
 exports.SBadge = SBadge;
+exports.SBarChart = SBarChart;
 exports.SBarcodeInput = SBarcodeInput;
 exports.SButton = SButton;
 exports.SCROLL_AREA_AXES = SCROLL_AREA_AXES;