sellmate-design-system-react 9.0.0-beta.4 → 9.0.0-beta.41

package/README.md

@@ -178,15 +178,18 @@ export default [
 
 **`error` 는 "지키지 않으면 깨지는 것" 에만 씁니다.** 앱 화면을 Tailwind 로 자유롭게 만드는 것은 정상이고, 디자인 시스템이 그 자유까지 막지 않습니다. 나머지는 권고(`warn`)입니다.
 
-| 규칙                             | 기본      | 검출 대상                                                                                                                                                                                               |
-| -------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `sellmate/no-off-scale-spacing`  | **error** | 스케일 밖 디자인 시스템 간격 (`gap-sd-13`) — Tailwind v4 에서 **조용히 무시되어** 스타일이 사라진다                                                                                                     |
-| `sellmate/no-raw-html-control`   | **error** | 대응 컴포넌트가 있는 생 HTML (`<button>` `<input>` `<select>` `<textarea>` `<table>` `<form>` `<dialog>` `<hr>` `<details>` `<progress>`), `alert()`/`confirm()` — 디자인 시스템을 통째로 우회하는 경우 |
-| `sellmate/prefer-typo-preset`    | warn      | `text-14 font-bold` 같은 낱개 조합 → `typo-*` 프리셋                                                                                                                                                    |
-| `sellmate/component-group-gap`   | warn      | 같은 컴포넌트를 나열할 때의 그룹 간격 — 배열 방향에 따라 값이 다르다(체크박스 가로 24 / 세로 8)                                                                                                         |
-| `sellmate/table-numeric-align`   | warn      | 수량 컬럼(금액·수량 등)에 `align: 'right'` 누락 — **`--fix` 로 자동 교정**                                                                                                                              |
-| `sellmate/require-locale-number` | warn      | 수량 컬럼의 `toLocaleString()` 누락 — 세 자리 콤마                                                                                                                                                      |
-| `sellmate/no-arbitrary-class`    | **off**   | 토큰이 있는 속성(색·타이포·간격·모서리)의 임의 값 — `text-[14px]`, `bg-[#eee]`. 앱 고유 화면에는 정당한 사용이 많아 기본값은 끕니다                                                                     |
+| 규칙                               | 기본      | 검출 대상                                                                                                                                                                                               |
+| ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sellmate/no-off-scale-spacing`    | **error** | 스케일 밖 디자인 시스템 간격 (`gap-sd-13`) — Tailwind v4 에서 **조용히 무시되어** 스타일이 사라진다                                                                                                     |
+| `sellmate/no-raw-html-control`     | **error** | 대응 컴포넌트가 있는 생 HTML (`<button>` `<input>` `<select>` `<textarea>` `<table>` `<form>` `<dialog>` `<hr>` `<details>` `<progress>`), `alert()`/`confirm()` — 디자인 시스템을 통째로 우회하는 경우 |
+| `sellmate/divider-vertical-height` | **error** | 세로 `SDivider` 의 높이를 `className="h-*"` 로 준 경우 — `align-self: stretch` 가 무효가 되어 선이 줄 맨 위에 붙는다. `height` prop 으로 준다(**`--fix` 로 치환**)                                      |
+| `sellmate/prefer-typo-preset`      | warn      | `text-14 font-bold` 같은 낱개 조합 → `typo-*` 프리셋                                                                                                                                                    |
+| `sellmate/component-group-gap`     | warn      | 같은 컴포넌트를 나열할 때의 그룹 간격 — 배열 방향에 따라 값이 다르다(체크박스 가로 24 / 세로 8)                                                                                                         |
+| `sellmate/table-numeric-align`     | warn      | 수량 컬럼(금액·수량 등)에 `align: 'right'` 누락 — **`--fix` 로 자동 교정**                                                                                                                              |
+| `sellmate/require-locale-number`   | warn      | 수량 컬럼의 `toLocaleString()` 누락 — 세 자리 콤마                                                                                                                                                      |
+| `sellmate/field-width-grade`       | warn      | 필드 폭이 `maxLength`(스키마 상한)와 어긋남 — 등급 미지정 · 등급 밖 폭 · 상한 대비 과부족 · 등급 px 직접 지정(**`--fix` 로 등급 이름 치환**)                                                            |
+| `sellmate/table-column-width`      | warn      | 컬럼 폭 미지정(기본 120px 이 조용히 들어감) · px 아닌 폭(`%` `clamp()`) · 값을 그리는 열의 `autoWidth` 오용                                                                                             |
+| `sellmate/no-arbitrary-class`      | **off**   | 토큰이 있는 속성(색·타이포·간격·모서리)의 임의 값 — `text-[14px]`, `bg-[#eee]`. 앱 고유 화면에는 정당한 사용이 많아 기본값은 끕니다                                                                     |
 
 `className` 뿐 아니라 `cn()`/`clsx()` 인자, 템플릿 리터럴, 객체 키 안까지 검사합니다.
 
@@ -237,6 +240,105 @@ export default [
 'sellmate/table-numeric-align': ['error', { allow: ['rank'] }],
 ```
 
+### 필드 폭 등급 (`field-width-grade`)
+
+필드 너비는 **`maxLength`(= 스키마 상한)로 정합니다.** 상한이 등급 안에 들어오면 그 등급으로 고정하고,
+등급 상한(`xl`)을 넘거나 상한이 아예 없으면 행 전체(`width="100%"` 또는 생략)로 둡니다.
+
+**폭은 등급 이름으로 줍니다** — `width="md"` 처럼 씁니다. 등급은 `--cmp-field-width-*` 토큰으로
+풀리므로 토큰이 바뀌면 화면이 따라갑니다. 같은 값을 px 로 적으면 그 화면만 옛 값에 남습니다.
+
+| 등급 | 쓰는 곳       |
+| ---- | ------------- |
+| `xs` | 숫자 필드 전용 |
+| `sm` |               |
+| `md` |               |
+| `lg` |               |
+| `xl` | 정책상 상한    |
+
+```tsx
+// 상한이 등급 안에 들어온다 → 그 등급으로 고정
+<SInput name="code" label="코드" maxLength={10} width="md" />
+
+// 상한이 xl 로도 안 담긴다 → 행 전체
+<SInput name="desc" label="설명" maxLength={100} width="100%" />
+
+// 숫자 필드의 상한은 maxLength 가 아니라 max 다 (천단위 콤마도 폭을 먹는다)
+<SNumberInput name="qty" label="수량" max={99} width="xs" />
+
+// 등급 값과 같은 px 를 적으면 등급 이름으로 자동 수정됩니다 (--fix)
+<SInput name="code" label="코드" maxLength={10} width={160} />   // → width="md"
+```
+
+대상은 `SInput` · `SNumberInput` · `SBarcodeInput` 입니다. `STextarea` 는 여러 줄로 접혀 상한이 폭을
+정하지 않고, 셀렉트 계열은 상한 개념이 없어 목록 최장값으로 폭을 정하며, 날짜·시간 계열은 컴포넌트가
+자체 상한을 갖습니다.
+
+**상한도 폭도 변수로 넘기면 검사하지 않습니다.** 정적으로 알 수 없는 것을 위반으로 보고하지 않습니다.
+
+```tsx
+<SInput maxLength={LIMIT} width={fieldWidth} />   // 통과
+<SInput maxLength={10} {...rest} />               // 통과 (spread 안에 width 가 있을 수 있다)
+```
+
+#### 글자수 환산
+
+등급이 몇 글자를 담는지는 토큰 값(글꼴 크기 · 좌우 패딩 · 테두리 · 스테퍼)에서 계산합니다.
+한글은 전각이라 영숫자의 약 두 배를 먹으므로 **두 기준 사이에는 아무것도 보고하지 않습니다** —
+영숫자로 채워도 넘칠 때만 "좁다", 한글로 채워도 남을 때만 "넓다" 로 판정합니다.
+
+| 등급 | `SInput` (sm)       | `SInput` (md)       | `SNumberInput` (sm) | `SNumberInput` (sm, `useButton`) |
+| ---- | ------------------- | ------------------- | ------------------- | -------------------------------- |
+| `xs` | —                   | —                   | 영숫자 8            | 영숫자 2                         |
+| `sm` | 영숫자 14 / 한글 7  | 영숫자 11 / 한글 6  | 영숫자 14           | 영숫자 8                         |
+| `md` | 영숫자 20 / 한글 11 | 영숫자 16 / 한글 9  | 영숫자 20           | 영숫자 14                        |
+| `lg` | 영숫자 32 / 한글 17 | 영숫자 26 / 한글 14 | 영숫자 32           | 영숫자 26                        |
+| `xl` | 영숫자 68 / 한글 37 | 영숫자 57 / 한글 31 | 영숫자 68           | 영숫자 62                        |
+
+`SNumberInput` 은 `useButton` 여부로 글자 자리가 크게 갈립니다 — 스테퍼가 없으면 좌우 패딩이
+두 배가 되고(기본값), 있으면 버튼 두 개와 간격이 폭을 먹습니다. 규칙은 JSX 의 `useButton` 을 읽어
+둘을 구분합니다.
+
+등급 폭은 `--cmp-field-width-*` 토큰에서 읽으므로 규칙과 컴포넌트가 같은 값을 봅니다.
+글자수 환산 비율이 팀 기준과 다르면 옵션으로 덮습니다(등급 폭도 덮을 수 있지만, 토큰과 어긋나게 됩니다).
+
+```js
+'sellmate/field-width-grade': ['warn', {
+  charRatio: { narrow: 0.55, wide: 1 },
+}],
+```
+
+### 컬럼 폭 (`table-column-width`)
+
+`STable` 의 컬럼 폭은 `<colgroup>` 의 `<col width>` 로 들어가고 테이블이 `table-fixed` 라,
+**px 이 아닌 값은 에러 없이 화면만 틀어집니다** — `'30%'` 는 `30`(px)으로 읽히고, `clamp()` 같은
+함수형 값은 폭이 통째로 무효가 된 뒤 auto 로 떨어집니다.
+
+```tsx
+// 내용이 들어가는 열은 전부 폭을 명시한다 (생략하면 기본 120px 이 조용히 들어간다)
+{ name: 'name', label: '이름', field: 'name', width: 160 }
+{ name: 'code', label: '코드', field: 'code', width: '120px' }
+
+// autoWidth 는 남은 폭을 흡수하는 스페이서 열 하나에만 (값을 그리지 않으므로 field 도 없다)
+{ name: 'spacer', label: '', autoWidth: true }
+
+// ❌ 조용히 깨진다
+{ name: 'ratio', label: '비율', field: 'ratio', width: '30%' }
+// ❌ 값을 그리는 열의 autoWidth — 폭이 다른 열에 좌우돼 화면마다 달라진다
+{ name: 'title', label: '상품명', field: 'title', autoWidth: true, render: r => r.title }
+```
+
+검사 대상은 `name`(문자열 리터럴) · `label` 에 더해 **`field` 또는 `autoWidth` 를 가진 객체**입니다.
+검색 필터 필드나 상세 모달의 키-값 필드가 컬럼과 같은 `{ name, label, ... }` 모양이라, 그 둘만으로
+판정하면 표와 무관한 객체가 대부분 걸리기 때문입니다. 대신 `{ ...base, name, label }` 처럼 `field` 가
+스프레드로 들어오는 컬럼은 보고하지 않습니다 — 정적으로 필터 필드와 구분되지 않습니다.
+
+예외는 컬럼 `name` 을 `allow` 로 지정해 뺍니다.
+
+```js
+'sellmate/table-column-width': ['warn', { allow: ['spacer'] }],
+```
+
 ### 더 엄격하게 / 더 느슨하게
 
 `configs.strict` 는 전 규칙을 error 로 올리고, `<ul>` `<ol>` `<li>` `<svg>` `<label>` 까지 검사하며, 간격 유틸리티에 `sd-` 접두를 강제합니다(`requirePrefix`). 디자인 시스템 규칙을 처음부터 전면 적용하는 신규 프로젝트용입니다.

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

@@ -0,0 +1,31 @@
+import { type RefObject } from 'react';
+import { type SAccountListBoxContent } from './SAccountListBox';
+/**
+ * 계정 행이 놓인 자리. 리스트박스가 어느 방향으로 펼쳐질지를 **이것만** 정한다.
+ * - `panel` — GNB 바닥의 세로 판(접힌 레일 포함). 계정 행이 맨 아래라 위로 편다.
+ * - `top` — 전폭 상단바 오른쪽 끝. 줄이 화면 맨 위라 아래로 편다.
+ */
+type AccountListBoxAnchor = 'panel' | 'top';
+export declare const AccountListBoxAnchorProvider: import("react").Provider<AccountListBoxAnchor>;
+/**
+ * 계정 리스트박스를 앵커에 붙여 띄우는 내부 래퍼.
+ *
+ * 계정 행은 GNB 판(펼침)·레일(접힘)·상단바 세 자리에 서고, 세 자리 모두 "누르면 같은 패널이
+ * 뜬다". 그 여는 방식(위치 · SPortal 설정 · 행을 고르면 닫기)을 한 곳에 모아 두어야 자리마다
+ * 동작이 갈리지 않는다. 공개 API 가 아니므로 index.ts 로 내보내지 않는다 —
+ * 앱은 `SSystemActionButton` 의 `option` 이나 `SGnbSystem` 의 `account.listBox` 로 닿는다.
+ */
+interface AccountListBoxPortalOptions {
+    /** 표시 여부 */
+    open: boolean;
+    /** 표시 상태 변경 */
+    onOpenChange: (open: boolean) => void;
+    /** 붙을 트리거 엘리먼트 */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** 접근성 이름 */
+    ariaLabel?: string;
+    /** 패널에 담기는 내용 */
+    content: SAccountListBoxContent;
+}
+export declare function AccountListBoxPortal({ open, onOpenChange, anchorRef, ariaLabel, content, }: AccountListBoxPortalOptions): import("react").JSX.Element;
+export {};

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,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/SBadge/README.md

@@ -10,16 +10,42 @@
 |------|------|---------|-------------|
 | `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',
+  '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", "grey"];
 export type SBadgeColor = (typeof BADGE_COLORS)[number];
 export interface SBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** 뱃지 색상 */

package/dist/components/SBarcodeInput/README.md

@@ -18,11 +18,11 @@
 | `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` | — |  |
 | `labelWidth?` | `number \| string` | — |  |
@@ -35,7 +35,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 +47,14 @@
 | `onFocus` | `() => void` |  |
 | `onBlur` | `() => void` |  |
 
+## Types
+
+### SBarcodeInputSize
+
+```ts
+export type SBarcodeInputSize = SFieldSize;
+```
+
 ## Dependencies
 
 ### Depends on

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

@@ -4,6 +4,7 @@ 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,13 +21,15 @@ 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;
     labelWidth?: number | string;
@@ -39,7 +42,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,12 +15,48 @@
 | `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)
@@ -36,8 +72,10 @@
 ```mermaid
 graph TD;
   SButton --> SIcon
+  SCalendarBoard --> SButton
   SConfirmModal --> SButton
   SDropdownButton --> SButton
+  SEditor --> SButton
   SFooter --> SButton
   SKeyValueTable --> SButton
   SLoadingModal --> SButton