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

package/dist/components/SContextAlert/README.md

@@ -0,0 +1,52 @@
+# SContextAlert
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SContextAlert
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `intent?` | `SContextAlertIntent` | `'default'` | 알림의 성격 — 면과 테두리 색만 바뀐다. 본문색과 아이콘 기본색은 인텐트와 무관하게 하나다. `default` 안내 · `danger` 오류 · `warning` 주의 · `success` 완료 · `accent` 강조 · `discovery` 새 기능 |
+| `messages?` | `string[]` | `[]` | 본문. 각 문자열이 한 줄이 되고, 인라인 HTML(`<b>` · `<a>` 등)을 허용한다 — `sanitizeInlineHtml` 로 살균한 뒤 렌더하므로 스크립트·위험 스킴은 제거된다. |
+| `icon?` | `SIconName` | — | 왼쪽 아이콘. **주지 않으면 아이콘 칸 자체가 없다** — 넣을 때만 넣는다. 넣는다면 인텐트와 무관하게 원 안 느낌표(`notificationOutline`) 하나를 쓴다. 인텐트마다 다른 글리프를 고르면 면의 색과 아이콘의 뜻이 따로 논다. |
+| `iconColor?` | `SColor` | — | 아이콘 색. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 주지 않으면 본문보다 한 단계 옅은 기본색이 된다 — 인텐트와 무관하게 하나다. 면 색과 짝을 맞추려 인텐트마다 다른 색을 넣는 것은 시안의 규칙이 아니다. |
+| `action?` | `ReactNode` | — | 오른쪽에 붙는 후속 동작. **`SButton size="xs"` 를 넣는다** — 그 높이(24px)가 곧 이 상자의 콘텐츠 높이라 시안의 40px 가 그대로 나온다. 더 큰 버튼을 넣으면 상자가 그만큼 세로로 늘어난다. |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+## Types
+
+### SContextAlertIntent
+
+```ts
+export type SContextAlertIntent = (typeof CONTEXT_ALERT_INTENTS)[number];
+```
+
+### CONTEXT_ALERT_INTENTS
+
+```ts
+export const CONTEXT_ALERT_INTENTS = [
+  'default',
+  'danger',
+  'warning',
+  'success',
+  'accent',
+  'discovery',
+] as const;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SContextAlert --> SIcon
+  style SContextAlert fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SContextAlert/SContextAlert.d.ts

@@ -0,0 +1,51 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type SColor } from '../../lib/color';
+import { type SIconName } from '../SIcon';
+import { type SContextAlertIntent } from './contextAlert.config';
+export interface SContextAlertProps {
+    /**
+     * 알림의 성격 — 면과 테두리 색만 바뀐다. 본문색과 아이콘 기본색은 인텐트와 무관하게 하나다.
+     *
+     * `default` 안내 · `danger` 오류 · `warning` 주의 · `success` 완료 · `accent` 강조 · `discovery` 새 기능
+     */
+    intent?: SContextAlertIntent;
+    /**
+     * 본문. 각 문자열이 한 줄이 되고, 인라인 HTML(`<b>` · `<a>` 등)을 허용한다 —
+     * `sanitizeInlineHtml` 로 살균한 뒤 렌더하므로 스크립트·위험 스킴은 제거된다.
+     */
+    messages?: string[];
+    /**
+     * 왼쪽 아이콘. **주지 않으면 아이콘 칸 자체가 없다** — 넣을 때만 넣는다.
+     *
+     * 넣는다면 인텐트와 무관하게 원 안 느낌표(`notificationOutline`) 하나를 쓴다. 인텐트마다
+     * 다른 글리프를 고르면 면의 색과 아이콘의 뜻이 따로 논다.
+     */
+    icon?: SIconName;
+    /**
+     * 아이콘 색. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상.
+     *
+     * 주지 않으면 본문보다 한 단계 옅은 기본색이 된다 — 인텐트와 무관하게 하나다. 면 색과 짝을
+     * 맞추려 인텐트마다 다른 색을 넣는 것은 시안의 규칙이 아니다.
+     */
+    iconColor?: SColor;
+    /**
+     * 오른쪽에 붙는 후속 동작.
+     *
+     * **`SButton size="xs"` 를 넣는다** — 그 높이(24px)가 곧 이 상자의 콘텐츠 높이라 시안의
+     * 40px 가 그대로 나온다. 더 큰 버튼을 넣으면 상자가 그만큼 세로로 늘어난다.
+     */
+    action?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SContextAlert — 한 줄짜리 맥락 알림.
+ *
+ * 화면의 특정 자리에 붙어 "지금 이 맥락에서 알아야 할 것"을 한 줄로 알리고, 필요하면
+ * 오른쪽에 후속 동작 버튼을 둔다. 여러 줄 목록으로 안내를 쌓는 자리는 `SCallout` 이다
+ * (AGENTS.md §3-2) — 두 컴포넌트는 면·테두리·패딩 토큰이 같고 **무엇을 담는지**가 다르다.
+ *
+ * 색은 `--cmp-contextAlert-*` 토큰이 정한다. 아이콘 색만 전용 토큰이 없어 시스템 토큰을
+ * 빌려 쓴다(`contextAlert.config.ts` 참고).
+ */
+export declare const SContextAlert: import("react").ForwardRefExoticComponent<SContextAlertProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SContextAlert/contextAlert.config.d.ts

@@ -0,0 +1,22 @@
+export declare const CONTEXT_ALERT_INTENTS: readonly ["default", "danger", "warning", "success", "accent", "discovery"];
+export type SContextAlertIntent = (typeof CONTEXT_ALERT_INTENTS)[number];
+/**
+ * 인텐트별 표면 — 배경·테두리.
+ *
+ * `--cmp-contextAlert-<intent>-*` 로 이름을 조립하지 않고 표로 둔다. 조립하면 어떤 인텐트가
+ * 실제로 토큰을 갖고 있는지가 코드에서 사라지고, `check:refs` 도 접두어 존재만 확인하게 된다.
+ *
+ * **본문색은 여기 없다** — 전 인텐트 공통(`--cmp-contextAlert-content`)이라 컴포넌트가 직접 쓴다.
+ */
+export declare const CONTEXT_ALERT_SURFACE: Record<SContextAlertIntent, {
+    bg: string;
+    border: string;
+}>;
+/**
+ * 아이콘 색 — 본문(`--cmp-contextAlert-content`)보다 한 단계 옅다.
+ *
+ * ⚠️ contextAlert 토큰 그룹에 아이콘 **색**이 없다(크기만 있다). 시안의 값과 같은 시스템
+ * 토큰을 빌려 쓴다 — 디자인팀이 전용 토큰을 내면 이 한 줄을 그것으로 갈아끼운다
+ * (토큰 키는 만들지 않는다). `SCallout` 의 `white` 타입이 같은 방식으로 버티고 있다.
+ */
+export declare const CONTEXT_ALERT_ICON_COLOR = "var(--sys-color-fg-tertiary)";

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

@@ -0,0 +1,2 @@
+export { SContextAlert, type SContextAlertProps } from './SContextAlert';
+export { CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, CONTEXT_ALERT_ICON_COLOR, type SContextAlertIntent, } from './contextAlert.config';

package/dist/components/SDatePicker/README.md

@@ -33,11 +33,15 @@
 | `placeholder?` | `string` | — |  |
 | `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
 | `disabled?` | `boolean` | `false` |  |
-| `width?` | `number \| string` | — |  |
+| `clearable?` | `boolean` | `false` | 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다. **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다. `STimePicker` · `STimeRangePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다. |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`YYYY-MM-DD`)에 맞춘 내장 상한(`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` | — |  |
@@ -55,7 +59,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: string) => void` | 선택 변경 (sdUpdate) |
+| `onValueChange` | `(value: string \| null) => void` | 선택 변경 (sdUpdate). `clearable` 로 지우면 `null` 이 온다 |
 | `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
 ### SDatePickerYearListbox
@@ -76,6 +80,20 @@
 |-------|------|-------------|
 | `onValueChange` | `(year: string) => void` |  |
 
+## Types
+
+### SDatePickerMode
+
+```ts
+export type SDatePickerMode = 'date' | 'month' | 'year';
+```
+
+### SDatePickerSize
+
+```ts
+export type SDatePickerSize = SFieldSize;
+```
+
 ## Dependencies
 
 ### Used by
@@ -87,6 +105,7 @@
 
 - [SCalendar](../SCalendar)
 - [SField](../SField)
+- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 
 ### Graph
@@ -95,6 +114,7 @@
 graph TD;
   SDatePicker --> SCalendar
   SDatePicker --> SField
+  SDatePicker --> SGhostButton
   SDatePicker --> SIcon
   SChipFilter --> SDatePicker
   SKeyValueTable --> SDatePicker

package/dist/components/SDatePicker/SDatePicker.d.ts

@@ -1,16 +1,17 @@
 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';
 import { type STooltipProps } from '../STooltip';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SDatePickerSize = SFieldSize;
 export type SDatePickerMode = 'date' | 'month' | 'year';
 export interface SDatePickerProps {
     /** 선택 값 (date: YYYY-MM-DD, month: YYYY-MM, year: YYYY) */
     value?: string | null;
-    /** 선택 변경 (sdUpdate) */
-    onValueChange?: (value: string) => void;
+    /** 선택 변경 (sdUpdate). `clearable` 로 지우면 `null` 이 온다 */
+    onValueChange?: (value: string | null) => void;
     /** 보이는 연·월 변경 (sdViewChange) */
     onViewChange?: (view: {
         year: number;
@@ -23,11 +24,47 @@ export interface SDatePickerProps {
     /** 선택 가능 범위 [시작, 종료] */
     selectable?: [string, string];
     disabled?: boolean;
-    width?: number | string;
+    /**
+     * 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다.
+     *
+     * **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다.
+     * `STimePicker` · `STimeRangePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다.
+     */
+    clearable?: boolean;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
+    /**
+     * 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`YYYY-MM-DD`)에 맞춘
+     * 내장 상한(`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;
@@ -72,4 +109,4 @@ export interface SDatePickerMonthListboxProps {
  * 자체 트리거/팝오버 없이 연도+월 리스트만 필요한 커스텀 조합에 재사용한다. */
 export declare function SDatePickerMonthListbox({ value, anchorYear, selectable, onValueChange, onMonthSelect, className, style, }: SDatePickerMonthListboxProps): import("react").JSX.Element;
 /** SDatePicker — sd-date-picker 포팅. SField + SPopover(SCalendar). */
-export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;
+export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, clearable, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;

package/dist/components/SDateRangePicker/README.md

@@ -13,13 +13,17 @@
 | `placeholder?` | `string` | `'YYYY-MM-DD ~ YYYY-MM-DD'` |  |
 | `selectable?` | `[string, string]` | — |  |
 | `maxRange?` | `number` | — | 최대 선택 일수 |
-| `useTimePicker?` | `boolean` | `false` | 시간(시:분) 선택 푸터 사용 여부. true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시된다. |
+| `showTimePicker?` | `boolean` | `false` | 시간(시:분) 선택 푸터 사용 여부. true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시된다. |
 | `disabled?` | `boolean` | `false` |  |
-| `width?` | `number \| string` | — |  |
+| `clearable?` | `boolean` | `false` | 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다. **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다. `SDatePicker` · `STimePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다. |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`YYYY-MM-DD ~ YYYY-MM-DD`)에 맞춘 내장 상한(`size='md'` → `xl`, `'sm'` → `lg`)이 걸려, `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` | — |  |
@@ -37,7 +41,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(range: SDateRangeValue) => void` | 선택 변경 (sdUpdate) — [start, end] |
+| `onValueChange` | `(range: SDateRangeValue) => void` | 선택 변경 (sdUpdate) — [start, end]. `clearable` 로 지우면 `null` 이 온다 |
 | `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
 ### SRangeCalendar
@@ -49,7 +53,7 @@
 | `value` | `SDateRangeValue` | — |  |
 | `selectable?` | `[string, string]` | — |  |
 | `maxRange?` | `number` | — |  |
-| `useTimePicker?` | `boolean` | `false` |  |
+| `showTimePicker?` | `boolean` | `false` |  |
 
 #### Events
 
@@ -59,6 +63,20 @@
 | `onPendingStartChange` | `(start: string \| null) => void` | 시작일만 선택된(종료일 대기) 상태를 상위로 전달 — 트리거에 `start ~` 프리뷰 표시용 |
 | `onViewChange` | `(view: { year: number; month: number }) => void` |  |
 
+## Types
+
+### SDateRangeValue
+
+```ts
+export type SDateRangeValue = [string, string] | null;
+```
+
+### SDateRangePickerSize
+
+```ts
+export type SDateRangePickerSize = SFieldSize;
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SDateRangePicker/SDateRangePicker.d.ts

@@ -1,14 +1,15 @@
 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';
 import { type STooltipProps } from '../STooltip';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SDateRangeValue = [string, string] | null;
 export type SDateRangePickerSize = SFieldSize;
 export interface SDateRangePickerProps {
     value?: SDateRangeValue;
-    /** 선택 변경 (sdUpdate) — [start, end] */
+    /** 선택 변경 (sdUpdate) — [start, end]. `clearable` 로 지우면 `null` 이 온다 */
     onValueChange?: (range: SDateRangeValue) => void;
     /** 보이는 연·월 변경 (sdViewChange) */
     onViewChange?: (view: {
@@ -24,13 +25,49 @@ export interface SDateRangePickerProps {
      * 시간(시:분) 선택 푸터 사용 여부.
      * true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시된다.
      */
-    useTimePicker?: boolean;
+    showTimePicker?: boolean;
     disabled?: boolean;
-    width?: number | string;
+    /**
+     * 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다.
+     *
+     * **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다.
+     * `SDatePicker` · `STimePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다.
+     */
+    clearable?: boolean;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
+    /**
+     * 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`YYYY-MM-DD ~ YYYY-MM-DD`)에
+     * 맞춘 내장 상한(`size='md'` → `xl`, `'sm'` → `lg`)이 걸려, `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;
@@ -48,7 +85,7 @@ export interface SRangeCalendarProps {
     value: SDateRangeValue;
     selectable?: [string, string];
     maxRange?: number;
-    useTimePicker?: boolean;
+    showTimePicker?: boolean;
     onSelect: (r: [string, string]) => void;
     /** 시작일만 선택된(종료일 대기) 상태를 상위로 전달 — 트리거에 `start ~` 프리뷰 표시용 */
     onPendingStartChange?: (start: string | null) => void;
@@ -59,6 +96,6 @@ export interface SRangeCalendarProps {
 }
 /** RangeCalendar — SDateRangePicker의 캘린더 부분만 떼어낸 조각. 자체 트리거/팝오버 없이
  *  캘린더 그리드만 필요한 커스텀 조합(예: 다른 트리거에 팝오버로 얹는 경우)에 재사용한다. */
-export declare function RangeCalendar({ value, selectable, maxRange, useTimePicker, onSelect, onPendingStartChange, onViewChange, }: SRangeCalendarProps): import("react").JSX.Element;
+export declare function RangeCalendar({ value, selectable, maxRange, showTimePicker, onSelect, onPendingStartChange, onViewChange, }: SRangeCalendarProps): import("react").JSX.Element;
 /** SDateRangePicker — sd-date-range-picker 포팅. SField + SPopover(범위 캘린더). */
-export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, useTimePicker, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;
+export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, showTimePicker, disabled, clearable, width, maxWidth, name, rules, status, label, labelPosition, subLabel, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;

package/dist/components/SDivider/README.md

@@ -9,13 +9,17 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `vertical?` | `boolean` | `false` | true면 수직 분할선, false면 수평 분할선 |
+| `height?` | `number \| string` | — | 수직 분할선의 길이. 숫자는 px, 문자열은 CSS 값(토큰 var 참조 등)으로 쓴다. 주지 않으면 `align-self: stretch` 로 부모 줄 높이를 그대로 채운다. 값을 주면 그 높이로 고정하고 교차축 가운데(`self-center`)에 맞춘다 — `align-self: stretch` 는 높이가 auto 일 때만 늘리므로, 높이를 정하는 순간 정렬을 함께 정해야 한다. 그래서 높이는 `className="h-*"` 가 아니라 이 prop 으로 준다. 수평 분할선에는 적용되지 않는다 (두께는 1px 로 고정). |
 
 ## Dependencies
 
 ### Used by
 
  - [SCalendar](../SCalendar)
+ - [SCalendarBoard](../SCalendarBoard)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SList](../SList)
+ - [STable](../STable)
  - [STableBar](../STableBar)
 
 ### Graph
@@ -23,7 +27,10 @@
 ```mermaid
 graph TD;
   SCalendar --> SDivider
+  SCalendarBoard --> SDivider
   SDateRangePicker --> SDivider
+  SList --> SDivider
+  STable --> SDivider
   STableBar --> SDivider
   style SDivider fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SDivider/SDivider.d.ts

@@ -2,6 +2,17 @@ import { type HTMLAttributes } from 'react';
 export interface SDividerProps extends HTMLAttributes<HTMLHRElement> {
     /** true면 수직 분할선, false면 수평 분할선 */
     vertical?: boolean;
+    /**
+     * 수직 분할선의 길이. 숫자는 px, 문자열은 CSS 값(토큰 var 참조 등)으로 쓴다.
+     *
+     * 주지 않으면 `align-self: stretch` 로 부모 줄 높이를 그대로 채운다. 값을 주면
+     * 그 높이로 고정하고 교차축 가운데(`self-center`)에 맞춘다 — `align-self: stretch`
+     * 는 높이가 auto 일 때만 늘리므로, 높이를 정하는 순간 정렬을 함께 정해야 한다.
+     * 그래서 높이는 `className="h-*"` 가 아니라 이 prop 으로 준다.
+     *
+     * 수평 분할선에는 적용되지 않는다 (두께는 1px 로 고정).
+     */
+    height?: number | string;
 }
 /** SDivider — sd-divider 포팅. 색상은 `--sys-color-divider-default`. */
 export declare const SDivider: import("react").ForwardRefExoticComponent<SDividerProps & import("react").RefAttributes<HTMLHRElement>>;

package/dist/components/SDonutChart/README.md

@@ -0,0 +1,105 @@
+# SDonutChart
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDonutChart
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `SDonutChartSlice[]` | — | 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 |
+| `title?` | `string` | — | 차트 제목 — 왼쪽 위에 놓인다 |
+| `unit?` | `string` | — | 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 |
+| `palette?` | `SDonutChartPalette` | `'multi'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
+| `colors?` | `SDonutChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 |
+| `showValueLabel?` | `boolean` | `false` | 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 |
+| `showLegend?` | `boolean` | `true` | 범례를 보인다 |
+| `legendPosition?` | `SDonutChartLegendPosition` | `'top'` | 범례 위치 |
+| `legendVariant?` | `SDonutChartLegendVariant` | `'simple'` | 범례 모양. `simple` 이름만 가로로 · `default` 이름+값을 세로로 쌓는 목록 |
+| `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
+| `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
+| `tooltipFooter?` | `(slice: SDonutChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
+| `className?` | `string` | — | 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSliceClick` | `(slice: SDonutChartSlicePoint) => void` | 조각을 눌렀을 때 |
+
+## Types
+
+### SDonutChartSlice
+
+```ts
+/** 조각 하나 — 범례 한 줄에 대응한다. */
+export interface SDonutChartSlice {
+  /** 범례·툴팁에 표시할 이름 */
+  name: string;
+  /** 값. 0·음수는 그리지 않는다 — 원은 전체에 대한 몫만 나타낼 수 있다 */
+  value: number;
+}
+```
+
+### SDonutChartPalette
+
+```ts
+/**
+ * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로 — 조각을 큰 순으로 줄 때
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SDonutChartPalette = 'multi' | 'gradation' | 'custom';
+```
+
+### SDonutChartColor
+
+```ts
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SDonutChartColor =
+  | 'positivePrimary'
+  | 'positiveSecondary'
+  | 'negativePrimary'
+  | 'negativeSecondary'
+  | 'neutralPrimary'
+  | 'neutralSecondary';
+```
+
+### SDonutChartLegendPosition
+
+```ts
+/** 범례 위치. */
+export type SDonutChartLegendPosition = 'top' | 'bottom';
+```
+
+### SDonutChartLegendVariant
+
+```ts
+/**
+ * 범례 모양.
+ * - `simple` 이름만 가로로 나열한다 (값 없음)
+ * - `default` 이름 뒤에 값을 적어 세로로 쌓는 목록이다
+ */
+export type SDonutChartLegendVariant = 'simple' | 'default';
+```
+
+### SDonutChartSlicePoint
+
+```ts
+/** 클릭이 가리키는 조각. */
+export interface SDonutChartSlicePoint {
+  /** `data` 안에서의 인덱스 */
+  index: number;
+  name: string;
+  value: number;
+  /** 그려진 조각 전체의 합에 대한 몫(0~1) */
+  ratio: number;
+}
+```
+

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

@@ -0,0 +1,82 @@
+import { type CSSProperties, type ReactNode } from 'react';
+/** 범례 위치. */
+export type SDonutChartLegendPosition = 'top' | 'bottom';
+/**
+ * 범례 모양.
+ * - `simple` 이름만 가로로 나열한다 (값 없음)
+ * - `default` 이름 뒤에 값을 적어 세로로 쌓는 목록이다
+ */
+export type SDonutChartLegendVariant = 'simple' | 'default';
+/**
+ * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로 — 조각을 큰 순으로 줄 때
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SDonutChartPalette = 'multi' | 'gradation' | 'custom';
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SDonutChartColor = 'positivePrimary' | 'positiveSecondary' | 'negativePrimary' | 'negativeSecondary' | 'neutralPrimary' | 'neutralSecondary';
+/** 조각 하나 — 범례 한 줄에 대응한다. */
+export interface SDonutChartSlice {
+    /** 범례·툴팁에 표시할 이름 */
+    name: string;
+    /** 값. 0·음수는 그리지 않는다 — 원은 전체에 대한 몫만 나타낼 수 있다 */
+    value: number;
+}
+/** 클릭이 가리키는 조각. */
+export interface SDonutChartSlicePoint {
+    /** `data` 안에서의 인덱스 */
+    index: number;
+    name: string;
+    value: number;
+    /** 그려진 조각 전체의 합에 대한 몫(0~1) */
+    ratio: number;
+}
+export interface SDonutChartProps {
+    /** 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 */
+    data: SDonutChartSlice[];
+    /** 차트 제목 — 왼쪽 위에 놓인다 */
+    title?: string;
+    /** 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 */
+    unit?: string;
+    /** 색 팔레트. `custom` 일 때만 `colors` 를 본다 */
+    palette?: SDonutChartPalette;
+    /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */
+    colors?: SDonutChartColor[];
+    /** 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 */
+    showValueLabel?: boolean;
+    /** 범례를 보인다 */
+    showLegend?: boolean;
+    /** 범례 위치 */
+    legendPosition?: SDonutChartLegendPosition;
+    /** 범례 모양. `simple` 이름만 가로로 · `default` 이름+값을 세로로 쌓는 목록 */
+    legendVariant?: SDonutChartLegendVariant;
+    /** 조각에 마우스를 올리면 값 상자를 띄운다 */
+    showTooltip?: boolean;
+    /** 값 표시 형식 */
+    formatValue?: (value: number) => string;
+    /** 조각을 눌렀을 때 */
+    onSliceClick?: (slice: SDonutChartSlicePoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락
+     * (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (slice: SDonutChartSlicePoint) => ReactNode;
+    /** 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 */
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SDonutChart — 도넛 그래프.
+ *
+ * 가운데가 빈 원그래프. `SPieChart` 와 같이 **한 시점의 전체를 몫으로 나눈 것**을 보여준다.
+ * 가운데 구멍에는 글자를 두지 않는다 — 합계 같은 값은 차트 바깥에 적는다.
+ * 조각이 대여섯 개를 넘거나 몫끼리 견주는 것이 목적이면 `SBarChart` 가 맞다.
+ *
+ * 폭은 부모를 따르고(기본 100%), 그림은 그 폭을 한 변으로 하는 정사각형이다.
+ * 구멍과 고리 두께도 폭에 비례해 늘고 준다.
+ */
+export declare const SDonutChart: import("react").ForwardRefExoticComponent<SDonutChartProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { SDonutChart, type SDonutChartProps, type SDonutChartSlice, type SDonutChartSlicePoint, type SDonutChartPalette, type SDonutChartColor, type SDonutChartLegendPosition, } from './SDonutChart';