sellmate-design-system-react 9.0.0-beta.8 → 9.0.0-beta.80

package/dist/components/SPopup/SPopup.d.ts

@@ -1,27 +1,30 @@
 import { type ReactNode, type CSSProperties } from 'react';
-import { type SButtonColor, type SButtonSize } from '../SButton';
+import { type SFooterButton } from '../SFooter';
 export type SPopupType = 'default' | 'light';
-export interface SPopupSubmitButton {
-    label?: string;
-    color?: SButtonColor;
-    outline?: boolean;
-    size?: SButtonSize;
-}
+export type SPopupBodyPadding = 'default' | 'none';
+/**
+ * 확인 버튼 설정 — `SButton` 의 prop 을 그대로 받되 `onClick` 만 뺀다.
+ * 클릭은 `onSubmit` 이 전담하므로, 여기로도 받으면 조용히 덮어써지는 prop 이 생긴다.
+ */
+export type SPopupSubmitButton = Omit<SFooterButton, 'onClick'>;
 export interface SPopupProps {
     /** 헤더 제목 */
     popupTitle?: string;
     /** 타입 (헤더 색상) */
     type?: SPopupType;
     /** 하단 footer 표시 여부 */
-    useFooter?: boolean;
+    showFooter?: boolean;
     /** 확인 버튼 설정 */
     submitButton?: SPopupSubmitButton;
     /** 확인 버튼 클릭 (sdSubmit) */
     onSubmit?: () => void;
     /** footer 좌측 영역 */
     footerLeft?: ReactNode;
-    /** 본문 기본 패딩을 없앱니다. 표를 가장자리까지 채우는 등 본문이 직접 여백을 다룰 때만 사용합니다. */
-    noPadding?: boolean;
+    /**
+     * 본문 안쪽 여백. 기본은 `default` — 표를 가장자리까지 채우는 등 본문이 여백을 직접
+     * 다룰 때만 `none`. (`SList` 의 `padding` 과 같은 이름이지만 기본값이 반대다 — 각 면의 성격이 다르다)
+     */
+    padding?: SPopupBodyPadding;
     /** 본문 */
     children?: ReactNode;
     className?: string;

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

@@ -1 +1 @@
-export { SPopup, type SPopupProps, type SPopupType, type SPopupSubmitButton } from './SPopup';
+export { SPopup, type SPopupBodyPadding, type SPopupProps, type SPopupType, type SPopupSubmitButton, } from './SPopup';

package/dist/components/SPortal/README.md

@@ -34,18 +34,38 @@
 | `onCloseAutoFocus` | `(event: Event) => void` | 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. |
 | `onPointerDownOutside` | `(event: Event) => void` | 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). |
 
+## Types
+
+### SPortalPlacement
+
+```ts
+export type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';
+```
+
+### SPortalAlign
+
+```ts
+export type SPortalAlign = 'start' | 'center' | 'end';
+```
+
 ## Dependencies
 
 ### Used by
 
+ - [SAccountListBox](../SAccountListBox)
  - [SChipInput](../SChipInput)
+ - [SGnb](../SGnb)
+ - [SGnbSystem](../SGnbSystem)
  - [SSelect](../SSelect)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  SAccountListBox --> SPortal
   SChipInput --> SPortal
+  SGnb --> SPortal
+  SGnbSystem --> SPortal
   SSelect --> SPortal
   style SPortal fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SRadio/README.md

@@ -42,6 +42,26 @@
 |-------|------|-------------|
 | `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) — 선택된 val 전달 |
 
+## Types
+
+### SRadioOption
+
+```ts
+export interface SRadioOption {
+  /** 옵션 값 (sd-radio-group SRadioOption.value) */
+  value: SRadioValue;
+  label: string;
+  disabled?: boolean;
+}
+```
+
+### SRadioValue
+
+```ts
+/** 라디오 값 타입 (sd-radio SRadioValue) */
+export type SRadioValue = string | number | boolean;
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SRadioButton/README.md

@@ -13,6 +13,7 @@
 | `size?` | `SRadioButtonSize` | `'sm'` | 크기 |
 | `disabled?` | `boolean` | `false` | 전체 비활성 |
 | `name?` | `string` | — | input name 속성 |
+| `showTooltip?` | `boolean` | `false` | 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다. 툴팁 타입은 `accent` 고정이다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -22,16 +23,41 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string \| number) => void` | 변경 (sdUpdate) |
 
+## Types
+
+### SRadioButtonOption
+
+```ts
+export interface SRadioButtonOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  /** 호버 시 툴팁 문구. `showTooltip` 이 켜져 있을 때만 노출된다 */
+  tooltip?: string;
+}
+```
+
+### SRadioButtonSize
+
+```ts
+export type SRadioButtonSize = 'xs' | 'sm' | 'md';
+```
+
 ## Dependencies
 
 ### Used by
 
  - [SChipFilter](../SChipFilter)
 
+### Depends on
+
+- [STooltip](../STooltip)
+
 ### Graph
 
 ```mermaid
 graph TD;
+  SRadioButton --> STooltip
   SChipFilter --> SRadioButton
   style SRadioButton fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SRadioButton/SRadioButton.d.ts

@@ -1,9 +1,11 @@
 import { type CSSProperties } from 'react';
-export type SRadioButtonSize = 'xs' | 'sm';
+export type SRadioButtonSize = 'xs' | 'sm' | 'md';
 export interface SRadioButtonOption {
     value: string | number;
     label: string;
     disabled?: boolean;
+    /** 호버 시 툴팁 문구. `showTooltip` 이 켜져 있을 때만 노출된다 */
+    tooltip?: string;
 }
 export interface SRadioButtonProps {
     /** 옵션 목록 */
@@ -16,6 +18,11 @@ export interface SRadioButtonProps {
     disabled?: boolean;
     /** input name 속성 */
     name?: string;
+    /**
+     * 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다.
+     * 툴팁 타입은 `accent` 고정이다.
+     */
+    showTooltip?: boolean;
     /** 변경 (sdUpdate) */
     onValueChange?: (value: string | number) => void;
     className?: string;
@@ -25,4 +32,4 @@ export interface SRadioButtonProps {
  * SRadioButton — sd-radio-button 포팅. 세그먼트형 라디오(버튼 그룹).
  * default(흰 배경/회색, hover 파란 채움) · select(흰 배경/파란 테두리·글자) · disabled.
  */
-export declare function SRadioButton({ options, value, size, disabled, name, onValueChange, className, style, }: SRadioButtonProps): import("react").JSX.Element;
+export declare function SRadioButton({ options, value, size, disabled, name, showTooltip, onValueChange, className, style, }: SRadioButtonProps): import("react").JSX.Element;

package/dist/components/SRadioCard/README.md

@@ -0,0 +1,78 @@
+# SRadioCard
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SRadioCardGroup
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options?` | `SRadioCardOption[]` | `[]` | 옵션 목록 |
+| `value?` | `SRadioValue \| null` | — | 현재 선택 값 |
+| `direction?` | `'vertical' \| 'horizontal'` | `'vertical'` | 배치 방향 |
+| `disabled?` | `boolean` | `false` | 전체 비활성 |
+| `groupName?` | `string` | — | 라디오 name 속성 (form-agnostic 그룹핑) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) |
+
+### SRadioCard
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `val` | `SRadioValue` | — | 이 카드의 값 |
+| `value?` | `SRadioValue \| null` | — | 그룹의 현재 선택 값 |
+| `label` | `string` | — | 라벨 (첫 줄) |
+| `subtitle?` | `string` | — | 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 |
+| `tag?` | `Omit<STagProps, 'size'>` | — | 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `name?` | `string` | — | native radio name (form-agnostic 그룹핑) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) — 선택된 val 전달 |
+
+## Types
+
+### SRadioCardOption
+
+```ts
+export interface SRadioCardOption {
+  /** 옵션 값 */
+  value: SRadioValue;
+  /** 라벨 (첫 줄) */
+  label: string;
+  /** 서브타이틀 (둘째 줄) */
+  subtitle?: string;
+  /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
+  tag?: Omit<STagProps, 'size'>;
+  /** 이 옵션만 비활성 */
+  disabled?: boolean;
+}
+```
+
+## Dependencies
+
+### Depends on
+
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SRadioCard --> STag
+  style SRadioCard fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SRadioCard/SRadioCard.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties } from 'react';
+import { type SRadioValue } from '../SRadio';
+import { type STagProps } from '../STag';
+export interface SRadioCardProps {
+    /** 이 카드의 값 */
+    val: SRadioValue;
+    /** 그룹의 현재 선택 값 */
+    value?: SRadioValue | null;
+    /** 라벨 (첫 줄) */
+    label: string;
+    /** 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 */
+    subtitle?: string;
+    /** 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 */
+    tag?: Omit<STagProps, 'size'>;
+    /** 비활성 */
+    disabled?: boolean;
+    /** native radio name (form-agnostic 그룹핑) */
+    name?: string;
+    /** 선택 변경 (sdUpdate) — 선택된 val 전달 */
+    onValueChange?: (val: SRadioValue) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SRadioCard — 라디오 + 라벨 + 서브타이틀을 카드 한 장에 담은 선택지.
+ * 카드 전체가 클릭 영역이며 `value === val` 이면 선택 상태다.
+ * 선택지마다 설명이 붙어 한 줄짜리 `SRadio` 로는 담기 어려울 때 쓴다.
+ */
+export declare function SRadioCard({ val, value, label, subtitle, tag, disabled, name, onValueChange, className, style, }: SRadioCardProps): import("react").JSX.Element;

package/dist/components/SRadioCard/SRadioCardGroup.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties } from 'react';
+import { type SRadioValue } from '../SRadio';
+import { type STagProps } from '../STag';
+export interface SRadioCardOption {
+    /** 옵션 값 */
+    value: SRadioValue;
+    /** 라벨 (첫 줄) */
+    label: string;
+    /** 서브타이틀 (둘째 줄) */
+    subtitle?: string;
+    /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
+    tag?: Omit<STagProps, 'size'>;
+    /** 이 옵션만 비활성 */
+    disabled?: boolean;
+}
+export interface SRadioCardGroupProps {
+    /** 옵션 목록 */
+    options?: SRadioCardOption[];
+    /** 현재 선택 값 */
+    value?: SRadioValue | null;
+    /** 배치 방향 */
+    direction?: 'vertical' | 'horizontal';
+    /** 전체 비활성 */
+    disabled?: boolean;
+    /** 라디오 name 속성 (form-agnostic 그룹핑) */
+    groupName?: string;
+    /** 선택 변경 (sdUpdate) */
+    onValueChange?: (val: SRadioValue) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SRadioCardGroup — `options` 를 SRadioCard 로 렌더하고 카드 사이 간격을 맞춘다.
+ * 카드는 컨테이너 폭을 채우므로 horizontal 이면 카드들이 폭을 균등하게 나눠 갖는다.
+ */
+export declare function SRadioCardGroup({ options, value, direction, disabled, groupName, onValueChange, className, style, }: SRadioCardGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { SRadioCard, type SRadioCardProps } from './SRadioCard';
+export { SRadioCardGroup, type SRadioCardGroupProps, type SRadioCardOption, } from './SRadioCardGroup';

package/dist/components/SScrollArea/README.md

@@ -13,4 +13,32 @@
 | `bordered?` | `boolean` | `false` | true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. |
 | `maxHeight?` | `string` | — | viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. |
 | `maxWidth?` | `string` | — | viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. |
+| `overlayScrollbar?` | `boolean` | `false` | true면 네이티브 스크롤바를 숨기고 영역 위에 오버레이 스크롤바를 얹는다. 스크롤바가 레이아웃 폭을 차지하지 않아 스크롤이 생겨도 안쪽 콘텐츠 폭이 줄지 않는다. **막대는 스크롤하는 동안에만 보인다.** 멎으면 페이드로 사라진다 — 자리를 차지하지 않는 막대는 늘 떠 있을 이유도 없다. 끌고 있는 동안에는 사라지지 않는다. (`SPage` 의 같은 이름 prop 은 막대를 항상 보인다. 페이지는 스크롤이 늘 있는 자리라 "여기는 스크롤된다"는 신호를 남겨 둔 쪽이다.) **켜면 구조가 한 겹 늘어난다.** `className`·`style`·`maxHeight`·`maxWidth` 가 바깥 상자로 가고 스크롤 요소가 그 안을 채운다 — 막대를 얹을 기준 상자가 필요해서다. 크기·자리를 잡는 클래스(`h-*`·`flex-1`·`min-h-0`)는 그대로 듣지만, 패딩은 스크롤 요소가 아니라 바깥 상자에 걸리므로 콘텐츠가 그 여백 아래로 흘러 들어가지 않는다. `background`·`bordered` 는 네이티브 트랙을 꾸미는 값이라 이때 무시된다. |
 
+## Types
+
+### SScrollAreaAxis
+
+```ts
+export type SScrollAreaAxis = (typeof SCROLL_AREA_AXES)[number];
+```
+
+### SCROLL_AREA_AXES
+
+```ts
+export const SCROLL_AREA_AXES = ['vertical', 'horizontal', 'both'] as const;
+```
+
+## Dependencies
+
+### Used by
+
+ - [SCalendarBoard](../SCalendarBoard)
+
+### Graph
+
+```mermaid
+graph TD;
+  SCalendarBoard --> SScrollArea
+  style SScrollArea fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SScrollArea/SScrollArea.d.ts

@@ -11,6 +11,23 @@ export interface SScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     maxHeight?: string;
     /** viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. */
     maxWidth?: string;
+    /**
+     * true면 네이티브 스크롤바를 숨기고 영역 위에 오버레이 스크롤바를 얹는다.
+     * 스크롤바가 레이아웃 폭을 차지하지 않아 스크롤이 생겨도 안쪽 콘텐츠 폭이 줄지 않는다.
+     *
+     * **막대는 스크롤하는 동안에만 보인다.** 멎으면 페이드로 사라진다 — 자리를 차지하지
+     * 않는 막대는 늘 떠 있을 이유도 없다. 끌고 있는 동안에는 사라지지 않는다.
+     * (`SPage` 의 같은 이름 prop 은 막대를 항상 보인다. 페이지는 스크롤이 늘 있는 자리라
+     * "여기는 스크롤된다"는 신호를 남겨 둔 쪽이다.)
+     *
+     * **켜면 구조가 한 겹 늘어난다.** `className`·`style`·`maxHeight`·`maxWidth` 가 바깥
+     * 상자로 가고 스크롤 요소가 그 안을 채운다 — 막대를 얹을 기준 상자가 필요해서다.
+     * 크기·자리를 잡는 클래스(`h-*`·`flex-1`·`min-h-0`)는 그대로 듣지만, 패딩은 스크롤
+     * 요소가 아니라 바깥 상자에 걸리므로 콘텐츠가 그 여백 아래로 흘러 들어가지 않는다.
+     *
+     * `background`·`bordered` 는 네이티브 트랙을 꾸미는 값이라 이때 무시된다.
+     */
+    overlayScrollbar?: boolean;
 }
 /**
  * SScrollArea — sd-scroll-area 포팅.

package/dist/components/SSearchInput/README.md

@@ -0,0 +1,63 @@
+# 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?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. 미지정 시 부모 폭을 채운다. |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `inputClassName?` | `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 확정)는 검색으로 치지 않는다. |
+
+## Types
+
+### SSearchInputSize
+
+```ts
+export type SSearchInputSize = SFieldSize;
+```
+
+## Dependencies
+
+### Used by
+
+ - [SChipFilter](../SChipFilter)
+ - [SSelect](../SSelect)
+
+### Depends on
+
+- [SField](../SField)
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SSearchInput --> SField
+  SSearchInput --> SGhostButton
+  SSearchInput --> SIcon
+  SChipFilter --> SSearchInput
+  SSelect --> SSearchInput
+  style SSearchInput fill:#f9f,stroke:#333,stroke-width:4px
+```

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

@@ -0,0 +1,52 @@
+import { type CSSProperties, type InputHTMLAttributes } from 'react';
+import { type SFieldSize } from '../SField';
+import { type SFieldWidth } from '../../lib/field-width';
+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;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     * 미지정 시 부모 폭을 채운다.
+     */
+    width?: SFieldWidth;
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
+    focused?: boolean;
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
+    hovered?: boolean;
+    /** 내부 input 요소 className */
+    inputClassName?: 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

@@ -19,13 +19,50 @@
 | `headerClassName?` | `string` | — | 헤더 영역 클래스 |
 | `padding?` | `SSectionHeaderCardBodyPadding` | — | 바디 안쪽 여백. 기본은 `default`. 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`. |
 | `background?` | `SSectionHeaderCardBodyBackground` | — | 본문 배경. 기본은 `frame` — 카드가 깐 흰 면을 그대로 쓴다. `neutral` 은 바탕을 한 단계 눌러앉혀, 흰 면 덩어리(표·리스트)가 여럿일 때 그것들이 **"면 위에 놓인 객체"로 읽히게** 한다. 위계를 한 단계 더 주고 싶을 때 고르는 선택지이며, **기본값이 틀린 것은 아니다** — 표·리스트는 테두리·라운드·헤더 줄과 간격을 이미 갖고 있어 흰 바탕에서도 경계가 읽힌다. 깔아도 **효과가 없는** 자리가 있다 — 덩어리가 가장자리까지 차는 경우(`padding="none"` 으로 표를 채우면 바탕이 완전히 가려진다), 덩어리에 회색 면이 섞인 경우(그 덩어리가 바탕에 묻힌다), 맨 텍스트나 폼 컨트롤만 있는 본문(떠오를 흰 면이 없다). |
+| `footerLeft?` | `ReactNode` | — | 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다. `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다. |
+| `button?` | `SFooterButton` | — | 하단 액션 영역 우측 주 액션 버튼 |
+| `footerSize?` | `SFooterSize` | `'md'` | 하단 액션 영역 크기. 기본은 `md`. 한 화면 안에서 **부분만 확정하는 카드**(옆 패널·분할 영역처럼 화면의 일부를 맡는 카드)일 때만 `sm`. 카드가 화면의 주 액션을 쥐고 있으면 모달·페이지와 같은 `md` 다 (AGENTS.md §3-5-2). `footerLeft` 슬롯의 버튼도 같이 맞춘다 — `sm` 이면 슬롯 버튼도 `size="sm"`. |
+| `footerClassName?` | `string` | — | 하단 액션 영역 클래스 |
 | `children?` | `SSectionHeaderCardChildren` | — | 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. |
 
+## Types
+
+### SSectionHeaderCardTitleSize
+
+```ts
+export type SSectionHeaderCardTitleSize = 'xs' | 'sm';
+```
+
+### SSectionHeaderCardThickness
+
+```ts
+export type SSectionHeaderCardThickness = false | 'default' | 'accent';
+```
+
+### SSectionHeaderCardBodyPadding
+
+```ts
+export type SSectionHeaderCardBodyPadding = 'default' | 'wide' | 'none';
+```
+
+### SSectionHeaderCardBodyBackground
+
+```ts
+export type SSectionHeaderCardBodyBackground = 'frame' | 'neutral';
+```
+
+### SSectionHeaderCardChildren
+
+```ts
+export type SSectionHeaderCardChildren = ReactNode;
+```
+
 ## Dependencies
 
 ### Depends on
 
 - [SBadge](../SBadge)
+- [SFooter](../SFooter)
 - [SIcon](../SIcon)
 - [STooltip](../STooltip)
 
@@ -34,6 +71,7 @@
 ```mermaid
 graph TD;
   SSectionHeaderCard --> SBadge
+  SSectionHeaderCard --> SFooter
   SSectionHeaderCard --> SIcon
   SSectionHeaderCard --> STooltip
   style SSectionHeaderCard fill:#f9f,stroke:#333,stroke-width:4px

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

@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SFooterButton, type SFooterSize } from '../SFooter';
 export type SSectionHeaderCardBodyChildren = ReactNode;
 export type SSectionHeaderCardChildren = ReactNode;
 export type SSectionHeaderCardThickness = false | 'default' | 'accent';
@@ -42,6 +43,24 @@ export interface SSectionHeaderCardProps extends Omit<HTMLAttributes<HTMLDivElem
      * 맨 텍스트나 폼 컨트롤만 있는 본문(떠오를 흰 면이 없다).
      */
     background?: SSectionHeaderCardBodyBackground;
+    /**
+     * 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다.
+     * `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다.
+     */
+    footerLeft?: ReactNode;
+    /** 하단 액션 영역 우측 주 액션 버튼 */
+    button?: SFooterButton;
+    /**
+     * 하단 액션 영역 크기. 기본은 `md`.
+     *
+     * 한 화면 안에서 **부분만 확정하는 카드**(옆 패널·분할 영역처럼 화면의 일부를 맡는 카드)일 때만
+     * `sm`. 카드가 화면의 주 액션을 쥐고 있으면 모달·페이지와 같은 `md` 다 (AGENTS.md §3-5-2).
+     *
+     * `footerLeft` 슬롯의 버튼도 같이 맞춘다 — `sm` 이면 슬롯 버튼도 `size="sm"`.
+     */
+    footerSize?: SFooterSize;
+    /** 하단 액션 영역 클래스 */
+    footerClassName?: string;
     /** 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. */
     children?: SSectionHeaderCardChildren;
 }