sellmate-design-system-react 9.0.0-beta.51 → 9.0.0-beta.52

package/dist/index.cjs

@@ -6423,8 +6423,8 @@ function SellmateWordmark({ className }) {
     "svg",
     {
       className,
-      width: "276",
-      height: "40",
+      width: "220.8",
+      height: "32",
       viewBox: "0 0 276 40",
       fill: "#00275F",
       xmlns: "http://www.w3.org/2000/svg",
@@ -6458,7 +6458,7 @@ var SLoginCardImpl = /* @__PURE__ */ react.forwardRef(function SLoginCard({ prod
         // 로그인 화면 밖(모달·스토리)에서도 그대로 쓸 수 있는 이유다.
         "flex h-full w-full max-w-[640px] min-w-[368px] shrink-0 flex-col items-center justify-center gap-sd-60",
         // 라운드 24px·폭 상하한(640/368px)은 대응 토큰이 없어 값으로 둔다 (디자인팀 토큰 추가 요청 대상).
-        "rounded-[24px] bg-(--sys-color-bg-frame) p-sd-24 text-center",
+        "rounded-[24px] bg-(--sys-color-bg-frame) p-sd-16 text-center",
         // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다 — `break-keep` 으로 띄어쓰기에서만
         // 끊는다. 끊을 자리가 아예 없는 긴 토큰(URL·주문번호)만 `wrap-break-word` 로 흘려보낸다.
         "break-keep wrap-break-word",
@@ -6471,7 +6471,7 @@ var SLoginCardImpl = /* @__PURE__ */ react.forwardRef(function SLoginCard({ prod
             /* @__PURE__ */ jsxRuntime.jsx(SellmateWordmark, {}),
             product != null && // 24px 는 typo 프리셋(최대 18px)에 없는 등급이다 — 제품명은 로고의 일부처럼 읽혀야
             // 해서 본문 스케일 위에 선다. 여기만 값으로 두고, 프리셋이 생기면 갈아탄다.
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[24px] leading-[36px] font-bold text-(--sys-color-fg-accentLight)", children: product })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[24px] leading-[28px] font-bold text-(--sys-color-fg-accentLight)", children: product })
           ] }),
           hasIntro && // 소개와 보조 설명은 한 문단으로 읽힌다.
           // `text-balance` 는 상속되므로 여기 한 번만 걸어 둘을 함께 덮는다 — 가운데 정렬에서는
@@ -7124,6 +7124,149 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
   }
 );
 var SSectionHeaderCard2 = /* @__PURE__ */ withDisplayName(SSectionHeaderCardRootImpl, "SSectionHeaderCard");
+var OVERLAY_SCROLLBAR_SIZE = 12;
+var MIN_THUMB_SIZE = 32;
+var AUTO_HIDE_DELAY = 1e3;
+var FADE_CLASS = "transition-opacity duration-200 ease-out motion-reduce:transition-none";
+var HIDDEN = { visible: false, thumbSize: 0, thumbOffset: 0 };
+function getMetrics(viewportSize, contentSize, scrollOffset) {
+  if (contentSize <= viewportSize) return HIDDEN;
+  const trackSize = viewportSize;
+  const maxScrollOffset = contentSize - viewportSize;
+  const thumbSize = Math.min(
+    trackSize,
+    Math.max(MIN_THUMB_SIZE, viewportSize / contentSize * trackSize)
+  );
+  const maxThumbOffset = trackSize - thumbSize;
+  const thumbOffset = maxScrollOffset > 0 ? scrollOffset / maxScrollOffset * maxThumbOffset : 0;
+  return { visible: true, thumbSize, thumbOffset };
+}
+function OverlayScrollbars({
+  scrollRef,
+  vertical: showVertical = true,
+  horizontal: showHorizontal = true,
+  autoHide = false
+}) {
+  const [vertical, setVertical] = react.useState(HIDDEN);
+  const [horizontal, setHorizontal] = react.useState(HIDDEN);
+  const [scrolling, setScrolling] = react.useState(false);
+  const [dragging, setDragging] = react.useState(false);
+  const hideTimer = react.useRef(null);
+  const shown = !autoHide || scrolling || dragging;
+  const update = react.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setVertical(showVertical ? getMetrics(el.clientHeight, el.scrollHeight, el.scrollTop) : HIDDEN);
+    setHorizontal(
+      showHorizontal ? getMetrics(el.clientWidth, el.scrollWidth, el.scrollLeft) : HIDDEN
+    );
+  }, [scrollRef, showVertical, showHorizontal]);
+  const wake = react.useCallback(() => {
+    setScrolling(true);
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    hideTimer.current = setTimeout(() => setScrolling(false), AUTO_HIDE_DELAY);
+  }, []);
+  react.useEffect(() => () => void (hideTimer.current && clearTimeout(hideTimer.current)), []);
+  react.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      update();
+      if (autoHide) wake();
+    };
+    update();
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(el);
+    if (el.firstElementChild) observer?.observe(el.firstElementChild);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      observer?.disconnect();
+    };
+  }, [scrollRef, update, autoHide, wake]);
+  const drag = (axis) => (startEvent) => {
+    const el = scrollRef.current;
+    const metrics = axis === "vertical" ? vertical : horizontal;
+    if (!el || !metrics.visible) return;
+    startEvent.preventDefault();
+    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
+    setDragging(true);
+    const isVertical = axis === "vertical";
+    const startPointer = isVertical ? startEvent.clientY : startEvent.clientX;
+    const startScroll = isVertical ? el.scrollTop : el.scrollLeft;
+    const viewportSize = isVertical ? el.clientHeight : el.clientWidth;
+    const contentSize = isVertical ? el.scrollHeight : el.scrollWidth;
+    const maxThumbOffset = viewportSize - metrics.thumbSize;
+    const maxScroll = contentSize - viewportSize;
+    if (maxThumbOffset <= 0 || maxScroll <= 0) {
+      setDragging(false);
+      return;
+    }
+    const onPointerMove = (moveEvent) => {
+      const delta = (isVertical ? moveEvent.clientY : moveEvent.clientX) - startPointer;
+      const next = startScroll + delta / maxThumbOffset * maxScroll;
+      if (isVertical) el.scrollTop = next;
+      else el.scrollLeft = next;
+    };
+    const onPointerUp = () => {
+      setDragging(false);
+      if (autoHide) wake();
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp, { once: true });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    vertical.visible && // 트랙은 포인터를 받지 않는다 — 막대가 없는 자리는 아래 콘텐츠가 그대로 눌린다.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute top-0 right-0 bottom-0 z-[1] w-[12px]",
+          FADE_CLASS,
+          shown ? "opacity-100" : "opacity-0"
+        ),
+        style: { bottom: horizontal.visible ? OVERLAY_SCROLLBAR_SIZE : 0 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute right-[2px] w-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
+            style: {
+              height: vertical.thumbSize,
+              transform: `translateY(${vertical.thumbOffset}px)`
+            },
+            onPointerDown: drag("vertical")
+          }
+        )
+      }
+    ),
+    horizontal.visible && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute right-0 bottom-0 left-0 z-[1] h-[12px]",
+          FADE_CLASS,
+          shown ? "opacity-100" : "opacity-0"
+        ),
+        style: { right: vertical.visible ? OVERLAY_SCROLLBAR_SIZE : 0 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute bottom-[2px] h-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
+            style: {
+              width: horizontal.thumbSize,
+              transform: `translateX(${horizontal.thumbOffset}px)`
+            },
+            onPointerDown: drag("horizontal")
+          }
+        )
+      }
+    )
+  ] });
+}
 
 // src/lib/scrollbar.ts
 var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
@@ -7143,30 +7286,61 @@ var SScrollArea = /* @__PURE__ */ react.forwardRef(function SScrollArea2({
   bordered = false,
   maxHeight,
   maxWidth,
+  overlayScrollbar = false,
   className,
   style,
   children,
   ...rest
 }, ref) {
+  const scrollRef = react.useRef(null);
+  const setScrollRef = react.useCallback(
+    (node) => {
+      scrollRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
   const mergedStyle = { ...style };
   if (maxHeight) mergedStyle.maxHeight = maxHeight;
   if (maxWidth) mergedStyle.maxWidth = maxWidth;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const scroller = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
+      ref: setScrollRef,
       className: cn(
         AXIS_CLASS[axis],
-        SCROLLBAR_CLASS,
-        background && SCROLLBAR_TRACK_BG_CLASS,
-        bordered && SCROLLBAR_TRACK_BORDER_CLASS,
-        className
+        overlayScrollbar ? (
+          // 바깥 상자가 크기를 쥐었으므로 스크롤 요소는 그 안을 채우기만 한다.
+          `${SCROLLBAR_HIDDEN_CLASS} h-full w-full`
+        ) : cn(
+          SCROLLBAR_CLASS,
+          background && SCROLLBAR_TRACK_BG_CLASS,
+          bordered && SCROLLBAR_TRACK_BORDER_CLASS
+        ),
+        !overlayScrollbar && className
       ),
-      style: mergedStyle,
+      style: overlayScrollbar ? void 0 : mergedStyle,
       ...rest,
       children
     }
   );
+  if (!overlayScrollbar) return scroller;
+  return (
+    // 막대가 기준으로 삼을 상자. overflow-hidden 은 막대가 모서리 밖으로 새지 않게 한다.
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden", className), style: mergedStyle, children: [
+      scroller,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OverlayScrollbars,
+        {
+          scrollRef,
+          vertical: axis !== "horizontal",
+          horizontal: axis !== "vertical",
+          autoHide: true
+        }
+      )
+    ] })
+  );
 });
 
 // src/components/SScrollArea/scrollArea.config.ts
@@ -11799,22 +11973,6 @@ var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
   neutral: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
   screen: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
 };
-var SCROLLBAR_SIZE = 12;
-var SCROLLBAR_MIN_THUMB_SIZE = 32;
-var getMetrics = (viewportSize, contentSize, scrollOffset) => {
-  if (contentSize <= viewportSize) {
-    return { visible: false, thumbSize: 0, thumbOffset: 0 };
-  }
-  const trackSize = viewportSize;
-  const maxScrollOffset = contentSize - viewportSize;
-  const thumbSize = Math.min(
-    trackSize,
-    Math.max(SCROLLBAR_MIN_THUMB_SIZE, viewportSize / contentSize * trackSize)
-  );
-  const maxThumbOffset = trackSize - thumbSize;
-  const thumbOffset = maxScrollOffset > 0 ? scrollOffset / maxScrollOffset * maxThumbOffset : 0;
-  return { visible: true, thumbSize, thumbOffset };
-};
 var setForwardedRef = (ref, node) => {
   if (typeof ref === "function") {
     ref(node);
@@ -11822,119 +11980,6 @@ var setForwardedRef = (ref, node) => {
   }
   if (ref) ref.current = node;
 };
-function SPageOverlayScrollbars({ scrollRef }) {
-  const [vertical, setVertical] = react.useState({
-    visible: false,
-    thumbSize: 0,
-    thumbOffset: 0
-  });
-  const [horizontal, setHorizontal] = react.useState({
-    visible: false,
-    thumbSize: 0,
-    thumbOffset: 0
-  });
-  const update = react.useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    setVertical(getMetrics(el.clientHeight, el.scrollHeight, el.scrollTop));
-    setHorizontal(getMetrics(el.clientWidth, el.scrollWidth, el.scrollLeft));
-  }, [scrollRef]);
-  react.useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    update();
-    el.addEventListener("scroll", update, { passive: true });
-    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
-    observer?.observe(el);
-    if (el.firstElementChild) observer?.observe(el.firstElementChild);
-    return () => {
-      el.removeEventListener("scroll", update);
-      observer?.disconnect();
-    };
-  }, [scrollRef, update]);
-  const dragVertical = (startEvent) => {
-    const el = scrollRef.current;
-    if (!el || !vertical.visible) return;
-    startEvent.preventDefault();
-    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
-    const startPointer = startEvent.clientY;
-    const startScrollTop = el.scrollTop;
-    const maxThumbOffset = el.clientHeight - vertical.thumbSize;
-    const maxScrollTop = el.scrollHeight - el.clientHeight;
-    if (maxThumbOffset <= 0 || maxScrollTop <= 0) return;
-    const onPointerMove = (moveEvent) => {
-      const delta = moveEvent.clientY - startPointer;
-      el.scrollTop = startScrollTop + delta / maxThumbOffset * maxScrollTop;
-    };
-    const onPointerUp = () => {
-      window.removeEventListener("pointermove", onPointerMove);
-      window.removeEventListener("pointerup", onPointerUp);
-    };
-    window.addEventListener("pointermove", onPointerMove);
-    window.addEventListener("pointerup", onPointerUp, { once: true });
-  };
-  const dragHorizontal = (startEvent) => {
-    const el = scrollRef.current;
-    if (!el || !horizontal.visible) return;
-    startEvent.preventDefault();
-    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
-    const startPointer = startEvent.clientX;
-    const startScrollLeft = el.scrollLeft;
-    const maxThumbOffset = el.clientWidth - horizontal.thumbSize;
-    const maxScrollLeft = el.scrollWidth - el.clientWidth;
-    if (maxThumbOffset <= 0 || maxScrollLeft <= 0) return;
-    const onPointerMove = (moveEvent) => {
-      const delta = moveEvent.clientX - startPointer;
-      el.scrollLeft = startScrollLeft + delta / maxThumbOffset * maxScrollLeft;
-    };
-    const onPointerUp = () => {
-      window.removeEventListener("pointermove", onPointerMove);
-      window.removeEventListener("pointerup", onPointerUp);
-    };
-    window.addEventListener("pointermove", onPointerMove);
-    window.addEventListener("pointerup", onPointerUp, { once: true });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    vertical.visible && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        className: "pointer-events-none absolute bottom-0 right-0 top-0 z-[1] w-[12px]",
-        style: { bottom: horizontal.visible ? SCROLLBAR_SIZE : 0 },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "pointer-events-auto absolute right-[2px] w-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
-            style: {
-              height: vertical.thumbSize,
-              transform: `translateY(${vertical.thumbOffset}px)`
-            },
-            onPointerDown: dragVertical
-          }
-        )
-      }
-    ),
-    horizontal.visible && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        className: "pointer-events-none absolute bottom-0 left-0 right-0 z-[1] h-[12px]",
-        style: { right: vertical.visible ? SCROLLBAR_SIZE : 0 },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "pointer-events-auto absolute bottom-[2px] h-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
-            style: {
-              width: horizontal.thumbSize,
-              transform: `translateX(${horizontal.thumbOffset}px)`
-            },
-            onPointerDown: dragHorizontal
-          }
-        )
-      }
-    )
-  ] });
-}
 var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = false,
@@ -12007,7 +12052,7 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
       style: gridStyle,
       children: [
         main,
-        /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+        /* @__PURE__ */ jsxRuntime.jsx(OverlayScrollbars, { scrollRef })
       ]
     }
   );
@@ -15603,15 +15648,20 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
 var COUNT_NULL = "var(--cmp-table-bar-count-null)";
 var totalColor = (n) => n > 0 ? "var(--cmp-table-bar-count-total)" : COUNT_NULL;
 var selectedColor = (n) => n > 0 ? "var(--color-brilliantblue-75)" : COUNT_NULL;
-var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, selected, actions, rightActions, className, ...rest }, ref) {
+var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ title, total, selected, actions, rightActions, className, ...rest }, ref) {
   const hasTotal = total != null;
   const hasSelected = selected != null;
   const hasCount = hasTotal || hasSelected;
+  const hasTitle = title != null;
+  const hasLeading = hasTitle || hasCount;
+  const titleId = react.useId();
+  const isToolbar = Boolean(actions || rightActions);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
-      role: actions || rightActions ? "toolbar" : void 0,
+      role: isToolbar ? "toolbar" : void 0,
+      "aria-labelledby": isToolbar && hasTitle ? titleId : void 0,
       className: cn(
         "flex w-full items-center gap-[var(--cmp-table-bar-section-gap)] px-[var(--sys-space-table-padding-md)]",
         "h-[var(--cmp-table-bar-height)] shrink-0",
@@ -15620,6 +15670,14 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, se
       ),
       ...rest,
       children: [
+        hasTitle && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            id: titleId,
+            className: "typo-table-accent whitespace-nowrap text-[var(--sys-color-fg-primary)]",
+            children: title
+          }
+        ),
         hasCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-table-content-gap)]", children: [
           hasTotal && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "typo-table-accent whitespace-nowrap text-[var(--sys-color-fg-primary)]", children: [
             "\uCD1D ",
@@ -15640,7 +15698,7 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, se
           ] })
         ] }),
         actions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-table-bar-section-gap)] has-[>div:empty]:hidden", children: [
-          hasCount && /* @__PURE__ */ jsxRuntime.jsx(
+          hasLeading && /* @__PURE__ */ jsxRuntime.jsx(
             SDivider,
             {
               vertical: true,
@@ -18377,17 +18435,41 @@ function useElementSize() {
   }, []);
   return { ref, size };
 }
+function useSvgTextMetrics() {
+  const ref = react.useRef(null);
+  const [metrics, setMetrics] = react.useState({ top: 0, width: 0 });
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    let box3;
+    try {
+      box3 = element.getBBox();
+    } catch {
+      return;
+    }
+    setMetrics(
+      (prev) => Math.abs(prev.top - box3.y) < 0.5 && Math.abs(prev.width - box3.width) < 0.5 ? prev : { top: box3.y, width: box3.width }
+    );
+  });
+  return { ref, metrics };
+}
 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;
+var ANCHOR_GAP_X = 4;
+var ANCHOR_GAP_Y = 0;
+function placeX(anchor, size, extent) {
+  const after = anchor.right + ANCHOR_GAP_X;
+  if (!extent) return after;
   if (after + size <= extent) return after;
-  const before = cursor - CURSOR_OFFSET - size;
+  const before = anchor.left - ANCHOR_GAP_X - size;
   if (before >= 0) return before;
   return Math.max(0, Math.min(after, extent - size));
 }
-function ChartTooltip({ title, items, x, y, bounds, className }) {
+function placeY(anchor, size, extent) {
+  const top = anchor.top + ANCHOR_GAP_Y;
+  if (!extent) return top;
+  return Math.max(0, Math.min(top, extent - size));
+}
+function ChartTooltip({ title, items, anchor, bounds, className }) {
   const { ref, size } = useElementSize();
   const measured = size.width > 0 && size.height > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -18396,7 +18478,7 @@ function ChartTooltip({ title, items, x, y, bounds, className }) {
       ref,
       role: "tooltip",
       className: cn(
-        // left/top 대신 transform 으로 옮긴다. 좌표를 바꾸면 마우스가 움직일 때마다
+        // left/top 대신 transform 으로 옮긴다. 좌표를 바꾸면 짚은 항목이 바뀔 때마다
         // 리플로우가 나 차트가 미세하게 흔들려 보인다. transform 은 레이아웃을
         // 건드리지 않으므로, 크기를 재기 전에 잠깐 밖으로 나가도 스크롤이 생기지 않는다.
         "pointer-events-none absolute top-0 left-0 z-10 w-max",
@@ -18406,11 +18488,11 @@ function ChartTooltip({ title, items, x, y, bounds, className }) {
         className
       ),
       style: {
-        // 크기를 재기 전에는 원점에 숨겨 둔다. 커서 옆에 그려 두면 그림 밖으로
+        // 크기를 재기 전에는 원점에 숨겨 둔다. 막대 옆에 그려 두면 그림 밖으로
         // 넘쳐 스크롤 영역이 잠깐 늘어나고, 차트 전체가 한 번 흔들린다.
         // transform 도 스크롤 영역 계산에는 포함되므로 위치만 바꿔서는 못 막는다.
-        transform: measured ? `translate(${place(x, size.width, bounds?.width ?? 0)}px, ${place(
-          y,
+        transform: measured ? `translate(${placeX(anchor, size.width, bounds?.width ?? 0)}px, ${placeY(
+          anchor,
           size.height,
           bounds?.height ?? 0
         )}px)` : void 0,
@@ -18532,8 +18614,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   const { ref: axisTextRef, size: axisText } = useElementSize();
   const { ref: axisSampleRef, size: axisSample } = useElementSize();
   const clipId = react.useId();
-  const [hovered, setHovered] = react.useState(null);
-  const hoveredCategory = hovered?.category ?? null;
+  const [hoveredCategory, setHoveredCategory] = react.useState(null);
   const perCategory = series.length === 1;
   const colorAt = react.useCallback(
     (seriesIndex, categoryIndex) => paletteColor(palette, perCategory ? categoryIndex : seriesIndex, customColors),
@@ -18574,23 +18655,85 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   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 along = (vertical ? event.clientX - rect.left : event.clientY - rect.top) - layout.offset;
     const category = Math.floor(along / layout.band);
-    if (category < 0 || category >= categories.length) {
-      setHovered(null);
-      return;
-    }
-    setHovered({ category, x, y });
+    setHoveredCategory(category >= 0 && category < categories.length ? category : null);
   };
-  const tooltipItems = hovered == null ? [] : series.flatMap((s, i) => {
-    const value = s.data[hovered.category];
+  const tooltipItems = hoveredCategory == null ? [] : series.flatMap((s, i) => {
+    const value = s.data[hoveredCategory];
     if (value == null || !Number.isFinite(value)) return [];
-    return [
-      { color: colorAt(i, hovered.category), label: s.name, value: formatValue(value) }
-    ];
+    return [{ color: colorAt(i, hoveredCategory), label: s.name, value: formatValue(value) }];
   });
+  const anchorBar = react.useMemo(() => {
+    if (hoveredCategory == null || size.width <= 0 || size.height <= 0) return null;
+    const pxOf = (value) => vertical ? size.height - ratioOf(value, scale) * size.height : ratioOf(value, scale) * size.width;
+    const anchorOf = (value, from, to, start, thickness) => vertical ? {
+      value,
+      left: start,
+      right: start + thickness,
+      top: Math.min(pxOf(from), pxOf(to))
+    } : {
+      value,
+      left: Math.min(pxOf(from), pxOf(to)),
+      right: Math.max(pxOf(from), pxOf(to)),
+      top: start
+    };
+    if (stacked) {
+      const total = stackTotals[hoveredCategory];
+      if (total == null) return null;
+      const barStart = layout.offset + hoveredCategory * layout.band + (layout.band - layout.bar) / 2;
+      return anchorOf(
+        total.positive + total.negative,
+        total.negative,
+        total.positive,
+        barStart,
+        layout.bar
+      );
+    }
+    let bestIndex = -1;
+    let bestValue = 0;
+    series.forEach((s, seriesIndex) => {
+      const value = s.data[hoveredCategory];
+      if (value == null || !Number.isFinite(value)) return;
+      if (bestIndex === -1 || value > bestValue) {
+        bestIndex = seriesIndex;
+        bestValue = value;
+      }
+    });
+    if (bestIndex === -1) return null;
+    const groupStart = layout.offset + hoveredCategory * layout.band + (layout.band - layout.group) / 2;
+    return anchorOf(
+      bestValue,
+      0,
+      bestValue,
+      groupStart + bestIndex * (layout.bar + BAR_GAP),
+      layout.bar
+    );
+  }, [
+    hoveredCategory,
+    size.width,
+    size.height,
+    vertical,
+    scale,
+    stacked,
+    stackTotals,
+    layout,
+    series
+  ]);
+  const { ref: valueLabelRef, metrics: valueLabel } = useSvgTextMetrics();
+  const anchorLabel = anchorBar == null ? "" : formatValue(anchorBar.value);
+  const tooltipAnchor = react.useMemo(() => {
+    if (anchorBar == null) return null;
+    if (!showValueLabel || anchorBar.value < 0) return anchorBar;
+    return vertical ? (
+      // 라벨의 기준선은 막대 윗변에서 VALUE_LABEL_GAP 만큼 위. 거기서 글자
+      // 윗변까지가 metrics.top(음수)이다.
+      { ...anchorBar, top: anchorBar.top - VALUE_LABEL_GAP + valueLabel.top }
+    ) : (
+      // 가로 막대의 라벨은 막대 오른쪽 끝에서 시작해 폭만큼 뻗는다.
+      { ...anchorBar, right: anchorBar.right + VALUE_LABEL_GAP + valueLabel.width }
+    );
+  }, [anchorBar, showValueLabel, vertical, valueLabel.top, valueLabel.width]);
   const categoryLabels = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -18844,7 +18987,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
             ref: plotRef,
             className: "relative h-full w-full",
             onMouseMove: handleMove,
-            onMouseLeave: () => setHovered(null),
+            onMouseLeave: () => setHoveredCategory(null),
             children: [
               size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
                 "svg",
@@ -18854,6 +18997,19 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                   role: "img",
                   "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uB9C9\uB300 \uADF8\uB798\uD504`,
                   children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "text",
+                      {
+                        ref: valueLabelRef,
+                        "aria-hidden": true,
+                        x: 0,
+                        y: 0,
+                        className: BAR_DATA_LABEL_TYPO_HOVER,
+                        dominantBaseline: "auto",
+                        style: { visibility: "hidden" },
+                        children: anchorLabel || "0"
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       ChartGrid,
                       {
@@ -18863,12 +19019,12 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                         height: size.height
                       }
                     ),
-                    hovered != null && /* @__PURE__ */ jsxRuntime.jsx(
+                    hoveredCategory != 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,
+                        x: vertical ? layout.offset + hoveredCategory * layout.band : 0,
+                        y: vertical ? 0 : layout.offset + hoveredCategory * layout.band,
                         width: vertical ? layout.band : size.width,
                         height: vertical ? size.height : layout.band,
                         style: {
@@ -18881,13 +19037,12 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                   ]
                 }
               ),
-              showTooltip && hovered != null && series.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              showTooltip && hoveredCategory != null && tooltipAnchor != null && tooltipItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                 ChartTooltip,
                 {
-                  title: categories[hovered.category] ?? "",
+                  title: categories[hoveredCategory] ?? "",
                   items: tooltipItems,
-                  x: hovered.x,
-                  y: hovered.y,
+                  anchor: tooltipAnchor,
                   bounds: size
                 }
               )