sellmate-design-system-react 9.0.0-beta.53 → 9.0.0-beta.55

package/dist/components/SIcon/README.md

@@ -44,6 +44,7 @@
  - [SGuide](../SGuide)
  - [SImage](../SImage)
  - [SKeyValueTable](../SKeyValueTable)
+ - [SLauncherListBox](../SLauncherListBox)
  - [SListItem](../SListItem)
  - [SLoadingModal](../SLoadingModal)
  - [SNumberInput](../SNumberInput)
@@ -90,6 +91,7 @@ graph TD;
   SGuide --> SIcon
   SImage --> SIcon
   SKeyValueTable --> SIcon
+  SLauncherListBox --> SIcon
   SListItem --> SIcon
   SLoadingModal --> SIcon
   SNumberInput --> SIcon

package/dist/components/SLauncherListBox/README.md

@@ -0,0 +1,81 @@
+# SLauncherListBox
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLauncherListBox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items?` | `SLauncherListBoxItem[]` | — | 목록에 세울 서비스. 비어 있으면 아무것도 렌더하지 않는다. **순서는 넘긴 대로가 아니라 카탈로그 순서다**(`LAUNCHER_SERVICES`) — 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 같은 서비스를 두 번 넘기면 처음 것만 선다. |
+| `ariaLabel?` | `string` | — | 목록(ul)의 접근성 레이블 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSelect` | `(service: SLauncherService) => void` | 서비스를 고름. **가는 것은 이 콜백이 하지 않는다** — 줄이 링크라 브라우저가 `href` 를 새 탭으로 연다. 고른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다. 갈 수 없는 줄(주소가 없거나 카탈로그가 아직 출시 전으로 든 서비스)은 눌리지 않으므로 여기로 오지 않는다. |
+
+## Types
+
+### SLauncherListBoxItem
+
+```ts
+/** 리스트박스의 한 줄 — 옮겨 갈 수 있는 서비스 하나 */
+export interface SLauncherListBoxItem {
+  /**
+   * 어느 서비스인가. **로고·표기·이름·상태 태그는 이 키 하나로 정해진다** — 카탈로그
+   * (`LAUNCHER_SERVICE_CATALOG`)가 들고 있으므로 앱이 넘기지 않는다.
+   */
+  service: SLauncherService;
+  /**
+   * 새 탭에서 열 주소. **디자인 시스템은 주소를 들지 않는다** — 앱마다 QA·실서버가 달라
+   * 여기서 관리할 수 없다.
+   *
+   * **주소를 주는 것이 곧 "갈 수 있다"는 뜻이다.** 비우면 줄은 목록에 남되 눌리지 않고
+   * 물러난다 — 지금 보고 있는 서비스든, 이 앱이 계약하지 않은 서비스든 갈 곳이 없기는 같다.
+   * 못 가는 줄을 막는 별도의 prop 은 없다.
+   */
+  href?: string;
+}
+```
+
+### SLauncherService
+
+```ts
+export type SLauncherService = (typeof LAUNCHER_SERVICES)[number];
+```
+
+### LAUNCHER_SERVICES
+
+```ts
+/**
+ * 런처에 설 수 있는 서비스 — **목록의 순서이기도 하다.**
+ * 앱이 넘긴 순서가 아니라 이 순서로 선다: 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다.
+ */
+export const LAUNCHER_SERVICES = ['sellmate', 'wms', 'account', 'crm'] as const;
+```
+
+## Dependencies
+
+### Used by
+
+ - [SGnb](../SGnb)
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [SLogo](../SLogo)
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SLauncherListBox --> SIcon
+  SLauncherListBox --> SLogo
+  SLauncherListBox --> STag
+  SGnb --> SLauncherListBox
+  style SLauncherListBox fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SLauncherListBox/SLauncherListBox.d.ts

@@ -0,0 +1,67 @@
+import { type HTMLAttributes } from 'react';
+import { type SLauncherService } from './launcherListBox.config';
+/** 리스트박스의 한 줄 — 옮겨 갈 수 있는 서비스 하나 */
+export interface SLauncherListBoxItem {
+    /**
+     * 어느 서비스인가. **로고·표기·이름·상태 태그는 이 키 하나로 정해진다** — 카탈로그
+     * (`LAUNCHER_SERVICE_CATALOG`)가 들고 있으므로 앱이 넘기지 않는다.
+     */
+    service: SLauncherService;
+    /**
+     * 새 탭에서 열 주소. **디자인 시스템은 주소를 들지 않는다** — 앱마다 QA·실서버가 달라
+     * 여기서 관리할 수 없다.
+     *
+     * **주소를 주는 것이 곧 "갈 수 있다"는 뜻이다.** 비우면 줄은 목록에 남되 눌리지 않고
+     * 물러난다 — 지금 보고 있는 서비스든, 이 앱이 계약하지 않은 서비스든 갈 곳이 없기는 같다.
+     * 못 가는 줄을 막는 별도의 prop 은 없다.
+     */
+    href?: string;
+}
+export interface SLauncherListBoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /**
+     * 목록에 세울 서비스. 비어 있으면 아무것도 렌더하지 않는다.
+     *
+     * **순서는 넘긴 대로가 아니라 카탈로그 순서다**(`LAUNCHER_SERVICES`) — 같은 런처가 앱마다
+     * 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 같은 서비스를 두 번 넘기면 처음 것만 선다.
+     */
+    items?: SLauncherListBoxItem[];
+    /**
+     * 서비스를 고름. **가는 것은 이 콜백이 하지 않는다** — 줄이 링크라 브라우저가 `href` 를
+     * 새 탭으로 연다. 고른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다.
+     *
+     * 갈 수 없는 줄(주소가 없거나 카탈로그가 아직 출시 전으로 든 서비스)은 눌리지 않으므로
+     * 여기로 오지 않는다.
+     */
+    onSelect?: (service: SLauncherService) => void;
+    /** 목록(ul)의 접근성 레이블 */
+    ariaLabel?: string;
+}
+/**
+ * SLauncherListBox — GNB 의 앱런처 버튼을 눌렀을 때 뜨는 서비스 목록.
+ *
+ * 한 줄이 서비스 하나다: 위에 브랜드 로고(+ 상태 태그), 아래에 한글 이름.
+ *
+ * **앱이 넘기는 것은 서비스 키와 주소 둘뿐이다.** 로고·서비스 표기·이름·상태 태그는 카탈로그
+ * (`LAUNCHER_SERVICE_CATALOG`)가 서비스마다 한 모습으로 정해 두므로 앱이 넘기지 않는다 —
+ * 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다.
+ *
+ * **주소는 카탈로그에 두지 않는다.** 앱마다 QA·실서버 주소가 달라 디자인 시스템이 관리할 수 없다.
+ * 앱이 `href` 로 넘기면 줄이 링크가 되어 **새 탭에서 열린다** — 가운데 클릭·⌘클릭도 그대로 듣는다.
+ * **주소를 주는 것이 곧 "갈 수 있다"는 뜻이다**: 주지 않은 줄은 눌리지 않는다(지금 보고 있는
+ * 서비스이거나 이 앱이 계약하지 않은 서비스). 줄을 막는 별도의 prop 은 없다.
+ *
+ * **줄에 얹으면 "여기서 나간다"는 것이 드러난다** — 배경이 옅은 파랑으로 물들고 이름이 한 단계
+ * 진해지며, 오른쪽 끝에 페이지 이동 아이콘이 떠오른다. 아이콘 자리는 늘 비워 두므로 얹었다 뗄 때
+ * 글자가 밀리지 않는다.
+ *
+ * 갈 수 없는 줄은 눌리지 않고 로고는 색이 빠지며 이름은 비활성 글자색이 된다. **목록에서 빼지
+ * 않는 것이 기본이다**: 그 서비스가 있다는 사실과 지금은 못 간다는 사실을 함께 알리는 것이 런처의
+ * 일이다. 출시 전인 서비스는 카탈로그가 `출시예정` 태그와 함께 막아 두므로 앱이 할 일이 없다.
+ *
+ * **이 컴포넌트는 패널만 그린다.** 런처 버튼에 붙여 띄우는 것은 `SGnb` 의 `launcher` 가 맡으므로
+ * (`launcher.items` 에 이 목록을 넘긴다), 앱이 직접 팝오버를 조립할 일은 없다.
+ *
+ * 토큰은 `--cmp-gnb-launcher-listBox-*`(패널) · `--cmp-gnb-launcher-button-*`(줄).
+ * **줄 높이는 상수가 아니라 여백에서 나온다** — 토큰이 바뀌면 따라 바뀐다.
+ */
+export declare const SLauncherListBox: import("react").ForwardRefExoticComponent<SLauncherListBoxProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { SLauncherListBox, type SLauncherListBoxProps, type SLauncherListBoxItem, } from './SLauncherListBox';
+export { LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, type SLauncherService, type SLauncherServiceEntry, } from './launcherListBox.config';

package/dist/components/SLauncherListBox/launcherListBox.config.d.ts

@@ -0,0 +1,118 @@
+import type { SIconName } from '../SIcon';
+import type { STagColor } from '../STag';
+/**
+ * 패널 고정 폭(px, 시안 — 전용 토큰 없음).
+ * 담기는 것은 서비스 로고 한 줄이라 내용 폭을 따르면 로고 길이에 따라 패널이 출렁인다.
+ */
+export declare const LAUNCHER_LIST_BOX_WIDTH = 320;
+/**
+ * 로고 글리프 높이(px, 시안 — 전용 토큰 없음).
+ * 로고 줄 높이(20px = 위아래 여백 4 + 이 값)에서 여백을 뺀 나머지이고, 그 20px 이 태그(STag xs)
+ * 높이와 같아 로고와 태그가 한 줄에 나란히 선다.
+ */
+export declare const LAUNCHER_LIST_BOX_LOGO_HEIGHT = 12;
+/**
+ * 워드마크 ↔ 서비스 표기 간격(px, 시안 — 전용 토큰 없음).
+ * 토큰의 `logo.gap` 은 [워드마크+표기] 묶음과 태그 사이의 간격이라 여기 쓸 값이 아니다.
+ */
+export declare const LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP = 8;
+/**
+ * hover 때 줄 오른쪽 끝에 나타나는 아이콘 — "여기서 다른 서비스로 옮겨 간다"는 표시.
+ * 크기·색은 토큰이 정하지만 **어떤 글리프인지는 토큰에 없어** 뜻이 가장 가까운 것을 골랐다.
+ * TODO(디자인): 시안의 글리프를 확인해 확정한다.
+ */
+export declare const LAUNCHER_LIST_BOX_TRAILING_ICON: SIconName;
+/**
+ * 런처에 설 수 있는 서비스 — **목록의 순서이기도 하다.**
+ * 앱이 넘긴 순서가 아니라 이 순서로 선다: 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다.
+ */
+export declare const LAUNCHER_SERVICES: readonly ["sellmate", "wms", "account", "crm"];
+export type SLauncherService = (typeof LAUNCHER_SERVICES)[number];
+/** 카탈로그 한 줄 — 그 서비스가 런처에서 갖는 고정된 모습 */
+export interface SLauncherServiceEntry {
+    /**
+     * 워드마크 오른쪽에 잇는 서비스 표기(`WMS` · `Account` · `CRM`). 셀메이트 본체처럼 표기가
+     * 없는 서비스는 비운다 — 워드마크만 선다.
+     */
+    mark?: string;
+    /** 로고 아래 줄에 적히는 서비스 이름 */
+    name: string;
+    /**
+     * 상태 태그(`출시예정`·`NEW` 등). **앱이 붙이거나 지울 수 없다** — 같은 서비스가 앱마다
+     * 다른 문구를 달면 그 문구를 사용자가 믿을 수 없게 된다.
+     */
+    tag?: string;
+    /** 태그 색. 비우면 `'grey'` */
+    tagColor?: STagColor;
+    /** 태그 라벨 왼쪽 아이콘 */
+    tagIcon?: SIconName;
+    /** 아직 아무도 못 쓰는 서비스(출시 전). 계약 여부처럼 앱마다 갈리는 것은 여기 적지 않는다 */
+    disabled?: boolean;
+}
+/**
+ * 서비스 카탈로그 — **런처에 서는 각 서비스의 모습은 여기가 정한다.**
+ *
+ * 앱은 서비스 키와 갈 주소만 넘긴다. 표기·이름·태그를 앱이 넘기게 하면 같은 서비스가 앱마다 다른
+ * 이름으로 서고(`셀메이트 어카운트` / `Account` / `어카운트`), 한쪽을 고쳐도 나머지는 그대로 남는다.
+ *
+ * **주소는 여기 없다.** 앱마다 QA·실서버 주소가 다르므로 갈 곳은 앱이 `href` 로 넘긴다.
+ *
+ * 서비스가 늘거나 이름·상태가 바뀌면 이 표를 고치고 릴리스한다 — 소비 앱은 고칠 것이 없다.
+ */
+export declare const LAUNCHER_SERVICE_CATALOG: Record<SLauncherService, SLauncherServiceEntry>;
+/** 치수·색 — 전용 토큰이 없는 자리만 위 상수를 쓴다 */
+export declare const LAUNCHER_LIST_BOX_LAYOUT: {
+    /** 패널 배경 */
+    readonly bg: string;
+    /** 패널 라운드 */
+    readonly radius: string;
+    /** 패널 상하좌우 여백 */
+    readonly padding: string;
+    /**
+     * 패널 그림자.
+     * 토큰(`component.gnb.launcher.listBox.shadow` = `{shadow.floating}`)은 값이 배열이라
+     * `--cmp-*` 로 나오지 않는다 — 생성기가 스칼라만 내보내기 때문이다. 그래서 그 별칭이
+     * 가리키는 스케일 토큰을 직접 쓴다(같은 값이다).
+     */
+    readonly shadow: "var(--shadow-floating)";
+    /** 줄 왼쪽 여백 */
+    readonly itemPaddingLeft: string;
+    /** 줄 오른쪽 여백 — 왼쪽보다 좁다(오른쪽 끝은 hover 아이콘 자리다) */
+    readonly itemPaddingRight: string;
+    /** 줄 상하 여백 */
+    readonly itemPaddingY: string;
+    /** 줄 안의 [로고·이름 묶음] ↔ [hover 아이콘] 간격 */
+    readonly itemGap: string;
+    /** 줄 라운드 */
+    readonly itemRadius: string;
+    /** 줄 배경 */
+    readonly itemBg: string;
+    /** 줄 hover 배경 */
+    readonly itemBgHover: string;
+    /** 서비스 이름 글자색 */
+    readonly nameColor: string;
+    /** 서비스 이름 hover 글자색 */
+    readonly nameColorHover: string;
+    /** 로고 줄의 위아래 여백 */
+    readonly logoPaddingY: string;
+    /** [워드마크 + 서비스 표기] ↔ 태그 간격 */
+    readonly logoTagGap: string;
+    /** 워드마크 ↔ 서비스 표기 간격 */
+    readonly logoServiceGap: "8px";
+    /** hover 아이콘 크기 */
+    readonly trailingIconSize: string;
+    /** hover 아이콘 색 */
+    readonly trailingIconColor: string;
+    /**
+     * 아직 못 쓰는 서비스의 이름 글자색.
+     * 런처 한 벌에 비활성 색이 없어(시안에 disabled 상태 토큰이 없다) 시맨틱 토큰을 쓴다.
+     */
+    readonly nameDisabledColor: string;
+    /**
+     * 아직 못 쓰는 서비스의 로고 색 — 워드마크와, 글자로 온 서비스 표기에 함께 건다.
+     * 둘 다 색만 갈아끼우면 되므로 그래픽 마크에 거는 필터(회색화)를 태우지 않는다 — 태우면
+     * 밝은 accentLight 가 워드마크보다 더 옅어져 둘이 따로 논다. 로고는 글자가 아니라 그림에
+     * 가까우므로 글자색(disabled-text)이 아니라 아이콘 비활성색을 쓴다.
+     */
+    readonly logoDisabledColor: string;
+};

package/dist/components/SLoginCard/README.md

@@ -25,11 +25,13 @@
 ### Depends on
 
 - [SButton](../SButton)
+- [SLogo](../SLogo)
 
 ### Graph
 
 ```mermaid
 graph TD;
   SLoginCard --> SButton
+  SLoginCard --> SLogo
   style SLoginCard fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SLogo/README.md

@@ -0,0 +1,54 @@
+# SLogo
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLogo
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name?` | `SLogoName` | `'sellmate'` | 로고명 |
+| `size?` | `number \| string` | `LOGO_DEFAULT_SIZE` | **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 워드마크 비율에서 저절로 나온다. `SIcon` 의 `size` 와 달리 정사각이 아니다(로고는 가로로 길다). |
+| `color?` | `SColor` | — | 색. 팔레트 키(`grey_45`, `red_95` …) 또는 임의 CSS 색상. **로고 전체가 이 한 색이 된다.** 미지정 시 **브랜드 기본색**이다 — `SIcon` 과 달리 currentColor 를 상속하지 않는다. 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라지기 때문이다. 비활성처럼 물러나야 하는 자리에서만 색을 준다. |
+| `label?` | `string` | — | 접근성 라벨. 없으면 `aria-hidden` 이다 — 로고 옆에 서비스 이름이 이미 적혀 있는 자리 (런처 목록의 한 줄 등)에서는 이름이 두 번 읽히지 않도록 그대로 둔다. 로고가 그 자리의 유일한 이름이면(로그인 화면·상단바) 브랜드명을 넘긴다. |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+## Types
+
+### SLogoName
+
+```ts
+export type SLogoName = (typeof LOGO_NAMES)[number];
+```
+
+### LOGO_NAMES
+
+```ts
+/**
+ * SLogo 설정.
+ *
+ * 로고는 브랜드 자산이라 **색·비율이 토큰을 따르지 않는다** — 테마가 바뀌어도 로고는 그대로여야
+ * 하고, 워드마크의 비율은 자산 자체가 정한다. 그래서 이 파일의 값은 토큰 참조가 아니다.
+ */
+
+/** 담고 있는 로고. 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다 */
+export const LOGO_NAMES = ['sellmate'] as const;
+```
+
+## Dependencies
+
+### Used by
+
+ - [SLauncherListBox](../SLauncherListBox)
+ - [SLoginCard](../SLoginCard)
+
+### Graph
+
+```mermaid
+graph TD;
+  SLauncherListBox --> SLogo
+  SLoginCard --> SLogo
+  style SLogo fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SLogo/SLogo.d.ts

@@ -0,0 +1,47 @@
+import { type CSSProperties } from 'react';
+import { type SColor } from '../../lib/color';
+import { type SLogoName } from './logo.config';
+export interface SLogoProps {
+    /** 로고명 */
+    name?: SLogoName;
+    /**
+     * **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 워드마크 비율에서 저절로 나온다.
+     * `SIcon` 의 `size` 와 달리 정사각이 아니다(로고는 가로로 길다).
+     */
+    size?: number | string;
+    /**
+     * 색. 팔레트 키(`grey_45`, `red_95` …) 또는 임의 CSS 색상. **로고 전체가 이 한 색이 된다.**
+     *
+     * 미지정 시 **브랜드 기본색**이다 — `SIcon` 과 달리 currentColor 를 상속하지 않는다.
+     * 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라지기 때문이다.
+     * 비활성처럼 물러나야 하는 자리에서만 색을 준다.
+     */
+    color?: SColor;
+    /**
+     * 접근성 라벨. 없으면 `aria-hidden` 이다 — 로고 옆에 서비스 이름이 이미 적혀 있는 자리
+     * (런처 목록의 한 줄 등)에서는 이름이 두 번 읽히지 않도록 그대로 둔다.
+     * 로고가 그 자리의 유일한 이름이면(로그인 화면·상단바) 브랜드명을 넘긴다.
+     */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SLogo — 브랜드 로고를 아이콘처럼 쓰는 컴포넌트.
+ *
+ * `SIcon` 과 같은 손맛(`name` · `size` · `color`)이지만 두 가지가 다르다.
+ * - **`size` 는 높이다.** 로고는 가로로 긴 워드마크라 정사각으로 그리면 찌그러진다 — 폭은 비율에서 나온다.
+ * - **색을 주지 않으면 브랜드 기본색이다.** currentColor 를 상속하지 않는다(위 `color` 참고).
+ *
+ * **서비스 로고는 `sellmate` 하나뿐이다.** 서비스별 표기(WMS · Account · CRM …)는 이 워드마크
+ * 오른쪽에 소비 앱이 자기 텍스트나 자기 로고로 붙인다 — 서비스가 늘어날 때마다 디자인 시스템을
+ * 다시 배포하지 않으려는 것이다.
+ *
+ * ```tsx
+ * <SLogo />                                  // 브랜드색, 높이 24
+ * <SLogo size={12} />                        // 런처 목록의 한 줄
+ * <SLogo size={12} color="grey_45" />        // 아직 못 쓰는 서비스
+ * <SLogo size={32} label="Sellmate" />       // 로고가 그 자리의 유일한 이름일 때
+ * ```
+ */
+export declare const SLogo: import("react").ForwardRefExoticComponent<SLogoProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,2 @@
+export { SLogo, type SLogoProps } from './SLogo';
+export { LOGO_DEFAULT_SIZE, LOGO_NAMES, type SLogoName } from './logo.config';

package/dist/components/SLogo/logo.config.d.ts

@@ -0,0 +1,14 @@
+/**
+ * SLogo 설정.
+ *
+ * 로고는 브랜드 자산이라 **색·비율이 토큰을 따르지 않는다** — 테마가 바뀌어도 로고는 그대로여야
+ * 하고, 워드마크의 비율은 자산 자체가 정한다. 그래서 이 파일의 값은 토큰 참조가 아니다.
+ */
+/** 담고 있는 로고. 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다 */
+export declare const LOGO_NAMES: readonly ["sellmate"];
+export type SLogoName = (typeof LOGO_NAMES)[number];
+/**
+ * 기본 높이(px). `SIcon` 과 같은 값이라 나란히 쓸 때 손에 익은 크기가 같다.
+ * 폭은 주지 않는다 — 로고마다 다른 비율에서 저절로 나온다.
+ */
+export declare const LOGO_DEFAULT_SIZE = 24;

package/dist/components/SLogo/sellmate-wordmark.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+/**
+ * Sellmate 브랜드 색. **브랜드 자산의 일부라 토큰을 거치지 않는다** — 대응하는 색 토큰이 없고
+ * (가장 가까운 `--color-primary-90` 도 `#002B5E` 로 다른 색이다), 있더라도 로고 색은 테마를
+ * 따라 바뀌면 안 되는 값이다. `scripts/check-hardcoded.mjs` 의 ALLOW 에 등록해 둔다.
+ */
+export declare const SELLMATE_NAVY = "#00275F";
+/**
+ * @internal
+ * Sellmate 워드마크 — `SLogo` 가 그리는 유일한 글리프. 밖으로 내보내지 않는다(앱은 SLogo 로 닿는다).
+ *
+ * **`fill` 을 갖지 않는다** — 색은 `SLogo` 가 감싸는 span 의 `color` 로 내려주고 여기서는
+ * `currentColor` 를 상속한다. 그래야 `SLogo` 의 `color` 하나로 워드마크 전체가 한 색이 된다.
+ * 브랜드 기본색은 `SELLMATE_NAVY` 로, 색을 주지 않았을 때 SLogo 가 그 값을 내려준다.
+ *
+ * 크기도 갖지 않는다 — 높이만 SLogo 가 주고 폭은 viewBox 비율(276:40)에서 나온다.
+ */
+export declare function SellmateWordmark({ style }: {
+    style?: CSSProperties;
+}): import("react").JSX.Element;

package/dist/components/SModal/README.md

@@ -47,7 +47,7 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 
 ## SModal.confirm
 
-아이콘 + 제목 + 메시지 + 확인/취소 버튼. `type` 에 따라 아이콘·메인 버튼 색이 결정된다.
+아이콘 + 제목 + 메시지 + 확인 버튼. `type` 에 따라 아이콘·메인 버튼 색이 결정된다.
 
 ```tsx
 SModal.confirm({
@@ -55,13 +55,23 @@ SModal.confirm({
   modalTitle: '삭제하시겠습니까?',
   topMessage: ['이 작업은 되돌릴 수 없습니다.'],
   mainButtonLabel: '삭제',
-  subButtonLabel: '취소',
+}).onOk(() => deleteItem());
+```
+
+**`subButtonLabel` 은 기본이 비어 있고, 그대로 두는 것이 기본이다.** `onCancel` 이 닫는 것 말고 따로 할 일이 있을 때만 준다 — 눌러도 창만 닫힌다면 X 버튼이 이미 하는 일이라(백드롭·ESC 도 열려 있다) 같은 버튼을 하나 더 세우지 않는다. 되묻는 모달도 예외가 아니다. 서브 버튼이 설 자리는 확인과 대등한 두 번째 선택지일 때이고, 그때 글자는 `취소`·`닫기` 가 아니라 그 버튼이 하는 일의 이름이 된다.
+
+```tsx
+SModal.confirm({
+  type: 'negative',
+  modalTitle: '재고가 모자란 주문이 있습니다',
+  mainButtonLabel: '자동 취소',
+  subButtonLabel: '수동 처리',
 })
-  .onOk(() => deleteItem())
-  .onCancel(() => {});
+  .onOk(() => cancelShortOrders())
+  .onCancel(() => openManualFlow());
 ```
 
-**옵션 (`SConfirmOptions`)** — 선언형 `SConfirmModalProps` 에서 제어 흐름 props(`open`/`onOpenChange`/`onOk`/`onCancel`/`onClose`)를 제외한 전부. 주요 키: `type`, `modalTitle`, `topMessage`/`bottomMessage`, `mainButtonLabel`/`mainButtonOutline`, `subButtonLabel`, `tagSlot`/`optionSlot`/`contentSlot`, `persistent`.
+**옵션 (`SConfirmOptions`)** — 선언형 `SConfirmModalProps` 에서 제어 흐름 props(`open`/`onOpenChange`/`onOk`/`onCancel`/`onClose`)를 제외한 전부. 주요 키: `type`, `modalTitle`, `topMessage`/`bottomMessage`, `mainButtonLabel`/`mainButtonOutline`/`mainButtonDisabled`, `subButtonLabel`, `tagSlot`/`optionSlot`/`contentSlot`, `persistent`.
 
 ---
 

package/dist/components/SModal/SModal.d.ts

@@ -82,7 +82,7 @@ export interface SModalRef {
  *
  * @example
  * // 확인/취소
- * SModal.confirm({ type: 'negative', modalTitle: '삭제하시겠습니까?', mainButtonLabel: '삭제', subButtonLabel: '취소' })
+ * SModal.confirm({ type: 'negative', modalTitle: '삭제하시겠습니까?', mainButtonLabel: '삭제' })
  *   .onOk(() => deleteItem())
  *   .onCancel(() => {});
  *

package/dist/components/SPortal/README.md

@@ -54,6 +54,7 @@ export type SPortalAlign = 'start' | 'center' | 'end';
 
  - [SAccountListBox](../SAccountListBox)
  - [SChipInput](../SChipInput)
+ - [SGnb](../SGnb)
  - [SGnbSystem](../SGnbSystem)
  - [SSelect](../SSelect)
 
@@ -63,6 +64,7 @@ export type SPortalAlign = 'start' | 'center' | 'end';
 graph TD;
   SAccountListBox --> SPortal
   SChipInput --> SPortal
+  SGnb --> SPortal
   SGnbSystem --> SPortal
   SSelect --> SPortal
   style SPortal fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/STag/README.md

@@ -72,6 +72,7 @@ export const TAG_COLORS = [
  - [SConfirmModal](../SConfirmModal)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
+ - [SLauncherListBox](../SLauncherListBox)
  - [SRadioCard](../SRadioCard)
  - [SSystemActionButton](../SSystemActionButton)
  - [STabs](../STabs)
@@ -90,6 +91,7 @@ graph TD;
   SConfirmModal --> STag
   SGhostButton --> STag
   SGnb --> STag
+  SLauncherListBox --> STag
   SRadioCard --> STag
   SSystemActionButton --> STag
   STabs --> STag