sellmate-design-system-react 9.0.0-beta.9 → 9.0.0-beta.91

package/dist/components/STextLink/README.md

@@ -11,8 +11,10 @@
 | `label?` | `string` | `''` | 레이블 |
 | `icon?` | `SIconName` | — | 좌측 아이콘 |
 | `iconColor?` | `SColor` | — | 좌측 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 |
-| `labelClass?` | `string` | — | 레이블 span에 추가할 클래스 |
+| `iconRotate?` | `0 \| 90 \| 180 \| 270` | — | 좌측 아이콘 회전 각도. 같은 아이콘을 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) |
+| `labelClassName?` | `string` | — | 레이블 span에 추가할 클래스 |
 | `rightArrow?` | `STextLinkArrow` | `'none'` | 우측 화살표 |
+| `rightArrowRotate?` | `0 \| 90 \| 180 \| 270` | — | 우측 화살표 회전 각도. 같은 화살표를 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) |
 | `underline?` | `boolean` | `false` | 밑줄 여부 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `size?` | `STextLinkSize` | `'sm'` | 크기 |
@@ -24,13 +26,29 @@
 |-------|------|-------------|
 | `onClick` | `() => void` |  |
 
+## Types
+
+### STextLinkArrow
+
+```ts
+export type STextLinkArrow = 'none' | 'chevron' | 'caret';
+```
+
+### STextLinkSize
+
+```ts
+export type STextLinkSize = 'sm' | 'md' | 'lg';
+```
+
 ## Dependencies
 
 ### Used by
 
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
+ - [SLauncherListBox](../SLauncherListBox)
  - [SPopover](../SPopover)
+ - [STable](../STable)
 
 ### Depends on
 
@@ -45,6 +63,8 @@ graph TD;
   STextLink --> STag
   SChipFilter --> STextLink
   SChipInput --> STextLink
+  SLauncherListBox --> STextLink
   SPopover --> STextLink
+  STable --> STextLink
   style STextLink fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/STextLink/STextLink.d.ts

@@ -10,10 +10,14 @@ export interface STextLinkProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'o
     icon?: SIconName;
     /** 좌측 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
     iconColor?: SColor;
+    /** 좌측 아이콘 회전 각도. 같은 아이콘을 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) */
+    iconRotate?: 0 | 90 | 180 | 270;
     /** 레이블 span에 추가할 클래스 */
-    labelClass?: string;
+    labelClassName?: string;
     /** 우측 화살표 */
     rightArrow?: STextLinkArrow;
+    /** 우측 화살표 회전 각도. 같은 화살표를 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) */
+    rightArrowRotate?: 0 | 90 | 180 | 270;
     /** 밑줄 여부 */
     underline?: boolean;
     /** 비활성 */

package/dist/components/STextarea/README.md

@@ -9,14 +9,19 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `value?` | `string` | — | 값 (제어) |
-| `rows?` | `number` | `3` | 행 수 |
+| `size?` | `SFieldSize` | `'sm'` | 크기 — `SInput` 등 다른 필드와 같은 등급이다. 글자 크기·행간·안쪽 여백·모서리가 함께 바뀐다. 한 줄 필드와 나란히 놓이는 자리라면 같은 등급으로 맞춘다. |
+| `rows?` | `number` | `MIN_ROWS` | 행 수 — 기본 2줄이고, 그보다 크게 주면 그만큼 높아진다. 줄여도 `size` 가 정한 최소 높이(2줄) 아래로는 내려가지 않는다. |
+| `autogrow?` | `boolean` | `false` | 입력 내용에 맞춰 높이가 늘어난다 — 스크롤 대신 필드가 자란다. 켜면 모서리를 끌어 크기를 바꾸는 손잡이가 사라진다. 사용자가 늘려 둔 높이를 다음 타이핑이 도로 계산해 버려, 둘을 함께 두면 끌어도 제자리로 돌아가는 것처럼 보이기 때문이다. **상한을 정하려면 `maxRows` 를 함께 준다.** 상한이 없으면 긴 글에서 필드가 끝없이 자라 모달·드로어에서는 아래쪽 버튼을 화면 밖으로 밀어낸다. |
+| `maxRows?` | `number` | — | `autogrow` 의 상한(줄 수). 여기 닿으면 더 자라지 않고 그 안에서 스크롤한다. `autogrow` 가 꺼져 있으면 아무 일도 하지 않는다. |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
 | `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
-| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
-| `textareaClass?` | `string` | — | 내부 textarea 요소 className |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `textareaClassName?` | `string` | — | 내부 textarea 요소 className |
 | `textareaStyle?` | `CSSProperties` | — | 내부 textarea 요소 style |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
 | `iconColor?` | `SColor` | — |  |
@@ -27,7 +32,7 @@
 | `hint?` | `string` | — |  |
 | `error?` | `boolean` | — |  |
 | `errorMessage?` | `string` | — |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `disabled?` | `boolean` | `false` |  |
 | `readOnly?` | `boolean` | `false` |  |
 | `className?` | `string` | — |  |
@@ -44,6 +49,7 @@
 
 ### Used by
 
+ - [SChatInput](../SChatInput)
  - [SKeyValueTable](../SKeyValueTable)
 
 ### Depends on
@@ -55,6 +61,7 @@
 ```mermaid
 graph TD;
   STextarea --> SField
+  SChatInput --> STextarea
   SKeyValueTable --> STextarea
   style STextarea fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/STextarea/STextarea.d.ts

@@ -1,9 +1,10 @@
 import { type TextareaHTMLAttributes, type CSSProperties } from 'react';
-import { type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldAddonAlign, type SFieldSize, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
+import { type SFieldWidth } from '../../lib/field-width';
 export interface STextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'> {
     /** 값 (제어) */
     value?: string;
@@ -11,21 +12,58 @@ export interface STextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     onValueChange?: (value: string) => void;
     /** 네이티브 onChange (form-agnostic) */
     onChange?: TextareaHTMLAttributes<HTMLTextAreaElement>['onChange'];
-    /** 행 수 */
+    /**
+     * 크기 — `SInput` 등 다른 필드와 같은 등급이다. 글자 크기·행간·안쪽 여백·모서리가 함께 바뀐다.
+     * 한 줄 필드와 나란히 놓이는 자리라면 같은 등급으로 맞춘다.
+     */
+    size?: SFieldSize;
+    /**
+     * 행 수 — 기본 2줄이고, 그보다 크게 주면 그만큼 높아진다.
+     * 줄여도 `size` 가 정한 최소 높이(2줄) 아래로는 내려가지 않는다.
+     */
     rows?: number;
+    /**
+     * 입력 내용에 맞춰 높이가 늘어난다 — 스크롤 대신 필드가 자란다.
+     *
+     * 켜면 모서리를 끌어 크기를 바꾸는 손잡이가 사라진다. 사용자가 늘려 둔 높이를 다음 타이핑이
+     * 도로 계산해 버려, 둘을 함께 두면 끌어도 제자리로 돌아가는 것처럼 보이기 때문이다.
+     *
+     * **상한을 정하려면 `maxRows` 를 함께 준다.** 상한이 없으면 긴 글에서 필드가 끝없이 자라
+     * 모달·드로어에서는 아래쪽 버튼을 화면 밖으로 밀어낸다.
+     */
+    autogrow?: boolean;
+    /**
+     * `autogrow` 의 상한(줄 수). 여기 닿으면 더 자라지 않고 그 안에서 스크롤한다.
+     * `autogrow` 가 꺼져 있으면 아무 일도 하지 않는다.
+     */
+    maxRows?: number;
     /** 유효성 규칙 — blur 시 자동 검증 */
     rules?: Rule[];
     /** 필드 상태 ('default' | 'pass' | 'error') */
     status?: SFieldStatus;
-    /** 포커스 상태 (제어/반영) */
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
     focused?: boolean;
-    /** 호버 상태 (제어/반영) */
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
     hovered?: boolean;
     /** 내부 textarea 요소 className */
-    textareaClass?: string;
+    textareaClassName?: string;
     /** 내부 textarea 요소 style */
     textareaStyle?: CSSProperties;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     /** 레이블 영역 아이콘 */
     icon?: SIconName;
@@ -41,7 +79,12 @@ export interface STextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     hint?: string;
     error?: boolean;
     errorMessage?: string;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
     disabled?: boolean;
     readOnly?: boolean;
     className?: string;

package/dist/components/STimePicker/README.md

@@ -14,13 +14,16 @@
 | `placeholder?` | `string` | `'00:00'` |  |
 | `disabled?` | `boolean` | `false` |  |
 | `clearable?` | `boolean` | `false` |  |
-| `useMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
+| `showMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
 | `minuteStep?` | `number` | `1` |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm`)에 맞춘 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |
@@ -41,6 +44,20 @@
 | `onValueChange` | `(time: string \| null) => void` | 선택 변경 (sdUpdate) |
 | `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |
 
+## Types
+
+### STimePickerType
+
+```ts
+export type STimePickerType = 'default' | 'midday';
+```
+
+### STimePickerSize
+
+```ts
+export type STimePickerSize = 'sm' | 'md';
+```
+
 ## Dependencies
 
 ### Used by

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

@@ -1,10 +1,11 @@
 import { type CSSProperties } from 'react';
-import { type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
 import { type STimePickerSize, type STimePickerType } from './timepicker.config';
+import { type SFieldWidth } from '../../lib/field-width';
 export type { STimePickerSize, STimePickerType } from './timepicker.config';
 export interface STimePickerProps {
     /** 선택 시간 (HH:mm) */
@@ -20,13 +21,42 @@ export interface STimePickerProps {
     disabled?: boolean;
     clearable?: boolean;
     /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
-    useMeridiem?: boolean;
+    showMeridiem?: boolean;
     minuteStep?: number;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
+    /**
+     * 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm`)에 맞춘
+     * 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로
+     * 늘어나지 않는다.
+     *
+     * 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께
+     * `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야
+     * 할 때만 쓴다.
+     */
+    maxWidth?: SFieldWidth;
     name?: string;
     rules?: Rule[];
     status?: SFieldStatus;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -40,11 +70,11 @@ export interface STimePickerProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function TimeSelector({ value, useMeridiem, minuteStep, onChange, }: {
+export declare function TimeSelector({ value, showMeridiem, minuteStep, onChange, }: {
     value?: string | null;
-    useMeridiem: boolean;
+    showMeridiem: boolean;
     minuteStep: number;
     onChange: (time: string) => void;
 }): import("react").JSX.Element;
 /** STimePicker — sd-time-picker 포팅. SField + Popover(TimeSelector). */
-export declare function STimePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, useMeridiem, minuteStep, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimePickerProps): import("react").JSX.Element;
+export declare function STimePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimePickerProps): import("react").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { type SFieldWidthGrade } from '../../lib/field-width';
 export type STimePickerSize = 'sm' | 'md';
 export type STimePickerType = 'default' | 'midday';
 export type STimePickerMeridiem = 'AM' | 'PM';
@@ -13,10 +14,11 @@ export declare const TIMEPICKER_SIZE_CONFIG: Record<STimePickerSize, {
     minWidth: number;
     fieldMinWidth: number;
     /**
-     * 필드 상한. 값 길이가 HH:mm 으로 정해져 있어, width="100%" 를 받아도 행 전체로
+     * 필드 상한(폭 등급). 값 길이가 HH:mm 으로 정해져 있어, width="100%" 를 받아도 행 전체로
      * 늘어나지 않게 막는다 (SKeyValueTable 이 모든 컨트롤에 100% 를 넘긴다).
+     * px 가 아니라 등급으로 두어 `--cmp-field-width-*` 가 바뀌면 함께 따라가게 한다.
      */
-    fieldMaxWidth: number;
+    fieldMaxWidth: SFieldWidthGrade;
 }>;
 export declare function clampTimePart(value: number, min: number, max: number): number;
 export declare function padTimePart(value: number): string;

package/dist/components/STimeRangePicker/README.md

@@ -14,14 +14,17 @@
 | `placeholder?` | `string` | `'00:00 ~ 23:59'` |  |
 | `disabled?` | `boolean` | `false` |  |
 | `clearable?` | `boolean` | `false` |  |
-| `useMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
+| `showMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
 | `minuteStep?` | `number` | `1` |  |
 | `rangeOrder?` | `STimeRangePickerRangeOrder` | `'strict'` | 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm ~ HH:mm`)에 맞춘 내장 상한이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |
@@ -42,6 +45,32 @@
 | `onValueChange` | `(range: STimeRangeValue) => void` | 선택 변경 (sdUpdate) |
 | `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |
 
+## Types
+
+### STimeRangeValue
+
+```ts
+export type STimeRangeValue = [string, string] | null;
+```
+
+### STimeRangePickerType
+
+```ts
+export type STimeRangePickerType = STimePickerType;
+```
+
+### STimeRangePickerSize
+
+```ts
+export type STimeRangePickerSize = STimePickerSize;
+```
+
+### STimeRangePickerRangeOrder
+
+```ts
+export type STimeRangePickerRangeOrder = 'strict' | 'allow-cross-day';
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/STimeRangePicker/STimeRangePicker.d.ts

@@ -1,11 +1,12 @@
 import { type CSSProperties } from 'react';
-import { type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
 import { type STimeRangePickerRangeOrder, type STimeRangePickerSize, type STimeRangePickerType, type STimeRangeValue } from './time-range-picker.config';
 export type { STimeRangePickerSize, STimeRangePickerRangeOrder, STimeRangePickerType, STimeRangeValue, } from './time-range-picker.config';
+import { type SFieldWidth } from '../../lib/field-width';
 export interface STimeRangePickerProps {
     /** 선택 시간 범위 [시작, 종료] (HH:mm) */
     value?: STimeRangeValue;
@@ -20,15 +21,43 @@ export interface STimeRangePickerProps {
     disabled?: boolean;
     clearable?: boolean;
     /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
-    useMeridiem?: boolean;
+    showMeridiem?: boolean;
     minuteStep?: number;
     /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
     rangeOrder?: STimeRangePickerRangeOrder;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
+    /**
+     * 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`HH:mm ~ HH:mm`)에 맞춘
+     * 내장 상한이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다.
+     *
+     * 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께
+     * `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야
+     * 할 때만 쓴다.
+     */
+    maxWidth?: SFieldWidth;
     name?: string;
     rules?: Rule[];
     status?: SFieldStatus;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -42,12 +71,12 @@ export interface STimeRangePickerProps {
     className?: string;
     style?: CSSProperties;
 }
-export declare function RangeTimeSelector({ value, useMeridiem, minuteStep, rangeOrder, onChange, }: {
+export declare function RangeTimeSelector({ value, showMeridiem, minuteStep, rangeOrder, onChange, }: {
     value?: STimeRangeValue;
-    useMeridiem: boolean;
+    showMeridiem: boolean;
     minuteStep: number;
     rangeOrder: STimeRangePickerRangeOrder;
     onChange: (range: [string, string]) => void;
 }): import("react").JSX.Element;
 /** STimeRangePicker — sd-time-range-picker 포팅. SField + Popover(RangeTimeSelector). */
-export declare function STimeRangePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, useMeridiem, minuteStep, rangeOrder, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimeRangePickerProps): import("react").JSX.Element;
+export declare function STimeRangePicker({ value, onValueChange, onOpenChange, type, size, placeholder, disabled, clearable, showMeridiem, minuteStep, rangeOrder, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimeRangePickerProps): import("react").JSX.Element;

package/dist/components/STimeline/README.md

@@ -0,0 +1,41 @@
+# STimeline
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STimeline
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `groups` | `STimelineGroup[]` | — | 머리글로 묶은 항목 목록. 순서 그대로 그린다 |
+| `emptyText?` | `ReactNode` | `'내역이 없습니다.'` | 항목이 하나도 없을 때 가운데 띄우는 안내. 불러오는 중에는 `null` 을 넘겨 빈 안내가 먼저 깜빡이지 않게 한다. |
+
+## Types
+
+### STimelineGroup
+
+```ts
+export interface STimelineGroup {
+  /** React key. 생략하면 순서로 대신한다 */
+  key?: Key;
+  /** 묶음 머리글 (예: 날짜) */
+  heading: ReactNode;
+  /** 머리글 아래 항목. 비어 있으면 머리글째 그리지 않는다 */
+  entries: STimelineEntry[];
+}
+```
+
+### STimelineEntry
+
+```ts
+export interface STimelineEntry {
+  /** React key — 묶음 안에서 유일해야 한다 */
+  key: Key;
+  /** 레일 왼쪽 열에 오른쪽 정렬로 서는 시각 (예: `14:32`) */
+  time?: ReactNode;
+  /** 레일 오른쪽 본문. 타이포·색은 감싸는 쪽을 따른다 — 업무 내용은 소비 앱이 그린다 */
+  content: ReactNode;
+}
+```
+

package/dist/components/STimeline/STimeline.d.ts

@@ -0,0 +1,27 @@
+import { type HTMLAttributes, type Key, type ReactNode } from 'react';
+export interface STimelineEntry {
+    /** React key — 묶음 안에서 유일해야 한다 */
+    key: Key;
+    /** 레일 왼쪽 열에 오른쪽 정렬로 서는 시각 (예: `14:32`) */
+    time?: ReactNode;
+    /** 레일 오른쪽 본문. 타이포·색은 감싸는 쪽을 따른다 — 업무 내용은 소비 앱이 그린다 */
+    content: ReactNode;
+}
+export interface STimelineGroup {
+    /** React key. 생략하면 순서로 대신한다 */
+    key?: Key;
+    /** 묶음 머리글 (예: 날짜) */
+    heading: ReactNode;
+    /** 머리글 아래 항목. 비어 있으면 머리글째 그리지 않는다 */
+    entries: STimelineEntry[];
+}
+export interface STimelineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 머리글로 묶은 항목 목록. 순서 그대로 그린다 */
+    groups: STimelineGroup[];
+    /**
+     * 항목이 하나도 없을 때 가운데 띄우는 안내.
+     * 불러오는 중에는 `null` 을 넘겨 빈 안내가 먼저 깜빡이지 않게 한다.
+     */
+    emptyText?: ReactNode;
+}
+export declare const STimeline: import("react").ForwardRefExoticComponent<STimelineProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { STimeline, type STimelineEntry, type STimelineGroup, type STimelineProps, } from './STimeline';

package/dist/components/SToast/README.md

@@ -39,7 +39,7 @@
 | `link?` | `string` | — | 우측 링크 URL |
 | `linkLabel?` | `string` | — | 링크 레이블 (없으면 URL) |
 | `buttonLabel?` | `string` | — | 우측 버튼 레이블 |
-| `useClose?` | `boolean` | `false` | 닫기 버튼 표시 |
+| `showClose?` | `boolean` | `false` | 닫기 버튼 표시 |
 | `type?` | `SToastType` | `'default'` | 타입(색상/프리셋) |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -51,6 +51,30 @@
 | `onClose` | `() => void` | 닫기 (sdClose) |
 | `onButtonClick` | `(e: MouseEvent) => void` | 버튼 클릭 (sdButtonClick) |
 
+## Types
+
+### SToastPosition
+
+```ts
+export type SToastPosition =
+  'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+```
+
+### SToastNotifyOptions
+
+```ts
+export interface SToastNotifyOptions extends Omit<SToastProps, 'onClose'> {
+  /** 자동 닫힘 지연(ms). 0이면 자동 닫힘 없음 (없으면 defaultDuration) */
+  duration?: number;
+}
+```
+
+### SToastType
+
+```ts
+export type SToastType = 'default' | 'danger' | 'caution' | 'complete' | 'accent' | 'info';
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SToast/SToast.d.ts

@@ -13,7 +13,7 @@ export interface SToastProps {
     /** 우측 버튼 레이블 */
     buttonLabel?: string;
     /** 닫기 버튼 표시 */
-    useClose?: boolean;
+    showClose?: boolean;
     /** 타입(색상/프리셋) */
     type?: SToastType;
     /** 닫기 (sdClose) */
@@ -24,4 +24,4 @@ export interface SToastProps {
     style?: CSSProperties;
 }
 /** SToast — sd-toast 포팅. 타입별 색상 + 아이콘/링크/버튼/닫기. */
-export declare function SToast({ icon, message, link, linkLabel, buttonLabel, useClose, type, onClose, onButtonClick, className, style, }: SToastProps): import("react").JSX.Element;
+export declare function SToast({ icon, message, link, linkLabel, buttonLabel, showClose, type, onClose, onButtonClick, className, style, }: SToastProps): import("react").JSX.Element;

package/dist/components/SToggle/README.md

@@ -21,3 +21,11 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: boolean) => void` | 변경 (sdUpdate) |
 
+## Types
+
+### SToggleSize
+
+```ts
+export type SToggleSize = 'xs' | 'sm';
+```
+

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

@@ -1 +1 @@
-export { SToggle, type SToggleProps } from './SToggle';
+export { SToggle, type SToggleProps, type SToggleSize } from './SToggle';