sellmate-design-system-react 9.0.0-beta.12 → 9.0.0-beta.13

package/AGENTS.md

@@ -1106,14 +1106,16 @@ const columns: STableColumn[] = [
 
 - **항목 하나의 속성을 나열하는 것은 목록이 아니다.** `라벨: 값` 이 세로로 쌓이는 것은 `SKeyValueTable` 이다 (§4-4).
 - `SList` 는 레이아웃만 담당한다. 펼침·단일 선택 동작이 필요하면 `SExpansionList` 다 (§3-7-7).
-- **항목 사이 구분선은 리스트가 그린다.** `SListItem`·`SExpansionItem`·`SDraggableItem` 셋 다 스스로 구분선을 그리지 않으므로, 목록을 감싸는 `SList`·`SExpansionList`·`SDraggableList` 에 `separator` 를 준다 — 아이템에 `border-b` 를 직접 붙이지 않는다. 테두리형(`bordered`)은 테두리가 구분 역할을 하므로 `separator` 대신 `useGap` 으로 띄운다.
+- **`SList` 의 자식은 `SListItem` 을 권장한다.** 다른 자식도 그대로 렌더되지만, 펼치는 항목은 `SExpansionList` + `SExpansionItem` 이, 끌어서 순서를 바꾸는 항목은 `SDraggableList` + `SDraggableItem` 이 여닫힘·선택·정렬 동작까지 함께 관리하므로 그쪽을 쓴다 (§3-7-7).
+- **항목 사이 구분선은 리스트가 알아서 그린다.** `SListItem`·`SExpansionItem`·`SDraggableItem` 셋 다 스스로 구분선을 그리지 않는다. `SList`·`SExpansionList`·`SDraggableList` 가 자식 **사이에** 구분선을 넣으므로 아이템에 `border-b` 를 직접 붙이지 않고, 켜는 prop 도 따로 없다. 마지막 항목 아래에는 선이 남지 않는다. 테두리형(`bordered`)은 테두리가 구분 역할을 하므로 리스트가 구분선을 빼고, `useGap` 으로 띄운다 — `useGap` 을 준 목록에도 구분선은 들어가지 않는다.
 - **`SListItem` 은 기본이 표시 전용이다.** 눌러서 이동·선택하게 하려면 `clickable` 을 준다 — hover·`selected`·`interaction="chevron"` 표현이 전부 여기에 딸려 있어서, `clickable` 없이 `selected` 만 주면 선택 표시가 나오지 않는다. `SExpansionList` 는 선택을 자기가 관리하므로 자식 아이템을 알아서 클릭 가능하게 만든다.
 
 ```tsx
-✅ <SList separator><SListItem title="일반 문의" />…</SList>   {/* 줄로 구분되는 목록 */}
+✅ <SList><SListItem title="일반 문의" />…</SList>              {/* 줄로 구분되는 목록 — 구분선은 자동 */}
 ✅ <SList useGap><SListItem title="일반 문의" bordered />…</SList>  {/* 카드처럼 떨어진 목록 */}
 ✅ <SListItem title="일반 문의" clickable selected onClick={…} />   {/* 눌러서 고르는 목록 */}
-❌ <SList><SListItem title="일반 문의" className="border-b" />…</SList>
+❌ <SList><SListItem title="일반 문의" className="border-b" />…</SList>  {/* 구분선을 직접 붙이지 않는다 */}
+❌ <SList><><SListItem title="일반 문의" /><SListItem title="결제 문의" /></></SList>  {/* Fragment 로 묶으면 그 안쪽은 구분되지 않는다 */}
 ❌ <SListItem title="일반 문의" selected />                        {/* clickable 없으면 선택 표시가 안 나온다 */}
 ```
 
@@ -1125,7 +1127,7 @@ const columns: STableColumn[] = [
 | **한 번에 하나만** 열려야 한다 (아코디언) | `SExpansionList` + `SExpansionItem` |
 | **부모-자식 계층 자체**를 보여줘야 한다 (2단 이상, 연결선) | `STree` |
 
-`SExpansionList` 는 depth 별 단일 확장·선택을 관리하는 wrapper 다. 직접 `useState` 로 "열린 항목 하나"를 들고 있지 않는다. 항목 사이 구분선은 여기서도 리스트가 그린다 — `separator` 를 준다 (§3-7-6).
+`SExpansionList` 는 depth 별 단일 확장·선택을 관리하는 wrapper 다. 직접 `useState` 로 "열린 항목 하나"를 들고 있지 않는다. 항목 사이 구분선은 여기서도 리스트가 알아서 그린다 — 따로 줄 prop 이 없다 (§3-7-6).
 
 #### 3-7-8. SCard vs SSectionHeaderCard
 

package/dist/components/SDivider/README.md

@@ -16,6 +16,7 @@
 
  - [SCalendar](../SCalendar)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SList](../SList)
  - [STableBar](../STableBar)
 
 ### Graph
@@ -24,6 +25,7 @@
 graph TD;
   SCalendar --> SDivider
   SDateRangePicker --> SDivider
+  SList --> SDivider
   STableBar --> SDivider
   style SDivider fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SList/README.md

@@ -19,10 +19,15 @@
  - [SDraggableList](../SDraggableList)
  - [SExpansionList](../SExpansionList)
 
+### Depends on
+
+- [SDivider](../SDivider)
+
 ### Graph
 
 ```mermaid
 graph TD;
+  SList --> SDivider
   SDraggableList --> SList
   SExpansionList --> SList
   style SList fill:#f9f,stroke:#333,stroke-width:4px

package/dist/index.cjs

@@ -3654,7 +3654,49 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
+var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      ref,
+      "aria-orientation": vertical ? "vertical" : "horizontal",
+      className: cn(
+        "shrink-0 border-0",
+        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
+        className
+      ),
+      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
+      ...rest
+    }
+  );
+});
+var dividerStyle = { backgroundColor: "var(--cmp-listItem-border-default)" };
+function hasBorderedChild(children) {
+  let bordered = false;
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) return;
+    if (child.props.bordered === true) {
+      bordered = true;
+      return;
+    }
+    react.Children.forEach(child.props.children, (wrapped) => {
+      if (react.isValidElement(wrapped) && wrapped.props.bordered === true) {
+        bordered = true;
+      }
+    });
+  });
+  return bordered;
+}
+function withDividers(children) {
+  return react.Children.toArray(children).flatMap(
+    (child, index) => index === 0 ? [child] : [
+      /* @__PURE__ */ jsxRuntime.jsx(SDivider, { "aria-hidden": "true", style: dividerStyle }, `s-list-divider-${index}`),
+      child
+    ]
+  );
+}
 var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  const showDivider = !useGap && !hasBorderedChild(children);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3662,11 +3704,10 @@ 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)",
-        "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
         className
       ),
       ...rest,
-      children
+      children: showDivider ? withDividers(children) : children
     }
   );
 });
@@ -5381,22 +5422,6 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
   }
 );
 var SSectionHeaderCard2 = /* @__PURE__ */ withDisplayName(SSectionHeaderCardRootImpl, "SSectionHeaderCard");
-var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "hr",
-    {
-      ref,
-      "aria-orientation": vertical ? "vertical" : "horizontal",
-      className: cn(
-        "shrink-0 border-0",
-        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
-        className
-      ),
-      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
-      ...rest
-    }
-  );
-});
 
 // 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]";
@@ -5479,7 +5504,7 @@ var SSplitterRoot = /* @__PURE__ */ react.forwardRef(function SSplitter({
   vertical = false,
   disabled = false,
   dividerClassName,
-  dividerStyle,
+  dividerStyle: dividerStyle2,
   className,
   style,
   children,
@@ -5604,7 +5629,7 @@ var SSplitterRoot = /* @__PURE__ */ react.forwardRef(function SSplitter({
       ),
       style: {
         ...vertical ? { bottom: HIT_END, height: HIT } : { right: HIT_END, width: HIT },
-        ...dividerStyle
+        ...dividerStyle2
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",