sellmate-design-system-react 3.4.0 → 3.6.0

package/dist/components/SDraggableList/README.md

@@ -0,0 +1,37 @@
+# SDraggableList
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDraggableList
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `T[]` | — | 현재 순서대로 렌더링할 아이템 목록 |
+| `getKey` | `(item: T, index: number) => string` | — | 아이템을 식별할 안정적인 key |
+| `renderItem` | `(item: T, index: number, state: SDraggableListRenderState) => ReactNode` | — | 아이템 렌더링 함수 |
+| `selectedKey?` | `string` | — | 외부에서 제어하는 selected 아이템 key |
+| `defaultSelectedKey?` | `string` | — | 초기 selected 아이템 key |
+| `getDisabled?` | `(item: T, index: number) => boolean` | — | disabled 아이템은 선택 및 드래그에서 제외 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onChange` | `(items: T[]) => void` | 드래그가 끝난 뒤 변경된 순서 |
+| `onSelectedKeyChange` | `(key: string) => void` | selected 아이템이 변경될 때 호출 |
+
+## Dependencies
+
+### Depends on
+
+- [SList](../SList)
+
+### Graph
+
+```mermaid
+graph TD;
+  SDraggableList --> SList
+  style SDraggableList fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SDraggableList/SDraggableList.cjs

@@ -0,0 +1,143 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+var twMerge = tailwindMerge.extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+var SList = react.forwardRef(function SList2({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
+        usePadding && "p-(--cmp-list-group-padding)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+SList.displayName = "SList";
+function reorder(items, fromIndex, toIndex) {
+  if (fromIndex === toIndex) return items;
+  const nextItems = [...items];
+  const [movedItem] = nextItems.splice(fromIndex, 1);
+  nextItems.splice(toIndex, 0, movedItem);
+  return nextItems;
+}
+function SDraggableListInner({
+  items,
+  getKey,
+  renderItem,
+  onChange,
+  selectedKey,
+  defaultSelectedKey,
+  onSelectedKeyChange,
+  getDisabled,
+  ...rest
+}, ref) {
+  const [draggingIndex, setDraggingIndex] = react.useState(null);
+  const [dropIndex, setDropIndex] = react.useState(null);
+  const [internalSelectedKey, setInternalSelectedKey] = react.useState(
+    defaultSelectedKey
+  );
+  const listRef = react.useRef(null);
+  const fromIndexRef = react.useRef(null);
+  const currentSelectedKey = selectedKey ?? internalSelectedKey;
+  const startDrag = react.useCallback((event, index) => {
+    event.preventDefault();
+    fromIndexRef.current = index;
+    setDraggingIndex(index);
+    setDropIndex(index);
+  }, []);
+  react.useEffect(() => {
+    if (draggingIndex == null) return void 0;
+    const handleMouseMove = (event) => {
+      const itemElements = listRef.current?.querySelectorAll(
+        "[data-draggable-list-item]"
+      );
+      if (!itemElements) return;
+      let nextDropIndex = items.length;
+      itemElements.forEach((itemElement, index) => {
+        const rect = itemElement.getBoundingClientRect();
+        if (event.clientY < rect.top + rect.height / 2 && nextDropIndex === items.length) {
+          nextDropIndex = index;
+        }
+      });
+      setDropIndex(nextDropIndex);
+    };
+    const handleMouseUp = () => {
+      const fromIndex = fromIndexRef.current;
+      const nextDropIndex = dropIndex;
+      if (fromIndex != null && nextDropIndex != null) {
+        const toIndex = nextDropIndex > fromIndex ? nextDropIndex - 1 : nextDropIndex;
+        if (fromIndex !== toIndex) onChange(reorder(items, fromIndex, toIndex));
+      }
+      fromIndexRef.current = null;
+      setDraggingIndex(null);
+      setDropIndex(null);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [draggingIndex, dropIndex, items, onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SList,
+    {
+      ref: (node) => {
+        listRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      ...rest,
+      children: items.map((item, index) => {
+        const itemKey = getKey(item, index);
+        const disabled = getDisabled?.(item, index) ?? false;
+        const showBefore = draggingIndex != null && dropIndex === index;
+        const showAfter = draggingIndex != null && dropIndex === items.length && index === items.length - 1;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-draggable-list-item": true,
+            "aria-disabled": disabled || void 0,
+            onClick: () => {
+              if (disabled) return;
+              setInternalSelectedKey(itemKey);
+              onSelectedKeyChange?.(itemKey);
+            },
+            className: `relative ${showBefore ? "before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']" : ""} ${showAfter ? "after:absolute after:bottom-0 after:left-0 after:right-0 after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']" : ""}`,
+            children: renderItem(item, index, {
+              onDragHandleMouseDown: (event) => {
+                if (!disabled) startDrag(event, index);
+              },
+              selected: currentSelectedKey === itemKey
+            })
+          },
+          itemKey
+        );
+      })
+    }
+  );
+}
+var SDraggableList = react.forwardRef(SDraggableListInner);
+
+exports.SDraggableList = SDraggableList;
+//# sourceMappingURL=SDraggableList.cjs.map
+//# sourceMappingURL=SDraggableList.cjs.map

package/dist/components/SDraggableList/SDraggableList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SList/SList.tsx","../../../src/components/SDraggableList/SDraggableList.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SList","jsx","useState","useRef","useCallback","useEffect"],"mappings":";;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACRO,IAAM,KAAA,GAAQC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAA,EAAU,MAAA,GAAS,KAAA,EAAO,UAAA,GAAa,KAAA,EAAO,GAAG,IAAA,IAC9D,GAAA,EACA;AACA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,MAAA,IAAU,0CAAA;AAAA,QACV,UAAA,IAAc,8BAAA;AAAA,QACd;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAED,KAAA,CAAM,WAAA,GAAc,OAAA;ACMpB,SAAS,OAAA,CAAW,KAAA,EAAY,SAAA,EAAmB,OAAA,EAAiB;AAClE,EAAA,IAAI,SAAA,KAAc,SAAS,OAAO,KAAA;AAClC,EAAA,MAAM,SAAA,GAAY,CAAC,GAAG,KAAK,CAAA;AAC3B,EAAA,MAAM,CAAC,SAAS,CAAA,GAAI,SAAA,CAAU,MAAA,CAAO,WAAW,CAAC,CAAA;AACjD,EAAA,SAAA,CAAU,MAAA,CAAO,OAAA,EAAS,CAAA,EAAG,SAAS,CAAA;AACtC,EAAA,OAAO,SAAA;AACT;AAEA,SAAS,mBAAA,CACP;AAAA,EACE,KAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAwB,IAAI,CAAA;AACtE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAC9D,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAIA,cAAA;AAAA,IACpD;AAAA,GACF;AACA,EAAA,MAAM,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,YAAA,GAAeA,aAAsB,IAAI,CAAA;AAC/C,EAAA,MAAM,qBAAqB,WAAA,IAAe,mBAAA;AAE1C,EAAA,MAAM,SAAA,GAAYC,iBAAA,CAAY,CAAC,KAAA,EAAmC,KAAA,KAAkB;AAClF,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AACvB,IAAA,gBAAA,CAAiB,KAAK,CAAA;AACtB,IAAA,YAAA,CAAa,KAAK,CAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,aAAA,IAAiB,MAAM,OAAO,MAAA;AAElC,IAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAiC;AACxD,MAAA,MAAM,YAAA,GAAe,QAAQ,OAAA,EAAS,gBAAA;AAAA,QACpC;AAAA,OACF;AACA,MAAA,IAAI,CAAC,YAAA,EAAc;AAEnB,MAAA,IAAI,gBAAgB,KAAA,CAAM,MAAA;AAC1B,MAAA,YAAA,CAAa,OAAA,CAAQ,CAAC,WAAA,EAAa,KAAA,KAAU;AAC3C,QAAA,MAAM,IAAA,GAAO,YAAY,qBAAA,EAAsB;AAC/C,QAAA,IAAI,KAAA,CAAM,UAAU,IAAA,CAAK,GAAA,GAAM,KAAK,MAAA,GAAS,CAAA,IAAK,aAAA,KAAkB,KAAA,CAAM,MAAA,EAAQ;AAChF,UAAA,aAAA,GAAgB,KAAA;AAAA,QAClB;AAAA,MACF,CAAC,CAAA;AACD,MAAA,YAAA,CAAa,aAAa,CAAA;AAAA,IAC5B,CAAA;AAEA,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,MAAA,MAAM,aAAA,GAAgB,SAAA;AACtB,MAAA,IAAI,SAAA,IAAa,IAAA,IAAQ,aAAA,IAAiB,IAAA,EAAM;AAC9C,QAAA,MAAM,OAAA,GAAU,aAAA,GAAgB,SAAA,GAAY,aAAA,GAAgB,CAAA,GAAI,aAAA;AAChE,QAAA,IAAI,cAAc,OAAA,EAAS,QAAA,CAAS,QAAQ,KAAA,EAAO,SAAA,EAAW,OAAO,CAAC,CAAA;AAAA,MACxE;AACA,MAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,MAAA,gBAAA,CAAiB,IAAI,CAAA;AACrB,MAAA,YAAA,CAAa,IAAI,CAAA;AAAA,IACnB,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,aAAa,eAAe,CAAA;AACpD,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAChD,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,aAAa,eAAe,CAAA;AACvD,MAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACrD,CAAA;AAAA,EACF,GAAG,CAAC,aAAA,EAAe,SAAA,EAAW,KAAA,EAAO,QAAQ,CAAC,CAAA;AAE9C,EAAA,uBACEJ,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAK,CAAA,IAAA,KAAQ;AACX,QAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAClB,QAAA,IAAI,OAAO,GAAA,KAAQ,UAAA,EAAY,GAAA,CAAI,IAAI,CAAA;AAAA,aAAA,IAC9B,GAAA,MAAS,OAAA,GAAU,IAAA;AAAA,MAC9B,CAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAC1B,QAAA,MAAM,OAAA,GAAU,MAAA,CAAO,IAAA,EAAM,KAAK,CAAA;AAClC,QAAA,MAAM,QAAA,GAAW,WAAA,GAAc,IAAA,EAAM,KAAK,CAAA,IAAK,KAAA;AAC/C,QAAA,MAAM,UAAA,GAAa,aAAA,IAAiB,IAAA,IAAQ,SAAA,KAAc,KAAA;AAC1D,QAAA,MAAM,SAAA,GACJ,iBAAiB,IAAA,IAAQ,SAAA,KAAc,MAAM,MAAA,IAAU,KAAA,KAAU,MAAM,MAAA,GAAS,CAAA;AAClF,QAAA,uBACEA,cAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,0BAAA,EAAwB,IAAA;AAAA,YACxB,iBAAe,QAAA,IAAY,MAAA;AAAA,YAC3B,SAAS,MAAM;AACb,cAAA,IAAI,QAAA,EAAU;AACd,cAAA,sBAAA,CAAuB,OAAO,CAAA;AAC9B,cAAA,mBAAA,GAAsB,OAAO,CAAA;AAAA,YAC/B,CAAA;AAAA,YACA,SAAA,EAAW,YACT,UAAA,GACI,gJAAA,GACA,EACN,CAAA,CAAA,EACE,SAAA,GACI,8IACA,EACN,CAAA,CAAA;AAAA,YAEC,QAAA,EAAA,UAAA,CAAW,MAAM,KAAA,EAAO;AAAA,cACvB,uBAAuB,CAAA,KAAA,KAAS;AAC9B,gBAAA,IAAI,CAAC,QAAA,EAAU,SAAA,CAAU,KAAA,EAAO,KAAK,CAAA;AAAA,cACvC,CAAA;AAAA,cACA,UAAU,kBAAA,KAAuB;AAAA,aAClC;AAAA,WAAA;AAAA,UAvBI;AAAA,SAwBP;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ;AAEO,IAAM,cAAA,GAAiBF,iBAAW,mBAAmB","file":"SDraggableList.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListProps extends HTMLAttributes<HTMLDivElement> {\n  /** 리스트 컨테이너 내부에 렌더링할 내용 */\n  children?: ReactNode;\n  /** 리스트 아이템 사이 gap 토큰 적용 여부 */\n  useGap?: boolean;\n  /** 리스트 컨테이너 padding 토큰 적용 여부 */\n  usePadding?: boolean;\n}\n\nexport const SList = forwardRef<HTMLDivElement, SListProps>(function SList(\n  { className, children, useGap = false, usePadding = false, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        useGap && 'flex flex-col gap-(--cmp-list-group-gap)',\n        usePadding && 'p-(--cmp-list-group-padding)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nSList.displayName = 'SList';\n","'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { SList, type SListProps } from '../SList';\n\nexport interface SDraggableListRenderState {\n  onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;\n  selected: boolean;\n}\n\nexport interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'onChange'> {\n  /** 현재 순서대로 렌더링할 아이템 목록 */\n  items: T[];\n  /** 아이템을 식별할 안정적인 key */\n  getKey: (item: T, index: number) => string;\n  /** 아이템 렌더링 함수 */\n  renderItem: (item: T, index: number, state: SDraggableListRenderState) => ReactNode;\n  /** 드래그가 끝난 뒤 변경된 순서 */\n  onChange: (items: T[]) => void;\n  /** 외부에서 제어하는 selected 아이템 key */\n  selectedKey?: string;\n  /** 초기 selected 아이템 key */\n  defaultSelectedKey?: string;\n  /** selected 아이템이 변경될 때 호출 */\n  onSelectedKeyChange?: (key: string) => void;\n  /** disabled 아이템은 선택 및 드래그에서 제외 */\n  getDisabled?: (item: T, index: number) => boolean;\n}\n\nfunction reorder<T>(items: T[], fromIndex: number, toIndex: number) {\n  if (fromIndex === toIndex) return items;\n  const nextItems = [...items];\n  const [movedItem] = nextItems.splice(fromIndex, 1);\n  nextItems.splice(toIndex, 0, movedItem);\n  return nextItems;\n}\n\nfunction SDraggableListInner<T>(\n  {\n    items,\n    getKey,\n    renderItem,\n    onChange,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectedKeyChange,\n    getDisabled,\n    ...rest\n  }: SDraggableListProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);\n  const [dropIndex, setDropIndex] = useState<number | null>(null);\n  const [internalSelectedKey, setInternalSelectedKey] = useState<string | undefined>(\n    defaultSelectedKey,\n  );\n  const listRef = useRef<HTMLDivElement>(null);\n  const fromIndexRef = useRef<number | null>(null);\n  const currentSelectedKey = selectedKey ?? internalSelectedKey;\n\n  const startDrag = useCallback((event: MouseEvent<HTMLDivElement>, index: number) => {\n    event.preventDefault();\n    fromIndexRef.current = index;\n    setDraggingIndex(index);\n    setDropIndex(index);\n  }, []);\n\n  useEffect(() => {\n    if (draggingIndex == null) return undefined;\n\n    const handleMouseMove = (event: globalThis.MouseEvent) => {\n      const itemElements = listRef.current?.querySelectorAll<HTMLElement>(\n        '[data-draggable-list-item]',\n      );\n      if (!itemElements) return;\n\n      let nextDropIndex = items.length;\n      itemElements.forEach((itemElement, index) => {\n        const rect = itemElement.getBoundingClientRect();\n        if (event.clientY < rect.top + rect.height / 2 && nextDropIndex === items.length) {\n          nextDropIndex = index;\n        }\n      });\n      setDropIndex(nextDropIndex);\n    };\n\n    const handleMouseUp = () => {\n      const fromIndex = fromIndexRef.current;\n      const nextDropIndex = dropIndex;\n      if (fromIndex != null && nextDropIndex != null) {\n        const toIndex = nextDropIndex > fromIndex ? nextDropIndex - 1 : nextDropIndex;\n        if (fromIndex !== toIndex) onChange(reorder(items, fromIndex, toIndex));\n      }\n      fromIndexRef.current = null;\n      setDraggingIndex(null);\n      setDropIndex(null);\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n    window.addEventListener('mouseup', handleMouseUp);\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n    };\n  }, [draggingIndex, dropIndex, items, onChange]);\n\n  return (\n    <SList\n      ref={node => {\n        listRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      }}\n      {...rest}\n    >\n      {items.map((item, index) => {\n        const itemKey = getKey(item, index);\n        const disabled = getDisabled?.(item, index) ?? false;\n        const showBefore = draggingIndex != null && dropIndex === index;\n        const showAfter =\n          draggingIndex != null && dropIndex === items.length && index === items.length - 1;\n        return (\n          <div\n            key={itemKey}\n            data-draggable-list-item\n            aria-disabled={disabled || undefined}\n            onClick={() => {\n              if (disabled) return;\n              setInternalSelectedKey(itemKey);\n              onSelectedKeyChange?.(itemKey);\n            }}\n            className={`relative ${\n              showBefore\n                ? \"before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']\"\n                : ''\n            } ${\n              showAfter\n                ? \"after:absolute after:bottom-0 after:left-0 after:right-0 after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']\"\n                : ''\n            }`}\n          >\n            {renderItem(item, index, {\n              onDragHandleMouseDown: event => {\n                if (!disabled) startDrag(event, index);\n              },\n              selected: currentSelectedKey === itemKey,\n            })}\n          </div>\n        );\n      })}\n    </SList>\n  );\n}\n\nexport const SDraggableList = forwardRef(SDraggableListInner) as <T>(\n  props: SDraggableListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },\n) => ReactElement | null;\n"]}

package/dist/components/SDraggableList/SDraggableList.d.ts

@@ -0,0 +1,27 @@
+import { type MouseEvent, type ReactElement, type ReactNode } from 'react';
+import { type SListProps } from '../SList';
+export interface SDraggableListRenderState {
+    onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
+    selected: boolean;
+}
+export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'onChange'> {
+    /** 현재 순서대로 렌더링할 아이템 목록 */
+    items: T[];
+    /** 아이템을 식별할 안정적인 key */
+    getKey: (item: T, index: number) => string;
+    /** 아이템 렌더링 함수 */
+    renderItem: (item: T, index: number, state: SDraggableListRenderState) => ReactNode;
+    /** 드래그가 끝난 뒤 변경된 순서 */
+    onChange: (items: T[]) => void;
+    /** 외부에서 제어하는 selected 아이템 key */
+    selectedKey?: string;
+    /** 초기 selected 아이템 key */
+    defaultSelectedKey?: string;
+    /** selected 아이템이 변경될 때 호출 */
+    onSelectedKeyChange?: (key: string) => void;
+    /** disabled 아이템은 선택 및 드래그에서 제외 */
+    getDisabled?: (item: T, index: number) => boolean;
+}
+export declare const SDraggableList: <T>(props: SDraggableListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReactElement | null;

package/dist/components/SDraggableList/SDraggableList.js

@@ -0,0 +1,141 @@
+"use client";
+import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SList = forwardRef(function SList2({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
+        usePadding && "p-(--cmp-list-group-padding)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+SList.displayName = "SList";
+function reorder(items, fromIndex, toIndex) {
+  if (fromIndex === toIndex) return items;
+  const nextItems = [...items];
+  const [movedItem] = nextItems.splice(fromIndex, 1);
+  nextItems.splice(toIndex, 0, movedItem);
+  return nextItems;
+}
+function SDraggableListInner({
+  items,
+  getKey,
+  renderItem,
+  onChange,
+  selectedKey,
+  defaultSelectedKey,
+  onSelectedKeyChange,
+  getDisabled,
+  ...rest
+}, ref) {
+  const [draggingIndex, setDraggingIndex] = useState(null);
+  const [dropIndex, setDropIndex] = useState(null);
+  const [internalSelectedKey, setInternalSelectedKey] = useState(
+    defaultSelectedKey
+  );
+  const listRef = useRef(null);
+  const fromIndexRef = useRef(null);
+  const currentSelectedKey = selectedKey ?? internalSelectedKey;
+  const startDrag = useCallback((event, index) => {
+    event.preventDefault();
+    fromIndexRef.current = index;
+    setDraggingIndex(index);
+    setDropIndex(index);
+  }, []);
+  useEffect(() => {
+    if (draggingIndex == null) return void 0;
+    const handleMouseMove = (event) => {
+      const itemElements = listRef.current?.querySelectorAll(
+        "[data-draggable-list-item]"
+      );
+      if (!itemElements) return;
+      let nextDropIndex = items.length;
+      itemElements.forEach((itemElement, index) => {
+        const rect = itemElement.getBoundingClientRect();
+        if (event.clientY < rect.top + rect.height / 2 && nextDropIndex === items.length) {
+          nextDropIndex = index;
+        }
+      });
+      setDropIndex(nextDropIndex);
+    };
+    const handleMouseUp = () => {
+      const fromIndex = fromIndexRef.current;
+      const nextDropIndex = dropIndex;
+      if (fromIndex != null && nextDropIndex != null) {
+        const toIndex = nextDropIndex > fromIndex ? nextDropIndex - 1 : nextDropIndex;
+        if (fromIndex !== toIndex) onChange(reorder(items, fromIndex, toIndex));
+      }
+      fromIndexRef.current = null;
+      setDraggingIndex(null);
+      setDropIndex(null);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [draggingIndex, dropIndex, items, onChange]);
+  return /* @__PURE__ */ jsx(
+    SList,
+    {
+      ref: (node) => {
+        listRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      ...rest,
+      children: items.map((item, index) => {
+        const itemKey = getKey(item, index);
+        const disabled = getDisabled?.(item, index) ?? false;
+        const showBefore = draggingIndex != null && dropIndex === index;
+        const showAfter = draggingIndex != null && dropIndex === items.length && index === items.length - 1;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-draggable-list-item": true,
+            "aria-disabled": disabled || void 0,
+            onClick: () => {
+              if (disabled) return;
+              setInternalSelectedKey(itemKey);
+              onSelectedKeyChange?.(itemKey);
+            },
+            className: `relative ${showBefore ? "before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']" : ""} ${showAfter ? "after:absolute after:bottom-0 after:left-0 after:right-0 after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']" : ""}`,
+            children: renderItem(item, index, {
+              onDragHandleMouseDown: (event) => {
+                if (!disabled) startDrag(event, index);
+              },
+              selected: currentSelectedKey === itemKey
+            })
+          },
+          itemKey
+        );
+      })
+    }
+  );
+}
+var SDraggableList = forwardRef(SDraggableListInner);
+
+export { SDraggableList };
+//# sourceMappingURL=SDraggableList.js.map
+//# sourceMappingURL=SDraggableList.js.map

package/dist/components/SDraggableList/SDraggableList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SList/SList.tsx","../../../src/components/SDraggableList/SDraggableList.tsx"],"names":["SList","jsx","forwardRef"],"mappings":"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","file":"SDraggableList.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListProps extends HTMLAttributes<HTMLDivElement> {\n  /** 리스트 컨테이너 내부에 렌더링할 내용 */\n  children?: ReactNode;\n  /** 리스트 아이템 사이 gap 토큰 적용 여부 */\n  useGap?: boolean;\n  /** 리스트 컨테이너 padding 토큰 적용 여부 */\n  usePadding?: boolean;\n}\n\nexport const SList = forwardRef<HTMLDivElement, SListProps>(function SList(\n  { className, children, useGap = false, usePadding = false, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        useGap && 'flex flex-col gap-(--cmp-list-group-gap)',\n        usePadding && 'p-(--cmp-list-group-padding)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nSList.displayName = 'SList';\n","'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { SList, type SListProps } from '../SList';\n\nexport interface SDraggableListRenderState {\n  onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;\n  selected: boolean;\n}\n\nexport interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'onChange'> {\n  /** 현재 순서대로 렌더링할 아이템 목록 */\n  items: T[];\n  /** 아이템을 식별할 안정적인 key */\n  getKey: (item: T, index: number) => string;\n  /** 아이템 렌더링 함수 */\n  renderItem: (item: T, index: number, state: SDraggableListRenderState) => ReactNode;\n  /** 드래그가 끝난 뒤 변경된 순서 */\n  onChange: (items: T[]) => void;\n  /** 외부에서 제어하는 selected 아이템 key */\n  selectedKey?: string;\n  /** 초기 selected 아이템 key */\n  defaultSelectedKey?: string;\n  /** selected 아이템이 변경될 때 호출 */\n  onSelectedKeyChange?: (key: string) => void;\n  /** disabled 아이템은 선택 및 드래그에서 제외 */\n  getDisabled?: (item: T, index: number) => boolean;\n}\n\nfunction reorder<T>(items: T[], fromIndex: number, toIndex: number) {\n  if (fromIndex === toIndex) return items;\n  const nextItems = [...items];\n  const [movedItem] = nextItems.splice(fromIndex, 1);\n  nextItems.splice(toIndex, 0, movedItem);\n  return nextItems;\n}\n\nfunction SDraggableListInner<T>(\n  {\n    items,\n    getKey,\n    renderItem,\n    onChange,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectedKeyChange,\n    getDisabled,\n    ...rest\n  }: SDraggableListProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);\n  const [dropIndex, setDropIndex] = useState<number | null>(null);\n  const [internalSelectedKey, setInternalSelectedKey] = useState<string | undefined>(\n    defaultSelectedKey,\n  );\n  const listRef = useRef<HTMLDivElement>(null);\n  const fromIndexRef = useRef<number | null>(null);\n  const currentSelectedKey = selectedKey ?? internalSelectedKey;\n\n  const startDrag = useCallback((event: MouseEvent<HTMLDivElement>, index: number) => {\n    event.preventDefault();\n    fromIndexRef.current = index;\n    setDraggingIndex(index);\n    setDropIndex(index);\n  }, []);\n\n  useEffect(() => {\n    if (draggingIndex == null) return undefined;\n\n    const handleMouseMove = (event: globalThis.MouseEvent) => {\n      const itemElements = listRef.current?.querySelectorAll<HTMLElement>(\n        '[data-draggable-list-item]',\n      );\n      if (!itemElements) return;\n\n      let nextDropIndex = items.length;\n      itemElements.forEach((itemElement, index) => {\n        const rect = itemElement.getBoundingClientRect();\n        if (event.clientY < rect.top + rect.height / 2 && nextDropIndex === items.length) {\n          nextDropIndex = index;\n        }\n      });\n      setDropIndex(nextDropIndex);\n    };\n\n    const handleMouseUp = () => {\n      const fromIndex = fromIndexRef.current;\n      const nextDropIndex = dropIndex;\n      if (fromIndex != null && nextDropIndex != null) {\n        const toIndex = nextDropIndex > fromIndex ? nextDropIndex - 1 : nextDropIndex;\n        if (fromIndex !== toIndex) onChange(reorder(items, fromIndex, toIndex));\n      }\n      fromIndexRef.current = null;\n      setDraggingIndex(null);\n      setDropIndex(null);\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n    window.addEventListener('mouseup', handleMouseUp);\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n    };\n  }, [draggingIndex, dropIndex, items, onChange]);\n\n  return (\n    <SList\n      ref={node => {\n        listRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      }}\n      {...rest}\n    >\n      {items.map((item, index) => {\n        const itemKey = getKey(item, index);\n        const disabled = getDisabled?.(item, index) ?? false;\n        const showBefore = draggingIndex != null && dropIndex === index;\n        const showAfter =\n          draggingIndex != null && dropIndex === items.length && index === items.length - 1;\n        return (\n          <div\n            key={itemKey}\n            data-draggable-list-item\n            aria-disabled={disabled || undefined}\n            onClick={() => {\n              if (disabled) return;\n              setInternalSelectedKey(itemKey);\n              onSelectedKeyChange?.(itemKey);\n            }}\n            className={`relative ${\n              showBefore\n                ? \"before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']\"\n                : ''\n            } ${\n              showAfter\n                ? \"after:absolute after:bottom-0 after:left-0 after:right-0 after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']\"\n                : ''\n            }`}\n          >\n            {renderItem(item, index, {\n              onDragHandleMouseDown: event => {\n                if (!disabled) startDrag(event, index);\n              },\n              selected: currentSelectedKey === itemKey,\n            })}\n          </div>\n        );\n      })}\n    </SList>\n  );\n}\n\nexport const SDraggableList = forwardRef(SDraggableListInner) as <T>(\n  props: SDraggableListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },\n) => ReactElement | null;\n"]}

package/dist/components/SDraggableList/index.d.ts

@@ -0,0 +1 @@
+export { SDraggableList, type SDraggableListProps, type SDraggableListRenderState, } from './SDraggableList';

package/dist/components/SExpansionItem/README.md

@@ -16,6 +16,9 @@
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
 | `expanded?` | `boolean` | — |  |
 | `defaultExpanded?` | `boolean` | `false` |  |
+| `selected?` | `boolean` | `false` |  |
+| `interaction?` | `SExpansionItemInteraction` | — | hover/selected 상태에서 적용할 인터랙션 preset |
+| `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `dense?` | `boolean` | `false` |  |
 | `disabled?` | `boolean` | `false` |  |
 
@@ -27,6 +30,10 @@
 
 ## Dependencies
 
+### Used by
+
+ - [SExpansionList](../SExpansionList)
+
 ### Depends on
 
 - [SIcon](../SIcon)
@@ -36,5 +43,6 @@
 ```mermaid
 graph TD;
   SExpansionItem --> SIcon
+  SExpansionList --> SExpansionItem
   style SExpansionItem fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SExpansionItem/SExpansionItem.cjs

@@ -2851,6 +2851,9 @@ var SIcon = react.forwardRef(function SIcon2({ name, size = 24, color, rotate, l
     }
   );
 });
+var SExpansionItemDescendantContext = react.createContext(
+  null
+);
 var SExpansionItem = react.forwardRef(
   function SExpansionItem2({
     title,
@@ -2861,6 +2864,9 @@ var SExpansionItem = react.forwardRef(
     bordered = false,
     expanded,
     defaultExpanded = false,
+    selected = false,
+    interaction,
+    accentStripe = false,
     dense = false,
     disabled = false,
     onToggle,
@@ -2869,15 +2875,39 @@ var SExpansionItem = react.forwardRef(
     ...rest
   }, ref) {
     const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded);
+    const [expandedDescendantCount, setExpandedDescendantCount] = react.useState(0);
+    const [hovered, setHovered] = react.useState(false);
+    const parentDescendantContext = react.useContext(SExpansionItemDescendantContext);
     const isExpanded = expanded ?? internalExpanded;
-    const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, disabled }) : leading;
+    const isSelected = isExpanded && (selected || expandedDescendantCount === 0);
+    const hasChevronInteraction = interaction === "chevron";
+    const showInteractionChevron = hasChevronInteraction && !disabled && (isSelected || hovered);
+    const interactionChevronColor = isSelected ? "var(--sys-color-fg-brand)" : "var(--sys-color-fg-quaternary)";
+    const reportExpandedDescendant = react.useCallback(
+      (delta) => {
+        setExpandedDescendantCount((current) => Math.max(0, current + delta));
+        parentDescendantContext?.reportExpandedDescendant(delta);
+      },
+      [parentDescendantContext]
+    );
+    const descendantContextValue = react.useMemo(
+      () => ({ reportExpandedDescendant }),
+      [reportExpandedDescendant]
+    );
+    const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, selected: isSelected, disabled }) : leading;
     const id = react.useId();
+    react.useEffect(() => {
+      if (!isExpanded) return;
+      parentDescendantContext?.reportExpandedDescendant(1);
+      return () => parentDescendantContext?.reportExpandedDescendant(-1);
+    }, [isExpanded, parentDescendantContext]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         className: cn(
-          "group/expansion-item overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
+          "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
+          !bordered && "border-b border-(--cmp-listExpansionItem-border-default)",
           // TODO: expansionItem/bordered/radius 및 border intent 토큰 생성 후 고정값을 토큰으로 교체한다.
           bordered && "rounded-[8px] border border-[#E1E1E1] hover:border-[#AAAAAA] [&:has(>button:hover)]:border-[#AAAAAA]",
           bordered && isExpanded && "!border-[#93C4FF]",
@@ -2885,6 +2915,13 @@ var SExpansionItem = react.forwardRef(
         ),
         ...rest,
         children: [
+          accentStripe && !bordered && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 z-[1] w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
@@ -2892,6 +2929,8 @@ var SExpansionItem = react.forwardRef(
               disabled,
               "aria-expanded": isExpanded,
               "aria-controls": id,
+              onMouseEnter: () => setHovered(true),
+              onMouseLeave: () => setHovered(false),
               onClick: (event) => {
                 if (disabled) return;
                 const next = !isExpanded;
@@ -2899,14 +2938,17 @@ var SExpansionItem = react.forwardRef(
                 onToggle?.(next, event);
               },
               className: cn(
-                "flex w-full cursor-pointer items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
+                "group/expansion-item-button flex w-full cursor-pointer items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
                 isExpanded && "border-b border-(--cmp-listExpansionItem-title-border)",
-                !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
+                hasChevronInteraction ? "hover:bg-(--sys-color-bg-neutralBright)" : !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
                 dense ? "h-[32px] py-(--cmp-listExpansionItem-title-paddingY-dense)" : "h-[40px] py-(--cmp-listExpansionItem-title-paddingY-normal)",
                 "gap-(--cmp-listExpansionItem-title-gap)",
                 "pr-(--cmp-listExpansionItem-title-paddingX)",
-                depth === 2 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+64px)]" : "pl-(--cmp-listExpansionItem-title-paddingX)",
-                isExpanded && "bg-(--cmp-listExpansionItem-title-bg-expanded) text-(--cmp-listExpansionItem-title-text-expanded)"
+                depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
+                isExpanded && cn(
+                  "text-(--cmp-listExpansionItem-title-text-expanded)",
+                  isSelected && "bg-(--cmp-listExpansionItem-title-bg-expanded)"
+                )
               ),
               children: [
                 !leading && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2921,11 +2963,12 @@ var SExpansionItem = react.forwardRef(
                 ),
                 leadingNode,
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }) }),
-                trailing
+                trailing,
+                showInteractionChevron && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "chevronRight", size: 12, color: interactionChevronColor })
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(SExpansionItemDescendantContext.Provider, { value: descendantContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               id,
@@ -2936,7 +2979,7 @@ var SExpansionItem = react.forwardRef(
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyPadding && "p-(--cmp-listExpansionItem-body-padding)"), children }) })
             }
-          )
+          ) })
         ]
       }
     );