sellmate-design-system-react 9.0.0-beta.11 → 9.0.0-beta.112

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

@@ -13,18 +13,20 @@
 | `clearable?` | `boolean` | `false` |  |
 | `autoFocus?` | `boolean` | — |  |
 | `name?` | `string` | — |  |
-| `placeholder?` | `string` | `'입력해 주세요.'` |  |
+| `placeholder?` | `string` | — | 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "입력해 주세요.")를 쓴다 |
 | `disabled?` | `boolean` | `false` |  |
 | `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 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |
@@ -35,7 +37,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` | — |  |
 
@@ -43,7 +45,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: string) => void` | 값 변경 (sdUpdate) |
+| `onValueChange` | `(value: string) => void` | 값 변경 |
 | `onFocus` | `() => void` |  |
 | `onBlur` | `() => void` |  |
 
@@ -61,6 +63,7 @@ export type SBarcodeInputSize = SFieldSize;
 
 - [SField](../SField)
 - [SGhostButton](../SGhostButton)
+- [STag](../STag)
 
 ### Graph
 
@@ -68,5 +71,6 @@ export type SBarcodeInputSize = SFieldSize;
 graph TD;
   SBarcodeInput --> SField
   SBarcodeInput --> SGhostButton
+  SBarcodeInput --> STag
   style SBarcodeInput fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -1,13 +1,14 @@
 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;
-    /** 값 변경 (sdUpdate) */
+    /** 값 변경 */
     onValueChange?: (value: string) => void;
     onFocus?: () => void;
     onBlur?: () => void;
@@ -15,20 +16,37 @@ export interface SBarcodeInputProps {
     clearable?: boolean;
     autoFocus?: boolean;
     name?: string;
+    /** 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "입력해 주세요.")를 쓴다 */
     placeholder?: string;
     disabled?: boolean;
     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;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -39,9 +57,14 @@ 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;
 }
-/** SBarcodeInput — sd-barcode-input 포팅. 바코드용 노란 배경 입력 + prefix/suffix + clearable. */
+/** SBarcodeInput — 바코드용 노란 배경 입력 + prefix/suffix + clearable. */
 export declare const SBarcodeInput: import("react").ForwardRefExoticComponent<SBarcodeInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SButton/README.md

@@ -8,12 +8,15 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `color?` | `SButtonColor` | `'primary'` | 색상 — sd-button preset의 색 계열 |
-| `outline?` | `boolean` | `false` | 아웃라인(테두리) 스타일. primary·neutral·danger 만 지원 (secondary 는 무시) |
-| `size?` | `SButtonSize` | `'sm'` | 크기 |
+| `color?` | `SButtonColor` | `'primary'` | 색 계열. 액션의 의미가 정한다 — 주 액션 `primary`, 파괴적 액션 `danger`(AGENTS.md §3-5). `warning`·`caution`·`success` 는 디자인 시안이 그 의미의 색을 지정한 곳에만 쓴다. |
+| `tone?` | `SButtonTone` | `'default'` | 색의 강도. `default` 는 채움(solid) 그대로, `soft`·`tonal` 은 옅은 면 + 색 글자다(`tonal` 이 더 진하다). 디자인 시안이 지정한 곳에만 바꾼다. |
+| `outline?` | `boolean` | `false` | 아웃라인(테두리) 스타일. 모든 color·tone 에 적용된다 |
+| `size?` | `SButtonSize` | `'sm'` | 크기. 놓이는 위치가 정한다(AGENTS.md §3-5-2). `xxs` 는 본문 텍스트 사이에 끼워 서는 버튼 전용 — 높이가 본문 줄 높이와 같아 줄이 벌어지지 않는다. 버튼끼리 서는 자리에서는 `xs` 이상을 쓴다. |
 | `icon?` | `SIconName` | — | 레이블 왼쪽 아이콘 |
 | `rightIcon?` | `SIconName` | — | 레이블 오른쪽 아이콘 |
+| `iconColor?` | `SColor` | — | 아이콘 색(`icon`·`rightIcon` 모두). 팔레트 키(`grey_80`, `green_80` …) 또는 임의 CSS 색상. `color="neutral"` 에서만 적용된다 — 다른 색은 토큰이 아이콘 색을 정하므로 무시한다. `disabled` 면 비활성 색이 우선한다. |
 | `label?` | `string` | — | 버튼 텍스트 (문자열만 — 아이콘은 icon/rightIcon 사용) |
+| `shape?` | `SButtonShape` | `'square'` | 모서리 모양. 기본 `square` 는 따로 주지 않는다. `round`(더 둥근 모서리)는 디자인 시안이 지정한 곳에만, `pill`(알약)은 본문·목록 사이에 끼어 서는 **누르면 동작하는 작은 부가 버튼**(출처 배지·추천 질문)에만 쓴다 — 보통 `color="neutral" outline` 과 함께. 화면의 주 액션·폼 제출 버튼은 `square` 다. 값·필터 토큰이면 `SChip`, 누를 수 없는 표시면 `STag` 다. |
 
 ## Types
 
@@ -23,41 +26,74 @@
 export type SButtonColor = (typeof BUTTON_COLORS)[number];
 ```
 
+### SButtonTone
+
+```ts
+export type SButtonTone = (typeof BUTTON_TONES)[number];
+```
+
 ### SButtonSize
 
 ```ts
 export type SButtonSize = (typeof BUTTON_SIZES)[number];
 ```
 
+### SButtonShape
+
+```ts
+export type SButtonShape = (typeof BUTTON_SHAPES)[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 변수를 참조한다.
+ * SButton 색상/사이즈 설정 — component.button 토큰(`--cmp-button-*`)을 참조한다.
+ * 색은 color × tone × outline 세 축이다 (토큰 `button.<색>.tone.<default|soft|tonal>`).
+ *  - tone="default": 채움(strong)·outline. neutral 은 흰 버튼(solid)·회색 테두리(outline)
+ *  - tone="soft"·"tonal": 모든 색에서 옅은 면 + 색 글자. outline 이면 흰 면 + tone 색 테두리
  */
-export const BUTTON_COLORS = ['primary', 'secondary', 'neutral', 'danger'] as const;
+export const BUTTON_COLORS = [
+  'primary',
+  'secondary',
+  'neutral',
+  'danger',
+  'warning',
+  'caution',
+  'success',
+] as const;
+```
+
+### BUTTON_TONES
+
+```ts
+export const BUTTON_TONES = ['default', 'soft', 'tonal'] as const;
 ```
 
 ### BUTTON_SIZES
 
 ```ts
-export const BUTTON_SIZES = ['xs', 'sm', 'md', 'lg'] as const;
+export const BUTTON_SIZES = ['xxs', 'xs', 'sm', 'md', 'lg'] as const;
+```
+
+### BUTTON_SHAPES
+
+```ts
+export const BUTTON_SHAPES = ['square', 'round', 'pill'] 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)
 
@@ -70,11 +106,14 @@ export const BUTTON_SIZES = ['xs', 'sm', 'md', 'lg'] as const;
 ```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/SButton/SButton.d.ts

@@ -1,23 +1,46 @@
 import { type ButtonHTMLAttributes } from 'react';
+import { type SColor } from '../../lib/color';
 import { type SIconName } from '../SIcon';
-import { type SButtonColor, type SButtonSize } from './button.config';
+import { type SButtonColor, type SButtonShape, type SButtonSize, type SButtonTone } from './button.config';
 export interface SButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'children'> {
-    /** 색상 — sd-button preset의 색 계열 */
+    /**
+     * 색 계열. 액션의 의미가 정한다 — 주 액션 `primary`, 파괴적 액션 `danger`(AGENTS.md §3-5).
+     * `warning`·`caution`·`success` 는 디자인 시안이 그 의미의 색을 지정한 곳에만 쓴다.
+     */
     color?: SButtonColor;
-    /** 아웃라인(테두리) 스타일. primary·neutral·danger 만 지원 (secondary 는 무시) */
+    /**
+     * 색의 강도. `default` 는 채움(solid) 그대로, `soft`·`tonal` 은 옅은 면 + 색 글자다(`tonal` 이 더 진하다).
+     * 디자인 시안이 지정한 곳에만 바꾼다.
+     */
+    tone?: SButtonTone;
+    /** 아웃라인(테두리) 스타일. 모든 color·tone 에 적용된다 */
     outline?: boolean;
-    /** 크기 */
+    /**
+     * 크기. 놓이는 위치가 정한다(AGENTS.md §3-5-2). `xxs` 는 본문 텍스트 사이에 끼워 서는 버튼 전용 —
+     * 높이가 본문 줄 높이와 같아 줄이 벌어지지 않는다. 버튼끼리 서는 자리에서는 `xs` 이상을 쓴다.
+     */
     size?: SButtonSize;
     /** 레이블 왼쪽 아이콘 */
     icon?: SIconName;
     /** 레이블 오른쪽 아이콘 */
     rightIcon?: SIconName;
+    /**
+     * 아이콘 색(`icon`·`rightIcon` 모두). 팔레트 키(`grey_80`, `green_80` …) 또는 임의 CSS 색상.
+     * `color="neutral"` 에서만 적용된다 — 다른 색은 토큰이 아이콘 색을 정하므로 무시한다. `disabled` 면 비활성 색이 우선한다.
+     */
+    iconColor?: SColor;
     /** 버튼 텍스트 (문자열만 — 아이콘은 icon/rightIcon 사용) */
     label?: string;
+    /**
+     * 모서리 모양. 기본 `square` 는 따로 주지 않는다. `round`(더 둥근 모서리)는 디자인 시안이 지정한 곳에만,
+     * `pill`(알약)은 본문·목록 사이에 끼어 서는 **누르면 동작하는 작은 부가 버튼**(출처 배지·추천 질문)에만
+     * 쓴다 — 보통 `color="neutral" outline` 과 함께. 화면의 주 액션·폼 제출 버튼은 `square` 다.
+     * 값·필터 토큰이면 `SChip`, 누를 수 없는 표시면 `STag` 다.
+     */
+    shape?: SButtonShape;
 }
 /**
- * SButton — sd-button 포팅.
- * color(4) × outline × 4개 사이즈, 아이콘(icon/rightIcon), 컴포넌트 토큰(--cmp-button-*) 기반.
- * 텍스트는 label(문자열)로만 받는다. 이벤트: sdClick → 네이티브 onClick.
+ * SButton — color(7) × tone(3) × outline × 5개 사이즈 × shape(3), 아이콘(icon/rightIcon), 컴포넌트 토큰(--cmp-button-*) 기반.
+ * 텍스트는 label(문자열)로만 받는다.
  */
 export declare const SButton: import("react").ForwardRefExoticComponent<SButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/SButton/button.config.d.ts

@@ -1,15 +1,17 @@
 /**
- * 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 변수를 참조한다.
+ * SButton 색상/사이즈 설정 — component.button 토큰(`--cmp-button-*`)을 참조한다.
+ * 색은 color × tone × outline 세 축이다 (토큰 `button.<색>.tone.<default|soft|tonal>`).
+ *  - tone="default": 채움(strong)·outline. neutral 은 흰 버튼(solid)·회색 테두리(outline)
+ *  - tone="soft"·"tonal": 모든 색에서 옅은 면 + 색 글자. outline 이면 흰 면 + tone 색 테두리
  */
-export declare const BUTTON_COLORS: readonly ["primary", "secondary", "neutral", "danger"];
-export declare const BUTTON_SIZES: readonly ["xs", "sm", "md", "lg"];
+export declare const BUTTON_COLORS: readonly ["primary", "secondary", "neutral", "danger", "warning", "caution", "success"];
+export declare const BUTTON_TONES: readonly ["default", "soft", "tonal"];
+export declare const BUTTON_SIZES: readonly ["xxs", "xs", "sm", "md", "lg"];
+export declare const BUTTON_SHAPES: readonly ["square", "round", "pill"];
 export type SButtonColor = (typeof BUTTON_COLORS)[number];
+export type SButtonTone = (typeof BUTTON_TONES)[number];
 export type SButtonSize = (typeof BUTTON_SIZES)[number];
+export type SButtonShape = (typeof BUTTON_SHAPES)[number];
 interface PresetColors {
     bg: string;
     bgHover: string;
@@ -18,20 +20,27 @@ interface PresetColors {
     border: string;
 }
 /**
- * (color, outline) → 색상 프리셋.
- * secondary 는 outline 을 지원하지 않으므로 outline 인자를 무시하고 항상 solid 를 돌려준다.
+ * (color, outline, tone) → 색상 프리셋.
  */
-export declare function buttonPreset(color: SButtonColor, outline: boolean): PresetColors;
+export declare function buttonPreset(color: SButtonColor, outline: boolean, tone?: SButtonTone): PresetColors;
 export declare const BUTTON_SIZE_CONFIG: Record<SButtonSize, {
     height: string;
     paddingX: string;
     gap: string;
-    iconSize: number;
+    iconSize: string;
+    iconOnlyWidth: string;
     fontSize: number;
     fontWeight: number;
-    radius: string;
+    /** 반경 단계 — 실제 값은 shape 와 함께 정한다(buttonShapeRadius) */
+    radius: 'sm' | 'md';
     minWidth: number;
+    /** 라벨 글자만 내리는 위 여백 — 글꼴 상자가 버튼 안에 반 픽셀로 놓이는 크기의 보정 (xxs) */
+    labelOffsetTop?: string;
 }>;
+/**
+ * shape → 모서리 반경. square·round 는 크기별 단계(sm 이하 sm, md 이상 md)를 따르고, pill 은 하나다.
+ */
+export declare function buttonShapeRadius(shape: SButtonShape, size: SButtonSize): string;
 export declare const BUTTON_FOCUS_RING = "var(--sys-color-border-accent)";
 export declare const BUTTON_DISABLED_BG = "var(--cmp-button-bg-disabled, #E1E1E1)";
 export declare const BUTTON_DISABLED_BORDER = "var(--cmp-button-border-disabled, #CCCCCC)";

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

@@ -1,2 +1,2 @@
 export { SButton, type SButtonProps } from './SButton';
-export { BUTTON_COLORS, BUTTON_SIZES, buttonPreset, type SButtonColor, type SButtonSize, } from './button.config';
+export { BUTTON_COLORS, BUTTON_SIZES, BUTTON_SHAPES, BUTTON_TONES, buttonPreset, type SButtonColor, type SButtonShape, type SButtonSize, type SButtonTone, } from './button.config';

package/dist/components/SCalendar/README.md

@@ -19,8 +19,8 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(date: string) => void` | 선택 변경 (sdUpdate) |
-| `onViewChange` | `(v: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
+| `onValueChange` | `(date: string) => void` | 선택 변경 |
+| `onViewChange` | `(v: { year: number; month: number }) => void` | 보이는 연·월 변경 |
 
 ## Types
 

package/dist/components/SCalendar/SCalendar.d.ts

@@ -9,13 +9,13 @@ export interface SCalendarEventGroup {
 export interface SCalendarProps {
     /** 선택 날짜 (YYYY-MM-DD) */
     value?: string | null;
-    /** 선택 변경 (sdUpdate) */
+    /** 선택 변경 */
     onValueChange?: (date: string) => void;
     /** 선택 가능 범위 [시작, 종료] (빈 문자열이면 제한 없음) */
     selectable?: [string, string];
     /** 이벤트 그룹 (날짜별 점) */
     events?: SCalendarEventGroup[];
-    /** 보이는 연·월 변경 (sdViewChange) */
+    /** 보이는 연·월 변경 */
     onViewChange?: (v: {
         year: number;
         month: number;
@@ -25,5 +25,5 @@ export interface SCalendarProps {
     className?: string;
     style?: CSSProperties;
 }
-/** SCalendar — sd-calendar 포팅. 월 그리드 + 이벤트 점 + 범례. */
+/** SCalendar — 월 그리드 + 이벤트 점 + 범례. */
 export declare function SCalendar({ value, onValueChange, selectable, events, onViewChange, elevated, className, style, }: SCalendarProps): import("react").JSX.Element;

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

@@ -0,0 +1,61 @@
+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';
+/** 이 칸의 오른쪽·아래 격자선과 오른쪽 아래 교차점 중 경계 오버레이를 얹을 곳 */
+export interface CalendarDayBorderOverlay {
+    right: boolean;
+    bottom: boolean;
+    corner: boolean;
+}
+/**
+ * 달력의 날짜 한 칸 (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;
+    /** 이웃 칸과 맞닿은 격자선에 얹을 경계 오버레이 — 판이 이웃 칸 색까지 보고 정한다 */
+    borderOverlay?: CalendarDayBorderOverlay;
+    /**
+     * **이 칸에서 시작하는** 일정 막대. 여러 날에 걸친 일정은 시작 칸이 그리고 오른쪽 칸 위로 뻗는다 —
+     * 지나가는 칸은 자기 줄을 비워 두므로(배치 계산이 이미 잡아 둔다) 겹치지 않는다.
+     */
+    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: closeLabelProp, }: {
+    /** 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>>;