sellmate-design-system-react 9.0.0-beta.63 → 9.0.0-beta.65

package/dist/components/SDonutChart/README.md

@@ -9,6 +9,8 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `data` | `SDonutChartSlice[]` | — | 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 |
+| `title?` | `string` | — | 차트 제목 — 왼쪽 위에 놓인다 |
+| `unit?` | `string` | — | 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 |
 | `palette?` | `SDonutChartPalette` | `'multi'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
 | `colors?` | `SDonutChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 |
 | `showValueLabel?` | `boolean` | `false` | 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 |

package/dist/components/SDonutChart/SDonutChart.d.ts

@@ -32,6 +32,10 @@ export interface SDonutChartSlicePoint {
 export interface SDonutChartProps {
     /** 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 */
     data: SDonutChartSlice[];
+    /** 차트 제목 — 왼쪽 위에 놓인다 */
+    title?: string;
+    /** 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 */
+    unit?: string;
     /** 색 팔레트. `custom` 일 때만 `colors` 를 본다 */
     palette?: SDonutChartPalette;
     /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */

package/dist/components/SEditor/README.md

@@ -69,6 +69,7 @@
 | `editorClassName?` | `string` | — | 편집 영역 className |
 | `editorStyle?` | `CSSProperties` | — | 편집 영역 style |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SEditor/SEditor.d.ts

@@ -3,7 +3,7 @@ import type { Editor } from '@tiptap/core';
 import { type SColor } from '../../lib/color';
 import { type SFieldWidth } from '../../lib/field-width';
 import { type Rule } from '../../lib/form';
-import { type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type STooltipProps } from '../STooltip';
 /** ref 로 노출되는 조작 메서드 */
@@ -69,6 +69,13 @@ export interface SEditorProps {
     /** 포커스 이탈 */
     onBlur?: () => void;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     /** 레이블 영역 아이콘 */
     icon?: SIconName;

package/dist/components/SField/README.md

@@ -14,6 +14,7 @@
 | `iconColor?` | `SColor` | — | 레이블 영역 아이콘 색상. 미지정 시 currentColor 상속 |
 | `labelTooltip?` | `string` | `''` | 레이블 툴팁 텍스트 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 (SdTooltipProps 대응) |
+| `labelPosition?` | `SFieldLabelPosition` | `'left'` | 레이블을 컨트롤 **왼쪽**에 둘지 **위**에 둘지. 기본은 `left` — 이 서비스의 폼은 라벨 열을 세로로 맞춰 읽는다. 라벨이 길거나 컨트롤이 좁아 한 줄에 같이 세우기 어려울 때(모달 안의 폼, 한 줄짜리 칸) `top` 을 쓴다. **한 폼 안에서는 섞지 않는다** — 라벨 시작점이 행마다 어긋나 세로 정렬이 깨진다. `top` 이면 라벨과 컨트롤 사이 간격은 `--sys-space-field-vertical-gap` 이 정한다 (sm·md 구분 없이 고정). 라벨을 줄 세우는 장치인 `labelWidth`·`labelHeight` 는 위에 선 라벨에는 뜻이 없어 무시된다 — `addonLabel` 의 폭에는 그대로 적용된다. |
 | `labelWidth?` | `number \| string` | — | 레이블/어드온 레이블 너비 (숫자=px). label·addonLabel 폭에 공통 적용 |
 | `labelHeight?` | `number \| string` | — | 레이블 박스 높이 (숫자=px). 미지정 시 size별 기본값 사용. 컨트롤 박스가 기본 필드 높이보다 큰 경우(multiline 등) 첫 행에 세로 중앙 정렬을 맞추기 위해 컨트롤 박스 높이를 넘겨받는다. |
 | `size?` | `SFieldSize` | `'sm'` | 필드 크기 |
@@ -52,6 +53,12 @@
 
 ## Types
 
+### SFieldLabelPosition
+
+```ts
+export type SFieldLabelPosition = 'left' | 'top';
+```
+
 ### SFieldSize
 
 ```ts

package/dist/components/SField/SField.d.ts

@@ -7,6 +7,7 @@ import { type SFieldWidth } from '../../lib/field-width';
 export type SFieldSize = 'sm' | 'md';
 export type SFieldAddonAlign = 'start' | 'center' | 'end';
 export type SFieldStatus = 'default' | 'pass' | 'error';
+export type SFieldLabelPosition = 'left' | 'top';
 /** ref로 노출되는 UX 메서드 (sd-field @Method sdFocus 대응) */
 export interface SFieldHandle {
     /** 내부 컨트롤에 포커스하고 필드를 화면에 스크롤합니다. */
@@ -25,6 +26,18 @@ export interface SFieldProps {
     labelTooltip?: string;
     /** 레이블 툴팁 상세 옵션 (SdTooltipProps 대응) */
     labelTooltipProps?: Partial<STooltipProps>;
+    /**
+     * 레이블을 컨트롤 **왼쪽**에 둘지 **위**에 둘지.
+     *
+     * 기본은 `left` — 이 서비스의 폼은 라벨 열을 세로로 맞춰 읽는다. 라벨이 길거나 컨트롤이
+     * 좁아 한 줄에 같이 세우기 어려울 때(모달 안의 폼, 한 줄짜리 칸) `top` 을 쓴다.
+     * **한 폼 안에서는 섞지 않는다** — 라벨 시작점이 행마다 어긋나 세로 정렬이 깨진다.
+     *
+     * `top` 이면 라벨과 컨트롤 사이 간격은 `--sys-space-field-vertical-gap` 이 정한다
+     * (sm·md 구분 없이 고정). 라벨을 줄 세우는 장치인 `labelWidth`·`labelHeight` 는
+     * 위에 선 라벨에는 뜻이 없어 무시된다 — `addonLabel` 의 폭에는 그대로 적용된다.
+     */
+    labelPosition?: SFieldLabelPosition;
     /** 레이블/어드온 레이블 너비 (숫자=px). label·addonLabel 폭에 공통 적용 */
     labelWidth?: number | string;
     /**

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

@@ -1 +1 @@
-export { SField, type SFieldHandle, type SFieldProps, type SFieldSize, type SFieldAddonAlign, type SFieldStatus, } from './SField';
+export { SField, type SFieldHandle, type SFieldProps, type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition, } from './SField';

package/dist/components/SFilePicker/README.md

@@ -25,6 +25,7 @@
 | `status?` | `SFieldStatus` | — |  |
 | `size?` | `SFieldSize` | `'sm'` |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SFilePicker/SFilePicker.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, 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';
@@ -36,6 +36,13 @@ export interface SFilePickerProps {
     status?: SFieldStatus;
     size?: SFieldSize;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -56,4 +63,4 @@ export interface SFilePickerProps {
     style?: CSSProperties;
 }
 /** SFilePicker — sd-file-picker 포팅. 단일/다중 파일 + 크기·개수 검증 + 칩 목록. */
-export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, showMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;
+export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, showMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelPosition, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;

package/dist/components/SIcon/README.md

@@ -30,6 +30,7 @@
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
  - [SConfirmModal](../SConfirmModal)
+ - [SContextAlert](../SContextAlert)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SDraggableItem](../SDraggableItem)
@@ -77,6 +78,7 @@ graph TD;
   SChipFilter --> SIcon
   SChipInput --> SIcon
   SConfirmModal --> SIcon
+  SContextAlert --> SIcon
   SDatePicker --> SIcon
   SDateRangePicker --> SIcon
   SDraggableItem --> SIcon

package/dist/components/SInput/README.md

@@ -23,6 +23,7 @@
 | `inputClassName?` | `string` | — | 내부 input 요소 className |
 | `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다) |
 | `labelWidth?` | `number \| string` | — |  |
 | `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |

package/dist/components/SInput/SInput.d.ts

@@ -1,5 +1,5 @@
 import { type InputHTMLAttributes, type CSSProperties, type ReactNode } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, 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';
@@ -39,6 +39,8 @@ export interface SInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** 내부 input 요소 style */
     inputStyle?: CSSProperties;
     label?: string;
+    /** 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다) */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     /** 레이블 툴팁 텍스트 */
     labelTooltip?: string;

package/dist/components/SLineChart/README.md

@@ -10,6 +10,8 @@
 |------|------|---------|-------------|
 | `categories` | `string[]` | — | 가로축에 놓일 항목 이름 |
 | `series` | `SLineChartSeries[]` | — | 계열 목록. 각 `data` 는 `categories` 와 같은 순서다 |
+| `title?` | `string` | — | 차트 제목 — 왼쪽 위에 놓인다 |
+| `unit?` | `string` | — | 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 |
 | `curve?` | `SLineChartCurve` | `'linear'` | 점을 잇는 방식. `smooth` 는 값을 넘어가 부풀지 않는 곡선이다 |
 | `area?` | `boolean` | `false` | 선 아래를 계열 색으로 채운다. 크기의 변화를 함께 보여줄 때 쓴다 |
 | `stacked?` | `boolean` | `false` | 계열을 겹쳐 그리는 대신 **아래 계열 위에 쌓는다**. 전체의 크기와 그 안의 구성을 함께 볼 때 쓴다 — 맨 위 선이 곧 합계다. 툴팁은 쌓기 전 각 계열의 값을 보여준다 |

package/dist/components/SLineChart/SLineChart.d.ts

@@ -46,6 +46,10 @@ export interface SLineChartProps {
     categories: string[];
     /** 계열 목록. 각 `data` 는 `categories` 와 같은 순서다 */
     series: SLineChartSeries[];
+    /** 차트 제목 — 왼쪽 위에 놓인다 */
+    title?: string;
+    /** 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 */
+    unit?: string;
     /** 점을 잇는 방식. `smooth` 는 값을 넘어가 부풀지 않는 곡선이다 */
     curve?: SLineChartCurve;
     /** 선 아래를 계열 색으로 채운다. 크기의 변화를 함께 보여줄 때 쓴다 */

package/dist/components/SLineChart/lineChart.config.d.ts

@@ -1,41 +1,50 @@
 /**
  * SLineChart 의 치수·색 상수와 선·영역 경로 계산.
  *
- * **시안이 없는 컴포넌트다.** 그래서 두 가지 규칙으로 값을 정했다.
+ * 선·점 고유의 값은 `chart.line.*` 토큰이 정한다. 두 차트가 공유하는 것
+ * (눈금·격자·툴팁·범례·팔레트·값 라벨)은 새로 정하지 않고 바 차트와 `lib/chart` 에서
+ * 그대로 가져온다 — 같은 데이터를 막대에서 선으로 바꿨을 때 눈금이 어긋나면 두 차트를
+ * 견줄 수 없다. 단 항목 축 양끝 여백(`AXIS_EDGE_PADDING`)은 쓰지 않는다 — 선은
+ * 첫·마지막 점이 그림 양끝에 선다.
  *
- * 1. 두 차트가 공유하는 것(눈금·격자·툴팁·범례·팔레트)은 새로 정하지 않고
- *    바 차트와 `lib/chart` 에서 그대로 가져온다 — 같은 데이터를 막대에서 선으로
- *    바꿨을 때 눈금이 어긋나면 두 차트를 견줄 수 없다. 단 항목 축 양끝 여백
- *    (`AXIS_EDGE_PADDING`)은 쓰지 않는다 — 선은 첫·마지막 점이 그림 양끝에 선다.
- * 2. 선 고유의 것(선 두께·점 지름 따위)만 여기서 정한다. 디자인 토큰이 생기면
- *    이 파일의 상수부터 토큰 참조로 바꾼다.
+ * **점의 치수는 토큰을 `var()` 로 넘기지 못하고 숫자로 베껴 둔다.** 점 자리가 툴팁이
+ * 비켜설 거리·값 라벨의 높이·스크롤 컨테이너의 여유 폭을 정하는 데 쓰여, 그리기 전에
+ * JS 가 그 수를 알아야 하기 때문이다. 막대의 `BAR_RADIUS` 와 같은 규칙으로, 각 상수에
+ * 어느 토큰을 베꼈는지 적어 둔다. 색·불투명도처럼 그리기만 하는 것은 토큰을 직접 참조한다.
  *
- * **토큰 이름이 `bar` 로 시작하는 것을 그대로 쓰는 자리가 있다** — 값 라벨의 색·타이포와
- * 짚은 항목의 바탕이 그렇다(`--cmp-chart-bar-dataLabel-*`, `--cmp-chart-barContainer-*`).
- * 이름만 막대 것이고 뜻은 "차트의 값 라벨"·"짚은 항목의 바탕" 이라, 선 차트에서 값을
- * 따로 정하면 같은 자리의 글자가 차트마다 달라진다. `chart.line.*` 토큰이 생기면 옮긴다.
+ * **토큰 이름이 `bar` 로 시작하는 것을 그대로 쓰는 자리가 남아 있다** — 짚은 항목의
+ * 바탕(`--cmp-chart-barContainer-*`)이 그렇다. 이름만 막대 것이고 뜻은 "짚은 항목의
+ * 바탕" 이라, 선 차트에서 값을 따로 정하면 같은 자리가 차트마다 달라진다.
+ *
+ * 값 라벨의 색·타이포는 `chart.dataLabel.*` 로 막대 밖으로 나와 이제 공용 토큰이다.
+ */
+/** 선 두께 — 토큰 `chart.line.width`. SVG 표현 속성은 `var()` 를 못 풀어 `style` 로 넘긴다. */
+export declare const LINE_WIDTH = "var(--cmp-chart-line-width)";
+/**
+ * 선의 불투명도 — 토큰 `chart.line.opacity`.
+ *
+ * 선은 한 겹 물러나 있고 점이 앞에 선다. 차트 공용 기본값(`chart.opacity.default`)이
+ * "라인 제외" 라고 못박은 것도 이 때문이다 — 선만 다른 값을 쓴다. 짚었을 때도 그대로다:
+ * 선이 진해지면 굵기 탓에 짚지 않은 이웃 계열까지 덮는다.
  */
-/** 선 두께(px). */
-export declare const LINE_WIDTH = 2;
-/** 데이터 지점에 찍는 점의 반지름(px) — 시안 dot, 지름 8. 계열 색으로만 채운 민 원이다. */
-export declare const POINT_RADIUS = 4;
+export declare const LINE_OPACITY = "var(--cmp-chart-line-opacity)";
+/** 점의 반지름(px) — 토큰 `chart.line.point.size.default`(지름 10)의 절반. */
+export declare const POINT_RADIUS = 5;
+/** 짚은 항목의 점 — 토큰 `chart.line.point.size.hover`(지름 12)의 절반. 색은 그대로고 커지기만 한다. */
+export declare const POINT_HOVER_RADIUS = 6;
 /**
- * 짚은 항목의 점 — 시안 dotHover, 지름 20.
+ * 짚은 점을 감싸는 바탕 원의 반지름(px) — 토큰 `chart.line.point.size.bg`(지름 24)의 절반.
  *
- * 색 점(반지름 5)이 **바탕 원**(반지름 9.5 + 1px 테두리) 위에 앉는다. 바탕 원은 점 둘레를
- * 비워 선·영역 채움과 겹치지 않게 하고, 테두리가 그 경계를 계열 색으로 잡아 준다.
- * 바탕색을 흰색이 아니라 `--cmp-chart-bg` 로 두는 이유는 "흰 원을 그린다" 가 아니라
- * "차트 바탕만큼 비워 둔다" 이기 때문이다.
+ * 계열 색을 옅게 깐 원이다(`chart.line.point.opacity.bg`). 점 둘레를 비우는 것이 아니라
+ * **점보다 넓은 같은 색 자리**를 만들어, 계열이 여럿이어도 어느 선의 점을 짚었는지가 색으로 읽힌다.
  */
-export declare const POINT_HOVER_RADIUS = 9.5;
-export declare const POINT_HOVER_BORDER_WIDTH = 1;
-export declare const POINT_HOVER_INNER_RADIUS = 5;
-export declare const POINT_HOVER_BG = "var(--cmp-chart-bg)";
+export declare const POINT_HALO_RADIUS = 12;
+export declare const POINT_HALO_OPACITY = "var(--cmp-chart-line-point-opacity-bg)";
 /**
- * 짚은 점이 실제로 차지하는 반지름 — 테두리 **바깥**까지(=지름 20의 절반).
- * 테두리는 반지름 위에 걸쳐 그려지므로 절반이 밖으로 나간다. 툴팁이 이만큼 비켜선다.
+ * 짚은 점이 실제로 차지하는 반지름 — 바탕 원까지다. 툴팁이 이만큼 비켜서고,
+ * 양끝 점이 잘리지 않게 스크롤 컨테이너도 이만큼 넓어진다.
  */
-export declare const POINT_HOVER_EXTENT: number;
+export declare const POINT_HOVER_EXTENT = 12;
 /**
  * 항목 하나가 가져야 할 최소 폭(px).
  *
@@ -44,8 +53,8 @@ export declare const POINT_HOVER_EXTENT: number;
  * 겹치므로, 좁히는 대신 가로로 스크롤한다.
  */
 export declare const BAND_MIN = 40;
-/** 점과 값 라벨 사이 간격(px) — 막대 차트와 같다. */
-export declare const VALUE_LABEL_GAP = 6;
+/** 점과 값 라벨 사이 간격(px) — 토큰 `chart.line.point.gap`. 막대(6)와 달리 선은 4 다. */
+export declare const VALUE_LABEL_GAP = 4;
 /**
  * 영역 채움의 불투명도 — 선 바로 아래가 가장 진하고 바닥으로 갈수록 옅어진다.
  *
@@ -53,11 +62,11 @@ export declare const VALUE_LABEL_GAP = 6;
  * 사라져, 계열이 여럿일 때 채움끼리 겹쳐 색이 탁해지는 것도 덜하다. 그래도 겹쳐 그리는
  * 것 자체의 한계는 남으므로, 계열이 많으면 `area` 를 끄거나 `stacked` 로 쌓는다.
  *
- * 위쪽 30% 는 맞는 토큰이 없어 값으로 둔다(불투명도 토큰은 5·8·40·60·80 뿐이다).
+ * 위·아래 값은 `chart.line.area.gradation.start|end` 가 정한다.
  */
-export declare const AREA_OPACITY_TOP = "30%";
-export declare const AREA_OPACITY_BOTTOM = "var(--opacity-005)";
-export declare const LINE_DATA_LABEL_COLOR = "var(--cmp-chart-bar-dataLabel-color-default)";
+export declare const AREA_OPACITY_TOP = "var(--cmp-chart-line-area-gradation-start)";
+export declare const AREA_OPACITY_BOTTOM = "var(--cmp-chart-line-area-gradation-end)";
+export declare const LINE_DATA_LABEL_COLOR = "var(--cmp-chart-dataLabel-color-default)";
 /** 값 라벨의 타이포 — 짚은 항목만 굵고 크게 뜬다(막대 차트와 같은 규칙). */
 export declare const LINE_DATA_LABEL_TYPO = "typo-body-sm-medium";
 export declare const LINE_DATA_LABEL_TYPO_HOVER = "typo-body-md-bold";

package/dist/components/SNumberInput/README.md

@@ -31,6 +31,7 @@
 | `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
 | `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SNumberInput/SNumberInput.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, 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';
@@ -72,6 +72,13 @@ export interface SNumberInputProps {
     /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
     hovered?: boolean;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;

package/dist/components/SPieChart/README.md

@@ -9,6 +9,8 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `data` | `SPieChartSlice[]` | — | 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 |
+| `title?` | `string` | — | 차트 제목 — 왼쪽 위에 놓인다 |
+| `unit?` | `string` | — | 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 |
 | `palette?` | `SPieChartPalette` | `'multi'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
 | `colors?` | `SPieChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 |
 | `showValueLabel?` | `boolean` | `false` | 조각 안에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 |

package/dist/components/SPieChart/SPieChart.d.ts

@@ -32,6 +32,10 @@ export interface SPieChartSlicePoint {
 export interface SPieChartProps {
     /** 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 */
     data: SPieChartSlice[];
+    /** 차트 제목 — 왼쪽 위에 놓인다 */
+    title?: string;
+    /** 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 */
+    unit?: string;
     /** 색 팔레트. `custom` 일 때만 `colors` 를 본다 */
     palette?: SPieChartPalette;
     /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */

package/dist/components/SSelect/README.md

@@ -32,6 +32,7 @@
 | `serverSearch?` | `boolean` | `false` | 검색을 서버로 넘긴다 — 내부 필터링을 하지 않고 `options` 를 받은 그대로 보여준다. `onSearchChange` 로 온 검색어에 맞는 목록을 소비 앱이 다시 내려줘야 한다. 켜면 검색바가 옵션 수와 무관하게 항상 나온다 — 검색 결과가 줄었다고 검색바가 사라지면 검색어를 지울 수단이 없어지기 때문이다. |
 | `searchDebounce?` | `number` | `DEFAULT_SEARCH_DEBOUNCE` | `serverSearch` 에서 검색어를 서버로 넘기기 전 기다리는 시간(ms) |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
 | `iconColor?` | `SColor` | — |  |

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

@@ -1,6 +1,6 @@
 import { type CSSProperties } from 'react';
 import { type Rule } from '../../lib/form';
-import { type SFieldAddonAlign } from '../SField';
+import { type SFieldAddonAlign, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type STooltipProps } from '../STooltip';
@@ -108,6 +108,13 @@ export interface SSelectProps {
     /** `serverSearch` 에서 검색어를 서버로 넘기기 전 기다리는 시간(ms) */
     searchDebounce?: number;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     /** 레이블 영역 아이콘 */
     icon?: SIconName;

package/dist/components/STextarea/README.md

@@ -20,6 +20,7 @@
 | `textareaClassName?` | `string` | — | 내부 textarea 요소 className |
 | `textareaStyle?` | `CSSProperties` | — | 내부 textarea 요소 style |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
 | `iconColor?` | `SColor` | — |  |

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

@@ -1,5 +1,5 @@
 import { type TextareaHTMLAttributes, type CSSProperties } from 'react';
-import { type SFieldAddonAlign, type SFieldSize, 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';
@@ -50,6 +50,13 @@ export interface STextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     /** 내부 textarea 요소 style */
     textareaStyle?: CSSProperties;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     /** 레이블 영역 아이콘 */
     icon?: SIconName;

package/dist/components/STimePicker/README.md

@@ -22,6 +22,7 @@
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

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

@@ -1,5 +1,5 @@
 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';
@@ -43,6 +43,13 @@ export interface STimePickerProps {
     rules?: Rule[];
     status?: SFieldStatus;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -63,4 +70,4 @@ export declare function TimeSelector({ value, showMeridiem, minuteStep, onChange
     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, showMeridiem, minuteStep, width, maxWidth, 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, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimePickerProps): import("react").JSX.Element;

package/dist/components/STimeRangePicker/README.md

@@ -23,6 +23,7 @@
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

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

@@ -1,5 +1,5 @@
 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';
@@ -44,6 +44,13 @@ export interface STimeRangePickerProps {
     rules?: Rule[];
     status?: SFieldStatus;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -65,4 +72,4 @@ export declare function RangeTimeSelector({ value, showMeridiem, minuteStep, ran
     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, showMeridiem, minuteStep, rangeOrder, width, maxWidth, 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, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: STimeRangePickerProps): import("react").JSX.Element;