sellmate-design-system-react 8.0.0 → 9.0.0-beta.0

package/dist/components/SList/README.md

@@ -11,6 +11,7 @@
 | `children?` | `ReactNode` | — | 리스트 컨테이너 내부에 렌더링할 내용 |
 | `useGap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
 | `usePadding?` | `boolean` | `false` | 리스트 컨테이너 padding 토큰 적용 여부 |
+| `separator?` | `boolean` | `false` | 아이템 하단 구분선 표시 여부. 테두리를 가진 아이템(`bordered`)에는 쓰지 않는다 |
 
 ## Dependencies
 

package/dist/components/SList/SList.d.ts

@@ -6,5 +6,7 @@ export interface SListProps extends HTMLAttributes<HTMLDivElement> {
     useGap?: boolean;
     /** 리스트 컨테이너 padding 토큰 적용 여부 */
     usePadding?: boolean;
+    /** 아이템 하단 구분선 표시 여부. 테두리를 가진 아이템(`bordered`)에는 쓰지 않는다 */
+    separator?: boolean;
 }
 export declare const SList: import("react").ForwardRefExoticComponent<SListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SListItem/README.md

@@ -15,11 +15,12 @@
 | `leading?` | `SListItemSlot` | — | 타이틀 앞에 표시할 아이콘/콘텐츠 |
 | `trailing?` | `SListItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
-| `selected?` | `boolean` | `false` | 선택 상태 여부 |
-| `clickable?` | `boolean` | `true` | 클릭 가능 상태 여부 |
+| `selected?` | `boolean` | `false` | 선택 상태 여부. `clickable` 이 false 면 무시된다 |
+| `clickable?` | `boolean` | `false` | 클릭 가능 상태 여부. hover·selected·chevron 등 인터랙션 표현이 여기에 딸린다 |
 | `interaction?` | `SListItemInteraction` | — | hover/selected 상태에서 적용할 인터랙션 preset |
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |
+| `size?` | `SListItemSize` | `'sm'` | 타이포그래피 크기 |
 | `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
 
 ## Dependencies

package/dist/components/SListItem/SListItem.d.ts

@@ -7,6 +7,7 @@ export type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;
 export type SListItemSlot = ReactNode | SListItemRenderProp;
 export type SListItemInteraction = 'chevron';
 export type SListItemSupportingTextPosition = 'right' | 'bottom';
+export type SListItemSize = 'sm' | 'md';
 export interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
     /** 리스트 아이템 제목 */
     title: SListItemSlot;
@@ -22,9 +23,9 @@ export interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch
     trailing?: SListItemSlot;
     /** 외곽 테두리 사용 여부 */
     bordered?: boolean;
-    /** 선택 상태 여부 */
+    /** 선택 상태 여부. `clickable` 이 false 면 무시된다 */
     selected?: boolean;
-    /** 클릭 가능 상태 여부 */
+    /** 클릭 가능 상태 여부. hover·selected·chevron 등 인터랙션 표현이 여기에 딸린다 */
     clickable?: boolean;
     /** hover/selected 상태에서 적용할 인터랙션 preset */
     interaction?: SListItemInteraction;
@@ -32,6 +33,8 @@ export interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch
     accentStripe?: boolean;
     /** 조밀한 높이 사용 여부 */
     dense?: boolean;
+    /** 타이포그래피 크기 */
+    size?: SListItemSize;
     /** 비활성 상태 여부 */
     disabled?: boolean;
 }

package/dist/components/SPage/README.md

@@ -2,6 +2,24 @@
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
 
+### SPageHeader
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | — | 타이틀 (필수) |
+| `subText?` | `string` | — | 서브 텍스트. fix=true 면 타이틀 오른쪽에, fix=false(기본) 면 타이틀 아래에 놓인다. |
+| `fix?` | `boolean` | `false` | true: 높이 56 고정 + 흰 배경 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄. false(기본): 최소 높이 66(상하 패딩 20/16 안에서 타이틀 한 줄 높이로 결정) + 투명 배경, 서브 텍스트가 타이틀 아래로 내려간다. |
+| `slot?` | `ReactNode` | — | 오른쪽 끝 커스텀 슬롯. 가이드 링크·액션 버튼 등 페이지마다 다른 것이 온다. |
+| `scrolled?` | `boolean` | `false` | `<SPage>` 가 스크롤 여부를 보고 자동으로 넣어준다 — 직접 주지 않는다. fix=false 일 때만 의미가 있다: 스크롤이 시작되면 그림자(floating)가 들어가 스크롤되는 콘텐츠 위에 뜬 것처럼 보인다. 배경은 그대로 페이지 배경을 따라간다 — 배경을 바꾸는 건 scrolled 가 아니라 fix 다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onBack` | `() => void` | 뒤로가기 클릭 핸들러. 지정하면 왼쪽에 뒤로가기 버튼이 나타난다. |
+
 ### SPage
 
 #### Props
@@ -10,17 +28,20 @@
 |------|------|---------|-------------|
 | `background?` | `SPageBackground` | `'frame'` | 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕. 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다. |
 | `scrollEndSpacing?` | `boolean` | `true` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지). |
+| `header?` | `SPageHeaderProps` | — | 페이지 타이틀 영역(pageHeader 포팅). 주면 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다. `children` 은 항상 본문이다 — header 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다. |
 
 ## Dependencies
 
 ### Depends on
 
+- [SGhostButton](../SGhostButton)
 - [SLayout](../SLayout)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  SPage --> SGhostButton
   SPage --> SLayout
   style SPage fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SPage/SPage.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes } from 'react';
 import type { SPageBackground } from './page.config';
+import { type SPageHeaderProps } from './SPageHeader';
 export interface SPageProps extends HTMLAttributes<HTMLElement> {
     /**
      * 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕.
@@ -11,6 +12,11 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
      * 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지).
      */
     scrollEndSpacing?: boolean;
+    /**
+     * 페이지 타이틀 영역(pageHeader 포팅). 주면 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다.
+     * `children` 은 항상 본문이다 — header 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다.
+     */
+    header?: SPageHeaderProps;
 }
 /**
  * SPage — SLayout 안에서 남은 공간을 채우는 스크롤 콘텐츠 영역.
@@ -21,5 +27,9 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
  * - header="fix": flex 자식으로 남은 가로 공간을 채운다.
  * - header="full": SLayout 이 깐 grid 의 "page" 영역 = 상단바 아래·메뉴 오른쪽 자리를 차지한다.
  *   좌표가 아니라 이름으로 잡으므로 프레임의 열·행 구성이 바뀌어도 여기는 그대로다.
+ *
+ * **`header` prop 을 주면** 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다(fix 베리에이션이
+ * 늘 보이는 높이 56 바가 되도록). 주지 않으면 이전과 동일하게 동작한다 — ref·className·style·
+ * 나머지 속성이 전부 스크롤 영역 자체(`<main>`)에 그대로 붙는다.
  */
 export declare const SPage: import("react").ForwardRefExoticComponent<SPageProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/SPage/SPageHeader.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface SPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'slot' | 'title'> {
+    /** 타이틀 (필수) */
+    title: string;
+    /** 서브 텍스트. fix=true 면 타이틀 오른쪽에, fix=false(기본) 면 타이틀 아래에 놓인다. */
+    subText?: string;
+    /**
+     * true: 높이 56 고정 + 흰 배경 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄.
+     * false(기본): 최소 높이 66(상하 패딩 20/16 안에서 타이틀 한 줄 높이로 결정) + 투명 배경,
+     * 서브 텍스트가 타이틀 아래로 내려간다.
+     */
+    fix?: boolean;
+    /** 뒤로가기 클릭 핸들러. 지정하면 왼쪽에 뒤로가기 버튼이 나타난다. */
+    onBack?: () => void;
+    /** 오른쪽 끝 커스텀 슬롯. 가이드 링크·액션 버튼 등 페이지마다 다른 것이 온다. */
+    slot?: ReactNode;
+    /**
+     * `<SPage>` 가 스크롤 여부를 보고 자동으로 넣어준다 — 직접 주지 않는다.
+     * fix=false 일 때만 의미가 있다: 스크롤이 시작되면 그림자(floating)가 들어가 스크롤되는
+     * 콘텐츠 위에 뜬 것처럼 보인다. 배경은 그대로 페이지 배경을 따라간다 — 배경을 바꾸는 건
+     * scrolled 가 아니라 fix 다.
+     * @nodemo SPage 가 스크롤 이벤트로 넣어준다 — 사용자가 직접 시연할 값이 아니다.
+     */
+    scrolled?: boolean;
+}
+/**
+ * SPage 위에 얹는 페이지 타이틀 영역(pageHeader 포팅). `SPage` 가 `header` prop 값으로
+ * 내부적으로만 렌더한다 — 직접 임포트해 쓰지 않는다 (SPage.tsx 참고).
+ * fix 로 bar(높이 고정·흰 배경) / plain(투명·최소 높이) 두 베리에이션을 고른다.
+ * 뒤로가기 버튼은 onBack 유무로 나타나며, 없을 때는 타이틀 쪽에 4px 여백이 대신 들어간다.
+ */
+export declare const SPageHeader: import("react").ForwardRefExoticComponent<SPageHeaderProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,2 +1,3 @@
 export { SPage, type SPageProps } from './SPage';
 export { PAGE_BACKGROUNDS, type SPageBackground } from './page.config';
+export { type SPageHeaderProps } from './SPageHeader';

package/dist/components/SPortal/README.md

@@ -18,7 +18,7 @@
 | `maxHeight?` | `number` | — | 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. |
 | `autoClose?` | `boolean` | `false` | 콘텐츠 내부를 클릭하면 자동으로 닫는다. |
 | `persistent?` | `boolean` | `false` | 외부 클릭 · ESC 로 닫히지 않게 한다. |
-| `viewportPadding?` | `number` | `0` | 뷰포트 경계 여백 px (충돌 회피 패딩). |
+| `viewportPadding?` | `number` | `0` | 뷰포트 경계 여백 px (충돌 회피 패딩). 콘텐츠 폭은 항상 `창 폭 - viewportPadding*2` 를 넘지 않게 잘린다. |
 | `children?` | `ReactNode` | — | 본문 내용 (콘텐츠 자유). |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |

package/dist/components/SPortal/SPortal.d.ts

@@ -29,7 +29,10 @@ export interface SPortalProps {
     autoClose?: boolean;
     /** 외부 클릭 · ESC 로 닫히지 않게 한다. */
     persistent?: boolean;
-    /** 뷰포트 경계 여백 px (충돌 회피 패딩). */
+    /**
+     * 뷰포트 경계 여백 px (충돌 회피 패딩).
+     * 콘텐츠 폭은 항상 `창 폭 - viewportPadding*2` 를 넘지 않게 잘린다.
+     */
     viewportPadding?: number;
     /** 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. */
     onOpenAutoFocus?: (event: Event) => void;
@@ -49,5 +52,8 @@ export interface SPortalProps {
  * 트리거를 감싸지 않고 `anchorRef` 로 임의의 엘리먼트에 붙는다(=sd-portal `parentRef`).
  * open/onClose 로 외부에서 제어하며, flip·collision·스크롤 재배치·외부클릭·ESC·모달 포털은
  * Radix 가 처리한다. 콘텐츠는 children 으로 완전히 자유롭다.
+ *
+ * 콘텐츠가 창보다 넓으면 창 폭에 맞춰 줄어든다(sd-portal 과 동일). `style` 로 준
+ * width·minWidth·maxWidth 도 이 상한 안으로 가둬지므로 화면 밖으로 나가지 않는다.
  */
 export declare function SPortal({ open, onClose, onOpenChange, anchorRef, placement, align, offset, alignOffset, fit, maxHeight, autoClose, persistent, viewportPadding, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, children, className, style, ariaLabel, }: SPortalProps): import("react").JSX.Element;

package/dist/components/SRadio/README.md

@@ -46,12 +46,14 @@
 
 ### Used by
 
+ - [SChipFilter](../SChipFilter)
  - [SKeyValueTable](../SKeyValueTable)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  SChipFilter --> SRadio
   SKeyValueTable --> SRadio
   style SRadio fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SRadioButton/README.md

@@ -22,3 +22,16 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string \| number) => void` | 변경 (sdUpdate) |
 
+## Dependencies
+
+### Used by
+
+ - [SChipFilter](../SChipFilter)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChipFilter --> SRadioButton
+  style SRadioButton fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SSelect/README.md

@@ -22,8 +22,8 @@
 | `rules?` | `Rule[]` | — | 유효성 규칙 — 닫힐 때 자동 검증 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
 | `dropdownHeight?` | `string` | `'260px'` | 드롭다운 최대 높이 |
-| `dropdownWidth?` | `string` | — | 드롭다운 너비 (없으면 트리거 너비) |
-| `maxDropdownWidth?` | `string` | `'640px'` | 드롭다운 최대 너비 |
+| `dropdownWidth?` | `string` | — | 드롭다운 너비 (없으면 트리거 너비). 창보다 넓게 줘도 창 폭까지만 벌어진다. |
+| `maxDropdownWidth?` | `string` | `'640px'` | 드롭다운 최대 너비. 창이 이보다 좁으면 창 폭이 상한이 된다. |
 | `label?` | `string` | — |  |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |

package/dist/components/SSelect/SSelect.d.ts

@@ -45,9 +45,9 @@ export interface SSelectProps {
     labelTooltipProps?: Partial<STooltipProps>;
     /** 드롭다운 최대 높이 */
     dropdownHeight?: string;
-    /** 드롭다운 너비 (없으면 트리거 너비) */
+    /** 드롭다운 너비 (없으면 트리거 너비). 창보다 넓게 줘도 창 폭까지만 벌어진다. */
     dropdownWidth?: string;
-    /** 드롭다운 최대 너비 */
+    /** 드롭다운 최대 너비. 창이 이보다 좁으면 창 폭이 상한이 된다. */
     maxDropdownWidth?: string;
     label?: string;
     labelWidth?: number | string;

package/dist/components/STag/README.md

@@ -20,6 +20,7 @@
 
 ### Used by
 
+ - [SChipFilter](../SChipFilter)
  - [SConfirmModal](../SConfirmModal)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
@@ -35,6 +36,7 @@
 ```mermaid
 graph TD;
   STag --> SIcon
+  SChipFilter --> STag
   SConfirmModal --> STag
   SGhostButton --> STag
   SGnb --> STag

package/dist/components/STextLink/README.md

@@ -28,6 +28,7 @@
 
 ### Used by
 
+ - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
  - [SPopover](../SPopover)
 
@@ -42,6 +43,7 @@
 graph TD;
   STextLink --> SIcon
   STextLink --> STag
+  SChipFilter --> STextLink
   SChipInput --> STextLink
   SPopover --> STextLink
   style STextLink fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/STooltip/README.md

@@ -44,6 +44,7 @@
 
 ### Used by
 
+ - [SChipFilter](../SChipFilter)
  - [SField](../SField)
  - [SKeyValueTable](../SKeyValueTable)
  - [SSectionHeaderCard](../SSectionHeaderCard)
@@ -60,6 +61,7 @@
 graph TD;
   STooltip --> SGhostButton
   STooltip --> SIcon
+  SChipFilter --> STooltip
   SField --> STooltip
   SKeyValueTable --> STooltip
   SSectionHeaderCard --> STooltip