sellmate-design-system-react 9.0.0-beta.7 → 9.0.0-beta.71

package/dist/components/SListItem/README.md

@@ -23,6 +23,47 @@
 | `size?` | `SListItemSize` | `'sm'` | 타이포그래피 크기 |
 | `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
 
+## Types
+
+### SListItemSlot
+
+```ts
+export type SListItemSlot = ReactNode | SListItemRenderProp;
+```
+
+### SListItemSupportingTextPosition
+
+```ts
+export type SListItemSupportingTextPosition = 'right' | 'bottom';
+```
+
+### SListItemInteraction
+
+```ts
+export type SListItemInteraction = 'chevron';
+```
+
+### SListItemSize
+
+```ts
+export type SListItemSize = 'sm' | 'md';
+```
+
+### SListItemRenderProp
+
+```ts
+export type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;
+```
+
+### SListItemRenderState
+
+```ts
+export interface SListItemRenderState {
+  hovered: boolean;
+  disabled: boolean;
+}
+```
+
 ## Dependencies
 
 ### Used by

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

@@ -1 +1 @@
-export { SListItem, type SListItemProps, type SListItemSupportingTextPosition } from './SListItem';
+export { SListItem, type SListItemInteraction, type SListItemProps, type SListItemRenderProp, type SListItemRenderState, type SListItemSize, type SListItemSlot, type SListItemSupportingTextPosition, } from './SListItem';

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

@@ -1,2 +1,2 @@
 export { SLoadingContainer, type SLoadingContainerProps } from './SLoadingContainer';
-export { loading, SLoadingViewport } from './loading';
+export { loading, type SLoadingHandle } from './loading';

package/dist/components/SLoadingContainer/loading.d.ts

@@ -1,10 +1,45 @@
-/** 오버레이 뷰포트 — 스토어를 구독해 SLoadingContainer 를 렌더한다. 직접 배치도 가능. */
-export declare function SLoadingViewport(): import("react").JSX.Element;
+/**
+ * `show()` 가 돌려주는 핸들 — **이 호출 하나**만 걷고 갱신한다.
+ * 부르면 걷고, `update()` 로 이 호출의 메시지만 바꾼다. 둘 다 id 기준이라 겹친 다른 작업의
+ * 항목은 건드리지 않는다. (Quasar `Loading.show()` 가 돌려주는 그룹 함수와 같은 자리다.)
+ */
+export interface SLoadingHandle {
+    (): void;
+    update(options: {
+        message?: string;
+    }): void;
+}
 export declare const loading: {
-    /** 로딩 오버레이 표시 (메시지 갱신도 동일 호출) */
+    /**
+     * 로딩 오버레이 표시. 겹쳐 부르면 그만큼 쌓이고 **마지막 하나가 걷힐 때** 닫힌다.
+     * 반환값은 이 호출 하나를 걷고 갱신하는 핸들이다(두 번 걷어도 한 번만 걷힌다).
+     *
+     * **걷는 것은 `finally` 에 둔다.** 빠뜨리면 그 즉시 화면이 갇히고, 정상 경로에서는 아무
+     * 표시가 없다.
+     *
+     * ```ts
+     * const done = loading.show({ message: '1/2 ...' });
+     * try {
+     *   done.update({ message: '2/2 ...' });   // 이 호출의 메시지만 바뀐다
+     *   await api.submit(payload);
+     * } finally {
+     *   done();                                // 이 호출만 걷는다
+     * }
+     * ```
+     *
+     * ⚠️ **메시지를 바꾸려고 `show()` 를 다시 부르지 않는다.** 하나 더 쌓여 한 번 걷는 것으로는
+     * 닫히지 않는다. 핸들의 `update()` 를 쓴다. (참조 카운트 이전에는 `show()` 를 다시 부르는
+     * 것이 갱신이었다 — Quasar 도 같은 그룹에 다시 show 하면 갱신이다. 그 시절 관행대로 쓰인
+     * 코드는 지금 오버레이를 하나 남긴다.)
+     */
     show(options?: {
         message?: string;
-    }): void;
-    /** 로딩 오버레이 숨김 */
-    hide(): void;
+    }): SLoadingHandle;
+    /**
+     * 쌓인 것을 모두 걷고 즉시 닫는다. **원본(Quasar)의 인자 없는 `hide()` 가 이것이다.**
+     * 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는 맞출 수 없을 때만 쓴다 — 평소에는
+     * `show()` 가 준 핸들로 걷는다.
+     * 이걸로 걷힌 항목의 주인이 뒤늦게 자기 핸들을 불러도 아무 일도 일어나지 않는다.
+     */
+    hideAll(): void;
 };

package/dist/components/SLoadingModal/README.md

@@ -10,10 +10,10 @@
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
 | `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
-| `state?` | `LoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
+| `state?` | `SLoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
 | `progress?` | `number` | — | 진행률 (0–100) — 지정 시 determinate 스피너 |
 | `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
-| `useButton?` | `boolean` | `false` | 하단 버튼 표시 |
+| `showButton?` | `boolean` | `false` | 하단 버튼 표시 |
 | `buttonLabel?` | `string` | — | 버튼 레이블 (없으면 state 기본값) |
 | `width?` | `number \| string` | `520` |  |
 | `height?` | `number \| string` | `320` |  |
@@ -26,6 +26,14 @@
 | `onClose` | `() => void` | 닫기(X) 버튼 클릭 (sdClose) — error 상태에서만 노출 |
 | `onButtonClick` | `() => void` | 버튼 클릭 (sdClick) |
 
+## Types
+
+### SLoadingModalState
+
+```ts
+export type SLoadingModalState = 'loading' | 'error';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SLoadingModal/SLoadingModal.d.ts

@@ -1,4 +1,4 @@
-export type LoadingModalState = 'loading' | 'error';
+export type SLoadingModalState = 'loading' | 'error';
 export interface SLoadingModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -7,13 +7,13 @@ export interface SLoadingModalProps {
     /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
     persistent?: boolean;
     /** 상태 (loading: 스피너, error: 경고 아이콘) */
-    state?: LoadingModalState;
+    state?: SLoadingModalState;
     /** 진행률 (0–100) — 지정 시 determinate 스피너 */
     progress?: number;
     /** 메시지 (없으면 state 기본값) */
     message?: string | string[];
     /** 하단 버튼 표시 */
-    useButton?: boolean;
+    showButton?: boolean;
     /** 버튼 레이블 (없으면 state 기본값) */
     buttonLabel?: string;
     /** 버튼 클릭 (sdClick) */
@@ -22,4 +22,4 @@ export interface SLoadingModalProps {
     height?: number | string;
 }
 /** SLoadingModal — sd-loading-modal 포팅. state(loading/error) + progress + 옵션 버튼. */
-export declare function SLoadingModal({ open, onOpenChange, onClose, persistent, state, progress, message, useButton, buttonLabel, onButtonClick, width, height, }: SLoadingModalProps): import("react").JSX.Element;
+export declare function SLoadingModal({ open, onOpenChange, onClose, persistent, state, progress, message, showButton, buttonLabel, onButtonClick, width, height, }: SLoadingModalProps): import("react").JSX.Element;

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

@@ -1 +1 @@
-export { SLoadingModal, type SLoadingModalProps } from './SLoadingModal';
+export { SLoadingModal, type SLoadingModalProps, type SLoadingModalState } from './SLoadingModal';

package/dist/components/SLoginCard/README.md

@@ -0,0 +1,37 @@
+# SLoginCard
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLoginCard
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `product` | `ReactNode` | — | 로고 아래 제품명 (예: `AI assistant` · `account` · `chat`) |
+| `title` | `ReactNode` | — | 제품을 한 줄로 소개하는 문장 |
+| `description?` | `ReactNode` | — | 소개 문장 바로 아래 붙는 보조 설명. 소개와 한 덩어리로 읽힌다 |
+| `footerNote?` | `ReactNode` | — | 버튼 아래 안내 문구 (예: 계정 발급 문의 안내) |
+| `bottomAction?` | `ReactNode` | — | 카드 **맨 아래**에 서는 보조 진입점 (예: 관리자 로그인). 가운데 덩어리와 섞이지 않도록 바닥에 붙고, 위 덩어리는 카드 한가운데에 그대로 선다. `STextLink` 하나만 넣는다 — 이 자리는 "이 화면에서 할 일은 로그인 하나"라는 뜻을 깨지 않을 만큼만 작아야 해서, 버튼이나 문단이 서는 자리가 아니다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onLogin` | `() => void` | 로그인 버튼을 눌렀을 때. 버튼 자체는 카드가 그리므로 **동작만 넘긴다** — 문구·색·크기는 세 제품에서 같아야 해서 카드가 쥐고 있다. |
+
+## Dependencies
+
+### 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/SLoginCard/SLoginCard.d.ts

@@ -0,0 +1,39 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface SLoginCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** 로고 아래 제품명 (예: `AI assistant` · `account` · `chat`) */
+    product: ReactNode;
+    /** 제품을 한 줄로 소개하는 문장 */
+    title: ReactNode;
+    /** 소개 문장 바로 아래 붙는 보조 설명. 소개와 한 덩어리로 읽힌다 */
+    description?: ReactNode;
+    /**
+     * 로그인 버튼을 눌렀을 때. 버튼 자체는 카드가 그리므로 **동작만 넘긴다** —
+     * 문구·색·크기는 세 제품에서 같아야 해서 카드가 쥐고 있다.
+     */
+    onLogin?: () => void;
+    /** 버튼 아래 안내 문구 (예: 계정 발급 문의 안내) */
+    footerNote?: ReactNode;
+    /**
+     * 카드 **맨 아래**에 서는 보조 진입점 (예: 관리자 로그인). 가운데 덩어리와 섞이지 않도록
+     * 바닥에 붙고, 위 덩어리는 카드 한가운데에 그대로 선다.
+     *
+     * `STextLink` 하나만 넣는다 — 이 자리는 "이 화면에서 할 일은 로그인 하나"라는 뜻을 깨지 않을
+     * 만큼만 작아야 해서, 버튼이나 문단이 서는 자리가 아니다.
+     */
+    bottomAction?: ReactNode;
+}
+/**
+ * SLoginCard — 통합 계정 로그인 화면의 카드.
+ *
+ * 로고·제품명·소개·로그인 버튼·안내 문구를 세로 가운데로 세운다. 제품마다 다른 것은 문구뿐이라
+ * 문구와 로그인 동작만 prop 으로 받고 로고·버튼·간격·타이포·색은 카드가 쥔다.
+ *
+ * **크기는 부모가 정한다** — 폭은 368~640px 사이에서 부모를 채우고, 높이도 부모가 준 만큼 채운다.
+ *
+ * 관리자 로그인 같은 보조 진입점은 `bottomAction` 으로 카드 바닥에 세운다 — 가운데 덩어리는
+ * 그만큼 밀리지 않고 카드 한가운데에 그대로 선다.
+ *
+ * **카드는 화면을 잡지 않는다** — 회색 바탕과 가운데 정렬은 앱이 만드는 한 겹이다 (AGENTS.md §4-6).
+ * 덕분에 로그인 화면 밖(세션 만료 재인증 등)에서도 같은 카드를 그대로 쓸 수 있다.
+ */
+export declare const SLoginCard: import("react").ForwardRefExoticComponent<SLoginCardProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { SLoginCard, type SLoginCardProps } from './SLoginCard';

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

@@ -0,0 +1,67 @@
+# SMeatballButton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SMeatballButton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size?` | `SMeatballButtonSize` | `'sm'` | 버튼 크기 |
+| `intent?` | `SMeatballButtonIntent` | `'default'` | 색상 의도. 어두운 배경 위에서는 inverse |
+| `items?` | `SMeatballButtonItem[]` | `[]` | 메뉴 항목 목록 |
+| `tooltipText?` | `string` | `'기능 더 보기'` | 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다. |
+| `ariaLabel?` | `string` | — | 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 '기능 더 보기' |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `className?` | `string` | — | 버튼을 감싸는 요소의 클래스. 위치 조정(absolute 배치 등)용 |
+| `style?` | `CSSProperties` | — | 버튼을 감싸는 요소의 스타일. 위치 조정용 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onItemClick` | `(value: string \| number) => void` | 메뉴 항목 선택 |
+| `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `open` | `() => void` | 메뉴 열기 |
+| `close` | `() => void` | 메뉴 닫기 |
+
+## Types
+
+### SMeatballButtonSize
+
+```ts
+export type SMeatballButtonSize = SGhostButtonSize;
+```
+
+### SMeatballButtonIntent
+
+```ts
+export type SMeatballButtonIntent = 'default' | 'inverse';
+```
+
+### SMeatballButtonItem
+
+```ts
+/** 메뉴 항목 — SDropdownButton 과 같은 모양이다 */
+export type SMeatballButtonItem = SDropdownButtonItem;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+
+### Graph
+
+```mermaid
+graph TD;
+  SMeatballButton --> SGhostButton
+  style SMeatballButton fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SMeatballButton/SMeatballButton.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties } from 'react';
+import { type SGhostButtonSize } from '../SGhostButton';
+import type { SDropdownButtonItem } from '../SDropdownButton';
+export type SMeatballButtonSize = SGhostButtonSize;
+export type SMeatballButtonIntent = 'default' | 'inverse';
+/** 메뉴 항목 — SDropdownButton 과 같은 모양이다 */
+export type SMeatballButtonItem = SDropdownButtonItem;
+export interface SMeatballButtonHandle {
+    /** 메뉴 열기 */
+    open: () => void;
+    /** 메뉴 닫기 */
+    close: () => void;
+}
+export interface SMeatballButtonProps {
+    /** 버튼 크기 */
+    size?: SMeatballButtonSize;
+    /** 색상 의도. 어두운 배경 위에서는 inverse */
+    intent?: SMeatballButtonIntent;
+    /** 메뉴 항목 목록 */
+    items?: SMeatballButtonItem[];
+    /** 호버 시 표시할 툴팁 텍스트. 빈 문자열이면 툴팁을 띄우지 않는다. 메뉴가 열려 있는 동안은 숨는다. */
+    tooltipText?: string;
+    /** 스크린리더용 접근성 레이블. 미지정 시 tooltipText, 그것도 비면 '기능 더 보기' */
+    ariaLabel?: string;
+    /** 비활성 */
+    disabled?: boolean;
+    /** 메뉴 항목 선택 */
+    onItemClick?: (value: string | number) => void;
+    /** 열림/닫힘 변경 */
+    onOpenChange?: (open: boolean) => void;
+    /** 버튼을 감싸는 요소의 클래스. 위치 조정(absolute 배치 등)용 */
+    className?: string;
+    /** 버튼을 감싸는 요소의 스타일. 위치 조정용 */
+    style?: CSSProperties;
+}
+export declare const SMeatballButton: import("react").ForwardRefExoticComponent<SMeatballButtonProps & import("react").RefAttributes<SMeatballButtonHandle>>;

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

@@ -0,0 +1 @@
+export { SMeatballButton, type SMeatballButtonProps, type SMeatballButtonHandle, type SMeatballButtonItem, type SMeatballButtonSize, type SMeatballButtonIntent, } from './SMeatballButton';

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`/`mainButtonName`, `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/SNumberInput/README.md

@@ -10,15 +10,16 @@
 |------|------|---------|-------------|
 | `value?` | `string \| number \| null` | — | 입력 값 |
 | `size?` | `SNumberInputSize` | `'sm'` | 크기 |
-| `min?` | `number` | `Number.NEGATIVE_INFINITY` | 최솟값 |
-| `max?` | `number` | `Number.POSITIVE_INFINITY` | 최댓값 |
+| `min?` | `number` | `Number.NEGATIVE_INFINITY` | 최솟값 — **검증 경계**다 (`<input type="number">` 의 `min` 과 같다). 값을 고쳐 쓰지 않는다. 벗어나면 blur·제출 시 에러 상태가 서고 안내 문구가 자동으로 붙는다. 스테퍼(`showButton`)와 위/아래 화살표는 이 값을 한계로 삼는다. |
+| `max?` | `number` | `Number.POSITIVE_INFINITY` | 최댓값 — **검증 경계**다 (`<input type="number">` 의 `max` 와 같다). 값을 고쳐 쓰지 않는다. 벗어나면 blur·제출 시 에러 상태가 서고 안내 문구가 자동으로 붙는다. 스테퍼(`showButton`)와 위/아래 화살표는 이 값을 한계로 삼는다. |
+| `clampOnBlur?` | `boolean` | `false` | blur 시 값을 `[min, max]` 경계로 끌어당길지. 기본 `false`. 기본값에서는 사용자가 친 값이 그대로 보존되고, 범위를 벗어나면 에러 상태로 알린다 — 그래야 소비자의 범위 검증에 실제 입력값이 도달한다. `true` 로 켜면 범위 밖 값이 경계값으로 **말없이 바뀌고** `onValueChange` 로 되쏘아진다 (`min={1}` 인 칸에 `0` 을 넣고 blur 하면 `onValueChange(1)` 이 발화한다). 경계로 붙여도 사용자가 놀라지 않는 값에만 켠다. 켜면 범위 에러는 서지 않는다 — 고쳐 쓴 값은 언제나 범위 안이기 때문이다. |
 | `step?` | `number` | `1` | 스텝 단위 |
-| `useButton?` | `boolean` | `false` | 증감 버튼 표시 |
-| `useDecimal?` | `boolean` | `false` | 소수점 입력 허용 |
+| `showButton?` | `boolean` | `false` | 증감 버튼 표시 |
+| `allowDecimal?` | `boolean` | `false` | 소수점 입력 허용 |
 | `maxDecimalLength?` | `number` | — | 소수점 이하 최대 자리수 |
 | `inputPrefix?` | `string` | `''` | 입력 앞 접두 텍스트 |
 | `inputSuffix?` | `string` | `''` | 입력 뒤 접미 텍스트 |
-| `inputClass?` | `string` | — | 네이티브 input className |
+| `inputClassName?` | `string` | — | 네이티브 input className |
 | `inputStyle?` | `CSSProperties` | — | 네이티브 input style |
 | `autoFocus?` | `boolean` | — | 마운트 시 자동 포커스 |
 | `name?` | `string` | — | 폼 연동 name |
@@ -27,9 +28,10 @@
 | `readOnly?` | `boolean` | `false` |  |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 검증 |
 | `status?` | `SFieldStatus` | — |  |
-| `focused?` | `boolean` | — |  |
-| `hovered?` | `boolean` | — |  |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |
@@ -40,7 +42,7 @@
 | `hint?` | `string` | — |  |
 | `error?` | `boolean` | — |  |
 | `errorMessage?` | `string` | — |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리며 `max`(= 스키마 상한)로 고른다. 상한이 `xl` 을 넘거나 상한이 없으면 `"100%"`. (`sellmate/field-width-grade` 가 검사한다) |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -52,6 +54,14 @@
 | `onFocus` | `(e: React.FocusEvent<HTMLInputElement>) => void` | 포커스 이벤트 (sdFocus) |
 | `onBlur` | `(e: React.FocusEvent<HTMLInputElement>) => void` | 블러 이벤트 (sdBlur) |
 
+## Types
+
+### SNumberInputSize
+
+```ts
+export type SNumberInputSize = SFieldSize;
+```
+
 ## Dependencies
 
 ### Used by