sellmate-design-system-react 3.5.0 → 3.6.0

package/dist/llms-full.txt

@@ -1723,6 +1723,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
 | `selected?` | `boolean` | `false` | 선택 상태 여부 |
+| `dragging?` | `boolean` | `false` | 드래그 중인 스타일을 고정해서 표시할지 여부 |
 | `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |
 | `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
 | `dragOverlay?` | `boolean` | `true` | 드래그 시 마우스를 따라가는 overlay 표시 여부 |
@@ -1745,6 +1746,40 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ---
 
+# 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
+
+---
+
 # SDropdownButton
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
@@ -1809,6 +1844,9 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | `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` |  |
 
@@ -1820,6 +1858,10 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ## Dependencies
 
+### Used by
+
+ - [SExpansionList](../SExpansionList)
+
 ### Depends on
 
 - [SIcon](../SIcon)
@@ -1828,6 +1870,18 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 
 ---
 
+# SExpansionList
+
+`SExpansionItem`과 `SListItem`의 depth별 단일 확장·선택 동작을 관리하는 리스트 wrapper입니다.
+
+레이아웃만 필요한 경우에는 `SList`를 사용하고, expansion accordion 동작이 필요한 경우에는 `SExpansionList`를 사용합니다.
+
+### Props
+
+`SListProps`와 동일합니다.
+
+---
+
 # SField
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
@@ -2371,6 +2425,15 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | `useGap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
 | `usePadding?` | `boolean` | `false` | 리스트 컨테이너 padding 토큰 적용 여부 |
 
+## Dependencies
+
+### Used by
+
+ - [SDraggableList](../SDraggableList)
+ - [SExpansionList](../SExpansionList)
+
+### Graph
+
 ---
 
 # SListItem
@@ -2388,10 +2451,25 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | `leading?` | `SListItemSlot` | — | 타이틀 앞에 표시할 아이콘/콘텐츠 |
 | `trailing?` | `SListItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
+| `selected?` | `boolean` | `false` | 선택 상태 여부 |
+| `clickable?` | `boolean` | `true` | 클릭 가능 상태 여부 |
+| `interaction?` | `SListItemInteraction` | — | hover/selected 상태에서 적용할 인터랙션 preset |
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |
 | `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
 
+## Dependencies
+
+### Used by
+
+ - [SList](../SList)
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
 ---
 
 # SLoadingContainer
@@ -3077,6 +3155,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `title` | `ReactNode` | — | 헤더 제목 |
+| `titleSize?` | `SSectionHeaderCardTitleSize` | `'xs'` | 제목 크기 |
 | `marker?` | `boolean` | `false` | 제목 앞 점 표시 여부 |
 | `required?` | `boolean` | `false` | 제목 뒤 필수 별 표시 여부 |
 | `helpText?` | `string[]` | — | 도움말 툴팁 메시지 |

package/dist/llms.txt

@@ -1089,7 +1089,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 --sys-color-link-accent
 --sys-color-navigation-gnb-bg-dark
 
-## 3. 컴포넌트 인덱스 (58종)
+## 3. 컴포넌트 인덱스 (60종)
 
 **Props 는 이 문서에 없다.** 쓸 컴포넌트를 정했으면 그 컴포넌트의 README 를 읽는다.
 
@@ -1098,4 +1098,4 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 예) SButton 을 쓴다면 `dist/components/SButton/README.md`.
 prop 을 추측해서 쓰지 말고 반드시 README 로 확인한다 (분류별 용도는 §1 의 "전체 컴포넌트 인덱스" 참조).
 
-SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDropdownButton · SExpansionItem · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSectionHeaderCard · SSelect · SStepper · SSwitch · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip
+SActionModal · SBadge · SBarcodeInput · SButton · SCalendar · SCallout · SCard · SCheckbox · SChip · SChipInput · SCircleProgress · SConfirmModal · SDatePicker · SDateRangePicker · SDivider · SDraggableItem · SDraggableList · SDropdownButton · SExpansionItem · SExpansionList · SField · SFilePicker · SForm · SGhostButton · SGnb · SGuide · SIcon · SInput · SKeyValueTable · SLayout · SLinearProgress · SList · SListItem · SLoadingContainer · SLoadingModal · SModal · SNumberInput · SPage · SPagination · SPopover · SPopup · SPortal · SRadio · SRadioButton · SScrollArea · SSectionHeaderCard · SSelect · SStepper · SSwitch · STable · STableBar · STabs · STag · STextLink · STextarea · STimePicker · STimeRangePicker · SToast · SToggle · STooltip

package/dist/styles.css

@@ -861,9 +861,6 @@
   .block {
     display: block;
   }
-  .contents {
-    display: contents;
-  }
   .flex {
     display: flex;
   }
@@ -937,6 +934,9 @@
   .h-\[52px\] {
     height: 52px;
   }
+  .h-\[56px\] {
+    height: 56px;
+  }
   .h-\[80px\] {
     height: 80px;
   }
@@ -1027,9 +1027,6 @@
   .min-h-6 {
     min-height: var(--spacing-6);
   }
-  .min-h-10 {
-    min-height: var(--spacing-10);
-  }
   .min-h-\[14px\] {
     min-height: 14px;
   }
@@ -1111,12 +1108,12 @@
   .w-\[328px\] {
     width: 328px;
   }
-  .w-\[500px\] {
-    width: 500px;
-  }
   .w-\[528px\] {
     width: 528px;
   }
+  .w-\[720px\] {
+    width: 720px;
+  }
   .w-\[var\(--cmp-checkbox-size\)\] {
     width: var(--cmp-checkbox-size);
   }
@@ -1326,9 +1323,6 @@
   .items-center {
     align-items: center;
   }
-  .items-end {
-    align-items: flex-end;
-  }
   .items-start {
     align-items: flex-start;
   }
@@ -1410,6 +1404,9 @@
   .gap-\[8px\] {
     gap: 8px;
   }
+  .gap-\[10px\] {
+    gap: 10px;
+  }
   .gap-\[12px\] {
     gap: 12px;
   }
@@ -1425,6 +1422,9 @@
   .gap-\[24px\] {
     gap: 24px;
   }
+  .gap-\[32px\] {
+    gap: 32px;
+  }
   .gap-\[40px\] {
     gap: 40px;
   }
@@ -1617,9 +1617,6 @@
   .rounded-\[8px\] {
     border-radius: 8px;
   }
-  .rounded-\[24px\] {
-    border-radius: 24px;
-  }
   .rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -1818,18 +1815,27 @@
   .border-\(--cmp-listDraggableItem-bordered-dragging-border-color\) {
     border-color: var(--cmp-listDraggableItem-bordered-dragging-border-color);
   }
+  .border-\(--cmp-listExpansionItem-border-default\) {
+    border-color: var(--cmp-listExpansionItem-border-default);
+  }
   .border-\(--cmp-listExpansionItem-title-border\) {
     border-color: var(--cmp-listExpansionItem-title-border);
   }
   .border-\(--cmp-listItem-border-default\) {
     border-color: var(--cmp-listItem-border-default);
   }
+  .border-\(--cmp-listItem-bordered-border-selected\) {
+    border-color: var(--cmp-listItem-bordered-border-selected);
+  }
   .border-\(--field-bc\) {
     border-color: var(--field-bc);
   }
   .border-\(--sys-color-border-default\) {
     border-color: var(--sys-color-border-default);
   }
+  .border-\[\#AAAAAA\] {
+    border-color: #AAAAAA;
+  }
   .border-\[\#E1E1E1\] {
     border-color: #E1E1E1;
   }
@@ -1887,9 +1893,6 @@
   .border-\[var\(--cmp-timepicker-border-focus\)\] {
     border-color: var(--cmp-timepicker-border-focus);
   }
-  .border-\[var\(--sys-color-border-default\)\] {
-    border-color: var(--sys-color-border-default);
-  }
   .border-border-default {
     border-color: var(--color-border-default);
   }
@@ -1953,6 +1956,9 @@
   .bg-\(--cmp-listItem-bg-default\) {
     background-color: var(--cmp-listItem-bg-default);
   }
+  .bg-\(--cmp-listItem-bg-selected\) {
+    background-color: var(--cmp-listItem-bg-selected);
+  }
   .bg-\(--cmp-sectionHeaderCard-topBorder-color-accent\) {
     background-color: var(--cmp-sectionHeaderCard-topBorder-color-accent);
   }
@@ -1965,12 +1971,18 @@
   .bg-\(--sys-color-bg-neutralLight\) {
     background-color: var(--sys-color-bg-neutralLight);
   }
+  .bg-\(--sys-color-bg-tableHeader\) {
+    background-color: var(--sys-color-bg-tableHeader);
+  }
   .bg-\[\#\.\.\.\] {
     background-color: #...;
   }
   .bg-\[\#F2F2F2\] {
     background-color: #F2F2F2;
   }
+  .bg-\[\#FFE3F7\] {
+    background-color: #FFE3F7;
+  }
   .bg-\[\#eee\] {
     background-color: #eee;
   }
@@ -2061,9 +2073,6 @@
   .bg-\[var\(--rd-bg\)\] {
     background-color: var(--rd-bg);
   }
-  .bg-\[var\(--sys-color-bg-accent\)\] {
-    background-color: var(--sys-color-bg-accent);
-  }
   .bg-\[var\(--sys-color-bg-frame\)\] {
     background-color: var(--sys-color-bg-frame);
   }
@@ -2304,9 +2313,6 @@
   .py-2 {
     padding-block: var(--spacing-2);
   }
-  .py-3 {
-    padding-block: calc(var(--spacing) * 3);
-  }
   .py-4 {
     padding-block: var(--spacing-4);
   }
@@ -2382,11 +2388,8 @@
   .pb-\[var\(--cmp-modal-action-body-paddingBottom\)\] {
     padding-bottom: var(--cmp-modal-action-body-paddingBottom);
   }
-  .pl-\(--cmp-listExpansionItem-title-paddingX\) {
-    padding-left: var(--cmp-listExpansionItem-title-paddingX);
-  }
-  .pl-\(--cmp-listItem-paddingX\) {
-    padding-left: var(--cmp-listItem-paddingX);
+  .pl-\[16px\] {
+    padding-left: 16px;
   }
   .pl-\[26px\] {
     padding-left: 26px;
@@ -2394,17 +2397,11 @@
   .pl-\[32px\] {
     padding-left: 32px;
   }
-  .pl-\[calc\(var\(--cmp-listExpansionItem-title-paddingX\)\+32px\)\] {
-    padding-left: calc(var(--cmp-listExpansionItem-title-paddingX) + 32px);
+  .pl-\[36px\] {
+    padding-left: 36px;
   }
-  .pl-\[calc\(var\(--cmp-listExpansionItem-title-paddingX\)\+64px\)\] {
-    padding-left: calc(var(--cmp-listExpansionItem-title-paddingX) + 64px);
-  }
-  .pl-\[calc\(var\(--cmp-listItem-paddingX\)\+32px\)\] {
-    padding-left: calc(var(--cmp-listItem-paddingX) + 32px);
-  }
-  .pl-\[calc\(var\(--cmp-listItem-paddingX\)\+64px\)\] {
-    padding-left: calc(var(--cmp-listItem-paddingX) + 64px);
+  .pl-\[56px\] {
+    padding-left: 56px;
   }
   .pl-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-left: var(--cmp-overlay-header-paddingX);
@@ -2635,6 +2632,9 @@
   .text-\(--cmp-listItem-text-default\) {
     color: var(--cmp-listItem-text-default);
   }
+  .text-\(--cmp-listItem-text-selected\) {
+    color: var(--cmp-listItem-text-selected);
+  }
   .text-\(--color-grey-65\) {
     color: var(--color-grey-65);
   }
@@ -2773,15 +2773,9 @@
   .text-\[var\(--cmp-timepicker-selector-range-heading-color\)\] {
     color: var(--cmp-timepicker-selector-range-heading-color);
   }
-  .text-\[var\(--sys-color-fg-inverse\)\] {
-    color: var(--sys-color-fg-inverse);
-  }
   .text-\[var\(--sys-color-fg-primary\)\] {
     color: var(--sys-color-fg-primary);
   }
-  .text-\[var\(--sys-color-fg-secondary\)\] {
-    color: var(--sys-color-fg-secondary);
-  }
   .text-\[var\(--sys-color-fg-tertiary\)\] {
     color: var(--sys-color-fg-tertiary);
   }
@@ -3029,13 +3023,6 @@
       }
     }
   }
-  .group-hover\/row\:opacity-100 {
-    &:is(:where(.group\/row):hover *) {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
-    }
-  }
   .group-hover\/table-row\:bg-\[var\(--color-grey-05\)\] {
     &:is(:where(.group\/table-row):hover *) {
       @media (hover: hover) {
@@ -3375,6 +3362,13 @@
       }
     }
   }
+  .hover\:bg-\(--sys-color-bg-neutralBright\) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--sys-color-bg-neutralBright);
+      }
+    }
+  }
   .hover\:bg-\[var\(--btn-bg-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3424,13 +3418,6 @@
       }
     }
   }
-  .hover\:bg-\[var\(--sys-color-bg-neutralLight\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--sys-color-bg-neutralLight);
-      }
-    }
-  }
   .hover\:bg-black\/5 {
     &:hover {
       @media (hover: hover) {
@@ -3912,14 +3899,14 @@
       border-bottom-width: 1px;
     }
   }
-  .\[\&\>button\]\:bg-\[var\(--sys-color-bg-tableHeader\)\] {
+  .\[\&\>button\]\:h-\[60px\] {
     &>button {
-      background-color: var(--sys-color-bg-tableHeader);
+      height: 60px;
     }
   }
-  .\[\&\>button\]\:text-\[var\(--sys-color-fg-brand\)\] {
+  .\[\&\>button\]\:bg-\(--cmp-listExpansionItem-title-bg-hover\) {
     &>button {
-      color: var(--sys-color-fg-brand);
+      background-color: var(--cmp-listExpansionItem-title-bg-hover);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [