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

package/dist/components/SCircleProgress/SCircleProgress.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-export type SCircleProgressType = 'primary' | 'inverse' | 'error' | 'complete';
+export type SCircleProgressType = 'primary' | 'inverse' | 'error' | 'complete' | 'neutral';
 export interface SCircleProgressProps {
     /** 진행률 (0–100) */
     value?: number;
@@ -7,6 +7,12 @@ export interface SCircleProgressProps {
     type?: SCircleProgressType;
     /** 불확정(스피너) 모드 — value 무시 */
     indeterminate?: boolean;
+    /**
+     * 링의 지름. 숫자는 px 로 해석한다.
+     * 부모 크기에 비례시키려면 컨테이너 쿼리 단위(`'45cqh'`)를 쓴다 — 퍼센트는 부모가
+     * inline-flex 라 기준 폭이 정해지지 않아 해석되지 않는다.
+     */
+    size?: number | string;
     /** 하단 레이블 */
     label?: string;
     /** true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 */

package/dist/components/SDatePicker/README.md

@@ -2,15 +2,35 @@
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
 
+### SDatePickerMonthListbox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| null` | — | 선택 월 (YYYY-MM) |
+| `anchorYear?` | `number` | — | 연도 리스트가 처음 열릴 때 중앙에 둘 연도. 기본값은 올해 |
+| `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` |  |
+| `onMonthSelect` | `(value: string) => void` | 월 컬럼에서 월을 선택했을 때 호출 |
+
 ### SDatePicker
 
 #### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value?` | `string \| null` | — | 선택 날짜 (YYYY-MM-DD) |
+| `value?` | `string \| null` | — | 선택 값 (date: YYYY-MM-DD, month: YYYY-MM, year: YYYY) |
+| `mode?` | `SDatePickerMode` | `'date'` | 선택 모드 |
 | `size?` | `SDatePickerSize` | `'sm'` |  |
-| `placeholder?` | `string` | `'YYYY-MM-DD'` |  |
+| `placeholder?` | `string` | — |  |
 | `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
 | `disabled?` | `boolean` | `false` |  |
 | `width?` | `number \| string` | — |  |
@@ -35,9 +55,27 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(date: string) => void` | 선택 변경 (sdUpdate) |
+| `onValueChange` | `(value: string) => void` | 선택 변경 (sdUpdate) |
 | `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
+### SDatePickerYearListbox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| null` | — | 선택 연도 (YYYY) |
+| `anchorYear?` | `number` | — | 리스트가 처음 열릴 때 중앙에 둘 연도. 기본값은 올해 |
+| `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(year: string) => void` |  |
+
 ## Dependencies
 
 ### Used by

package/dist/components/SDatePicker/SDatePicker.d.ts

@@ -5,16 +5,19 @@ import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
 export type SDatePickerSize = SFieldSize;
+export type SDatePickerMode = 'date' | 'month' | 'year';
 export interface SDatePickerProps {
-    /** 선택 날짜 (YYYY-MM-DD) */
+    /** 선택 값 (date: YYYY-MM-DD, month: YYYY-MM, year: YYYY) */
     value?: string | null;
     /** 선택 변경 (sdUpdate) */
-    onValueChange?: (date: string) => void;
+    onValueChange?: (value: string) => void;
     /** 보이는 연·월 변경 (sdViewChange) */
     onViewChange?: (view: {
         year: number;
         month: number;
     }) => void;
+    /** 선택 모드 */
+    mode?: SDatePickerMode;
     size?: SDatePickerSize;
     placeholder?: string;
     /** 선택 가능 범위 [시작, 종료] */
@@ -38,5 +41,35 @@ export interface SDatePickerProps {
     className?: string;
     style?: CSSProperties;
 }
+export interface SDatePickerYearListboxProps {
+    /** 선택 연도 (YYYY) */
+    value?: string | null;
+    /** 리스트가 처음 열릴 때 중앙에 둘 연도. 기본값은 올해 */
+    anchorYear?: number;
+    /** 선택 가능 범위 [시작, 종료] */
+    selectable?: [string, string];
+    onValueChange?: (year: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/** SDatePickerYearListbox — SDatePicker의 연도 선택 listbox 조각.
+ * 자체 트리거/팝오버 없이 연도 리스트만 필요한 커스텀 조합에 재사용한다. */
+export declare function SDatePickerYearListbox({ value, anchorYear, selectable, onValueChange, className, style, }: SDatePickerYearListboxProps): import("react").JSX.Element;
+export interface SDatePickerMonthListboxProps {
+    /** 선택 월 (YYYY-MM) */
+    value?: string | null;
+    /** 연도 리스트가 처음 열릴 때 중앙에 둘 연도. 기본값은 올해 */
+    anchorYear?: number;
+    /** 선택 가능 범위 [시작, 종료] */
+    selectable?: [string, string];
+    onValueChange?: (value: string) => void;
+    /** 월 컬럼에서 월을 선택했을 때 호출 */
+    onMonthSelect?: (value: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/** SDatePickerMonthListbox — SDatePicker의 월 선택 listbox 조각.
+ * 자체 트리거/팝오버 없이 연도+월 리스트만 필요한 커스텀 조합에 재사용한다. */
+export declare function SDatePickerMonthListbox({ value, anchorYear, selectable, onValueChange, onMonthSelect, className, style, }: SDatePickerMonthListboxProps): import("react").JSX.Element;
 /** SDatePicker — sd-date-picker 포팅. SField + SPopover(SCalendar). */
-export declare function SDatePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;
+export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;

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

@@ -1 +1 @@
-export { SDatePicker, type SDatePickerProps, type SDatePickerSize } from './SDatePicker';
+export { SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, type SDatePickerMode, type SDatePickerMonthListboxProps, type SDatePickerProps, type SDatePickerSize, type SDatePickerYearListboxProps, } from './SDatePicker';

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

@@ -44,6 +44,7 @@
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
  - [SPopover](../SPopover)
+ - [SSearchInput](../SSearchInput)
  - [SSelect](../SSelect)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
@@ -75,6 +76,7 @@ graph TD;
   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/SIcon/README.md

@@ -36,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)
@@ -73,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/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/SList/README.md

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

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

@@ -6,7 +6,5 @@ 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/SPage/README.md

@@ -28,6 +28,8 @@
 |------|------|---------|-------------|
 | `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

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,22 @@ 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 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다.

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/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';

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