sellmate-design-system-react 9.0.0-beta.3 → 9.0.0-beta.30

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

@@ -14,3 +14,17 @@
 | `maxHeight?` | `string` | — | viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. |
 | `maxWidth?` | `string` | — | viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. |
 
+## 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;
+```
+

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` | — | 포커스 상태 (제어/반영) |
+| `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 확정)는 검색으로 치지 않는다. |
+
+## 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;
+    /** 포커스 상태 (제어/반영) */
+    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,43 +2,66 @@
 
 > 자동 생성 문서 — `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면 표시하지 않습니다. |
+| `thickness?` | `SSectionHeaderCardThickness` | — | 상단 border 색상 타입. false면 표시하지 않습니다. |
+| `headerClassName?` | `string` | — | 헤더 영역 클래스 |
+| `padding?` | `SSectionHeaderCardBodyPadding` | — | 바디 안쪽 여백. 기본은 `default`. 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`. |
+| `background?` | `SSectionHeaderCardBodyBackground` | — | 본문 배경. 기본은 `frame` — 카드가 깐 흰 면을 그대로 쓴다. `neutral` 은 바탕을 한 단계 눌러앉혀, 흰 면 덩어리(표·리스트)가 여럿일 때 그것들이 **"면 위에 놓인 객체"로 읽히게** 한다. 위계를 한 단계 더 주고 싶을 때 고르는 선택지이며, **기본값이 틀린 것은 아니다** — 표·리스트는 테두리·라운드·헤더 줄과 간격을 이미 갖고 있어 흰 바탕에서도 경계가 읽힌다. 깔아도 **효과가 없는** 자리가 있다 — 덩어리가 가장자리까지 차는 경우(`padding="none"` 으로 표를 채우면 바탕이 완전히 가려진다), 덩어리에 회색 면이 섞인 경우(그 덩어리가 바탕에 묻힌다), 맨 텍스트나 폼 컨트롤만 있는 본문(떠오를 흰 면이 없다). |
+| `footerLeft?` | `ReactNode` | — | 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다. `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다. |
+| `button?` | `SFooterButton` | — | 하단 액션 영역 우측 주 액션 버튼 |
+| `footerClassName?` | `string` | — | 하단 액션 영역 클래스 |
+| `children?` | `SSectionHeaderCardChildren` | — | 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. |
 
-### SSectionHeaderCard
+## Types
 
-#### Props
+### SSectionHeaderCardTitleSize
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children?` | `SSectionHeaderCardChildren` | — | SSectionHeaderCard 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. |
+```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)
 
@@ -47,6 +70,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,12 +1,14 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SFooterButton } from '../SFooter';
 export type SSectionHeaderCardBodyChildren = ReactNode;
 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 +23,36 @@ 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;
+    /**
+     * 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다.
+     * `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다.
+     */
+    footerLeft?: ReactNode;
+    /** 하단 액션 영역 우측 주 액션 버튼 */
+    button?: SFooterButton;
+    /** 하단 액션 영역 클래스 */
+    footerClassName?: string;
+    /** 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. */
     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

@@ -18,10 +18,11 @@
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
 | `placeholder?` | `string` | `'선택'` | placeholder |
 | `disabled?` | `boolean` | `false` | 비활성 |
+| `clearable?` | `boolean` | `false` | 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며, 누르면 드롭다운을 열지 않고 값만 비운다. |
 | `error?` | `boolean` | `false` | 에러 상태 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — 닫힐 때 자동 검증 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
-| `dropdownHeight?` | `string` | `'260px'` | 드롭다운 최대 높이 |
+| `dropdownHeight?` | `string` | `'640px'` | 드롭다운 최대 높이. 기본 640px — 창이 이보다 작으면 창 안에 남는 만큼까지만 채워진다 |
 | `dropdownWidth?` | `string` | — | 드롭다운 너비 (없으면 트리거 너비). 창보다 넓게 줘도 창 폭까지만 벌어진다. |
 | `maxDropdownWidth?` | `string` | `'640px'` | 드롭다운 최대 너비. 창이 이보다 좁으면 창 폭이 상한이 된다. |
 | `label?` | `string` | — |  |
@@ -33,7 +34,7 @@
 | `addonAlign?` | `SFieldAddonAlign` | — | 어드온 정렬 |
 | `hint?` | `string` | — |  |
 | `errorMessage?` | `string` | — |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. 셀렉트는 `maxLength` 개념이 없어 목록 최장값을 담는 등급으로 고른다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -51,6 +52,25 @@
 | `focus` | `() => void` | 트리거 버튼에 포커스 (sdFocus) |
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 
+## Types
+
+### SSelectOption
+
+```ts
+export interface SSelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  children?: SSelectOption[];
+}
+```
+
+### SSelectType
+
+```ts
+export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+```
+
 ## Dependencies
 
 ### Used by
@@ -61,18 +81,18 @@
 ### Depends on
 
 - [SField](../SField)
-- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
+- [SSearchInput](../SSearchInput)
 
 ### Graph
 
 ```mermaid
 graph TD;
   SSelect --> SField
-  SSelect --> SGhostButton
   SSelect --> SIcon
   SSelect --> SPortal
+  SSelect --> SSearchInput
   SKeyValueTable --> SSelect
   STable --> SSelect
   style SSelect fill:#f9f,stroke:#333,stroke-width:4px

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

@@ -5,6 +5,7 @@ import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type STooltipProps } from '../STooltip';
 import { type SSelectOption, type SSelectType } from './select.config';
+import { type SFieldWidth } from '../../lib/field-width';
 export type { SSelectOption, SSelectType } from './select.config';
 export interface SSelectHandle {
     /** 트리거 버튼에 포커스 (sdFocus) */
@@ -37,13 +38,18 @@ export interface SSelectProps {
     placeholder?: string;
     /** 비활성 */
     disabled?: boolean;
+    /**
+     * 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며,
+     * 누르면 드롭다운을 열지 않고 값만 비운다.
+     */
+    clearable?: boolean;
     /** 에러 상태 */
     error?: boolean;
     /** 유효성 규칙 — 닫힐 때 자동 검증 */
     rules?: Rule[];
     /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps?: Partial<STooltipProps>;
-    /** 드롭다운 최대 높이 */
+    /** 드롭다운 최대 높이. 기본 640px — 창이 이보다 작으면 창 안에 남는 만큼까지만 채워진다 */
     dropdownHeight?: string;
     /** 드롭다운 너비 (없으면 트리거 너비). 창보다 넓게 줘도 창 폭까지만 벌어진다. */
     dropdownWidth?: string;
@@ -62,7 +68,13 @@ export interface SSelectProps {
     addonAlign?: SFieldAddonAlign;
     hint?: string;
     errorMessage?: string;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     * 셀렉트는 `maxLength` 개념이 없어 목록 최장값을 담는 등급으로 고른다.
+     */
+    width?: SFieldWidth;
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SSplitter/README.md

@@ -25,3 +25,18 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: number) => void` | 크기가 확정될 때. emitImmediately 가 아니면 드래그를 놓는 순간 한 번만 온다 |
 
+## Types
+
+### SSplitterUnit
+
+```ts
+/** 모델·limits 를 읽는 단위. Quasar QSplitter 의 `unit` 과 같다. */
+export type SSplitterUnit = (typeof SSPLITTER_UNITS)[number];
+```
+
+### SSPLITTER_UNITS
+
+```ts
+export const SSPLITTER_UNITS = ['%', 'px'] as const;
+```
+

package/dist/components/SStepper/README.md

@@ -30,6 +30,32 @@
 | `showItemTooltip` | `() => void` | error 아이템 중 첫 번째에 툴팁을 연다. error 아이템이 없으면 아무 일도 일어나지 않는다. |
 | `hideItemTooltip` | `() => void` | 열려있는 커스텀 툴팁을 닫는다. 활성 단계(value prop)가 바뀌면 별도 호출 없이도 자동으로 닫힌다. |
 
+## Types
+
+### SStepperItem
+
+```ts
+export type SStepperItem = {
+  label: string;
+  value?: string;
+  group?: string;
+  completed?: boolean;
+  error?: boolean;
+};
+```
+
+### SStepperSize
+
+```ts
+export type SStepperSize = (typeof STEPPER_SIZES)[number];
+```
+
+### STEPPER_SIZES
+
+```ts
+export const STEPPER_SIZES = ['sm', 'lg'] as const;
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SSwitch/README.md

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