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

package/dist/index.js

@@ -4917,11 +4917,19 @@ var SChatFileImpl = /* @__PURE__ */ forwardRef(function SChatFile({ name, extens
 });
 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 = {
@@ -4976,7 +4984,7 @@ var SChatMessageImpl = /* @__PURE__ */ 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__ */ jsxs(
@@ -17849,6 +17857,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__ */ 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__ */ jsx(
+      "line",
+      {
+        x1: 0,
+        x2: width,
+        y1: snapped,
+        y2: snapped,
+        stroke: color,
+        strokeWidth: 1
+      },
+      tick
+    ) : /* @__PURE__ */ 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__ */ 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__ */ jsx(
+            "span",
+            {
+              className: "absolute right-0 -translate-y-1/2 whitespace-nowrap",
+              style: { top: `${(1 - ratio) * 100}%` },
+              children: format(tick)
+            },
+            tick
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+              style: { left: `${ratio * 100}%` },
+              children: format(tick)
+            },
+            tick
+          );
+        }),
+        /* @__PURE__ */ jsx("span", { ref: sampleRef, "aria-hidden": true, className: "invisible inline-block whitespace-nowrap", children: vertical ? widest : "0" })
+      ]
+    }
+  );
+}
+var ChartFrame = /* @__PURE__ */ forwardRef(function ChartFrame2({ legend, legendPosition = "top", children, className, style, ...props }, ref) {
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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 = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  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__ */ 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__ */ jsx("span", { className: "typo-body-md-bold text-(--cmp-chart-chartTooltip-title-color)", children: title }),
+        items.map((item4, index) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-sd-8", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "shrink-0 rounded-full",
+              style: { width: DOT_SIZE2, height: DOT_SIZE2, background: item4.color }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "typo-body-sm-default text-(--sys-color-fg-primary)", children: item4.label }),
+          /* @__PURE__ */ 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__ */ 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] = useState(null);
+  const hoveredCategory = hovered?.category ?? null;
+  const perCategory = series.length === 1;
+  const colorAt = useCallback(
+    (seriesIndex, categoryIndex) => paletteColor(palette, perCategory ? categoryIndex : seriesIndex, customColors),
+    [palette, customColors, perCategory]
+  );
+  const scale = useMemo(
+    () => niceScale(
+      series.flatMap((s) => s.data),
+      tickCount,
+      max
+    ),
+    [series, tickCount, max]
+  );
+  const axisLength = vertical ? size.width : size.height;
+  const layout = 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__ */ 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__ */ 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__ */ jsx(
+            "span",
+            {
+              className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+              style: { left: center },
+              children: label
+            },
+            `${label}-${index}`
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-0 -translate-y-1/2 whitespace-nowrap",
+              style: { top: center },
+              children: label
+            },
+            `${label}-${index}`
+          );
+        }),
+        /* @__PURE__ */ 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 = 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__ */ jsxs("g", { children: [
+          /* @__PURE__ */ 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__ */ jsx("title", { children: `${categories[categoryIndex]} ${s.name} ${formatValue(value)}` })
+            }
+          ),
+          showValueLabel && /* @__PURE__ */ 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__ */ 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__ */ jsx(
+      "div",
+      {
+        className: "relative min-w-0",
+        style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: plotRef,
+            className: "relative h-full w-full",
+            onMouseMove: handleMove,
+            onMouseLeave: () => setHovered(null),
+            children: [
+              size.width > 0 && size.height > 0 && /* @__PURE__ */ 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__ */ jsx(
+                      ChartGrid,
+                      {
+                        scale,
+                        direction,
+                        width: size.width,
+                        height: size.height
+                      }
+                    ),
+                    hovered != null && /* @__PURE__ */ 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__ */ jsx(
+                ChartTooltip,
+                {
+                  title: categories[hovered.category] ?? "",
+                  items: tooltipItems,
+                  x: hovered.x,
+                  y: hovered.y,
+                  bounds: size
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ref,
+      legend,
+      legendPosition,
+      className,
+      style,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid",
+          style: {
+            columnGap: AXIS_LABEL_GAP,
+            // 눈금은 왼쪽 한 줄뿐이다 — 오른쪽에도 적으면 서로 다른 단위처럼 읽힌다.
+            gridTemplateColumns: "max-content 1fr"
+          },
+          children: vertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { style: { height: plotHeight, ...inset }, children: /* @__PURE__ */ jsx(
+              ChartAxisLabels,
+              {
+                scale,
+                direction,
+                format: formatValue,
+                sampleRef: axisSampleRef
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-x-auto", children: [
+              plot,
+              /* @__PURE__ */ jsx("div", { ref: axisTextRef, children: categoryLabels })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            categoryLabels,
+            plot,
+            /* @__PURE__ */ jsx("div", {}),
+            /* @__PURE__ */ jsx("div", { ref: axisTextRef, style: inset, children: axisLabels })
+          ] })
+        }
+      )
+    }
+  );
+});
 var BUTTON_STYLE = {
   default: { color: "secondary" },
   danger: { color: "danger", outline: true },
@@ -22747,15 +23422,15 @@ var SBarcodeInput = /* @__PURE__ */ 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,
@@ -22764,11 +23439,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,
@@ -23658,6 +24333,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, COLOR_KEYS, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SLoginCard2 as SLoginCard, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, COLOR_KEYS, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SLoginCard2 as SLoginCard, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map