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

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,64 @@
+/** 행의 성격. 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";
+};
+/** 행 라벨 기본값 — 시안 문구. 앱이 바꿀 수 있다 */
+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

@@ -10,6 +10,7 @@
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
 | `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
+| `showClose?` | `boolean` | `true` | 우측 상단 닫기(X) 버튼. **기본값 true** `false` 는 **액션을 끝내야만 나갈 수 있는 모달**에만 준다 — 필수 약관 동의, 필수 정보 입력처럼 중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우다. `persistent` 기본값(true)과 겹치면 나가는 길이 모달 안의 버튼 하나뿐이 되므로, `button` 이나 `footerLeft` 로 그 길을 반드시 둔다. |
 | `modalTitle?` | `string` | `''` |  |
 | `description?` | `ReactNode` | — | 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯). 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다. |
 | `button?` | `SFooterButton` | — | 하단 액션 버튼 (주 액션 1개). 의도적으로 단수다 — 보조 버튼(취소·삭제 등)은 `footerLeft` 슬롯에 직접 배치한다. |

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

@@ -7,6 +7,14 @@ export interface SActionModalProps {
     onClose?: () => void;
     /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
     persistent?: boolean;
+    /**
+     * 우측 상단 닫기(X) 버튼. **기본값 true**
+     *
+     * `false` 는 **액션을 끝내야만 나갈 수 있는 모달**에만 준다 — 필수 약관 동의, 필수 정보 입력처럼
+     * 중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우다. `persistent` 기본값(true)과 겹치면
+     * 나가는 길이 모달 안의 버튼 하나뿐이 되므로, `button` 이나 `footerLeft` 로 그 길을 반드시 둔다.
+     */
+    showClose?: boolean;
     modalTitle?: string;
     /**
      * 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯).
@@ -36,4 +44,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, modalTitle, description, button, footerLeft, showClose, width, height, children, }: SActionModalProps): import("react").JSX.Element;

package/dist/components/SBadge/README.md

@@ -10,16 +10,43 @@
 |------|------|---------|-------------|
 | `color?` | `SBadgeColor` | `'blue'` | 뱃지 색상 |
 
+## Types
+
+### SBadgeColor
+
+```ts
+export type SBadgeColor = (typeof BADGE_COLORS)[number];
+```
+
+### BADGE_COLORS
+
+```ts
+export const BADGE_COLORS = [
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'lightblue',
+  'blue',
+  'darkblue',
+  'indigo',
+  'purple',
+  'grey',
+] as const;
+```
+
 ## Dependencies
 
 ### 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,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-export declare const BADGE_COLORS: readonly ["red", "orange", "yellow", "green", "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> {
     /** 뱃지 색상 */

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,15 @@
 | `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` | — |  |
 
@@ -47,6 +49,14 @@
 | `onFocus` | `() => void` |  |
 | `onBlur` | `() => void` |  |
 
+## Types
+
+### SBarcodeInputSize
+
+```ts
+export type SBarcodeInputSize = SFieldSize;
+```
+
 ## Dependencies
 
 ### Depends on