sellmate-design-system-react 9.0.0-beta.7 → 9.0.0-beta.71

package/dist/components/SBarChart/README.md

@@ -0,0 +1,122 @@
+# SBarChart
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SBarChart
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `categories` | `string[]` | — | 가로축(가로 막대면 세로축)에 놓일 항목 이름 |
+| `series` | `SBarChartSeries[]` | — | 계열 목록. 각 `data` 는 `categories` 와 같은 순서다 |
+| `title?` | `string` | — | 차트 제목 — 왼쪽 위에 놓인다 |
+| `unit?` | `string` | — | 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 |
+| `direction?` | `SBarChartDirection` | `'vertical'` | 막대가 자라는 방향 |
+| `stacked?` | `boolean` | `false` | 계열을 나란히 놓는 대신 **한 막대에 쌓는다**. 항목의 크기와 그 안의 구성을 함께 볼 때 쓴다. 첫 계열이 기준선에 붙고, 값 라벨은 조각마다가 아니라 **항목의 합계**를 한 번 적는다. 음수는 0 아래로 따로 쌓이며, 값 축도 개별 값이 아닌 항목별 합계로 잡힌다 |
+| `palette?` | `SBarChartPalette` | `'default'` | 색 팔레트. 계열이 하나면 계열 대신 **항목**마다 색이 바뀐다. `custom` 일 때만 `colors` 를 본다 |
+| `colors?` | `SBarChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 계열 순서대로. 계열보다 짧으면 앞에서부터 순환한다 |
+| `max?` | `number` | — | 값 축의 최댓값. 주지 않으면 데이터에서 읽기 좋은 값으로 정한다 |
+| `tickCount?` | `number` | `8` | 값 축 눈금 개수 |
+| `barSize?` | `number` | `BAR_SIZE_MAX` | 막대 두께 상한(px, 24~80). 낮추면 좌우 여백 상한도 같은 비율로 따라 내려온다 |
+| `showValueLabel?` | `boolean` | `true` | 막대마다 값을 적는다 |
+| `showLegend?` | `boolean` | `true` | 범례를 보인다 |
+| `legendPosition?` | `SBarChartLegendPosition` | `'top'` | 범례 위치 |
+| `showTooltip?` | `boolean` | `true` | 막대에 마우스를 올리면 값 상자를 띄운다 |
+| `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
+| `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SBarChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onBarClick` | `(point: SBarChartPoint) => void` | 막대를 눌렀을 때 |
+
+## Types
+
+### SBarChartSeries
+
+```ts
+/** 한 계열 — 범례 한 줄에 대응한다. */
+export interface SBarChartSeries {
+  /** 범례·툴팁에 표시할 이름 */
+  name: string;
+  /** `categories` 와 같은 순서의 값. 짧으면 남는 항목은 막대를 그리지 않는다 */
+  data: number[];
+}
+```
+
+### SBarChartDirection
+
+```ts
+/** 막대가 자라는 방향. */
+export type SBarChartDirection = 'vertical' | 'horizontal';
+```
+
+### SBarChartPalette
+
+```ts
+/**
+ * 색 팔레트.
+ * - `default` 파랑 한 색. 계열이 하나거나 색으로 나눌 것이 없을 때
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SBarChartPalette = 'default' | 'multi' | 'gradation' | 'custom';
+```
+
+### SBarChartColor
+
+```ts
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SBarChartColor =
+  | 'positivePrimary'
+  | 'positiveSecondary'
+  | 'negativePrimary'
+  | 'negativeSecondary'
+  | 'neutralPrimary'
+  | 'neutralSecondary';
+```
+
+### SBarChartLegendPosition
+
+```ts
+/** 범례 위치. */
+export type SBarChartLegendPosition = 'top' | 'bottom';
+```
+
+### SBarChartPoint
+
+```ts
+/** 툴팁·클릭이 가리키는 지점. */
+export interface SBarChartPoint {
+  /** 계열 인덱스 */
+  seriesIndex: number;
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 그 지점의 값 */
+  value: number;
+}
+```
+
+### SBarChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SBarChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다 */
+  points: SBarChartPoint[];
+}
+```
+

package/dist/components/SBarChart/SBarChart.d.ts

@@ -0,0 +1,99 @@
+import { type CSSProperties, type ReactNode } from 'react';
+/** 막대가 자라는 방향. */
+export type SBarChartDirection = 'vertical' | 'horizontal';
+/** 범례 위치. */
+export type SBarChartLegendPosition = 'top' | 'bottom';
+/**
+ * 색 팔레트.
+ * - `default` 파랑 한 색. 계열이 하나거나 색으로 나눌 것이 없을 때
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SBarChartPalette = 'default' | 'multi' | 'gradation' | 'custom';
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SBarChartColor = 'positivePrimary' | 'positiveSecondary' | 'negativePrimary' | 'negativeSecondary' | 'neutralPrimary' | 'neutralSecondary';
+/** 툴팁·클릭이 가리키는 지점. */
+export interface SBarChartPoint {
+    /** 계열 인덱스 */
+    seriesIndex: number;
+    /** 카테고리 인덱스 */
+    categoryIndex: number;
+    /** 그 지점의 값 */
+    value: number;
+}
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SBarChartTooltipCategory {
+    /** 카테고리 인덱스 */
+    categoryIndex: number;
+    /** 카테고리 이름 */
+    name: string;
+    /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다 */
+    points: SBarChartPoint[];
+}
+/** 한 계열 — 범례 한 줄에 대응한다. */
+export interface SBarChartSeries {
+    /** 범례·툴팁에 표시할 이름 */
+    name: string;
+    /** `categories` 와 같은 순서의 값. 짧으면 남는 항목은 막대를 그리지 않는다 */
+    data: number[];
+}
+export interface SBarChartProps {
+    /** 가로축(가로 막대면 세로축)에 놓일 항목 이름 */
+    categories: string[];
+    /** 계열 목록. 각 `data` 는 `categories` 와 같은 순서다 */
+    series: SBarChartSeries[];
+    /** 차트 제목 — 왼쪽 위에 놓인다 */
+    title?: string;
+    /** 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 */
+    unit?: string;
+    /** 막대가 자라는 방향 */
+    direction?: SBarChartDirection;
+    /**
+     * 계열을 나란히 놓는 대신 **한 막대에 쌓는다**. 항목의 크기와 그 안의 구성을 함께 볼 때 쓴다.
+     * 첫 계열이 기준선에 붙고, 값 라벨은 조각마다가 아니라 **항목의 합계**를 한 번 적는다.
+     * 음수는 0 아래로 따로 쌓이며, 값 축도 개별 값이 아닌 항목별 합계로 잡힌다
+     */
+    stacked?: boolean;
+    /** 색 팔레트. 계열이 하나면 계열 대신 **항목**마다 색이 바뀐다. `custom` 일 때만 `colors` 를 본다 */
+    palette?: SBarChartPalette;
+    /** `palette='custom'` 에서 쓸 색 이름을 계열 순서대로. 계열보다 짧으면 앞에서부터 순환한다 */
+    colors?: SBarChartColor[];
+    /** 값 축의 최댓값. 주지 않으면 데이터에서 읽기 좋은 값으로 정한다 */
+    max?: number;
+    /** 값 축 눈금 개수 */
+    tickCount?: number;
+    /** 막대 두께 상한(px, 24~80). 낮추면 좌우 여백 상한도 같은 비율로 따라 내려온다 */
+    barSize?: number;
+    /** 막대마다 값을 적는다 */
+    showValueLabel?: boolean;
+    /** 범례를 보인다 */
+    showLegend?: boolean;
+    /** 범례 위치 */
+    legendPosition?: SBarChartLegendPosition;
+    /** 막대에 마우스를 올리면 값 상자를 띄운다 */
+    showTooltip?: boolean;
+    /** 값 표시 형식 */
+    formatValue?: (value: number) => string;
+    /** 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 */
+    height?: number | string;
+    /** 막대를 눌렀을 때 */
+    onBarClick?: (point: SBarChartPoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락
+     * (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (category: SBarChartTooltipCategory) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SBarChart — 막대 그래프.
+ *
+ * 값은 항상 0 에서 자란다. 음수가 있으면 기준선이 축 가운데로 내려오고 막대가
+ * 아래(또는 왼쪽)로 자란다.
+ */
+export declare const SBarChart: import("react").ForwardRefExoticComponent<SBarChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SBarChart/barChart.config.d.ts

@@ -0,0 +1,85 @@
+/**
+ * SBarChart 의 치수·색 상수와 막대 배치 계산.
+ */
+import { AXIS_EDGE_PADDING } from '../../lib/chart/cartesian';
+export { AXIS_EDGE_PADDING };
+/**
+ * 막대 두께 하한(px) — 시안 `bar width min : 24`.
+ * 이보다 얇아지지 않는다. 카테고리가 너무 많으면 막대가 겹치는데, 그건
+ * "얇아서 못 읽는 그래프"보다 낫다는 디자인 판단이다(그때는 가로 막대를 쓴다).
+ */
+export declare const BAR_SIZE_MIN = 24;
+/** 막대 두께 상한(px) — 시안 `bar width max : 80`. 자리가 남으면 여기까지 두꺼워진다. */
+export declare const BAR_SIZE_MAX = 80;
+/** 한 카테고리 안, 계열 막대 사이 간격(px) — 시안 `bar gap : 6 (fixed)`. */
+export declare const BAR_GAP = 6;
+/** 막대 묶음 좌우 여백의 하한(px) — 시안 `bar group paddingX min : 8`. */
+export declare const GROUP_PADDING_MIN = 8;
+/** 막대 묶음 좌우 여백의 상한(px) — 시안 `bar group paddingX max : 24`. */
+export declare const GROUP_PADDING_MAX = 24;
+/**
+ * 막대 끝과 값 라벨 사이 간격(px) — 토큰 `chart.dataLabel.gap`(점·막대 ↔ 값 라벨).
+ * 라벨 자리를 좌표로 잡으므로 `var()` 가 아니라 같은 값을 손으로 맞춰 둔다.
+ */
+export declare const VALUE_LABEL_GAP = 4;
+/**
+ * 막대 모서리 반경(px). SVG 경로를 좌표로 계산하므로 `var(--cmp-chart-bar-radius)`
+ * 문자열이 아니라 **숫자**여야 한다 — 시안의 clipPath 도 같은 이유로 8 을 좌표에
+ * 박아 두고 있다. 토큰(`chart.bar.radius`)과 같은 값을 손으로 맞춰 둔 유일한 자리다.
+ */
+export declare const BAR_RADIUS = 8;
+/**
+ * 기본 불투명도는 막대만의 값이 아니라 차트 공용(`chart.opacity.default`)이다 —
+ * 도넛·파이도 같은 값을 쓴다. 흐려진 상태만 막대 고유(`chart.bar.opacity.dimmed`)다.
+ */
+export declare const BAR_OPACITY_DEFAULT = "var(--cmp-chart-opacity-default)";
+export declare const BAR_OPACITY_DIMMED = "var(--cmp-chart-bar-opacity-dimmed)";
+/**
+ * 호버한 항목의 막대 — 완전히 불투명하다.
+ *
+ * `--opacity-*` 스케일에 100% 가 없다. "투명하지 않음"은 값이 아니라 값의 부재라
+ * 디자인 토큰으로 두지 않는 쪽이 맞으므로, 여기서는 토큰 대신 1 을 쓴다.
+ */
+export declare const BAR_OPACITY_HOVER = 1;
+export declare const BAR_DATA_LABEL_COLOR = "var(--cmp-chart-dataLabel-color-default)";
+/**
+ * 값 라벨의 타이포 — 호버한 항목만 굵고 크게 뜬다.
+ *
+ * 타이포 토큰은 `--cmp-*` 변수로 나오지 않고 `.typo-*` 유틸로만 나오므로,
+ * `chart.dataLabel.typography.default`(`body.sm.medium`) ·
+ * `.hover`(`body.md.bold`) 에 대응하는 클래스를 여기서 짝지어 둔다.
+ */
+export declare const BAR_DATA_LABEL_TYPO = "typo-body-sm-medium";
+export declare const BAR_DATA_LABEL_TYPO_HOVER = "typo-body-md-bold";
+export interface BandLayout {
+    /** 카테고리 하나가 차지하는 폭(px) */
+    band: number;
+    /** 막대 하나의 두께(px) */
+    bar: number;
+    /** 계열 막대 묶음 전체의 두께(px) */
+    group: number;
+    /** 묶음 좌우로 실제로 남은 여백(px) */
+    padding: number;
+    /** 카테고리가 적어 band 가 상한에 걸렸을 때, 막대 전체를 가운데로 미는 거리(px) */
+    offset: number;
+}
+/**
+ * 축을 카테고리 수만큼 균등하게 나누고(band), 그 가운데에 계열 막대를 모아 놓는다.
+ *
+ * band 중앙 정렬이라 카테고리 라벨도 같은 비율로 놓으면 자동으로 막대 위에 온다 —
+ * 라벨과 막대의 정렬을 따로 맞출 필요가 없다.
+ *
+ * **두께와 여백은 한 손잡이로 함께 움직인다.** 막대 하나가 차지할 자리는 최소
+ * `8+24+8`(=40px)에서 최대 `24+80+24`(=128px)까지 늘어나는데, 그 사이 어디에 있든
+ * 두께와 여백이 같은 비율(`t`)로 커진다. 여백만 8인 채 두께가 80이 되는 조합은 없다.
+ *
+ *     bar     = 24 + 56·t
+ *     padding =  8 + 16·t     (t ∈ [0, 1])
+ *
+ * 자리가 최소보다 좁으면 `t=0` 에서 멈춘다 — 더 얇아지는 대신 호출 쪽이 스크롤을
+ * 만든다. 반대로 자리가 남으면 `t=1` 에서 멈추고 남는 폭은 `offset` 으로 가운데 모은다.
+ *
+ * 양끝 `AXIS_EDGE_PADDING` 은 band 가 나눠 갖기 전에 먼저 떼어 둔다 — band 안의
+ * `padding` 과 달리 카테고리 수·두께와 무관하게 항상 그대로 남아야 한다.
+ */
+export declare function bandLayout(size: number, categoryCount: number, seriesCount: number, barSizeMax?: number): BandLayout;

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

@@ -0,0 +1,2 @@
+export { SBarChart, type SBarChartProps, type SBarChartSeries, type SBarChartPoint, type SBarChartTooltipCategory, type SBarChartPalette, type SBarChartColor, type SBarChartDirection, type SBarChartLegendPosition, } from './SBarChart';
+export { BAR_SIZE_MIN, BAR_SIZE_MAX, BAR_GAP } from './barChart.config';

package/dist/components/SBarcodeInput/README.md

@@ -18,13 +18,14 @@
 | `readOnly?` | `boolean` | `false` |  |
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
-| `focused?` | `boolean` | — |  |
-| `hovered?` | `boolean` | — |  |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `prefix?` | `ReactNode` | — | 입력 앞 슬롯 |
 | `suffix?` | `ReactNode` | — | 입력 뒤 슬롯 |
-| `inputClass?` | `string` | — |  |
+| `inputClassName?` | `string` | — |  |
 | `inputStyle?` | `CSSProperties` | — |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |
@@ -35,7 +36,7 @@
 | `hint?` | `string` | — |  |
 | `error?` | `boolean` | — |  |
 | `errorMessage?` | `string` | — |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리며 `maxLength`(= 스키마 상한)로 고른다. 상한이 `xl` 을 넘거나 상한이 없으면 `"100%"`. (`sellmate/field-width-grade` 가 검사한다) |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -47,6 +48,14 @@
 | `onFocus` | `() => void` |  |
 | `onBlur` | `() => void` |  |
 
+## Types
+
+### SBarcodeInputSize
+
+```ts
+export type SBarcodeInputSize = SFieldSize;
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SBarcodeInput/SBarcodeInput.d.ts

@@ -1,9 +1,10 @@
 import { 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';
 import { type STooltipProps } from '../STooltip';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SBarcodeInputSize = SFieldSize;
 export interface SBarcodeInputProps {
     value?: string | number | null;
@@ -20,15 +21,24 @@ export interface SBarcodeInputProps {
     readOnly?: boolean;
     rules?: Rule[];
     status?: SFieldStatus;
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
     focused?: boolean;
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
     hovered?: boolean;
     /** 입력 앞 슬롯 */
     prefix?: ReactNode;
     /** 입력 뒤 슬롯 */
     suffix?: ReactNode;
-    inputClass?: string;
+    inputClassName?: string;
     inputStyle?: CSSProperties;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -39,7 +49,12 @@ export interface SBarcodeInputProps {
     hint?: string;
     error?: boolean;
     errorMessage?: string;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리며 `maxLength`(= 스키마 상한)로 고른다.
+     * 상한이 `xl` 을 넘거나 상한이 없으면 `"100%"`. (`sellmate/field-width-grade` 가 검사한다)
+     */
+    width?: SFieldWidth;
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SButton/README.md

@@ -15,15 +15,52 @@
 | `rightIcon?` | `SIconName` | — | 레이블 오른쪽 아이콘 |
 | `label?` | `string` | — | 버튼 텍스트 (문자열만 — 아이콘은 icon/rightIcon 사용) |
 
+## Types
+
+### SButtonColor
+
+```ts
+export type SButtonColor = (typeof BUTTON_COLORS)[number];
+```
+
+### SButtonSize
+
+```ts
+export type SButtonSize = (typeof BUTTON_SIZES)[number];
+```
+
+### BUTTON_COLORS
+
+```ts
+/**
+ * SButton 색상/사이즈 설정 — sd-button(component.button 토큰) 충실 포팅.
+ * Stencil `name`(예: primary_sm)의 preset을 color + outline(boolean) + size 로 분리.
+ *  - primary / danger : solid·outline 모두 지원
+ *  - secondary        : solid 전용 (outline 스타일 없음 → outline 무시)
+ *  - neutral          : 흰 배경 고정, outline 은 회색 테두리만 추가(solid = 테두리 없는 흰 버튼)
+ * 색상은 theme.css의 `--cmp-button-*` CSS 변수를 참조한다.
+ */
+export const BUTTON_COLORS = ['primary', 'secondary', 'neutral', 'danger'] as const;
+```
+
+### BUTTON_SIZES
+
+```ts
+export const BUTTON_SIZES = ['xs', 'sm', 'md', 'lg'] as const;
+```
+
 ## Dependencies
 
 ### Used by
 
+ - [SCalendarBoard](../SCalendarBoard)
  - [SConfirmModal](../SConfirmModal)
  - [SDropdownButton](../SDropdownButton)
+ - [SEditor](../SEditor)
  - [SFooter](../SFooter)
  - [SKeyValueTable](../SKeyValueTable)
  - [SLoadingModal](../SLoadingModal)
+ - [SLoginCard](../SLoginCard)
  - [SPopover](../SPopover)
  - [SToast](../SToast)
 
@@ -36,11 +73,14 @@
 ```mermaid
 graph TD;
   SButton --> SIcon
+  SCalendarBoard --> SButton
   SConfirmModal --> SButton
   SDropdownButton --> SButton
+  SEditor --> SButton
   SFooter --> SButton
   SKeyValueTable --> SButton
   SLoadingModal --> SButton
+  SLoginCard --> SButton
   SPopover --> SButton
   SToast --> SButton
   style SButton fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SCalendar/README.md

@@ -22,6 +22,19 @@
 | `onValueChange` | `(date: string) => void` | 선택 변경 (sdUpdate) |
 | `onViewChange` | `(v: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
+## Types
+
+### SCalendarEventGroup
+
+```ts
+export interface SCalendarEventGroup {
+  /** 도트 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
+  color: SColor;
+  label: string;
+  dates: string[];
+}
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SCalendarBoard/CalendarDayCard.d.ts

@@ -0,0 +1,53 @@
+import { type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
+import type { CalendarBoardSegment } from './calendar-board-layout';
+import { type SCalendarBoardDayColor } from './calendarBoard.config';
+import type { SCalendarBoardEvent } from './types';
+/**
+ * 달력의 날짜 한 칸 (SCalendarBoard 내부 조립 요소).
+ * 위에 날짜 숫자가 서고, 그 아래로 일정 막대가 줄 단위로 얹힌다.
+ * `body` 를 받은 칸은 아래를 통째로 그것에 내준다 — 일정은 그리지 않는다.
+ */
+export declare const CalendarDayCard: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** YYYY-MM-DD */
+    date: string;
+    /** 1-31 */
+    day: number;
+    /** 보고 있는 달에 속한 날짜인지 */
+    inCurrentMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+    /** 칸을 눌러 고를 수 있는지 */
+    selectable: boolean;
+    /** 칸 배경 */
+    color: SCalendarBoardDayColor;
+    /**
+     * **이 칸에서 시작하는** 일정 막대. 여러 날에 걸친 일정은 시작 칸이 그리고 오른쪽 칸 위로 뻗는다 —
+     * 지나가는 칸은 자기 줄을 비워 두므로(배치 계산이 이미 잡아 둔다) 겹치지 않는다.
+     */
+    segments: CalendarBoardSegment[];
+    /** 이 날짜에 걸친 일정 수 — 하나라도 있으면 칸을 눌러 목록 판을 열 수 있다 */
+    dayEventCount: number;
+    /**
+     * 일정 자리를 대신 차지할 칸 본문 (SCalendarBoard 의 `dayContent`).
+     * 주면 일정·"더보기" 를 그리지 않는다. `content` 는 HTMLAttributes 가 이미 쓰는 이름이라 피했다.
+     */
+    body?: ReactNode;
+    /** 접혀 있는 일정 수. 0 이면 "더보기" 를 그리지 않는다 */
+    hiddenCount: number;
+    /** "더보기" 가 앉는 줄. 접힌 것이 없는 주는 -1 */
+    moreLane: number;
+    /** "더보기" 자리를 집중된 일정에 내줬는지 — 내준 칸은 "더보기" 를 그리지 않는다 */
+    moreReplaced: boolean;
+    /**
+     * 집중할 일정의 `id` (SCalendarBoard 의 `focusedEventId`).
+     * 주면 그 일정만 또렷하게 남고 이 칸의 나머지 일정과 "더보기" 는 흐려진다.
+     */
+    focusedEventId?: string | null;
+    /** 이 칸의 일정 목록 판이 열려 있는지 */
+    isOpen: boolean;
+    moreLabel?: string;
+    onDaySelect?: (date: string) => void;
+    onEventClick?: (event: SCalendarBoardEvent, e: MouseEvent<HTMLButtonElement>) => void;
+    /** 일정 목록 판 열기 — 칸 자체를 눌렀을 때와 "더보기" 를 눌렀을 때 모두 여기로 온다 */
+    onOpenEvents?: () => void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SCalendarBoard/CalendarDayEventListBox.d.ts

@@ -0,0 +1,26 @@
+import { type MouseEvent } from 'react';
+import type { SCalendarBoardEvent } from './types';
+/**
+ * 한 날짜의 일정을 전부 펼쳐 보여주는 목록 판 (SCalendarBoard 내부 조립 요소).
+ * 칸을 누르거나 "N개 더보기" 를 누르면 **그 날짜 칸을 덮은 채** 좌·상으로 아웃덴트만큼 빠져나와 뜬다 —
+ * 칸에서 자라난 것처럼 보이게 하기 위함이다. 위치와 최소 높이는 SCalendarBoard 가 정하고,
+ * 그보다 내용이 길면 자라다 상한에서 멈춘다.
+ */
+export declare function CalendarDayEventListBox({ date, events, onEventClick, minWidth, minHeight, onClose, closeLabel, }: {
+    /** YYYY-MM-DD */
+    date: string;
+    /**
+     * 판이 적어도 이만큼은 넓어야 한다(px) — 덮는 칸 너비 + 좌·우 아웃덴트가 온다.
+     * 내용이 넓으면 글자가 잘리지 않게 여기서부터 자란다. 칸을 못 쟀으면 내용 너비를 따른다.
+     */
+    minWidth?: number;
+    /**
+     * 판이 적어도 이만큼은 높아야 한다(px) — 덮는 칸 높이 + 상·하 아웃덴트가 온다.
+     * 내용이 이보다 짧아도 칸을 딱 감싸는 모양이 유지된다. 칸을 못 쟀으면 내용 높이를 따른다.
+     */
+    minHeight?: number;
+    events: SCalendarBoardEvent[];
+    onEventClick?: (event: SCalendarBoardEvent, e: MouseEvent<HTMLButtonElement>) => void;
+    onClose?: () => void;
+    closeLabel?: string;
+}): import("react").JSX.Element;

package/dist/components/SCalendarBoard/CalendarEventButton.d.ts

@@ -0,0 +1,20 @@
+import { type CSSProperties, type MouseEvent } from 'react';
+import type { SCalendarBoardEvent } from './types';
+/**
+ * 달력 칸/패널 안의 일정 한 줄 (SCalendarBoard 내부 조립 요소).
+ *
+ * 점 → 레이블(강조) → 설명 → `/` → 값 순서로 한 줄에 눕는다.
+ * 가운데 레이블 묶음만 줄어들고 값은 끝에 고정되므로, 좁은 칸에서도 금액이 잘리지 않는다.
+ */
+export declare function CalendarEventButton({ event, onSelect, flatStart, flatEnd, dimmed, className, style, }: {
+    event: SCalendarBoardEvent;
+    onSelect?: (event: SCalendarBoardEvent, e: MouseEvent<HTMLButtonElement>) => void;
+    /** 왼쪽 끝이 잘린 조각 — 앞 주에서 이어지므로 모서리를 평평하게 한다 */
+    flatStart?: boolean;
+    /** 오른쪽 끝이 잘린 조각 — 다음 주로 이어진다 */
+    flatEnd?: boolean;
+    /** 다른 일정에 집중하는 동안 물러나 있다 — 흐려질 뿐 계속 눌린다 */
+    dimmed?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;

package/dist/components/SCalendarBoard/CalendarMoreButton.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type MouseEvent } from 'react';
+/**
+ * 칸에 다 담기지 않은 일정 수를 알리는 "N개 더보기" 줄 (SCalendarBoard 내부 조립 요소).
+ * 개수는 강조색, 뒷말은 본문색으로 갈라 개수가 먼저 읽히게 한다.
+ */
+export declare const CalendarMoreButton: import("react").ForwardRefExoticComponent<{
+    count: number;
+    /** 개수 뒤에 붙는 말 */
+    label?: string;
+    /**
+     * 어느 일정에 집중하는 동안 물러나 있다. 여기 남아 있다는 것은 접힌 것 중에
+     * 집중 대상이 없다는 뜻이라(있었다면 이 자리를 내줬다) 함께 흐려진다.
+     */
+    dimmed?: boolean;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    style?: CSSProperties;
+} & import("react").RefAttributes<HTMLButtonElement>>;