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

package/dist/components/SAccountListBox/README.md

@@ -0,0 +1,86 @@
+# SAccountListBox
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SAccountListBox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `email?` | `string` | — | 로그인한 계정의 이메일 |
+| `name?` | `string` | — | 로그인한 계정의 이름 |
+| `authority?` | `string` | — | 권한. 이름 오른쪽 끝에 붙는다. 없으면 이름만 남는다. (`role` 이 아닌 이유 — 그 이름은 DOM 의 ARIA 속성이라 소비 앱의 a11y lint 가 값을 ARIA 롤로 읽는다) |
+| `accountSetting?` | `SAccountListBoxItem` | — | 계정 설정 행. 주지 않으면 행이 빠진다 |
+| `language?` | `SAccountListBoxLanguage` | — | 언어 변경 행. 주지 않으면 행이 빠진다 |
+| `logout?` | `SAccountListBoxItem` | — | 로그아웃 행. 이 행은 늘 있고, 라벨과 클릭만 받는다 |
+
+## Types
+
+### SAccountListBoxItem
+
+```ts
+/** 리스트박스의 한 행 — 라벨은 기본값이 있고 클릭만 앱이 준다 */
+export interface SAccountListBoxItem {
+  /** 라벨 텍스트. 행마다 기본값이 있다 */
+  label?: string;
+  /** 클릭 */
+  onClick?: () => void;
+}
+```
+
+### SAccountListBoxLanguage
+
+```ts
+/** 언어 변경 행 — 지금 쓰는 언어가 우측에 붙고, 고를 것이 있으면 눌러서 편다 */
+export interface SAccountListBoxLanguage extends SAccountListBoxItem {
+  /**
+   * 지금 선택돼 있는 언어. 우측에 브랜드색으로 붙는다.
+   * `options` 를 함께 주면 그 목록에서 같은 `value` 를 찾아 `label` 로 적는다.
+   */
+  value?: string;
+  /**
+   * 고를 수 있는 언어. 주면 행을 눌렀을 때 **하위 메뉴가 우측 아래로 펼쳐지고**,
+   * 그동안 계정 패널은 닫히지 않는다. 주지 않으면 행을 누르는 것 자체가 액션이라
+   * `onClick` 만 돌고 패널이 닫힌다 — 언어 화면을 따로 두는 앱이 그렇다.
+   */
+  options?: SAccountListBoxLanguageOption[];
+  /** 하위 메뉴에서 언어를 고름. 고르면 하위 메뉴와 계정 패널이 함께 닫힌다 */
+  onChange?: (value: string) => void;
+}
+```
+
+### SAccountListBoxLanguageOption
+
+```ts
+/** 언어 변경 하위 메뉴의 한 칸 */
+export interface SAccountListBoxLanguageOption {
+  /** 값. `SAccountListBoxLanguage.value` 와 맞춰 지금 언어를 가린다 */
+  value: string;
+  /** 화면에 적히는 언어명 */
+  label: string;
+}
+```
+
+## Dependencies
+
+### Used by
+
+ - [SGnbSystem](../SGnbSystem)
+ - [SSystemActionButton](../SSystemActionButton)
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [SPortal](../SPortal)
+
+### Graph
+
+```mermaid
+graph TD;
+  SAccountListBox --> SIcon
+  SAccountListBox --> SPortal
+  SGnbSystem --> SAccountListBox
+  SSystemActionButton --> SAccountListBox
+  style SAccountListBox fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SAccountListBox/SAccountListBox.d.ts

@@ -0,0 +1,79 @@
+import { type HTMLAttributes } from 'react';
+/** 리스트박스의 한 행 — 라벨은 기본값이 있고 클릭만 앱이 준다 */
+export interface SAccountListBoxItem {
+    /** 라벨 텍스트. 행마다 기본값이 있다 */
+    label?: string;
+    /** 클릭 */
+    onClick?: () => void;
+}
+/** 언어 변경 하위 메뉴의 한 칸 */
+export interface SAccountListBoxLanguageOption {
+    /** 값. `SAccountListBoxLanguage.value` 와 맞춰 지금 언어를 가린다 */
+    value: string;
+    /** 화면에 적히는 언어명 */
+    label: string;
+}
+/** 언어 변경 행 — 지금 쓰는 언어가 우측에 붙고, 고를 것이 있으면 눌러서 편다 */
+export interface SAccountListBoxLanguage extends SAccountListBoxItem {
+    /**
+     * 지금 선택돼 있는 언어. 우측에 브랜드색으로 붙는다.
+     * `options` 를 함께 주면 그 목록에서 같은 `value` 를 찾아 `label` 로 적는다.
+     */
+    value?: string;
+    /**
+     * 고를 수 있는 언어. 주면 행을 눌렀을 때 **하위 메뉴가 우측 아래로 펼쳐지고**,
+     * 그동안 계정 패널은 닫히지 않는다. 주지 않으면 행을 누르는 것 자체가 액션이라
+     * `onClick` 만 돌고 패널이 닫힌다 — 언어 화면을 따로 두는 앱이 그렇다.
+     */
+    options?: SAccountListBoxLanguageOption[];
+    /** 하위 메뉴에서 언어를 고름. 고르면 하위 메뉴와 계정 패널이 함께 닫힌다 */
+    onChange?: (value: string) => void;
+}
+export interface SAccountListBoxProps extends HTMLAttributes<HTMLDivElement> {
+    /** 로그인한 계정의 이메일 */
+    email?: string;
+    /** 로그인한 계정의 이름 */
+    name?: string;
+    /**
+     * 권한. 이름 오른쪽 끝에 붙는다. 없으면 이름만 남는다.
+     * (`role` 이 아닌 이유 — 그 이름은 DOM 의 ARIA 속성이라 소비 앱의 a11y lint 가 값을 ARIA 롤로 읽는다)
+     */
+    authority?: string;
+    /** 계정 설정 행. 주지 않으면 행이 빠진다 */
+    accountSetting?: SAccountListBoxItem;
+    /** 언어 변경 행. 주지 않으면 행이 빠진다 */
+    language?: SAccountListBoxLanguage;
+    /** 로그아웃 행. 이 행은 늘 있고, 라벨과 클릭만 받는다 */
+    logout?: SAccountListBoxItem;
+}
+/**
+ * 리스트박스에 **담기는 내용**만 추린 것.
+ * 팝오버로 띄우는 쪽(`SSystemActionButton` 의 `option` · `SGnbSystem` 의 `account.listBox`)이
+ * 이 덩어리째 넘겨받으므로, 패널의 DOM 속성(className·style …)과 분리해 둔다.
+ */
+export type SAccountListBoxContent = Pick<SAccountListBoxProps, 'email' | 'name' | 'authority' | 'accountSetting' | 'language' | 'logout'>;
+/**
+ * SAccountListBox — GNB system 의 계정 행을 눌렀을 때 뜨는 계정 리스트박스.
+ *
+ * 판에서는 계정 행이 맨 아래에 있어 **행 위로 · 행 왼쪽 끝에 맞춰**, 전폭 상단바에서는 **행 아래로 ·
+ * 오른쪽 끝에 맞춰** 펼쳐진다. 이 방향은 고정이라 앱이 고르지 않는다.
+ *
+ * 위에서부터 [사용자정보(이메일 · 이름 + 권한)] · [계정 설정] · [언어 변경] · [계정 로그아웃] 이다.
+ * **권한(`authority`) · 계정 설정 · 언어 변경은 옵션**이고, 사용자정보와 로그아웃은 늘 있다 — 이 패널이 존재하는
+ * 이유가 "지금 누구로 로그인해 있는가"와 "나가기"이기 때문이다. 옵션을 빼면 그 줄이 통째로 사라지고
+ * 나머지가 위로 붙는다.
+ *
+ * 폭은 토큰이 정하는 고정값(240px)이라 앱이 늘리지 않는다 — 이 패널은 GNB 폭에 맞춰 뜬다.
+ * 행 라벨·아이콘은 무엇을 하는 행인지가 곧 정체라 아이콘을 밖에서 바꾸지 않고, 라벨만 바꿀 수 있다.
+ *
+ * **언어 변경만 하위 메뉴를 가질 수 있다.** `language.options` 를 주면 그 행이 우측 값 아래로
+ * 목록을 펴고, 고를 때까지 계정 패널은 열려 있는다. 주지 않으면 행을 누르는 것 자체가 액션이라
+ * `onClick` 만 돌고 패널이 닫힌다 — 언어를 고르는 화면을 따로 두는 앱이 그렇다.
+ *
+ * **이 컴포넌트는 패널만 그린다.** 계정 행에 붙여 띄우는 것은 `SSystemActionButton` 의
+ * `type="account"` 이 맡으므로(`option` 에 이 내용을 넘긴다 — 필수다), 앱이 직접 팝오버를 조립할
+ * 일은 없다. 계정 행은 예외 없이 이 패널의 트리거다.
+ *
+ * 토큰은 `--cmp-gnb-system-accountListBox-*` · `--cmp-gnb-system-accountButton-*`.
+ */
+export declare const SAccountListBox: import("react").ForwardRefExoticComponent<SAccountListBoxProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SAccountListBox/SystemMenuPortal.d.ts

@@ -0,0 +1,58 @@
+import { type RefObject } from 'react';
+import { type SPortalAlign, type SPortalPlacement } from '../SPortal';
+import { type STagColor } from '../STag';
+/**
+ * 시스템 메뉴의 한 칸.
+ *
+ * `color` 를 주면 그 칸은 **상태 칸**이 되어 점과 글자가 같은 색으로 물든다(시안) — 상태는 색 자체가
+ * 뜻이라, 고르는 자리에서도 그 색을 보고 고른다. 주지 않으면 글자만 있는 칸이고, 지금 값만
+ * 브랜드색으로 떠오른다.
+ */
+export interface SystemMenuOption {
+    /** 값. 지금 값과 맞춰 어느 칸이 선택돼 있는지를 가린다 */
+    value: string;
+    /** 화면에 적히는 이름 */
+    label: string;
+    /** 상태 칸의 색. 주면 점 + 같은 색 글자로 그린다 */
+    color?: STagColor;
+}
+interface SystemMenuPortalProps {
+    /** 표시 여부 */
+    open: boolean;
+    /** 표시 상태 변경 */
+    onOpenChange: (open: boolean) => void;
+    /** 붙을 자리 — 값 아래로 펼 때는 **바뀌는 값**(우측 값 묶음 · 상태 태그), 옆으로 펼 때는 행 자체 */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** 뜨는 방향. 기본 `'bottom'`(앵커 아래) */
+    placement?: SPortalPlacement;
+    /** 교차축 정렬. 아래로 펼 때는 값이 놓인 쪽 끝, 옆으로 펼 때는 위쪽 끝(`start`) */
+    align: SPortalAlign;
+    /**
+     * 메뉴를 여는 행. 이 행 위의 클릭은 행이 스스로 토글하므로 여기서 닫지 않는다 —
+     * 앵커는 행이 아니라 그 안의 값이라, 값 밖(라벨 쪽)을 누르면 닫혔다가 곧바로 다시 열린다.
+     */
+    triggerRef?: RefObject<HTMLElement | null>;
+    /** 접근성 이름 — 무엇을 고르는 메뉴인지 */
+    ariaLabel?: string;
+    /** 지금 값 */
+    value?: string;
+    /** 고를 수 있는 칸 */
+    options: SystemMenuOption[];
+    /** 칸을 고름 */
+    onSelect: (value: string) => void;
+}
+/**
+ * GNB system 의 값 고르기 메뉴.
+ *
+ * 계정 패널의 언어 변경 행 · `SSystemActionButton` 의 `subSelect` · `status` 가 모두 이것을 연다 —
+ * 세 자리 모두 "지금 값이 적혀 있고, 눌러서 다른 값으로 바꾼다" 는 같은 일이라, 뜨는 자리와 닫히는
+ * 시점을 한 곳에 모아 두지 않으면 자리마다 동작이 갈린다.
+ *
+ * **뜨는 자리는 부르는 쪽이 정한다.** 계정 패널 안의 행처럼 판 안에서 열리는 자리는 바꾸는 대상인
+ * 값 바로 아래로, 값이 놓인 쪽 끝에 맞춰 편다(패널 폭 안에 갇혀 있어 옆이 없다). 판 없이 행 하나로
+ * 서는 자리는 행 오른쪽으로 편다 — 행 아래는 다음 행이 이어지는 자리라 메뉴가 그 위를 덮는다.
+ *
+ * 공개 API 가 아니므로 index.ts 로 내보내지 않는다 — 앱은 각 행의 `options` 로 닿는다.
+ */
+export declare function SystemMenuPortal({ open, onOpenChange, anchorRef, placement, align, triggerRef, ariaLabel, value, options, onSelect, }: SystemMenuPortalProps): import("react").JSX.Element;
+export {};

package/dist/components/SAccountListBox/accountListBox.config.d.ts

@@ -0,0 +1,67 @@
+/** 행의 성격. default = 보통 행, negative = 되돌릴 수 없는 행(로그아웃) */
+export declare const ACCOUNT_LIST_BOX_ITEM_TONES: readonly ["default", "negative"];
+export type SAccountListBoxItemTone = (typeof ACCOUNT_LIST_BOX_ITEM_TONES)[number];
+/** 행마다 정해져 있는 아이콘 — 무엇을 하는 행인지가 아이콘으로 읽히므로 밖에서 바꾸지 않는다 */
+export declare const ACCOUNT_LIST_BOX_ICONS: {
+    readonly accountSetting: "account";
+    readonly language: "global";
+    readonly logout: "logout";
+};
+/**
+ * 행 라벨의 한국어 시안 문구. 컴포넌트는 이 값이 아니라 `SLocaleProvider` 로케일(`accountListBox.*`)을 따른다 —
+ * 앱이 `label` 로 직접 주면 그 값이 우선한다. 시안 문구를 참조하는 소비 앱을 위해 남겨 둔다.
+ */
+export declare const ACCOUNT_LIST_BOX_LABELS: {
+    readonly accountSetting: "계정 설정";
+    readonly language: "언어 변경";
+    readonly logout: "계정 로그아웃";
+};
+/** 행 성격별 색 */
+export declare const ACCOUNT_LIST_BOX_TONE_CONFIG: Record<SAccountListBoxItemTone, {
+    bg: string;
+    bgHover: string;
+    text: string;
+    icon: string;
+}>;
+/** 치수·색 — 전부 토큰 참조 */
+export declare const ACCOUNT_LIST_BOX_LAYOUT: {
+    /** 패널 고정 폭 */
+    readonly width: string;
+    /** 패널 배경 */
+    readonly bg: string;
+    /** 패널 라운드 */
+    readonly radius: string;
+    /** 사용자정보 영역 배경 */
+    readonly userdataBg: string;
+    /** 사용자정보 영역 좌우 여백 */
+    readonly userdataPaddingX: string;
+    /** 사용자정보 영역 상하 여백 */
+    readonly userdataPaddingY: string;
+    /** 이메일 글자색 */
+    readonly emailColor: string;
+    /** 이름 글자색 */
+    readonly nameColor: string;
+    /** 권한 글자색 */
+    readonly roleColor: string;
+    /** 행 묶음의 상하 여백 */
+    readonly listPaddingY: string;
+    /** 행 좌우 여백 */
+    readonly itemPaddingX: string;
+    /** 행 상하 여백 */
+    readonly itemPaddingY: string;
+    /** 행 아이콘 ↔ 라벨 간격 */
+    readonly itemGap: string;
+    /** 행 아이콘 크기 */
+    readonly itemIcon: string;
+    /** 우측 값 ↔ 화살표 간격 */
+    readonly selectDataGap: string;
+    /** 우측 화살표 크기 */
+    readonly selectDataIcon: string;
+    /** 우측 값 글자색 */
+    readonly selectDataText: string;
+    /** 시스템 메뉴에서 지금 값인 칸의 글자색 — 계정 행이 아니라 목록 항목이라
+     *  listBoxItem 의 선택 색을 그대로 따른다(다른 목록의 선택 표시와 같은 색) */
+    readonly menuSelectedText: string;
+    /** 우측 화살표색 */
+    readonly selectDataIconColor: string;
+};

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

@@ -0,0 +1,2 @@
+export { SAccountListBox, type SAccountListBoxProps, type SAccountListBoxContent, type SAccountListBoxItem, type SAccountListBoxLanguage, type SAccountListBoxLanguageOption, } from './SAccountListBox';
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, type SAccountListBoxItemTone, } from './accountListBox.config';

package/dist/components/SActionModal/README.md

@@ -9,11 +9,13 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
-| `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
+| `persistent?` | `boolean` | — | 백드롭 클릭으로 안 닫히고 흔들림. **기본값 true** |
+| `closeOnEscape?` | `boolean` | — | ESC 로 닫는다. **기본값 true** — false 면 ESC 로 안 닫히고 흔들림 |
+| `showClose?` | `boolean` | `true` | 우측 상단 닫기(X) 버튼. **기본값 true** `false` 는 **액션을 끝내야만 나갈 수 있는 모달**에만 준다 — 필수 약관 동의, 필수 정보 입력처럼 중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우다. `persistent` 기본값(true)과 겹치면 나가는 길이 모달 안의 버튼 하나뿐이 되므로, `button` 이나 `footerLeft` 로 그 길을 반드시 둔다. |
 | `modalTitle?` | `string` | `''` |  |
-| `description?` | `ReactNode` | — | 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯). 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다. |
+| `description?` | `ReactNode` | — | 제목 오른쪽에 붙는 보조 설명. 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다. |
 | `button?` | `SFooterButton` | — | 하단 액션 버튼 (주 액션 1개). 의도적으로 단수다 — 보조 버튼(취소·삭제 등)은 `footerLeft` 슬롯에 직접 배치한다. |
-| `footerLeft?` | `ReactNode` | — | footer 좌측 영역 (sd-action-modal 의 bottom-sub-content 슬롯). 보조 버튼이나 안내 문구를 넣는다. 버튼을 하나 더 쓰고 싶을 때 여기에 SButton 을 넣는다. |
+| `footerLeft?` | `ReactNode` | — | footer 좌측 영역. 보조 버튼이나 안내 문구를 넣는다. 버튼을 하나 더 쓰고 싶을 때 여기에 SButton 을 넣는다. |
 | `width?` | `number \| string` | — |  |
 | `height?` | `number \| string` | — |  |
 | `children?` | `ReactNode` | — |  |
@@ -23,7 +25,7 @@
 | Event | Type | Description |
 |-------|------|-------------|
 | `onOpenChange` | `(open: boolean) => void` |  |
-| `onClose` | `() => void` | 닫기(X) 버튼 클릭 (sdClose) |
+| `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
 
 ## Dependencies
 

package/dist/components/SActionModal/SActionModal.d.ts

@@ -3,13 +3,23 @@ import { type SFooterButton } from '../SFooter';
 export interface SActionModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** 닫기(X) 버튼 클릭 (sdClose) */
+    /** 닫기(X) 버튼 클릭 */
     onClose?: () => void;
-    /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
+    /** 백드롭 클릭으로 안 닫히고 흔들림. **기본값 true** */
     persistent?: boolean;
+    /** ESC 로 닫는다. **기본값 true** — false 면 ESC 로 안 닫히고 흔들림 */
+    closeOnEscape?: boolean;
+    /**
+     * 우측 상단 닫기(X) 버튼. **기본값 true**
+     *
+     * `false` 는 **액션을 끝내야만 나갈 수 있는 모달**에만 준다 — 필수 약관 동의, 필수 정보 입력처럼
+     * 중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우다. `persistent` 기본값(true)과 겹치면
+     * 나가는 길이 모달 안의 버튼 하나뿐이 되므로, `button` 이나 `footerLeft` 로 그 길을 반드시 둔다.
+     */
+    showClose?: boolean;
     modalTitle?: string;
     /**
-     * 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯).
+     * 제목 오른쪽에 붙는 보조 설명.
      * 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다.
      */
     description?: ReactNode;
@@ -19,7 +29,7 @@ export interface SActionModalProps {
      */
     button?: SFooterButton;
     /**
-     * footer 좌측 영역 (sd-action-modal 의 bottom-sub-content 슬롯).
+     * footer 좌측 영역.
      * 보조 버튼이나 안내 문구를 넣는다. 버튼을 하나 더 쓰고 싶을 때 여기에 SButton 을 넣는다.
      */
     footerLeft?: ReactNode;
@@ -28,7 +38,7 @@ export interface SActionModalProps {
     children?: ReactNode;
 }
 /**
- * SActionModal — sd-action-modal 포팅. 헤더(제목·닫기) + 본문 + 하단 액션 버튼.
+ * SActionModal — 헤더(제목·닫기) + 본문 + 하단 액션 버튼.
  *
  * 액션 버튼은 `button.onClick` 만 호출하고 모달을 닫지 않는다. 본문에서 API 를 호출하는 경우가
  * 많아 성공 여부에 따라 닫힘 시점이 달라지므로, 닫는 책임은 사용하는 쪽에 둔다.
@@ -36,4 +46,4 @@ export interface SActionModalProps {
  * `button` 은 의도적으로 단수다. 주 액션은 오른쪽에 하나만 두고, 보조 버튼은 `footerLeft` 슬롯에
  * 소비자가 직접 배치한다. (buttons 배열 API 를 추가하지 말 것)
  */
-export declare function SActionModal({ open, onOpenChange, onClose, persistent, modalTitle, description, button, footerLeft, width, height, children, }: SActionModalProps): import("react").JSX.Element;
+export declare function SActionModal({ open, onOpenChange, onClose, persistent, closeOnEscape, modalTitle, description, button, footerLeft, showClose, width, height, children, }: SActionModalProps): import("react").JSX.Element;

package/dist/components/SBadge/README.md

@@ -30,6 +30,7 @@ export const BADGE_COLORS = [
   'blue',
   'darkblue',
   'indigo',
+  'purple',
   'grey',
 ] as const;
 ```
@@ -38,12 +39,14 @@ export const BADGE_COLORS = [
 
 ### Used by
 
+ - [SCalendarBoard](../SCalendarBoard)
  - [SSectionHeaderCard](../SSectionHeaderCard)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  SCalendarBoard --> SBadge
   SSectionHeaderCard --> SBadge
   style SBadge fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SBadge/SBadge.d.ts

@@ -1,12 +1,12 @@
 import { type HTMLAttributes } from 'react';
-export declare const BADGE_COLORS: readonly ["red", "orange", "yellow", "green", "lightblue", "blue", "darkblue", "indigo", "grey"];
+export declare const BADGE_COLORS: readonly ["red", "orange", "yellow", "green", "lightblue", "blue", "darkblue", "indigo", "purple", "grey"];
 export type SBadgeColor = (typeof BADGE_COLORS)[number];
 export interface SBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** 뱃지 색상 */
     color?: SBadgeColor;
 }
 /**
- * SBadge — sd-badge 포팅. 색상 점(dot) 인디케이터.
+ * SBadge — 색상 점(dot) 인디케이터.
  * 색상은 컴포넌트 토큰 `--cmp-badge-<color>` 를 참조한다.
  */
 export declare const SBadge: import("react").ForwardRefExoticComponent<SBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/SBarChart/README.md

@@ -0,0 +1,123 @@
+# 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` | 막대마다 값을 적는다 |
+| `rotateCategoryLabels?` | `boolean` | `false` | 항목 이름을 -45° 기울인다. 이름이 막대 묶음 폭보다 길어 서로 겹칠 때 쓴다. 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다. 이름이 아주 길면 기울이기보다 `direction='horizontal'` 이 먼저다. 세로 막대에서만 쓴다 — 가로 막대는 이름 열이 가장 긴 이름에 맞춰 넓어지므로 무시한다 |
+| `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,106 @@
+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;
+    /**
+     * 항목 이름을 -45° 기울인다. 이름이 막대 묶음 폭보다 길어 서로 겹칠 때 쓴다.
+     * 기울여도 너무 긴 이름은 말줄임되고, 전체 이름은 툴팁 제목에서 읽힌다.
+     * 이름이 아주 길면 기울이기보다 `direction='horizontal'` 이 먼저다.
+     * 세로 막대에서만 쓴다 — 가로 막대는 이름 열이 가장 긴 이름에 맞춰 넓어지므로 무시한다
+     */
+    rotateCategoryLabels?: 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>>;