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

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

@@ -1 +1 @@
-export { STable, type STableProps, type STableColumn, type STableCellContext, type STablePagination, type STableStickyColumn, type STableHandle, type SRow, } from './STable';
+export { STable, type STableProps, type STableColumn, type STableColumnField, type STableSort, type STableHeaderGroup, type STableCellContext, type STableCellValue, type STablePagination, type STableStickyColumn, type STableHandle, type SRow, } from './STable';

package/dist/components/STableBar/README.md

@@ -8,6 +8,7 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `title?` | `ReactNode` | — | 건수 앞에 서는 제목 슬롯. 이 바가 무엇의 목록인지 말한다. 문자열을 주면 바의 기본 타이포로 그린다. 다른 모양이 필요하면 요소를 통째로 넘긴다 — 슬롯이라 안에 무엇이 오든 자리만 잡아 준다. |
 | `total?` | `number` | — | 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동) |
 | `selected?` | `number` | — | 선택 건수. 지정하면 "N건 선택" 을 표시한다 |
 | `actions?` | `ReactNode` | — | 구분선 오른쪽 좌측 액션 영역 |

package/dist/components/STableBar/STableBar.d.ts

@@ -1,5 +1,12 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-export interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface STableBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /**
+     * 건수 앞에 서는 제목 슬롯. 이 바가 무엇의 목록인지 말한다.
+     *
+     * 문자열을 주면 바의 기본 타이포로 그린다. 다른 모양이 필요하면 요소를 통째로 넘긴다 —
+     * 슬롯이라 안에 무엇이 오든 자리만 잡아 준다.
+     */
+    title?: ReactNode;
     /** 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동) */
     total?: number;
     /** 선택 건수. 지정하면 "N건 선택" 을 표시한다 */

package/dist/components/STabs/README.md

@@ -10,7 +10,7 @@
 |------|------|---------|-------------|
 | `value` | `string` | — | 현재 선택된 탭 value |
 | `tabs` | `STabOption[]` | — | 탭 옵션 목록 |
-| `isSub?` | `boolean` | `false` | 서브 탭(밑줄형) 스타일 |
+| `sub?` | `boolean` | `false` | 서브 탭(밑줄형) 스타일 |
 | `vertical?` | `boolean` | `false` | 세로 배치 (sub 전용 — main 폴더형은 항상 가로) |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -21,6 +21,18 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string) => void` | 탭 변경 (sdUpdate) |
 
+## Types
+
+### STabOption
+
+```ts
+export interface STabOption {
+  label: string;
+  value: string;
+  badge?: string | number;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/STabs/STabs.d.ts

@@ -8,7 +8,7 @@ export interface STabsProps {
     /** 탭 변경 (sdUpdate) */
     onValueChange?: (value: string) => void;
     /** 서브 탭(밑줄형) 스타일 */
-    isSub?: boolean;
+    sub?: boolean;
     /** 세로 배치 (sub 전용 — main 폴더형은 항상 가로) */
     vertical?: boolean;
     className?: string;
@@ -19,4 +19,4 @@ export interface STabsProps {
  * main = 폴더형(탭 줄에 파란 baseline, 탭은 위쪽만 둥글고 하단 테두리 없음),
  * sub = 밑줄형(선택 시 하단 라인). 뱃지(STag), 세로 배치, value 제어 + onValueChange(sdUpdate).
  */
-export declare function STabs({ value, tabs, onValueChange, isSub, vertical, className, style, }: STabsProps): import("react").JSX.Element;
+export declare function STabs({ value, tabs, onValueChange, sub, vertical, className, style, }: STabsProps): import("react").JSX.Element;

package/dist/components/STag/README.md

@@ -11,11 +11,60 @@
 | `shape?` | `STagShape` | `'square'` | 모양 |
 | `size?` | `STagSize` | `'sm'` | 크기 |
 | `color?` | `STagColor` | `'grey'` | 색상 |
+| `deep?` | `boolean` | `false` | 진한 배경(deep) 버전. 배경에 강조색을 채우고 텍스트·아이콘을 반전색으로 쓴다 |
 | `label?` | `string` | `''` | 레이블 텍스트 |
 | `icon?` | `SIconName` | — | 아이콘명 |
 | `iconLeft?` | `boolean` | `true` | 아이콘을 레이블 왼쪽에 배치 |
 | `width?` | `string \| number` | — | 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기 |
 
+## Types
+
+### STagShape
+
+```ts
+export type STagShape = (typeof TAG_SHAPES)[number];
+```
+
+### STagSize
+
+```ts
+export type STagSize = (typeof TAG_SIZES)[number];
+```
+
+### STagColor
+
+```ts
+export type STagColor = (typeof TAG_COLORS)[number];
+```
+
+### TAG_SHAPES
+
+```ts
+export const TAG_SHAPES = ['square', 'pill'] as const;
+```
+
+### TAG_SIZES
+
+```ts
+export const TAG_SIZES = ['xs', 'sm', 'md'] as const;
+```
+
+### TAG_COLORS
+
+```ts
+export const TAG_COLORS = [
+  'grey',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'darkblue',
+  'indigo',
+  'purple',
+] as const;
+```
+
 ## Dependencies
 
 ### Used by
@@ -24,6 +73,9 @@
  - [SConfirmModal](../SConfirmModal)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
+ - [SLauncherListBox](../SLauncherListBox)
+ - [SRadioCard](../SRadioCard)
+ - [SSystemActionButton](../SSystemActionButton)
  - [STabs](../STabs)
  - [STextLink](../STextLink)
 
@@ -40,6 +92,9 @@ graph TD;
   SConfirmModal --> STag
   SGhostButton --> STag
   SGnb --> STag
+  SLauncherListBox --> STag
+  SRadioCard --> STag
+  SSystemActionButton --> STag
   STabs --> STag
   STextLink --> STag
   style STag fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/STag/STag.d.ts

@@ -8,6 +8,8 @@ export interface STagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'
     size?: STagSize;
     /** 색상 */
     color?: STagColor;
+    /** 진한 배경(deep) 버전. 배경에 강조색을 채우고 텍스트·아이콘을 반전색으로 쓴다 */
+    deep?: boolean;
     /** 레이블 텍스트 */
     label?: string;
     /** 아이콘명 */
@@ -20,6 +22,6 @@ export interface STagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'
 /**
  * STag — sd-tag 포팅.
  * Stencil의 `name`(예: square_sm_grey) 프리셋을 shape/size/color 세 prop으로 분리.
- * 색상은 컴포넌트 토큰 `--cmp-tag-<color>-{bg,content}` 참조.
+ * 색상은 컴포넌트 토큰 `--cmp-tag-<color>-{bg,content}`, deep 은 `--cmp-tag-<color>-deep-*` 참조.
  */
 export declare const STag: import("react").ForwardRefExoticComponent<STagProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/STag/tag.config.d.ts

@@ -1,6 +1,6 @@
 export declare const TAG_SHAPES: readonly ["square", "pill"];
 export declare const TAG_SIZES: readonly ["xs", "sm", "md"];
-export declare const TAG_COLORS: readonly ["grey", "red", "orange", "yellow", "green", "blue", "darkblue", "indigo"];
+export declare const TAG_COLORS: readonly ["grey", "red", "orange", "yellow", "green", "blue", "darkblue", "indigo", "purple"];
 export type STagShape = (typeof TAG_SHAPES)[number];
 export type STagSize = (typeof TAG_SIZES)[number];
 export type STagColor = (typeof TAG_COLORS)[number];

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;