sellmate-design-system-react 9.0.0-beta.94 → 9.0.0-beta.95

package/dist/index.js

@@ -7702,6 +7702,13 @@ var TREE_LABEL_TYPOGRAPHY = {
     rowHeight: "h-[32px]"
   }
 };
+var TREE_BRANCH_MOTION = { duration: 200, easing: "cubic-bezier(0, 0, 0.2, 1)" };
+function canAnimateTreeBranch() {
+  if (typeof window === "undefined" || typeof HTMLElement.prototype.animate !== "function") {
+    return false;
+  }
+  return !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
 var TREE_ROW_CLASS = "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 hover:bg-(--cmp-tree-item-bg-hover)";
 var TREE_ROW_BORDER_CLASS = "border-b-(length:--cmp-tree-item-border-width-default) border-(--cmp-tree-item-border-default)";
 var TREE_ROW_ACTIVE_CLASS = "bg-(--cmp-tree-item-bg-hover)";
@@ -16098,6 +16105,21 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
   const [searchCollapsed, setSearchCollapsed] = useState(NO_SEARCH_COLLAPSED);
+  const [treeMotion, setTreeMotion] = useState(null);
+  const treeMotionTimerRef = useRef(null);
+  const pendingCollapseRef = useRef(null);
+  const cancelTreeMotion = () => {
+    if (treeMotionTimerRef.current != null) clearTimeout(treeMotionTimerRef.current);
+    treeMotionTimerRef.current = null;
+    pendingCollapseRef.current = null;
+    setTreeMotion(null);
+  };
+  useEffect(
+    () => () => {
+      if (treeMotionTimerRef.current != null) clearTimeout(treeMotionTimerRef.current);
+    },
+    []
+  );
   const baseId = useId();
   const listboxId = `${baseId}-listbox`;
   const activeOptionId = `${baseId}-active-option`;
@@ -16165,6 +16187,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   const commitOpen = (next, valueForRules) => {
     setOpen(next);
     onOpenChange?.(next);
+    cancelTreeMotion();
     if (next) {
       dismissedByPointerRef.current = false;
       alignSelectedTopRef.current = true;
@@ -16235,6 +16258,10 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     (groupValue) => treeSearching ? !searchCollapsed.has(groupValue) : expanded.has(groupValue),
     [expanded, searchCollapsed, treeSearching]
   );
+  const isGroupShownExpanded = useCallback(
+    (groupValue) => isGroupExpanded(groupValue) && !(treeMotion != null && !treeMotion.opening && treeMotion.group === groupValue),
+    [isGroupExpanded, treeMotion]
+  );
   const treeRows = useMemo(
     () => isTree ? visibleTreeRows(searched, (row) => isGroupExpanded(row.value)) : null,
     [isGroupExpanded, isTree, searched]
@@ -16524,6 +16551,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   const handleSearchChange = (next) => {
     setSearch(next);
     setSearchCollapsed(NO_SEARCH_COLLAPSED);
+    cancelTreeMotion();
   };
   const handleToggleExpand = (groupValue) => {
     rangeAnchorRef.current = null;
@@ -16533,8 +16561,41 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
       else next.add(groupValue);
       return next;
     };
-    if (treeSearching) setSearchCollapsed(toggle);
-    else setExpanded(toggle);
+    const applyToggle = treeSearching ? () => setSearchCollapsed(toggle) : () => setExpanded(toggle);
+    if (treeMotionTimerRef.current != null) clearTimeout(treeMotionTimerRef.current);
+    treeMotionTimerRef.current = null;
+    const pendingCollapse = pendingCollapseRef.current;
+    pendingCollapseRef.current = null;
+    if (treeMotion?.group === groupValue && !treeMotion.opening) {
+      setTreeMotion({ group: groupValue, opening: true });
+      treeMotionTimerRef.current = setTimeout(
+        () => setTreeMotion(null),
+        TREE_BRANCH_MOTION.duration
+      );
+      return;
+    }
+    pendingCollapse?.();
+    if (!canAnimateTreeBranch()) {
+      setTreeMotion(null);
+      applyToggle();
+      return;
+    }
+    if (isGroupExpanded(groupValue)) {
+      setTreeMotion({ group: groupValue, opening: false });
+      pendingCollapseRef.current = applyToggle;
+      treeMotionTimerRef.current = setTimeout(() => {
+        pendingCollapseRef.current = null;
+        setTreeMotion(null);
+        applyToggle();
+      }, TREE_BRANCH_MOTION.duration);
+    } else {
+      applyToggle();
+      setTreeMotion({ group: groupValue, opening: true });
+      treeMotionTimerRef.current = setTimeout(
+        () => setTreeMotion(null),
+        TREE_BRANCH_MOTION.duration
+      );
+    }
   };
   const handleToggleGroup = (leafValues) => {
     if (leafValues.length === 0) return;
@@ -16644,7 +16705,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
       const row = rowIndex != null ? filtered[rowIndex] : void 0;
       if (rowIndex == null || row == null) return;
       event.preventDefault();
-      const rowExpanded = row.isGroup && isGroupExpanded(row.value);
+      const rowExpanded = row.isGroup && isGroupShownExpanded(row.value);
       if (event.key === "ArrowRight") {
         if (!row.isGroup) return;
         if (!rowExpanded) {
@@ -16889,8 +16950,9 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
                       setSize: isDepth || isTree ? void 0 : rowCount,
                       multi,
                       tree: isTree,
-                      isExpanded: isGroupExpanded,
+                      isExpanded: isGroupShownExpanded,
                       onToggleExpand: handleToggleExpand,
+                      treeMotion,
                       treeLines,
                       selected,
                       groupLeafValues,
@@ -16947,6 +17009,7 @@ function ItemList({
   tree,
   isExpanded,
   onToggleExpand,
+  treeMotion,
   treeLines,
   selected,
   groupLeafValues,
@@ -16967,295 +17030,322 @@ function ItemList({
     "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listBoxItem-content-disabled)]"
   );
   const activeClass = "hover:bg-[var(--cmp-listBoxItem-bg-hover)] hover:text-[color:var(--cmp-listBoxItem-content-hover)] focus-visible:bg-[var(--cmp-listBoxItem-bg-hover)] focus-visible:text-[color:var(--cmp-listBoxItem-content-hover)]";
-  return /* @__PURE__ */ jsxs("div", { id: listboxId, role: tree ? "tree" : "listbox", "aria-multiselectable": multi || void 0, children: [
-    showSelectAll && (tree ? (
-      // 트리의 전체선택 줄은 STree 의 "전체" 줄 그대로다 (lib/tree-row).
-      /* @__PURE__ */ jsx(
-        TreeAllRow,
-        {
-          "data-select-all-row": true,
-          id: focusedValue === "__select_all__" ? activeOptionId : void 0,
-          "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
-          "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
-          tabIndex: -1,
-          label: selectAllLabel,
-          selected: selectAllSelected,
-          active: focusedValue === "__select_all__",
-          className: "select-none",
-          onMouseEnter: () => onHoverValue("__select_all__"),
-          onMouseLeave: () => onHoverValue(null),
-          onToggle: onSelectAll
-        }
-      )
-    ) : /* @__PURE__ */ jsxs(
-      "button",
+  const wrapTreeMotion = (nodes) => {
+    if (!tree || treeMotion == null) return nodes;
+    const start = items.findIndex((o) => o.isGroup && o.value === treeMotion.group);
+    if (start < 0) return nodes;
+    let end = start + 1;
+    while (end < items.length && items[end].depth > items[start].depth) end++;
+    if (end === start + 1) return nodes;
+    return [
+      ...nodes.slice(0, start + 1),
+      /* @__PURE__ */ jsx(TreeRowsMotion, { opening: treeMotion.opening, children: nodes.slice(start + 1, end) }, `__motion_${treeMotion.group}__`),
+      ...nodes.slice(end)
+    ];
+  };
+  const selectAllRow = showSelectAll && (tree ? (
+    // 트리의 전체선택 줄은 STree 의 "전체" 줄 그대로다 (lib/tree-row).
+    /* @__PURE__ */ jsx(
+      TreeAllRow,
       {
-        type: "button",
         "data-select-all-row": true,
         id: focusedValue === "__select_all__" ? activeOptionId : void 0,
         "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
         "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
-        className: cn(
-          itemBase,
-          focusedValue === "__select_all__" && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
-        ),
-        style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: LIST_BOX_ITEM_PADDING_LEFT[1] },
+        tabIndex: -1,
+        label: selectAllLabel,
+        selected: selectAllSelected,
+        active: focusedValue === "__select_all__",
+        className: "select-none",
         onMouseEnter: () => onHoverValue("__select_all__"),
         onMouseLeave: () => onHoverValue(null),
-        onClick: onSelectAll,
-        children: [
-          /* @__PURE__ */ jsx(CheckboxBox, { state: selectAllSelected, focused: focusedValue === "__select_all__" }),
-          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
-        ]
+        onToggle: onSelectAll
       }
-    )),
-    topSpacer > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { height: topSpacer } }),
-    items.map((o, windowIndex) => {
-      const idx = windowIndex + indexOffset;
-      const padLeft = LIST_BOX_ITEM_PADDING_LEFT[o.depth === 1 ? 1 : o.depth === 2 ? 2 : 3];
-      const rowKey = `${o.value}-${idx}`;
-      if (tree) {
-        const togglesLeaves = multi && o.isGroup;
-        const leafValues = togglesLeaves ? groupLeafValues.get(idx) ?? [] : [];
-        const total = leafValues.length;
-        const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
-        const isSelected2 = selectedSet.has(o.value);
-        const checkState = togglesLeaves ? total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null : isSelected2;
-        const rowDisabled = o.disabled || togglesLeaves && total === 0;
-        const focusKey = togglesLeaves ? `__group_${idx}__` : o.value;
-        const focused = focusedValue === focusKey;
-        const expanded = o.isGroup && isExpanded(o.value);
-        const line = treeLines[idx];
-        const toggle = () => {
-          if (rowDisabled) return;
-          if (togglesLeaves) onToggleGroup(leafValues);
-          else onSelect(o.value, idx, checkboxShiftRef.current);
-        };
-        return (
-          // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- 키보드는 트리거(또는 검색 입력)가 aria-activedescendant 로 맡는다. 줄로 포커스를 옮기지 않는다
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              tabIndex: -1,
-              "data-select-row": true,
-              "data-index": idx,
-              id: focused ? activeOptionId : void 0,
-              role: "treeitem",
-              "aria-level": o.depth,
-              "aria-posinset": line?.posInSet,
-              "aria-setsize": line?.setSize,
-              "aria-expanded": o.isGroup ? expanded : void 0,
-              "aria-selected": checkState === true,
-              "aria-disabled": rowDisabled || void 0,
-              "data-select-focused": focused ? "true" : void 0,
-              "data-select-active": focused ? "true" : void 0,
-              className: cn(
-                TREE_ROW_CLASS,
-                TREE_LABEL_TYPOGRAPHY.sm.rowHeight,
-                TREE_ROW_BORDER_CLASS,
-                "select-none",
-                o.isGroup && "cursor-pointer",
-                focused && TREE_ROW_ACTIVE_CLASS
-              ),
-              onMouseEnter: () => onHoverValue(focusKey),
-              onMouseLeave: () => onHoverValue(null),
-              onClick: (event) => {
-                if (isRowControlClick(event)) return;
-                if (isRowSelectClick(event)) {
-                  if (rowDisabled) return;
-                  if (togglesLeaves) onToggleGroup(leafValues);
-                  else onSelect(o.value, idx, event.shiftKey);
-                  return;
-                }
-                if (o.isGroup) onToggleExpand(o.value);
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  TreeConnector,
-                  {
-                    guideline: true,
-                    size: "sm",
-                    depth: o.depth,
-                    hasChildren: o.isGroup,
-                    isLast: line?.isLast ?? true,
-                    ancestorLast: line?.ancestorLast ?? []
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: TREE_CONTENT_CLASS, children: [
-                  o.isGroup ? (
-                    // 비활성 그룹도 접고 편다 — 그룹이 비활성이어도 아래에 고를 수 있는 자식이 있을 수 있다.
-                    /* @__PURE__ */ jsx(TreeCaret, { expanded, onToggle: () => onToggleExpand(o.value) })
-                  ) : /* @__PURE__ */ jsx(TreeCaretSpacer, {}),
-                  /* @__PURE__ */ jsx(
-                    TreeSelectZone,
-                    {
-                      selectable: true,
-                      disabled: rowDisabled,
-                      control: multi && /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          "data-tree-control": true,
-                          className: "flex shrink-0",
-                          onPointerDownCapture: (event) => {
-                            checkboxShiftRef.current = event.shiftKey;
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            SCheckbox,
-                            {
-                              value: checkState,
-                              disabled: rowDisabled,
-                              onValueChange: toggle
-                            }
-                          )
-                        }
-                      ),
-                      children: /* @__PURE__ */ jsx(
-                        OptionLabel,
-                        {
-                          label: o.label,
-                          className: treeLabelClass("sm", {
-                            // 고른 줄은 굵게 — multi_tree 는 일부만 고른 그룹도 굵다 (STree 와 같다)
-                            emphasized: checkState !== false,
-                            disabled: rowDisabled,
-                            selectable: true
-                          })
-                        }
-                      )
-                    }
-                  )
-                ] })
-              ]
+    )
+  ) : /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-select-all-row": true,
+      id: focusedValue === "__select_all__" ? activeOptionId : void 0,
+      "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
+      "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
+      className: cn(
+        itemBase,
+        focusedValue === "__select_all__" && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
+      ),
+      style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: LIST_BOX_ITEM_PADDING_LEFT[1] },
+      onMouseEnter: () => onHoverValue("__select_all__"),
+      onMouseLeave: () => onHoverValue(null),
+      onClick: onSelectAll,
+      children: [
+        /* @__PURE__ */ jsx(CheckboxBox, { state: selectAllSelected, focused: focusedValue === "__select_all__" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
+      ]
+    }
+  ));
+  const rowNodes = items.map((o, windowIndex) => {
+    const idx = windowIndex + indexOffset;
+    const padLeft = LIST_BOX_ITEM_PADDING_LEFT[o.depth === 1 ? 1 : o.depth === 2 ? 2 : 3];
+    const rowKey = `${o.value}-${idx}`;
+    if (tree) {
+      const togglesLeaves = multi && o.isGroup;
+      const leafValues = togglesLeaves ? groupLeafValues.get(idx) ?? [] : [];
+      const total = leafValues.length;
+      const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
+      const isSelected2 = selectedSet.has(o.value);
+      const checkState = togglesLeaves ? total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null : isSelected2;
+      const rowDisabled = o.disabled || togglesLeaves && total === 0;
+      const focusKey = togglesLeaves ? `__group_${idx}__` : o.value;
+      const focused = focusedValue === focusKey;
+      const expanded = o.isGroup && isExpanded(o.value);
+      const line = treeLines[idx];
+      const toggle = () => {
+        if (rowDisabled) return;
+        if (togglesLeaves) onToggleGroup(leafValues);
+        else onSelect(o.value, idx, checkboxShiftRef.current);
+      };
+      return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- 키보드는 트리거(또는 검색 입력)가 aria-activedescendant 로 맡는다. 줄로 포커스를 옮기지 않는다
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            tabIndex: -1,
+            "data-select-row": true,
+            "data-index": idx,
+            id: focused ? activeOptionId : void 0,
+            role: "treeitem",
+            "aria-level": o.depth,
+            "aria-posinset": line?.posInSet,
+            "aria-setsize": line?.setSize,
+            "aria-expanded": o.isGroup ? expanded : void 0,
+            "aria-selected": checkState === true,
+            "aria-disabled": rowDisabled || void 0,
+            "data-select-focused": focused ? "true" : void 0,
+            "data-select-active": focused ? "true" : void 0,
+            className: cn(
+              TREE_ROW_CLASS,
+              TREE_LABEL_TYPOGRAPHY.sm.rowHeight,
+              TREE_ROW_BORDER_CLASS,
+              "select-none",
+              o.isGroup && "cursor-pointer",
+              focused && TREE_ROW_ACTIVE_CLASS
+            ),
+            onMouseEnter: () => onHoverValue(focusKey),
+            onMouseLeave: () => onHoverValue(null),
+            onClick: (event) => {
+              if (isRowControlClick(event)) return;
+              if (isRowSelectClick(event)) {
+                if (rowDisabled) return;
+                if (togglesLeaves) onToggleGroup(leafValues);
+                else onSelect(o.value, idx, event.shiftKey);
+                return;
+              }
+              if (o.isGroup) onToggleExpand(o.value);
             },
-            rowKey
-          )
-        );
-      }
-      if (o.isGroup) {
-        const isDepth1 = o.depth === 1;
-        const isFirstRow = idx === 0 && !showSelectAll;
-        const groupTone = cn(
-          isDepth1 ? "bg-[var(--cmp-listBoxItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listBoxItem-depth2-middle-bg)] font-medium",
-          isDepth1 && !isFirstRow && "border-t border-solid border-[color:var(--cmp-listBoxItem-depth1-border-color)]"
-        );
-        if (multi) {
-          const leafValues = groupLeafValues.get(idx) ?? [];
-          const total = leafValues.length;
-          const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
-          const groupState = total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null;
-          const groupDisabled = o.disabled || total === 0;
-          const groupFocused = focusedValue === `__group_${idx}__`;
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              "data-select-row": true,
-              "data-index": idx,
-              id: groupFocused ? activeOptionId : void 0,
-              role: "option",
-              "aria-selected": groupState === true,
-              disabled: groupDisabled,
-              "data-select-focused": groupFocused ? "true" : void 0,
-              "data-select-active": groupFocused ? "true" : void 0,
-              className: cn(
-                "flex w-full select-none items-center gap-(--cmp-listBoxItem-gap) border-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) text-left typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
-                groupTone,
-                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]" : "cursor-pointer",
-                groupDisabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]",
-                // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
-                groupFocused && !groupDisabled && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
+            children: [
+              /* @__PURE__ */ jsx(
+                TreeConnector,
+                {
+                  guideline: true,
+                  size: "sm",
+                  depth: o.depth,
+                  hasChildren: o.isGroup,
+                  isLast: line?.isLast ?? true,
+                  ancestorLast: line?.ancestorLast ?? []
+                }
               ),
-              style: { paddingLeft: padLeft },
-              onMouseEnter: () => onHoverValue(`__group_${idx}__`),
-              onMouseLeave: () => onHoverValue(null),
-              onClick: () => onToggleGroup(leafValues),
-              children: [
-                /* @__PURE__ */ jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
-                /* @__PURE__ */ jsx(OptionLabel, { label: o.label, className: "min-w-0 truncate" }),
-                total > 0 && /* @__PURE__ */ jsxs(
-                  "span",
+              /* @__PURE__ */ jsxs("div", { className: TREE_CONTENT_CLASS, children: [
+                o.isGroup ? (
+                  // 비활성 그룹도 접고 편다 — 그룹이 비활성이어도 아래에 고를 수 있는 자식이 있을 수 있다.
+                  /* @__PURE__ */ jsx(TreeCaret, { expanded, onToggle: () => onToggleExpand(o.value) })
+                ) : /* @__PURE__ */ jsx(TreeCaretSpacer, {}),
+                /* @__PURE__ */ jsx(
+                  TreeSelectZone,
                   {
-                    className: cn(
-                      "shrink-0 font-medium",
-                      groupFocused ? "text-white" : "text-[color:var(--cmp-listBoxItem-content-disabled)]"
+                    selectable: true,
+                    disabled: rowDisabled,
+                    control: multi && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-tree-control": true,
+                        className: "flex shrink-0",
+                        onPointerDownCapture: (event) => {
+                          checkboxShiftRef.current = event.shiftKey;
+                        },
+                        children: /* @__PURE__ */ jsx(SCheckbox, { value: checkState, disabled: rowDisabled, onValueChange: toggle })
+                      }
                     ),
-                    children: [
-                      "(",
-                      selectedCount,
-                      "/",
-                      total,
-                      ")"
-                    ]
+                    children: /* @__PURE__ */ jsx(
+                      OptionLabel,
+                      {
+                        label: o.label,
+                        className: treeLabelClass("sm", {
+                          // 고른 줄은 굵게 — multi_tree 는 일부만 고른 그룹도 굵다 (STree 와 같다)
+                          emphasized: checkState !== false,
+                          disabled: rowDisabled,
+                          selectable: true
+                        })
+                      }
+                    )
                   }
                 )
-              ]
-            },
-            rowKey
-          );
-        }
-        return /* @__PURE__ */ jsx(
-          "div",
+              ] })
+            ]
+          },
+          rowKey
+        )
+      );
+    }
+    if (o.isGroup) {
+      const isDepth1 = o.depth === 1;
+      const isFirstRow = idx === 0 && !showSelectAll;
+      const groupTone = cn(
+        isDepth1 ? "bg-[var(--cmp-listBoxItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listBoxItem-depth2-middle-bg)] font-medium",
+        isDepth1 && !isFirstRow && "border-t border-solid border-[color:var(--cmp-listBoxItem-depth1-border-color)]"
+      );
+      if (multi) {
+        const leafValues = groupLeafValues.get(idx) ?? [];
+        const total = leafValues.length;
+        const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
+        const groupState = total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null;
+        const groupDisabled = o.disabled || total === 0;
+        const groupFocused = focusedValue === `__group_${idx}__`;
+        return /* @__PURE__ */ jsxs(
+          "button",
           {
+            type: "button",
             "data-select-row": true,
             "data-index": idx,
+            id: groupFocused ? activeOptionId : void 0,
+            role: "option",
+            "aria-selected": groupState === true,
+            disabled: groupDisabled,
+            "data-select-focused": groupFocused ? "true" : void 0,
+            "data-select-active": groupFocused ? "true" : void 0,
             className: cn(
-              "select-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
+              "flex w-full select-none items-center gap-(--cmp-listBoxItem-gap) border-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) text-left typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
               groupTone,
-              // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
-              // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]",
-              o.disabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]"
+              groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]" : "cursor-pointer",
+              groupDisabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]",
+              // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
+              groupFocused && !groupDisabled && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
             ),
             style: { paddingLeft: padLeft },
-            children: o.label
+            onMouseEnter: () => onHoverValue(`__group_${idx}__`),
+            onMouseLeave: () => onHoverValue(null),
+            onClick: () => onToggleGroup(leafValues),
+            children: [
+              /* @__PURE__ */ jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
+              /* @__PURE__ */ jsx(OptionLabel, { label: o.label, className: "min-w-0 truncate" }),
+              total > 0 && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "shrink-0 font-medium",
+                    groupFocused ? "text-white" : "text-[color:var(--cmp-listBoxItem-content-disabled)]"
+                  ),
+                  children: [
+                    "(",
+                    selectedCount,
+                    "/",
+                    total,
+                    ")"
+                  ]
+                }
+              )
+            ]
           },
           rowKey
         );
       }
-      const isSelected = selected.includes(o.value);
-      return /* @__PURE__ */ jsxs(
-        "button",
+      return /* @__PURE__ */ jsx(
+        "div",
         {
-          type: "button",
           "data-select-row": true,
           "data-index": idx,
-          id: focusedValue === o.value ? activeOptionId : void 0,
-          disabled: o.disabled,
-          role: "option",
-          "aria-selected": isSelected,
-          "aria-setsize": setSize,
-          "aria-posinset": setSize != null ? idx + 1 : void 0,
-          "data-select-focused": focusedValue === o.value ? "true" : void 0,
-          "data-select-active": focusedValue === o.value ? "true" : void 0,
           className: cn(
-            itemBase,
-            isSelected && !multi && "font-bold text-[color:var(--cmp-listBoxItem-content-selected)]",
-            focusedValue === o.value && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]",
-            // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
-            // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
-            !o.disabled && activeClass
+            "select-none py-(--cmp-listBoxItem-paddingY) pr-(--cmp-listBoxItem-paddingRight) typo-field-sm-default text-[color:var(--cmp-listBoxItem-content-default)]",
+            groupTone,
+            // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
+            // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
+            o.disabled && "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]",
+            o.disabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]"
           ),
-          style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: padLeft },
-          onMouseEnter: () => onHoverValue(o.value),
-          onMouseLeave: () => onHoverValue(null),
-          onClick: (event) => onSelect(o.value, idx, event.shiftKey),
-          children: [
-            multi && /* @__PURE__ */ jsx(
-              CheckboxBox,
-              {
-                state: isSelected,
-                disabled: o.disabled,
-                focused: focusedValue === o.value
-              }
-            ),
-            /* @__PURE__ */ jsx(OptionLabel, { label: o.label, className: "flex-1 truncate" })
-          ]
+          style: { paddingLeft: padLeft },
+          children: o.label
         },
         rowKey
       );
-    }),
+    }
+    const isSelected = selected.includes(o.value);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-select-row": true,
+        "data-index": idx,
+        id: focusedValue === o.value ? activeOptionId : void 0,
+        disabled: o.disabled,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-setsize": setSize,
+        "aria-posinset": setSize != null ? idx + 1 : void 0,
+        "data-select-focused": focusedValue === o.value ? "true" : void 0,
+        "data-select-active": focusedValue === o.value ? "true" : void 0,
+        className: cn(
+          itemBase,
+          isSelected && !multi && "font-bold text-[color:var(--cmp-listBoxItem-content-selected)]",
+          focusedValue === o.value && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]",
+          // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
+          // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
+          !o.disabled && activeClass
+        ),
+        style: { ...LIST_BOX_ITEM_PADDING_Y_RIGHT, paddingLeft: padLeft },
+        onMouseEnter: () => onHoverValue(o.value),
+        onMouseLeave: () => onHoverValue(null),
+        onClick: (event) => onSelect(o.value, idx, event.shiftKey),
+        children: [
+          multi && /* @__PURE__ */ jsx(
+            CheckboxBox,
+            {
+              state: isSelected,
+              disabled: o.disabled,
+              focused: focusedValue === o.value
+            }
+          ),
+          /* @__PURE__ */ jsx(OptionLabel, { label: o.label, className: "flex-1 truncate" })
+        ]
+      },
+      rowKey
+    );
+  });
+  return /* @__PURE__ */ jsxs("div", { id: listboxId, role: tree ? "tree" : "listbox", "aria-multiselectable": multi || void 0, children: [
+    selectAllRow,
+    topSpacer > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { height: topSpacer } }),
+    wrapTreeMotion(rowNodes),
     bottomSpacer > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { height: bottomSpacer } })
   ] });
 }
+function TreeRowsMotion({ opening, children }) {
+  const ref = useRef(null);
+  const animationRef = useRef(null);
+  const mountedRef = useRef(false);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (el == null || typeof el.animate !== "function") return;
+    const from = !mountedRef.current && opening ? 0 : el.getBoundingClientRect().height;
+    mountedRef.current = true;
+    animationRef.current?.cancel();
+    animationRef.current = el.animate(
+      [{ height: `${from}px` }, { height: opening ? `${el.scrollHeight}px` : "0px" }],
+      // 접힌 뒤 줄이 목록에서 빠질 때까지 0 으로 붙잡아 둔다. 편 뒤에는 제 높이(auto)로 돌아간다
+      { ...TREE_BRANCH_MOTION, fill: opening ? "none" : "forwards" }
+    );
+  }, [opening]);
+  useEffect(() => () => animationRef.current?.cancel(), []);
+  return /* @__PURE__ */ jsx("div", { ref, className: "overflow-hidden", "aria-hidden": opening ? void 0 : true, children });
+}
 function OptionLabel({ label, className }) {
   return isHtmlLabel(label) ? /* @__PURE__ */ jsx("span", { className, dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(label) } }) : /* @__PURE__ */ jsx("span", { className, children: label });
 }