sellmate-design-system-react 9.0.0-beta.2 → 9.0.0-beta.4

package/dist/components/SPage/README.md

@@ -28,6 +28,7 @@
 |------|------|---------|-------------|
 | `background?` | `SPageBackground` | `'frame'` | 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕. 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다. |
 | `scrollEndSpacing?` | `boolean` | `true` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지). |
+| `contentHeight?` | `SPageContentHeight` | `'auto'` | 본문 높이 모드. 기본은 `auto` — 콘텐츠가 흐르고 넘치면 페이지가 스크롤한다. `fill` 은 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다. 표가 자기 안에서 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용이다. 본문 루트에 `h-full` 이 먹으므로 `<div className="flex h-full min-h-0 flex-col">` + `<STable className="min-h-0 flex-1" />` 구성이 성립한다. `fill` 에서는 페이지가 스크롤하지 않으므로 `scrollEndSpacing` 이 무시된다. |
 | `header?` | `SPageHeaderProps` | — | 페이지 타이틀 영역(pageHeader 포팅). 주면 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다. `children` 은 항상 본문이다 — header 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다. |
 
 ## Dependencies

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-import type { SPageBackground } from './page.config';
+import type { SPageBackground, SPageContentHeight } from './page.config';
 import { type SPageHeaderProps } from './SPageHeader';
 export interface SPageProps extends HTMLAttributes<HTMLElement> {
     /**
@@ -12,6 +12,17 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
      * 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지).
      */
     scrollEndSpacing?: boolean;
+    /**
+     * 본문 높이 모드. 기본은 `auto` — 콘텐츠가 흐르고 넘치면 페이지가 스크롤한다.
+     *
+     * `fill` 은 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다. 표가 자기 안에서
+     * 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용이다. 본문 루트에 `h-full` 이 먹으므로
+     * `<div className="flex h-full min-h-0 flex-col">` + `<STable className="min-h-0 flex-1" />`
+     * 구성이 성립한다.
+     *
+     * `fill` 에서는 페이지가 스크롤하지 않으므로 `scrollEndSpacing` 이 무시된다.
+     */
+    contentHeight?: SPageContentHeight;
     /**
      * 페이지 타이틀 영역(pageHeader 포팅). 주면 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다.
      * `children` 은 항상 본문이다 — header 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다.

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

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

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

@@ -6,3 +6,11 @@
  */
 export declare const PAGE_BACKGROUNDS: readonly ["frame", "neutral", "screen"];
 export type SPageBackground = (typeof PAGE_BACKGROUNDS)[number];
+/**
+ * 본문 높이 모드 — 페이지가 스크롤할지, 본문이 남은 높이를 채울지.
+ * - auto: 콘텐츠가 흐르고, 넘치면 페이지가 스크롤한다
+ * - fill: 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다.
+ *         표가 자기 안에서 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용.
+ */
+export declare const PAGE_CONTENT_HEIGHTS: readonly ["auto", "fill"];
+export type SPageContentHeight = (typeof PAGE_CONTENT_HEIGHTS)[number];

package/dist/components/SSectionHeaderCard/README.md

@@ -2,37 +2,24 @@
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
 
-### SSectionHeaderCardBody
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children?` | `SSectionHeaderCardBodyChildren` | — | 바디 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. |
-| `padding?` | `SSectionHeaderCardBodyPadding` | `'default'` | 안쪽 여백. 기본은 `default`. 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`. |
-
-### SSectionHeaderCardHeader
+### SSectionHeaderCard
 
 #### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `title` | `ReactNode` | — | 헤더 제목 |
-| `titleSize?` | `SSectionHeaderCardTitleSize` | `'xs'` | 제목 크기 |
-| `marker?` | `boolean` | `false` | 제목 앞 점 표시 여부 |
-| `required?` | `boolean` | `false` | 제목 뒤 필수 별 표시 여부 |
+| `title?` | `ReactNode` | — | 헤더 제목 |
+| `titleSize?` | `SSectionHeaderCardTitleSize` | — | 제목 크기 |
+| `marker?` | `boolean` | — | 제목 앞 점 표시 여부 |
+| `required?` | `boolean` | — | 제목 뒤 필수 별 표시 여부 |
 | `helpText?` | `string[]` | — | 도움말 툴팁 메시지 |
 | `subtitle?` | `ReactNode` | — | 부제 |
 | `slot?` | `ReactNode` | — | 헤더 우측 슬롯 |
-| `thickness?` | `SSectionHeaderCardThickness` | `false` | 상단 border 색상 타입. false면 표시하지 않습니다. |
-
-### SSectionHeaderCard
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children?` | `SSectionHeaderCardChildren` | — | SSectionHeaderCard 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. |
+| `thickness?` | `SSectionHeaderCardThickness` | — | 상단 border 색상 타입. false면 표시하지 않습니다. |
+| `headerClassName?` | `string` | — | 헤더 영역 클래스 |
+| `padding?` | `SSectionHeaderCardBodyPadding` | — | 바디 안쪽 여백. 기본은 `default`. 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`. |
+| `background?` | `SSectionHeaderCardBodyBackground` | — | 본문 배경. 기본은 `frame` — 카드가 깐 흰 면을 그대로 쓴다. `neutral` 은 바탕을 한 단계 눌러앉혀, 흰 면 덩어리(표·리스트)가 여럿일 때 그것들이 **"면 위에 놓인 객체"로 읽히게** 한다. 위계를 한 단계 더 주고 싶을 때 고르는 선택지이며, **기본값이 틀린 것은 아니다** — 표·리스트는 테두리·라운드·헤더 줄과 간격을 이미 갖고 있어 흰 바탕에서도 경계가 읽힌다. 깔아도 **효과가 없는** 자리가 있다 — 덩어리가 가장자리까지 차는 경우(`padding="none"` 으로 표를 채우면 바탕이 완전히 가려진다), 덩어리에 회색 면이 섞인 경우(그 덩어리가 바탕에 묻힌다), 맨 텍스트나 폼 컨트롤만 있는 본문(떠오를 흰 면이 없다). |
+| `children?` | `SSectionHeaderCardChildren` | — | 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. |
 
 ## Dependencies
 

package/dist/components/SSectionHeaderCard/SSectionHeaderCard.d.ts

@@ -4,9 +4,10 @@ export type SSectionHeaderCardChildren = ReactNode;
 export type SSectionHeaderCardThickness = false | 'default' | 'accent';
 export type SSectionHeaderCardTitleSize = 'xs' | 'sm';
 export type SSectionHeaderCardBodyPadding = 'default' | 'wide' | 'none';
-export interface SSectionHeaderCardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'slot' | 'title'> {
+export type SSectionHeaderCardBodyBackground = 'frame' | 'neutral';
+export interface SSectionHeaderCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'slot' | 'title'> {
     /** 헤더 제목 */
-    title: ReactNode;
+    title?: ReactNode;
     /** 제목 크기 */
     titleSize?: SSectionHeaderCardTitleSize;
     /** 제목 앞 점 표시 여부 */
@@ -21,21 +22,27 @@ export interface SSectionHeaderCardHeaderProps extends Omit<HTMLAttributes<HTMLD
     slot?: ReactNode;
     /** 상단 border 색상 타입. false면 표시하지 않습니다. */
     thickness?: SSectionHeaderCardThickness;
-}
-export interface SSectionHeaderCardBodyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-    /** 바디 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. */
-    children?: SSectionHeaderCardBodyChildren;
+    /** 헤더 영역 클래스 */
+    headerClassName?: string;
     /**
-     * 안쪽 여백. 기본은 `default`.
+     * 바디 안쪽 여백. 기본은 `default`.
      * 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`.
      */
     padding?: SSectionHeaderCardBodyPadding;
-}
-export interface SSectionHeaderCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-    /** SSectionHeaderCard 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. */
+    /**
+     * 본문 배경. 기본은 `frame` — 카드가 깐 흰 면을 그대로 쓴다.
+     *
+     * `neutral` 은 바탕을 한 단계 눌러앉혀, 흰 면 덩어리(표·리스트)가 여럿일 때 그것들이
+     * **"면 위에 놓인 객체"로 읽히게** 한다. 위계를 한 단계 더 주고 싶을 때 고르는 선택지이며,
+     * **기본값이 틀린 것은 아니다** — 표·리스트는 테두리·라운드·헤더 줄과 간격을 이미 갖고 있어
+     * 흰 바탕에서도 경계가 읽힌다.
+     *
+     * 깔아도 **효과가 없는** 자리가 있다 — 덩어리가 가장자리까지 차는 경우(`padding="none"` 으로
+     * 표를 채우면 바탕이 완전히 가려진다), 덩어리에 회색 면이 섞인 경우(그 덩어리가 바탕에 묻힌다),
+     * 맨 텍스트나 폼 컨트롤만 있는 본문(떠오를 흰 면이 없다).
+     */
+    background?: SSectionHeaderCardBodyBackground;
+    /** 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. */
     children?: SSectionHeaderCardChildren;
 }
-export declare const SSectionHeaderCard: import("react").ForwardRefExoticComponent<SSectionHeaderCardProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Header: import("react").ForwardRefExoticComponent<SSectionHeaderCardHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
-    Body: import("react").ForwardRefExoticComponent<SSectionHeaderCardBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-};
+export declare const SSectionHeaderCard: import("react").ForwardRefExoticComponent<SSectionHeaderCardProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-export { SSectionHeaderCard, type SSectionHeaderCardBodyChildren, type SSectionHeaderCardBodyPadding, type SSectionHeaderCardBodyProps, type SSectionHeaderCardChildren, type SSectionHeaderCardHeaderProps, type SSectionHeaderCardProps, type SSectionHeaderCardThickness, type SSectionHeaderCardTitleSize, } from './SSectionHeaderCard';
+export { SSectionHeaderCard, type SSectionHeaderCardBodyBackground, type SSectionHeaderCardBodyChildren, type SSectionHeaderCardBodyPadding, type SSectionHeaderCardChildren, type SSectionHeaderCardProps, type SSectionHeaderCardThickness, type SSectionHeaderCardTitleSize, } from './SSectionHeaderCard';

package/dist/components/SSelect/README.md

@@ -55,6 +55,7 @@
 
 ### Used by
 
+ - [SChipFilter](../SChipFilter)
  - [SKeyValueTable](../SKeyValueTable)
  - [STable](../STable)
 
@@ -73,6 +74,7 @@ graph TD;
   SSelect --> SGhostButton
   SSelect --> SIcon
   SSelect --> SPortal
+  SChipFilter --> SSelect
   SKeyValueTable --> SSelect
   STable --> SSelect
   style SSelect fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/STable/README.md

@@ -19,6 +19,7 @@
 | `stickyHeader?` | `boolean` | — |  |
 | `stickyColumn?` | `STableStickyColumn` | — | 고정할 좌/우 컬럼 수 |
 | `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
+| `bordered?` | `boolean` | `true` | 바깥 테두리. 기본은 `true`. `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 — 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다. 페이지네이션 바의 테두리와 1px 겹침(`-mt-px`)도 함께 꺼진다. 본문 테두리가 없으면 겹칠 대상이 없어, 그대로 두면 페이지네이션만 테두리를 갖고 1px 어긋난다. |
 | `noDataLabel?` | `string` | `'데이터가 없습니다.'` |  |
 | `noDataSlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
 | `isLoading?` | `boolean` | `false` |  |

package/dist/components/STable/STable.d.ts

@@ -38,6 +38,16 @@ export interface STableColumn {
     icon?: SIconName;
     /** 헤더 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
     iconColor?: SColor;
+    /**
+     * 셀에 무엇이 들어가는지. 좌우 여백이 여기서 갈린다 — 기본은 `text`(넓게).
+     *
+     * 자기 폭을 가진 컨트롤(`SInput`·`SNumberInput`·`SSelect` 등)이 들어가는 열은 `control` 로 준다.
+     * 텍스트와 같은 넓은 여백을 두면 컨트롤이 쓸 폭이 그만큼 줄어 같은 열 폭에서도 좁아 보인다.
+     *
+     * `SKeyValueTable` 은 `field.type` 으로 이 판정을 스스로 하지만, `STable` 의 셀은 소비 앱이 넘긴
+     * 임의의 `render` 결과라 컴포넌트가 알 수 없다. 그래서 열 단위로 받는다.
+     */
+    contentType?: 'text' | 'control';
     /** 셀 커스텀 렌더 (React 확장) — `<td>` 안쪽 내용만 교체한다 */
     render?: (row: SRow, value: any) => ReactNode;
     /**
@@ -109,6 +119,16 @@ export interface STableProps {
     stickyColumn?: STableStickyColumn;
     /** border-radius 제어 */
     radius?: 'default' | 'useTop' | 'full';
+    /**
+     * 바깥 테두리. 기본은 `true`.
+     *
+     * `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 —
+     * 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다.
+     *
+     * 페이지네이션 바의 테두리와 1px 겹침(`-mt-px`)도 함께 꺼진다. 본문 테두리가 없으면 겹칠 대상이
+     * 없어, 그대로 두면 페이지네이션만 테두리를 갖고 1px 어긋난다.
+     */
+    bordered?: boolean;
     noDataLabel?: string;
     /**
      * 데이터가 없을 때 body 영역 전체를 대체하는 슬롯.

package/dist/components/STimePicker/timepicker.config.d.ts

@@ -12,6 +12,11 @@ export declare const TIMEPICKER_SIZE_CONFIG: Record<STimePickerSize, {
     lineHeight: number;
     minWidth: number;
     fieldMinWidth: number;
+    /**
+     * 필드 상한. 값 길이가 HH:mm 으로 정해져 있어, width="100%" 를 받아도 행 전체로
+     * 늘어나지 않게 막는다 (SKeyValueTable 이 모든 컨트롤에 100% 를 넘긴다).
+     */
+    fieldMaxWidth: number;
 }>;
 export declare function clampTimePart(value: number, min: number, max: number): number;
 export declare function padTimePart(value: number): string;