sellmate-design-system-react 8.1.0 → 9.0.0-beta.10

package/dist/components/SField/README.md

@@ -30,6 +30,7 @@
 | `readOnly?` | `boolean` | `false` | 읽기 전용 (회색 배경) |
 | `width?` | `number \| string` | — | 컨트롤 너비 (숫자=px). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다. 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다. |
 | `minWidth?` | `number \| string` | — | 컨트롤 최소 너비 (숫자=px). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 |
+| `maxWidth?` | `number \| string` | — | 컨트롤 최대 너비 (숫자=px). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다. `width` 와 달리 hug 로 전환하지 않는다 — 부모가 좁으면 같이 좁아지고, 넓어도 여기서 멈춘다. 값 길이가 정해진 컨트롤(날짜·시간)이 `width="100%"` 를 받아 행 전체로 늘어나는 것을 막는 데 쓴다. **라벨은 상한에 들어가지 않는다** — 라벨은 컨트롤의 형제라 이 상한 밖이다. `addonLabel` 은 테두리 박스 안이라 상한을 나눠 먹으므로, `labelWidth`(= addon 폭)만큼 상한을 자동으로 늘린다. addon 이 있는데 `labelWidth` 가 없으면 폭을 알 수 없어 상한을 걸지 않는다 — 컨트롤이 잘리는 것보다 넓은 편이 낫다. |
 | `multiline?` | `boolean` | `false` | 멀티라인(textarea) — 컨트롤 높이를 고정하지 않고 min-height만 적용 |
 | `borderless?` | `boolean` | `false` | 테두리 박스 제거 (inline 컨트롤용) — border/배경/hover·focus 강조만 사라지고 label·hint·errorMessage 등 나머지 필드 구성은 그대로 동작한다. |
 | `children?` | `ReactNode` | — | 실제 컨트롤 (input/select 등) — 테두리 없이 렌더, 테두리는 SField가 제공 |
@@ -60,6 +61,7 @@
  - [SFilePicker](../SFilePicker)
  - [SInput](../SInput)
  - [SNumberInput](../SNumberInput)
+ - [SSearchInput](../SSearchInput)
  - [SSelect](../SSelect)
  - [STextarea](../STextarea)
  - [STimePicker](../STimePicker)
@@ -83,6 +85,7 @@ graph TD;
   SFilePicker --> SField
   SInput --> SField
   SNumberInput --> SField
+  SSearchInput --> SField
   SSelect --> SField
   STextarea --> SField
   STimePicker --> SField

package/dist/components/SField/SField.d.ts

@@ -63,6 +63,18 @@ export interface SFieldProps {
     width?: number | string;
     /** 컨트롤 최소 너비 (숫자=px). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 */
     minWidth?: number | string;
+    /**
+     * 컨트롤 최대 너비 (숫자=px). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다.
+     *
+     * `width` 와 달리 hug 로 전환하지 않는다 — 부모가 좁으면 같이 좁아지고, 넓어도 여기서 멈춘다.
+     * 값 길이가 정해진 컨트롤(날짜·시간)이 `width="100%"` 를 받아 행 전체로 늘어나는 것을 막는 데 쓴다.
+     *
+     * **라벨은 상한에 들어가지 않는다** — 라벨은 컨트롤의 형제라 이 상한 밖이다.
+     * `addonLabel` 은 테두리 박스 안이라 상한을 나눠 먹으므로, `labelWidth`(= addon 폭)만큼
+     * 상한을 자동으로 늘린다. addon 이 있는데 `labelWidth` 가 없으면 폭을 알 수 없어 상한을
+     * 걸지 않는다 — 컨트롤이 잘리는 것보다 넓은 편이 낫다.
+     */
+    maxWidth?: number | string;
     /** 멀티라인(textarea) — 컨트롤 높이를 고정하지 않고 min-height만 적용 */
     multiline?: boolean;
     /**

package/dist/components/SGhostButton/README.md

@@ -34,6 +34,7 @@
  - [SBarcodeInput](../SBarcodeInput)
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
+ - [SChipFilter](../SChipFilter)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
@@ -41,7 +42,9 @@
  - [SInput](../SInput)
  - [SModalContainer](../SModalContainer)
  - [SOverlayHeader](../SOverlayHeader)
+ - [SPage](../SPage)
  - [SPopover](../SPopover)
+ - [SSearchInput](../SSearchInput)
  - [SSelect](../SSelect)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
@@ -63,6 +66,7 @@ graph TD;
   SBarcodeInput --> SGhostButton
   SCalendar --> SGhostButton
   SChip --> SGhostButton
+  SChipFilter --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton
   SGnb --> SGhostButton
@@ -70,7 +74,9 @@ graph TD;
   SInput --> SGhostButton
   SModalContainer --> SGhostButton
   SOverlayHeader --> SGhostButton
+  SPage --> SGhostButton
   SPopover --> SGhostButton
+  SSearchInput --> SGhostButton
   SSelect --> SGhostButton
   STimePicker --> SGhostButton
   STimeRangePicker --> SGhostButton

package/dist/components/SGnb/gnb.config.d.ts

@@ -48,6 +48,8 @@ export declare const GNB_MENU: Record<SGnbType, {
     depth1FontWeight: number;
     itemFontSize: number;
     itemLineHeight: number;
+    itemFontWeight: number;
+    itemFontWeightSelected: number;
 }>;
 /**
  * 색상(color 축). light → --cmp-gnb-light-* 색, dark → --cmp-gnb-dark-* 색

package/dist/components/SGuide/README.md

@@ -13,7 +13,7 @@
 | `message?` | `SGuideMessage` | `''` | 팝업 메시지 (배열이면 리스트, 중첩 배열이면 depth 표현) |
 | `url?` | `string` | `''` | notion 타입 클릭 시 이동 URL |
 | `popupTitle?` | `string` | `''` | 팝업 제목 (없으면 type 기본값) |
-| `popupWidth?` | `number` | — | 팝업 너비 (px, 기본 426) |
+| `popupWidth?` | `number` | — | 팝업 너비 (px, 기본 426). 창보다 넓게 줘도 창 폭까지만 벌어진다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SGuide/SGuide.d.ts

@@ -13,7 +13,7 @@ export interface SGuideProps {
     url?: string;
     /** 팝업 제목 (없으면 type 기본값) */
     popupTitle?: string;
-    /** 팝업 너비 (px, 기본 426) */
+    /** 팝업 너비 (px, 기본 426). 창보다 넓게 줘도 창 폭까지만 벌어진다. */
     popupWidth?: number;
     className?: string;
     style?: CSSProperties;

package/dist/components/SIcon/README.md

@@ -23,6 +23,7 @@
  - [SButton](../SButton)
  - [SCallout](../SCallout)
  - [SCheckbox](../SCheckbox)
+ - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
  - [SConfirmModal](../SConfirmModal)
  - [SDatePicker](../SDatePicker)
@@ -35,12 +36,14 @@
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
+ - [SImage](../SImage)
  - [SKeyValueTable](../SKeyValueTable)
  - [SListItem](../SListItem)
  - [SLoadingModal](../SLoadingModal)
  - [SNumberInput](../SNumberInput)
  - [SPagination](../SPagination)
  - [SPopover](../SPopover)
+ - [SSearchInput](../SSearchInput)
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SSelect](../SSelect)
  - [SStepper](../SStepper)
@@ -59,6 +62,7 @@ graph TD;
   SButton --> SIcon
   SCallout --> SIcon
   SCheckbox --> SIcon
+  SChipFilter --> SIcon
   SChipInput --> SIcon
   SConfirmModal --> SIcon
   SDatePicker --> SIcon
@@ -71,12 +75,14 @@ graph TD;
   SGhostButton --> SIcon
   SGnb --> SIcon
   SGuide --> SIcon
+  SImage --> SIcon
   SKeyValueTable --> SIcon
   SListItem --> SIcon
   SLoadingModal --> SIcon
   SNumberInput --> SIcon
   SPagination --> SIcon
   SPopover --> SIcon
+  SSearchInput --> SIcon
   SSectionHeaderCard --> SIcon
   SSelect --> SIcon
   SStepper --> SIcon

package/dist/components/SIcon/icons.gen.d.ts

@@ -83,6 +83,7 @@ export declare const ICONS: {
     readonly settingOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly shield: (p: IconRenderProps) => import("react").JSX.Element;
     readonly sidebar: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly star: (p: IconRenderProps) => import("react").JSX.Element;
     readonly store: (p: IconRenderProps) => import("react").JSX.Element;
     readonly synchronize: (p: IconRenderProps) => import("react").JSX.Element;
     readonly thumbsDown: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SImage/README.md

@@ -0,0 +1,44 @@
+# SImage
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SImage
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src?` | `string` | — | 이미지 경로. 없으면 빈 이미지 아이콘이 나온다 |
+| `alt?` | `string` | `''` | 대체 텍스트 |
+| `ratio?` | `number` | `1` | 가로세로 비율. 소비자가 높이를 직접 주면 그쪽이 이긴다 |
+| `fit?` | `SImageFit` | `'cover'` | 이미지가 상자를 채우는 방식 (object-fit) |
+| `position?` | `string` | `'50% 50%'` | 이미지 정렬 위치 (object-position) |
+| `loading?` | `'lazy' \| 'eager'` | `'lazy'` | 브라우저 로딩 방식 |
+| `loadingShowDelay?` | `number` | `0` | 스피너를 띄우기까지 기다리는 시간(ms). 이 시간 안에 로드되면 스피너를 아예 그리지 않는다 — 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다. |
+| `noSpinner?` | `boolean` | `false` | 로딩 중에도 스피너를 그리지 않는다 |
+| `loadingSlot?` | `ReactNode` | — | 로딩 중 표시를 직접 지정한다 (기본: 스피너) |
+| `errorSlot?` | `ReactNode` | — | 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) |
+| `imgProps?` | `ImgHTMLAttributes<HTMLImageElement>` | — | 안쪽 `<img>` 로 넘길 네이티브 속성 (srcSet · sizes · crossOrigin · draggable 등) |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onLoad` | `(src: string) => void` | 로드 완료. 로드된 src 를 넘긴다 |
+| `onError` | `(event: SyntheticEvent<HTMLImageElement>) => void` | 로드 실패 |
+
+## Dependencies
+
+### Depends on
+
+- [SCircleProgress](../SCircleProgress)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SImage --> SCircleProgress
+  SImage --> SIcon
+  style SImage fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SImage/SImage.d.ts

@@ -0,0 +1,41 @@
+import { type HTMLAttributes, type ImgHTMLAttributes, type ReactNode, type SyntheticEvent } from 'react';
+export declare const IMAGE_FITS: readonly ["cover", "contain", "fill", "none", "scale-down"];
+export type SImageFit = (typeof IMAGE_FITS)[number];
+export interface SImageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad' | 'onError'> {
+    /** 이미지 경로. 없으면 빈 이미지 아이콘이 나온다 */
+    src?: string;
+    /** 대체 텍스트 */
+    alt?: string;
+    /** 가로세로 비율. 소비자가 높이를 직접 주면 그쪽이 이긴다 */
+    ratio?: number;
+    /** 이미지가 상자를 채우는 방식 (object-fit) */
+    fit?: SImageFit;
+    /** 이미지 정렬 위치 (object-position) */
+    position?: string;
+    /** 브라우저 로딩 방식 */
+    loading?: 'lazy' | 'eager';
+    /**
+     * 스피너를 띄우기까지 기다리는 시간(ms). 이 시간 안에 로드되면 스피너를 아예 그리지 않는다 —
+     * 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다.
+     */
+    loadingShowDelay?: number;
+    /** 로딩 중에도 스피너를 그리지 않는다 */
+    noSpinner?: boolean;
+    /** 로딩 중 표시를 직접 지정한다 (기본: 스피너) */
+    loadingSlot?: ReactNode;
+    /** 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) */
+    errorSlot?: ReactNode;
+    /** 안쪽 `<img>` 로 넘길 네이티브 속성 (srcSet · sizes · crossOrigin · draggable 등) */
+    imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+    /** 로드 완료. 로드된 src 를 넘긴다 */
+    onLoad?: (src: string) => void;
+    /** 로드 실패 */
+    onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
+}
+/**
+ * SImage — 이미지 로딩·실패 상태를 스스로 표현하는 이미지 상자.
+ *
+ * 로딩 중에는 스피너, `src` 가 없거나 로드에 실패하면 빈 이미지 아이콘을 컨테이너 높이에
+ * 비례한 크기로 가운데에 그린다.
+ */
+export declare const SImage: import("react").ForwardRefExoticComponent<SImageProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { SImage, IMAGE_FITS, type SImageProps, type SImageFit } from './SImage';

package/dist/components/SKeyValueTable/README.md

@@ -12,6 +12,7 @@
 | `values?` | `Record<string, unknown>` | `{}` | field name을 key로 하는 값 객체 (`{ [name]: value }`). 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다. `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다. |
 | `search?` | `boolean` | `false` | 우측 검색 패널 |
 | `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
+| `bordered?` | `boolean` | `true` | 바깥 테두리. 기본은 `true`. `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 — 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SKeyValueTable/SKeyValueTable.d.ts

@@ -104,6 +104,13 @@ export interface SKeyValueTableProps {
     search?: boolean;
     /** border-radius 제어 */
     radius?: 'default' | 'useTop' | 'full';
+    /**
+     * 바깥 테두리. 기본은 `true`.
+     *
+     * `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 —
+     * 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다.
+     */
+    bordered?: boolean;
     /** 값 변경 (sdChange) */
     onChange?: (detail: SKeyValueChangeDetail) => void;
     /** 검색 클릭 (sdSearch) */
@@ -112,5 +119,5 @@ export interface SKeyValueTableProps {
     style?: CSSProperties;
 }
 /** SKeyValueTable — sd-key-value-table 포팅. th/td 폼 레이아웃 + 필드 렌더러. */
-export declare function SKeyValueTable({ fields, values, search, radius, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
+export declare function SKeyValueTable({ fields, values, search, radius, bordered, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
 export {};

package/dist/components/SListItem/README.md

@@ -15,8 +15,8 @@
 | `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` | 조밀한 높이 사용 여부 |

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

@@ -23,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;

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,22 @@
 |------|------|---------|-------------|
 | `background?` | `SPageBackground` | `'frame'` | 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕. 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다. |
 | `scrollEndSpacing?` | `boolean` | `true` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지). |
+| `overlayScrollbar?` | `boolean` | `false` | true면 네이티브 스크롤바를 숨기고 SPage 위에 오버레이 스크롤바를 얹는다. 스크롤바가 레이아웃 폭을 차지하지 않아 내부 콘텐츠 폭이 줄어들지 않는다. |
+| `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
 
 ### 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 { SPageBackground, SPageContentHeight } from './page.config';
+import { type SPageHeaderProps } from './SPageHeader';
 export interface SPageProps extends HTMLAttributes<HTMLElement> {
     /**
      * 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕.
@@ -11,6 +12,27 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
      * 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지).
      */
     scrollEndSpacing?: boolean;
+    /**
+     * true면 네이티브 스크롤바를 숨기고 SPage 위에 오버레이 스크롤바를 얹는다.
+     * 스크롤바가 레이아웃 폭을 차지하지 않아 내부 콘텐츠 폭이 줄어들지 않는다.
+     */
+    overlayScrollbar?: 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 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다.
+     */
+    header?: SPageHeaderProps;
 }
 /**
  * SPage — SLayout 안에서 남은 공간을 채우는 스크롤 콘텐츠 영역.
@@ -21,5 +43,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 { 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/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/SSearchInput/README.md

@@ -0,0 +1,48 @@
+# SSearchInput
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSearchInput
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| number` | — | 값 (제어) |
+| `size?` | `SSearchInputSize` | `'sm'` | 크기 |
+| `placeholder?` | `string` | `'결과 내 검색'` | 플레이스홀더 |
+| `clearable?` | `boolean` | `false` | 지우기 버튼 — 값이 있을 때만 나타난다 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `width?` | `number \| string` | — | 컨트롤 너비 (숫자=px). 미지정 시 부모 폭을 채운다 |
+| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
+| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
+| `inputClass?` | `string` | — | 내부 input 요소 className |
+| `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` | 값 변경 — 문자열 전달 |
+| `onChange` | `InputHTMLAttributes<HTMLInputElement>['onChange']` | 네이티브 onChange (form-agnostic 연동용, RHF 등) |
+| `onSearch` | `(value: string) => void` | 검색 실행 — Enter 키에서 현재 값과 함께 호출된다. 한글 조합 중의 Enter(IME 확정)는 검색으로 치지 않는다. |
+
+## Dependencies
+
+### Depends on
+
+- [SField](../SField)
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SSearchInput --> SField
+  SSearchInput --> SGhostButton
+  SSearchInput --> SIcon
+  style SSearchInput fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SSearchInput/SSearchInput.d.ts

@@ -0,0 +1,46 @@
+import { type CSSProperties, type InputHTMLAttributes } from 'react';
+import { type SFieldSize } from '../SField';
+export type SSearchInputSize = SFieldSize;
+export interface SSearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'type' | 'prefix' | 'suffix'> {
+    /** 값 (제어) */
+    value?: string | number;
+    /** 값 변경 — 문자열 전달 */
+    onValueChange?: (value: string) => void;
+    /** 네이티브 onChange (form-agnostic 연동용, RHF 등) */
+    onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
+    /**
+     * 검색 실행 — Enter 키에서 현재 값과 함께 호출된다.
+     * 한글 조합 중의 Enter(IME 확정)는 검색으로 치지 않는다.
+     */
+    onSearch?: (value: string) => void;
+    /** 크기 */
+    size?: SSearchInputSize;
+    /** 플레이스홀더 */
+    placeholder?: string;
+    /** 지우기 버튼 — 값이 있을 때만 나타난다 */
+    clearable?: boolean;
+    /** 비활성 */
+    disabled?: boolean;
+    /** 컨트롤 너비 (숫자=px). 미지정 시 부모 폭을 채운다 */
+    width?: number | string;
+    /** 포커스 상태 (제어/반영) */
+    focused?: boolean;
+    /** 호버 상태 (제어/반영) */
+    hovered?: boolean;
+    /** 내부 input 요소 className */
+    inputClass?: string;
+    /** 내부 input 요소 style */
+    inputStyle?: CSSProperties;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SSearchInput — 목록·결과를 검색어로 좁히는 한 줄 입력.
+ *
+ * 테두리 박스(border/radius/배경 + hover·focus 강조)는 `SField` 가 소유하고,
+ * 이 컴포넌트는 그 안의 돋보기 아이콘 + input 만 그린다.
+ * 좌측 아이콘은 **장식**이라 클릭 대상이 아니다 — 검색 실행은 Enter(`onSearch`) 다.
+ *
+ * 라벨·검증·에러 메시지가 필요한 폼 필드라면 `SInput` 을 쓴다.
+ */
+export declare const SSearchInput: import("react").ForwardRefExoticComponent<SSearchInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1 @@
+export { SSearchInput, type SSearchInputProps, type SSearchInputSize } from './SSearchInput';