sellmate-design-system-react 9.0.0-beta.5 → 9.0.0-beta.7

package/dist/index.cjs

@@ -7,7 +7,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var RCheckbox = require('@radix-ui/react-checkbox');
-var RPopover9 = require('@radix-ui/react-popover');
+var RPopover10 = require('@radix-ui/react-popover');
 var client = require('react-dom/client');
 var RTooltip = require('@radix-ui/react-tooltip');
 var RDropdown = require('@radix-ui/react-dropdown-menu');
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
 }
 
 var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
-var RPopover9__namespace = /*#__PURE__*/_interopNamespace(RPopover9);
+var RPopover10__namespace = /*#__PURE__*/_interopNamespace(RPopover10);
 var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 var RDropdown__namespace = /*#__PURE__*/_interopNamespace(RDropdown);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
@@ -3445,7 +3445,7 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
           !disabled && !selected && !dragging && "hover:bg-(--cmp-listDraggableItem-bg-hover)",
           hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px]" : "min-h-[60px]" : dense ? "h-[32px]" : "h-[40px]",
           paddingYClass,
-          // 항목 사이 구분선은 리스트가 그린다 — SDraggableList 의 separator (SList.tsx)
+          // 항목 사이 구분선은 리스트가 그린다.
           bordered && cn(
             "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
             !disabled && !selected && !dragging && "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
@@ -3653,7 +3653,7 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
-var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, useGap = false, usePadding = false, separator = false, ...rest }, ref) {
+var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3661,7 +3661,7 @@ var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, chi
       className: cn(
         useGap && "flex flex-col gap-(--cmp-list-group-gap)",
         usePadding && "p-(--cmp-list-group-padding)",
-        separator && "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
+        "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
         className
       ),
       ...rest,
@@ -4033,7 +4033,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
         ref,
         className: cn(
           "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
-          // 항목 사이 구분선은 리스트가 그린다 — SList/SExpansionList 의 separator (SList.tsx)
+          // 항목 사이 구분선은 리스트가 그린다.
           // 보더 색은 시맨틱 토큰(border-default → hover strong → 펼침 accentLight)을 쓴다.
           // TODO: expansionItem/bordered/radius 토큰 생성 후 rounded 고정값도 토큰으로 교체한다.
           bordered && "rounded-[8px] border border-border-default hover:border-border-strong [&:has(>button:hover)]:border-border-strong",
@@ -4585,8 +4585,8 @@ function SGhostButton({
     }
   );
   if (!hasTooltip) return btn;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: cn("inline-flex", anchorClassName),
@@ -4598,8 +4598,8 @@ function SGhostButton({
         children: btn
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RPopover9__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover10__namespace.Content,
       {
         side: "top",
         sideOffset: 4,
@@ -4613,6 +4613,18 @@ function SGhostButton({
     ) })
   ] });
 }
+var TREE_LABEL_TYPOGRAPHY = {
+  sm: {
+    default: "typo-body-sm-medium",
+    selected: "typo-body-sm-bold",
+    rowHeight: "h-[28px]"
+  },
+  md: {
+    default: "typo-body-md-medium",
+    selected: "typo-body-md-bold",
+    rowHeight: "h-[32px]"
+  }
+};
 function collectIds(nodes) {
   return nodes.flatMap((node) => [node.id, ...collectIds(node.children ?? [])]);
 }
@@ -4623,18 +4635,19 @@ function collectSelectableIds(node) {
 function toSelectedSet(value) {
   return new Set(value ?? []);
 }
-function getSelectionState(node, selectedSet) {
-  if (selectedSet.has(node.id)) {
-    return { selected: true, indeterminate: false };
+var TREE_ALL_NODE = { id: "__all__", label: "\uC804\uCCB4" };
+function getSelectionState(node, selectedSet, cascadeSelection) {
+  if (!cascadeSelection) {
+    return { selected: selectedSet.has(node.id), indeterminate: false };
   }
   const selectableChildren = (node.children ?? []).filter(
     (child) => collectSelectableIds(child).length > 0
   );
   if (selectableChildren.length === 0) {
-    return { selected: false, indeterminate: false };
+    return { selected: selectedSet.has(node.id), indeterminate: false };
   }
   const childStates = selectableChildren.map(
-    (child) => getSelectionState(child, selectedSet)
+    (child) => getSelectionState(child, selectedSet, cascadeSelection)
   );
   const selectedCount = childStates.filter((state2) => state2.selected).length;
   return {
@@ -4644,6 +4657,7 @@ function getSelectionState(node, selectedSet) {
 }
 function TreeConnector({
   guideline,
+  size,
   depth,
   hasChildren,
   isLast,
@@ -4651,6 +4665,8 @@ function TreeConnector({
 }) {
   if (depth <= 1) return null;
   const ancestorConnectors = ancestorLast.slice(0, -1);
+  const branchTop = size === "sm" ? "top-[13px]" : "top-[15px]";
+  const nodeHeight = size === "sm" ? "h-[15px]" : "h-[17px]";
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", className: "flex self-stretch", children: [
     ancestorConnectors.map((last, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -4664,13 +4680,22 @@ function TreeConnector({
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative block w-[20px] shrink-0", children: [
       guideline && !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-0 left-[6px] top-[-1px] w-px bg-(--cmp-tree-connector-line-color)" }),
       guideline && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-[6px] top-[-1px] h-[17px] w-px bg-(--cmp-tree-connector-line-color)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "absolute left-[6px] top-[-1px] w-px bg-(--cmp-tree-connector-line-color)",
+              nodeHeight
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             "data-tree-connector-branch": hasChildren ? "parent" : "leaf",
             className: cn(
-              "absolute left-[6px] top-[15px] h-px bg-(--cmp-tree-connector-line-color)",
+              "absolute left-[6px] h-px bg-(--cmp-tree-connector-line-color)",
+              branchTop,
               hasChildren ? "w-[14px]" : "w-[calc(14px+var(--cmp-tree-item-arrow-icon))]"
             )
           }
@@ -4679,6 +4704,44 @@ function TreeConnector({
     ] })
   ] });
 }
+function STreeAllItem({
+  selected,
+  indeterminate,
+  border,
+  size,
+  onSelect
+}) {
+  const checkboxValue = indeterminate ? null : selected;
+  const typography = TREE_LABEL_TYPOGRAPHY[size];
+  const labelTypo = selected || indeterminate ? typography.selected : typography.default;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "treeitem",
+      "aria-level": 1,
+      "aria-selected": selected,
+      onClick: onSelect,
+      className: cn(
+        "group/tree-item box-border flex w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
+        typography.rowHeight,
+        border && "border-b border-(--cmp-tree-item-border-default)"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: (event) => event.stopPropagation(), className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
+              labelTypo
+            ),
+            children: "\uC804\uCCB4"
+          }
+        )
+      ] })
+    }
+  );
+}
 var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   node,
   depth = 1,
@@ -4690,6 +4753,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   border = true,
   indeterminate = false,
   selectable = true,
+  size = "sm",
   leading,
   trailing,
   onToggle,
@@ -4701,6 +4765,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   const renderState = {
     node,
     depth,
+    size,
     expanded,
     selected,
     indeterminate,
@@ -4710,6 +4775,8 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
   const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
   const checkboxValue = indeterminate ? null : selected;
+  const typography = TREE_LABEL_TYPOGRAPHY[size];
+  const labelTypo = selected || indeterminate ? typography.selected : typography.default;
   const handleSelect = (event) => {
     if (node.disabled) return;
     onTreeSelect?.(node, event);
@@ -4729,7 +4796,8 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
       "aria-disabled": node.disabled || void 0,
       onClick: handleRowClick,
       className: cn(
-        "group/tree-item box-border flex h-[32px] w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
+        "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
+        typography.rowHeight,
         border && "border-b border-(--cmp-tree-item-border-default)",
         !node.disabled && "hover:bg-(--cmp-tree-item-bg-hover)",
         node.disabled && "cursor-not-allowed opacity-60",
@@ -4742,13 +4810,14 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
           TreeConnector,
           {
             guideline,
+            size,
             depth,
             hasChildren,
             isLast,
             ancestorLast
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex h-full min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap) py-(--cmp-tree-item-paddingY)", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
           hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
             SGhostButton,
             {
@@ -4790,8 +4859,8 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
                 if (!node.disabled && selectable) onTreeSelect?.(node, event);
               },
               className: cn(
-                "block min-w-0 flex-1 truncate text-[14px] leading-[24px]",
-                selected || indeterminate ? "font-bold text-(--cmp-tree-item-text-selected)" : "font-medium text-(--cmp-tree-item-text-default)",
+                "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
+                labelTypo,
                 node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
               ),
               children: node.label
@@ -4811,6 +4880,8 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   expandedIds,
   defaultExpandedIds,
   selectable = true,
+  size = "sm",
+  useAll = false,
   cascadeSelection = true,
   guideline = true,
   border = true,
@@ -4829,6 +4900,11 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   const currentExpandedIds = expandedIds ?? internalExpandedIds;
   const selectedSet = react.useMemo(() => toSelectedSet(currentValue), [currentValue]);
   const expandedSet = react.useMemo(() => new Set(currentExpandedIds), [currentExpandedIds]);
+  const selectableIds = react.useMemo(() => items.flatMap(collectSelectableIds), [items]);
+  const allSelected = selectableIds.length > 0 && selectableIds.every((id) => selectedSet.has(id));
+  const someSelected = selectableIds.some((id) => selectedSet.has(id));
+  const allIndeterminate = someSelected && !allSelected;
+  const showAllItem = selectable && useAll;
   const updateExpanded = (node) => {
     const next = new Set(currentExpandedIds);
     if (next.has(node.id)) next.delete(node.id);
@@ -4840,7 +4916,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   const updateSelected = (node) => {
     if (node.disabled) return;
     const targetIds = cascadeSelection ? collectSelectableIds(node) : [node.id];
-    const everySelected = getSelectionState(node, selectedSet).selected;
+    const everySelected = getSelectionState(node, selectedSet, cascadeSelection).selected;
     const next = new Set(selectedSet);
     targetIds.forEach((id) => {
       if (everySelected) next.delete(id);
@@ -4850,10 +4926,22 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
     if (value === void 0) setInternalValue(orderedIds);
     onValueChange?.(orderedIds, node);
   };
+  const updateAllSelected = (event) => {
+    event?.stopPropagation();
+    if (selectableIds.length === 0) return;
+    const next = new Set(selectedSet);
+    selectableIds.forEach((id) => {
+      if (allSelected) next.delete(id);
+      else next.add(id);
+    });
+    const orderedIds = collectIds(items).filter((id) => next.has(id));
+    if (value === void 0) setInternalValue(orderedIds);
+    onValueChange?.(orderedIds, TREE_ALL_NODE);
+  };
   const renderNodes = (nodes, depth = 1, ancestorLast = []) => nodes.map((node, index) => {
     const isLast = index === nodes.length - 1;
     const isExpanded = expandedSet.has(node.id);
-    const { selected, indeterminate } = getSelectionState(node, selectedSet);
+    const { selected, indeterminate } = getSelectionState(node, selectedSet, cascadeSelection);
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         STreeItem2,
@@ -4866,6 +4954,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
           selected,
           indeterminate,
           selectable,
+          size,
           guideline,
           border,
           leading,
@@ -4887,14 +4976,26 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
       ) : null
     ] }, node.id);
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
       role: "tree",
       className: cn("flex w-full flex-col items-start bg-(--cmp-tree-item-bg-default)", className),
       ...rest,
-      children: renderNodes(items)
+      children: [
+        showAllItem && /* @__PURE__ */ jsxRuntime.jsx(
+          STreeAllItem,
+          {
+            selected: allSelected,
+            indeterminate: allIndeterminate,
+            border,
+            size,
+            onSelect: updateAllSelected
+          }
+        ),
+        renderNodes(items)
+      ]
     }
   );
 });
@@ -5074,14 +5175,14 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     ...style,
     ...contentPropsStyle
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: setOpenState, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: setOpenState, children: [
     isNone ? (
       // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
       // mouse/focus 핸들러가 없으므로 useClose 없이도 자동 닫힘이 발생하지 않는다.
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { asChild: true, children: triggerNode })
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: "inline-flex",
@@ -5092,9 +5193,9 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover9__namespace.Content,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover10__namespace.Content,
       {
         side: placement,
         sideOffset,
@@ -5128,7 +5229,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -6415,10 +6516,10 @@ function SPopover({
   const descColor = type === "default" ? "var(--cmp-popover-default-description)" : "var(--cmp-popover-light-description)";
   const leftLinkLabelClass = type === "default" ? "text-[color:var(--cmp-popover-default-subAction)]" : "text-[color:var(--cmp-popover-light-subAction)]";
   const triggerNode = trigger ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex cursor-pointer", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: iconSize, color }) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover9__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover10__namespace.Content,
       {
         side: placement,
         sideOffset: 8,
@@ -6484,7 +6585,7 @@ function SPopover({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -6515,7 +6616,7 @@ function SPortal({
   const portalContainer = usePortalContainer();
   const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    RPopover9__namespace.Root,
+    RPopover10__namespace.Root,
     {
       open,
       onOpenChange: (next) => {
@@ -6523,9 +6624,9 @@ function SPortal({
         if (!next) onClose?.();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: placement,
             align,
@@ -6723,10 +6824,10 @@ function SGuide({
   );
   if (isNotion)
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style, children: trigger });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover9__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover10__namespace.Content,
       {
         side: "bottom",
         align: "start",
@@ -8807,10 +8908,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           }
         ),
         header === "fix" && menuResizeHandle,
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover10__namespace.Content,
             {
               side: "right",
               sideOffset: 4,
@@ -8881,13 +8982,155 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
 );
 var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var BACKGROUND_CLASS = {
-  frame: `bg-[var(--sys-color-bg-frame)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
-  neutral: `bg-[var(--sys-color-bg-neutralLight)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
-  screen: `bg-[var(--sys-color-bg-screen)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
+  frame: "bg-[var(--sys-color-bg-frame)]",
+  neutral: "bg-[var(--sys-color-bg-neutralLight)]",
+  screen: "bg-[var(--sys-color-bg-screen)]"
+};
+var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
+  frame: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_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);
+    return;
+  }
+  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 = true,
+  overlayScrollbar = false,
   contentHeight = "auto",
   header,
   className,
@@ -8898,6 +9141,14 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
 }, ref) {
   const layout = react.useContext(SLayoutContext);
   const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
+  const scrollRef = react.useRef(null);
+  const setMainRef = react.useCallback(
+    (node) => {
+      scrollRef.current = node;
+      setForwardedRef(ref, node);
+    },
+    [ref]
+  );
   const [scrolled, setScrolled] = react.useState(false);
   const handleScroll = (e) => {
     onScroll?.(e);
@@ -8907,21 +9158,54 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   const main = /* @__PURE__ */ jsxRuntime.jsx(
     "main",
     {
-      ref,
+      ref: setMainRef,
       className: cn(
         "box-border min-h-0 min-w-0 flex-1 overflow-auto p-[var(--cmp-pageBody-padding-default)]",
+        overlayScrollbar && "h-full",
         !fill && scrollEndSpacing && "pb-[var(--cmp-pageBody-padding-scrollEnd)]",
-        SCROLLBAR_CLASS,
+        overlayScrollbar ? SCROLLBAR_HIDDEN_CLASS : `${SCROLLBAR_CLASS} ${NATIVE_SCROLLBAR_BACKGROUND_CLASS[background]}`,
         BACKGROUND_CLASS[background],
         className
       ),
-      style: header == null ? { ...gridStyle, ...style } : style,
+      style: header == null && !overlayScrollbar ? { ...gridStyle, ...style } : style,
       onScroll: handleScroll,
       ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(fill && "h-full"), style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
-  if (header == null) return main;
+  if (!overlayScrollbar) {
+    if (header == null) return main;
+    return (
+      // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다.
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("flex min-h-0 min-w-0 flex-1 flex-col", BACKGROUND_CLASS[background]),
+          style: gridStyle,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SPageHeader, { ...header, scrolled }),
+            main
+          ]
+        }
+      )
+    );
+  }
+  if (header == null) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-0 min-w-0 flex-1 overflow-hidden",
+          BACKGROUND_CLASS[background]
+        ),
+        style: gridStyle,
+        children: [
+          main,
+          /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+        ]
+      }
+    );
+  }
   return (
     // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다 —
     // 그래서 SPage 의 background 를 main 뿐 아니라 여기에도 칠한다(스크롤바 관련 클래스는
@@ -8933,7 +9217,10 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
         style: gridStyle,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SPageHeader, { ...header, scrolled }),
-          main
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", children: [
+            main,
+            /* @__PURE__ */ jsxRuntime.jsx(SPageOverlayScrollbars, { scrollRef })
+          ] })
         ]
       }
     )
@@ -11240,6 +11527,67 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, se
 
 // src/lib/autofill.ts
 var AUTOFILL_RESET_CLASS = "autofill:[-webkit-text-fill-color:currentColor] autofill:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] autofill:[transition:background-color_5000s_ease-in-out_0s] [&:-webkit-autofill]:[-webkit-text-fill-color:currentColor] [&:-webkit-autofill]:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] [&:-webkit-autofill]:[transition:background-color_5000s_ease-in-out_0s]";
+var HIDE_DELAY_MS2 = 100;
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+function useTruncatedValueTooltip({
+  enabled,
+  text
+}) {
+  const portalContainer = usePortalContainer();
+  const elRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const hideTimer = react.useRef(void 0);
+  const cancelHide = react.useCallback(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  }, []);
+  const startHide = react.useCallback(() => {
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), HIDE_DELAY_MS2);
+  }, [cancelHide]);
+  const onMouseEnter = react.useCallback(() => {
+    cancelHide();
+    const el = elRef.current;
+    if (!el) return;
+    if (el.scrollWidth - el.clientWidth > 1) setOpen(true);
+  }, [cancelHide]);
+  react.useEffect(() => {
+    if (!enabled || text === "") setOpen(false);
+  }, [enabled, text]);
+  react.useEffect(() => cancelHide, [cancelHide]);
+  const active = enabled && text !== "";
+  return {
+    valueRef: elRef,
+    onMouseEnter: active ? onMouseEnter : cancelHide,
+    onMouseLeave: active ? startHide : cancelHide,
+    tooltip: active ? /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Anchor, { virtualRef: elRef }),
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+        RPopover10__namespace.Content,
+        {
+          side: "top",
+          sideOffset: 4,
+          "aria-hidden": true,
+          className: cn("z-50", FLOATING_SLIDE_ANIM),
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onMouseEnter: cancelHide,
+          onMouseLeave: startHide,
+          children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
+        }
+      ) })
+    ] }) : null
+  };
+}
 var FONT = {
   sm: { fontSize: 12, lineHeight: 20, paddingX: "var(--cmp-textinput-sm-paddingX)" },
   md: { fontSize: 14, lineHeight: 24, paddingX: "var(--cmp-textinput-md-paddingX)" }
@@ -11297,6 +11645,10 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
   const resolvedError = error || ruleError !== "";
   const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+  const valueTooltip = useTruncatedValueTooltip({
+    enabled: readOnly && !disabled,
+    text: String(value ?? "")
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     SField,
     {
@@ -11337,7 +11689,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
-                ref,
+                ref: mergeRefs(ref, valueTooltip.valueRef),
                 type: inputType,
                 value: value ?? "",
                 disabled,
@@ -11362,9 +11714,18 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
                   color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--sys-color-field-text-default)",
                   ...inputStyle
                 },
-                ...rest
+                ...rest,
+                onMouseEnter: (e) => {
+                  rest.onMouseEnter?.(e);
+                  valueTooltip.onMouseEnter();
+                },
+                onMouseLeave: (e) => {
+                  rest.onMouseLeave?.(e);
+                  valueTooltip.onMouseLeave();
+                }
               }
             ),
+            valueTooltip.tooltip,
             suffix != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-shrink-0 items-center", children: suffix }),
             clearable && hasValue && !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
               SGhostButton,
@@ -11598,8 +11959,10 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
   const [display, setDisplay] = react.useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = react.useState("");
   const innerRef = react.useRef(null);
+  const valueTooltip = useTruncatedValueTooltip({ enabled: readOnly && !disabled, text: display });
   const setRefs2 = (el) => {
     innerRef.current = el;
+    valueTooltip.valueRef.current = el;
     if (typeof ref === "function") ref(el);
     else if (ref) ref.current = el;
   };
@@ -11813,9 +12176,12 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
                   textAlign: useButton ? "center" : "right",
                   color: disabled ? "var(--cmp-numberInput-text-disabled)" : "var(--cmp-numberInput-text-default)",
                   ...inputStyle
-                }
+                },
+                onMouseEnter: valueTooltip.onMouseEnter,
+                onMouseLeave: valueTooltip.onMouseLeave
               }
             ),
+            valueTooltip.tooltip,
             inputSuffix !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputSuffix }),
             useButton && stepper("inc")
           ]
@@ -12556,8 +12922,8 @@ function SDatePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -12593,8 +12959,8 @@ function SDatePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: "bottom",
             align: mode === "date" ? "start" : "center",
@@ -13060,7 +13426,7 @@ function SDateRangePicker({
       className,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        RPopover9__namespace.Root,
+        RPopover10__namespace.Root,
         {
           open,
           onOpenChange: (o) => {
@@ -13069,7 +13435,7 @@ function SDateRangePicker({
             if (!o) setPendingStart(null);
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
@@ -13110,8 +13476,8 @@ function SDateRangePicker({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover9__namespace.Content,
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+              RPopover10__namespace.Content,
               {
                 side: "bottom",
                 align: "start",
@@ -14637,8 +15003,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
           })(),
           hasRightActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
-            hasAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            hasAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
@@ -14663,8 +15029,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-                RPopover9__namespace.Content,
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover10__namespace.Content,
                 {
                   side: "bottom",
                   align: "start",
@@ -14704,17 +15070,17 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover9__namespace.Anchor,
+            RPopover10__namespace.Anchor,
             {
               virtualRef: {
                 current: openKey ? triggerRefs.current.get(openKey) : null
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover9__namespace.Content,
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover10__namespace.Content,
             {
               side: "bottom",
               align: "start",
@@ -15254,8 +15620,8 @@ function InlineDatePresetFilter({
     applied && (rangeValue ? (
       // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
       // 직접 고르면 프리셋 선택은 해제된다.
-      /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -15264,8 +15630,8 @@ function InlineDatePresetFilter({
             children: badge
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -16076,6 +16442,10 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
     });
     const resolvedError = error || ruleError !== "";
     const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+    const valueTooltip = useTruncatedValueTooltip({
+      enabled: readOnly && !disabled,
+      text: String(value ?? "")
+    });
     return /* @__PURE__ */ jsxRuntime.jsx(
       SField,
       {
@@ -16112,7 +16482,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
-                  ref,
+                  ref: mergeRefs(ref, valueTooltip.valueRef),
                   name,
                   type: "text",
                   value: value ?? "",
@@ -16138,9 +16508,12 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
                     fontSize: f.fontSize,
                     color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--cmp-textinput-text-default)",
                     ...inputStyle
-                  }
+                  },
+                  onMouseEnter: valueTooltip.onMouseEnter,
+                  onMouseLeave: valueTooltip.onMouseLeave
                 }
               ),
+              valueTooltip.tooltip,
               suffix,
               clearable && hasValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
                 SGhostButton,
@@ -16520,8 +16893,8 @@ function STimePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -16581,8 +16954,8 @@ function STimePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -16987,8 +17360,8 @@ function STimeRangePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover9__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover10__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -17048,8 +17421,8 @@ function STimeRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover9__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover9__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover10__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover10__namespace.Content,
           {
             side: "bottom",
             align: "start",