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

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

@@ -1,10 +1,26 @@
 /** 오버레이 뷰포트 — 스토어를 구독해 SLoadingContainer 를 렌더한다. 직접 배치도 가능. */
 export declare function SLoadingViewport(): import("react").JSX.Element;
 export declare const loading: {
-    /** 로딩 오버레이 표시 (메시지 갱신도 동일 호출) */
+    /**
+     * 로딩 오버레이 표시. 겹쳐 부르면 그만큼 쌓이고 **마지막 하나가 걷힐 때** 닫힌다.
+     * 반환값은 이 호출 하나만 걷는 함수다(두 번 불러도 한 번만 걷힌다) — `hide()` 대신 이것을
+     * 쓰면 짝이 어긋나지 않는다.
+     *
+     * ⚠️ 메시지만 바꾸려면 `update()` 를 쓴다. `show()` 를 다시 부르면 하나 더 쌓여
+     * `hide()` 한 번으로는 닫히지 않는다.
+     */
     show(options?: {
         message?: string;
+    }): () => void;
+    /** 표시 중인 메시지 갱신 — 쌓인 수는 그대로다 */
+    update(options: {
+        message?: string;
     }): void;
-    /** 로딩 오버레이 숨김 */
+    /** 가장 나중의 show 하나를 걷는다. 남은 것이 없을 때만 오버레이가 닫힌다 */
     hide(): void;
+    /**
+     * 쌓인 것을 모두 걷고 즉시 닫는다. 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는
+     * 맞출 수 없을 때만 쓴다 — 평소에는 `hide()` 나 `show()` 가 준 함수로 하나씩 걷는다.
+     */
+    hideAll(): void;
 };

package/dist/components/SLoadingModal/README.md

@@ -10,7 +10,7 @@
 |------|------|---------|-------------|
 | `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` | 하단 버튼 표시 |
@@ -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,7 +7,7 @@ export interface SLoadingModalProps {
     /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
     persistent?: boolean;
     /** 상태 (loading: 스피너, error: 경고 아이콘) */
-    state?: LoadingModalState;
+    state?: SLoadingModalState;
     /** 진행률 (0–100) — 지정 시 determinate 스피너 */
     progress?: number;
     /** 메시지 (없으면 state 기본값) */

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

@@ -40,7 +40,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 +52,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

package/dist/components/SNumberInput/SNumberInput.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 SNumberInputSize = SFieldSize;
 export interface SNumberInputProps {
     /** 입력 값 */
@@ -59,7 +60,12 @@ export interface SNumberInputProps {
     hint?: string;
     error?: boolean;
     errorMessage?: string;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리며 `max`(= 스키마 상한)로 고른다.
+     * 상한이 `xl` 을 넘거나 상한이 없으면 `"100%"`. (`sellmate/field-width-grade` 가 검사한다)
+     */
+    width?: SFieldWidth;
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SPage/README.md

@@ -10,9 +10,9 @@
 |------|------|---------|-------------|
 | `title` | `string` | — | 타이틀 (필수) |
 | `subText?` | `string` | — | 서브 텍스트. fix=true 면 타이틀 오른쪽에, fix=false(기본) 면 타이틀 아래에 놓인다. |
-| `fix?` | `boolean` | `false` | true: 높이 56 고정 + 흰 배경 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄. false(기본): 최소 높이 66(상하 패딩 20/16 안에서 타이틀 한 줄 높이로 결정) + 투명 배경, 서브 텍스트가 타이틀 아래로 내려간다. |
+| `fix?` | `boolean` | `false` | true: 높이 56 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄. false(기본): 최소 높이 66(상하 패딩 20/16 안에서 타이틀 한 줄 높이로 결정) + 구분선 없음, 서브 텍스트가 타이틀 아래로 내려간다. 배경은 두 베리에이션 모두 흰 면이다. |
 | `slot?` | `ReactNode` | — | 오른쪽 끝 커스텀 슬롯. 가이드 링크·액션 버튼 등 페이지마다 다른 것이 온다. |
-| `scrolled?` | `boolean` | `false` | `<SPage>` 가 스크롤 여부를 보고 자동으로 넣어준다 — 직접 주지 않는다. fix=false 일 때만 의미가 있다: 스크롤이 시작되면 그림자(floating)가 들어가 스크롤되는 콘텐츠 위에 뜬 것처럼 보인다. 배경은 그대로 페이지 배경을 따라간다 — 배경을 바꾸는 건 scrolled 가 아니라 fix 다. |
+| `scrolled?` | `boolean` | — | 아래 콘텐츠가 스크롤을 시작했는지. fix=false 일 때만 의미가 있다: 스크롤이 시작되면 그림자(floating)가 들어가 스크롤되는 콘텐츠 위에 뜬 것처럼 보인다. 배경은 흰 면 그대로다 — scrolled 가 더하는 것은 그림자뿐이다. `SLayout` 안에 놓았으면 **주지 않는다** — 같은 열의 `SPage` 가 자기 스크롤 상태를 올려 자동으로 들어온다. 스크롤 컨테이너를 앱이 직접 쥔 단독 배치에서만 `onScroll` 에서 준다. |
 
 #### Events
 
@@ -27,12 +27,54 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `background?` | `SPageBackground` | `'frame'` | 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕. 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다. |
-| `scrollEndSpacing?` | `boolean` | `true` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지). |
+| `scrollEndSpacing?` | `boolean` | `false` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. **기본은 꺼져 있다.** 페이지 스크롤 자체가 예외이기 때문이다 — 대부분의 화면은 본문이 창을 꽉 채우고 스크롤은 각 영역 안에서 일어난다. 여백을 조건 없이 붙이면 내용이 화면에 거의 딱 맞는 페이지까지 그 여백 때문에 스크롤되게 만든다. 페이지가 실제로 스크롤되는 화면(`contentHeight="auto"` + 내용이 창보다 김)에서만 켠다. 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 켜지 않는다. |
+| `overlayScrollbar?` | `boolean` | `false` | true면 네이티브 스크롤바를 숨기고 SPage 위에 오버레이 스크롤바를 얹는다. 스크롤바가 레이아웃 폭을 차지하지 않아 내부 콘텐츠 폭이 줄어들지 않는다. |
 | `contentHeight?` | `SPageContentHeight` | `'auto'` | 본문 높이 모드. 기본은 `auto` — 콘텐츠가 흐르고 넘치면 페이지가 스크롤한다. `fill` 은 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다. 표가 자기 안에서 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용이다. 본문 루트에 `h-full` 이 먹으므로 `<div className="flex h-full min-h-0 flex-col">` + `<STable className="min-h-0 flex-1" />` 구성이 성립한다. `fill` 에서는 페이지가 스크롤하지 않으므로 `scrollEndSpacing` 이 무시된다. |
-| `header?` | `SPageHeaderProps` | — | 페이지 타이틀 영역(pageHeader 포팅). 주면 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다. `children` 은 항상 본문이다 — header 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다. |
+
+## Types
+
+### SPageBackground
+
+```ts
+export type SPageBackground = (typeof PAGE_BACKGROUNDS)[number];
+```
+
+### SPageContentHeight
+
+```ts
+export type SPageContentHeight = (typeof PAGE_CONTENT_HEIGHTS)[number];
+```
+
+### PAGE_BACKGROUNDS
+
+```ts
+/**
+ * 페이지 배경 — 표면의 역할로 이름을 붙인다(리터럴 색이 아니다).
+ * - frame:   콘텐츠를 얹는 흰 표면 (sys.color.bg.frame)
+ * - neutral: 한 단계 눌러앉은 회색 표면 (sys.color.bg.neutralLight)
+ * - screen:  카드·패널이 떠 있는 앱 바탕 (sys.color.bg.screen)
+ */
+export const PAGE_BACKGROUNDS = ['frame', 'neutral', 'screen'] as const;
+```
+
+### PAGE_CONTENT_HEIGHTS
+
+```ts
+/**
+ * 본문 높이 모드 — 페이지가 스크롤할지, 본문이 남은 높이를 채울지.
+ * - auto: 콘텐츠가 흐르고, 넘치면 페이지가 스크롤한다
+ * - fill: 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다.
+ *         표가 자기 안에서 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용.
+ */
+export const PAGE_CONTENT_HEIGHTS = ['auto', 'fill'] as const;
+```
 
 ## Dependencies
 
+### Used by
+
+ - [SLayout](../SLayout)
+
 ### Depends on
 
 - [SGhostButton](../SGhostButton)
@@ -44,5 +86,6 @@
 graph TD;
   SPage --> SGhostButton
   SPage --> SLayout
+  SLayout --> SPage
   style SPage fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SPage/SPage.d.ts

@@ -1,6 +1,5 @@
 import { type HTMLAttributes } from 'react';
 import type { SPageBackground, SPageContentHeight } from './page.config';
-import { type SPageHeaderProps } from './SPageHeader';
 export interface SPageProps extends HTMLAttributes<HTMLElement> {
     /**
      * 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕.
@@ -9,9 +8,20 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
     background?: SPageBackground;
     /**
      * 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다.
-     * 기본으로 켜져 있고, 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 끈다(목록 페이지).
+     *
+     * **기본은 꺼져 있다.** 페이지 스크롤 자체가 예외이기 때문이다 — 대부분의 화면은 본문이
+     * 창을 꽉 채우고 스크롤은 각 영역 안에서 일어난다. 여백을 조건 없이 붙이면 내용이 화면에
+     * 거의 딱 맞는 페이지까지 그 여백 때문에 스크롤되게 만든다.
+     *
+     * 페이지가 실제로 스크롤되는 화면(`contentHeight="auto"` + 내용이 창보다 김)에서만 켠다.
+     * 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 켜지 않는다.
      */
     scrollEndSpacing?: boolean;
+    /**
+     * true면 네이티브 스크롤바를 숨기고 SPage 위에 오버레이 스크롤바를 얹는다.
+     * 스크롤바가 레이아웃 폭을 차지하지 않아 내부 콘텐츠 폭이 줄어들지 않는다.
+     */
+    overlayScrollbar?: boolean;
     /**
      * 본문 높이 모드. 기본은 `auto` — 콘텐츠가 흐르고 넘치면 페이지가 스크롤한다.
      *
@@ -23,11 +33,6 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
      * `fill` 에서는 페이지가 스크롤하지 않으므로 `scrollEndSpacing` 이 무시된다.
      */
     contentHeight?: SPageContentHeight;
-    /**
-     * 페이지 타이틀 영역(pageHeader 포팅). 주면 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다.
-     * `children` 은 항상 본문이다 — header 유무와 무관하게 같은 자리에 같은 뜻으로 들어간다.
-     */
-    header?: SPageHeaderProps;
 }
 /**
  * SPage — SLayout 안에서 남은 공간을 채우는 스크롤 콘텐츠 영역.
@@ -39,8 +44,8 @@ export interface SPageProps extends HTMLAttributes<HTMLElement> {
  * - header="full": SLayout 이 깐 grid 의 "page" 영역 = 상단바 아래·메뉴 오른쪽 자리를 차지한다.
  *   좌표가 아니라 이름으로 잡으므로 프레임의 열·행 구성이 바뀌어도 여기는 그대로다.
  *
- * **`header` prop 을 주면** 스크롤·페이지 패딩 밖으로 빼내 상단에 고정 배치한다(fix 베리에이션이
- * 늘 보이는 높이 56 바가 되도록). 주지 않으면 이전과 동일하게 동작한다 — ref·className·style·
- * 나머지 속성이 전부 스크롤 영역 자체(`<main>`)에 그대로 붙는다.
+ * **페이지 제목은 `SLayout` 안에서 앞에 놓은 `SPageHeader` 가 만든다.** 그때 SLayout 이 헤더와
+ * 이 페이지를 한 열로 묶으므로(page-column.tsx) 여기서는 자리를 잡지 않고, 대신 자기 스크롤
+ * 상태를 그 열에 올린다 — 헤더가 그 값으로 floating 그림자를 켠다.
  */
 export declare const SPage: import("react").ForwardRefExoticComponent<SPageProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/SPage/SPageHeader.d.ts

@@ -5,9 +5,9 @@ export interface SPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'slo
     /** 서브 텍스트. fix=true 면 타이틀 오른쪽에, fix=false(기본) 면 타이틀 아래에 놓인다. */
     subText?: string;
     /**
-     * true: 높이 56 고정 + 흰 배경 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄.
-     * false(기본): 최소 높이 66(상하 패딩 20/16 안에서 타이틀 한 줄 높이로 결정) + 투명 배경,
-     * 서브 텍스트가 타이틀 아래로 내려간다.
+     * true: 높이 56 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄.
+     * false(기본): 최소 높이 66(상하 패딩 20/16 안에서 타이틀 한 줄 높이로 결정) + 구분선 없음,
+     * 서브 텍스트가 타이틀 아래로 내려간다. 배경은 두 베리에이션 모두 흰 면이다.
      */
     fix?: boolean;
     /** 뒤로가기 클릭 핸들러. 지정하면 왼쪽에 뒤로가기 버튼이 나타난다. */
@@ -15,18 +15,25 @@ export interface SPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'slo
     /** 오른쪽 끝 커스텀 슬롯. 가이드 링크·액션 버튼 등 페이지마다 다른 것이 온다. */
     slot?: ReactNode;
     /**
-     * `<SPage>` 가 스크롤 여부를 보고 자동으로 넣어준다 — 직접 주지 않는다.
-     * fix=false 일 때만 의미가 있다: 스크롤이 시작되면 그림자(floating)가 들어가 스크롤되는
-     * 콘텐츠 위에 뜬 것처럼 보인다. 배경은 그대로 페이지 배경을 따라간다 — 배경을 바꾸는 건
-     * scrolled 가 아니라 fix 다.
-     * @nodemo SPage 가 스크롤 이벤트로 넣어준다 — 사용자가 직접 시연할 값이 아니다.
+     * 아래 콘텐츠가 스크롤을 시작했는지. fix=false 일 때만 의미가 있다: 스크롤이 시작되면
+     * 그림자(floating)가 들어가 스크롤되는 콘텐츠 위에 뜬 것처럼 보인다. 배경은 흰 면 그대로다 —
+     * scrolled 가 더하는 것은 그림자뿐이다.
+     *
+     * `SLayout` 안에 놓았으면 **주지 않는다** — 같은 열의 `SPage` 가 자기 스크롤 상태를 올려
+     * 자동으로 들어온다. 스크롤 컨테이너를 앱이 직접 쥔 단독 배치에서만 `onScroll` 에서 준다.
      */
     scrolled?: boolean;
 }
 /**
- * SPage 위에 얹는 페이지 타이틀 영역(pageHeader 포팅). `SPage` 가 `header` prop 값으로
- * 내부적으로만 렌더한다 — 직접 임포트해 쓰지 않는다 (SPage.tsx 참고).
- * fix 로 bar(높이 고정·흰 배경) / plain(투명·최소 높이) 두 베리에이션을 고른다.
+ * 페이지 타이틀 영역(pageHeader 포팅).
+ * fix 로 bar(높이 고정·하단 구분선) / plain(최소 높이) 두 베리에이션을 고른다 — 배경은 둘 다 흰 면이다.
  * 뒤로가기 버튼은 onBack 유무로 나타나며, 없을 때는 타이틀 쪽에 4px 여백이 대신 들어간다.
+ *
+ * **셸 안에서는 `SLayout` 의 자식으로 `SGnb` 와 `SPage` 사이에 놓는다.** SLayout 이 이 헤더부터
+ * 뒤를 하나의 페이지 열로 묶어(page-column.tsx) 스크롤·페이지 패딩 밖 상단에 고정하고,
+ * plain 일 때 `SPage` 가 올린 스크롤 상태를 열이 대신 물려준다.
+ *
+ * 셸 밖에 직접 놓을 수도 있다 — 스크롤 컨테이너를 앱이 쥐고 있는 단독 화면이다. 그때는 그림자만
+ * 앱 몫이 된다: 스크롤 컨테이너의 `onScroll` 에서 `scrolled` 를 넣어야 뜬다.
  */
 export declare const SPageHeader: import("react").ForwardRefExoticComponent<SPageHeaderProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,3 +1,3 @@
 export { SPage, type SPageProps } from './SPage';
 export { PAGE_BACKGROUNDS, type SPageBackground, PAGE_CONTENT_HEIGHTS, type SPageContentHeight, } from './page.config';
-export { type SPageHeaderProps } from './SPageHeader';
+export { SPageHeader, type SPageHeaderProps } from './SPageHeader';

package/dist/components/SPage/page-column.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+/**
+ * 페이지 열이 `SPageHeader` 와 `SPage` 사이에서 중개하는 것.
+ *
+ * 둘은 형제라 서로를 볼 수 없는데, 헤더의 그림자는 페이지의 스크롤에서 나온다.
+ * 열이 그 사이에 서서 값을 옮긴다 — 아래(SPage)가 올리고 위(SPageHeader)가 읽는다.
+ */
+export interface SPageColumnValue {
+    /** 페이지가 스크롤을 시작했는지. `SPage` 가 올리고 `SPageHeader` 가 그림자로 쓴다. */
+    scrolled: boolean;
+    /** `SPage` 가 자기 스크롤 상태를 올린다. */
+    setScrolled: (scrolled: boolean) => void;
+}
+export declare const SPageColumnContext: import("react").Context<SPageColumnValue | null>;
+/**
+ * 페이지 열 — `SLayout` 이 `SPageHeader` 자식을 보면 그 자식부터 뒤를 이 열로 묶는다.
+ * 헤더는 위에 고정되고(자기 shrink-0) 그 아래 `SPage` 가 남은 높이를 먹는다.
+ *
+ * 자리(그리드 area)는 프레임이 정한다. 열 자체는 배경을 칠하지 않는다 — 헤더도 `SPage` 도
+ * 자기 면을 스스로 칠하므로 열의 배경은 어디에서도 드러나지 않는다.
+ */
+export declare function SPageColumn({ full, children }: {
+    full: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/SPopover/README.md

@@ -33,6 +33,21 @@
 | `onLeftLinkClick` | `() => void` | 하단 좌측 링크 클릭 |
 | `onButtonClick` | `() => void` | 하단 우측 버튼 클릭 |
 
+## Types
+
+### SPopoverPlacement
+
+```ts
+export type SPopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+```
+
+### SPopoverType
+
+```ts
+/** 색상 타입 — default: 다크 배경 / danger·warning·accent: 라이트 배경 (component.popover 토큰) */
+export type SPopoverType = 'default' | 'danger' | 'warning' | 'accent';
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SPopup/README.md

@@ -24,6 +24,25 @@
 |-------|------|-------------|
 | `onSubmit` | `() => void` | 확인 버튼 클릭 (sdSubmit) |
 
+## Types
+
+### SPopupType
+
+```ts
+export type SPopupType = 'default' | 'light';
+```
+
+### SPopupSubmitButton
+
+```ts
+export interface SPopupSubmitButton {
+  label?: string;
+  color?: SButtonColor;
+  outline?: boolean;
+  size?: SButtonSize;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SPortal/README.md

@@ -34,18 +34,36 @@
 | `onCloseAutoFocus` | `(event: Event) => void` | 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. |
 | `onPointerDownOutside` | `(event: Event) => void` | 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). |
 
+## Types
+
+### SPortalPlacement
+
+```ts
+export type SPortalPlacement = 'top' | 'bottom' | 'left' | 'right';
+```
+
+### SPortalAlign
+
+```ts
+export type SPortalAlign = 'start' | 'center' | 'end';
+```
+
 ## Dependencies
 
 ### Used by
 
+ - [SAccountListBox](../SAccountListBox)
  - [SChipInput](../SChipInput)
+ - [SGnbSystem](../SGnbSystem)
  - [SSelect](../SSelect)
 
 ### Graph
 
 ```mermaid
 graph TD;
+  SAccountListBox --> SPortal
   SChipInput --> SPortal
+  SGnbSystem --> SPortal
   SSelect --> SPortal
   style SPortal fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SRadio/README.md

@@ -42,6 +42,26 @@
 |-------|------|-------------|
 | `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) — 선택된 val 전달 |
 
+## Types
+
+### SRadioOption
+
+```ts
+export interface SRadioOption {
+  /** 옵션 값 (sd-radio-group SRadioOption.value) */
+  value: SRadioValue;
+  label: string;
+  disabled?: boolean;
+}
+```
+
+### SRadioValue
+
+```ts
+/** 라디오 값 타입 (sd-radio SRadioValue) */
+export type SRadioValue = string | number | boolean;
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SRadioButton/README.md

@@ -22,6 +22,24 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: string \| number) => void` | 변경 (sdUpdate) |
 
+## Types
+
+### SRadioButtonOption
+
+```ts
+export interface SRadioButtonOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+```
+
+### SRadioButtonSize
+
+```ts
+export type SRadioButtonSize = 'xs' | 'sm' | 'md';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SRadioButton/SRadioButton.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-export type SRadioButtonSize = 'xs' | 'sm';
+export type SRadioButtonSize = 'xs' | 'sm' | 'md';
 export interface SRadioButtonOption {
     value: string | number;
     label: string;

package/dist/components/SRadioCard/README.md

@@ -0,0 +1,78 @@
+# SRadioCard
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SRadioCardGroup
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options?` | `SRadioCardOption[]` | `[]` | 옵션 목록 |
+| `value?` | `SRadioValue \| null` | — | 현재 선택 값 |
+| `direction?` | `'vertical' \| 'horizontal'` | `'vertical'` | 배치 방향 |
+| `disabled?` | `boolean` | `false` | 전체 비활성 |
+| `groupName?` | `string` | — | 라디오 name 속성 (form-agnostic 그룹핑) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) |
+
+### SRadioCard
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `val` | `SRadioValue` | — | 이 카드의 값 |
+| `value?` | `SRadioValue \| null` | — | 그룹의 현재 선택 값 |
+| `label` | `string` | — | 라벨 (첫 줄) |
+| `subtitle?` | `string` | — | 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 |
+| `tag?` | `Omit<STagProps, 'size'>` | — | 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `name?` | `string` | — | native radio name (form-agnostic 그룹핑) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) — 선택된 val 전달 |
+
+## Types
+
+### SRadioCardOption
+
+```ts
+export interface SRadioCardOption {
+  /** 옵션 값 */
+  value: SRadioValue;
+  /** 라벨 (첫 줄) */
+  label: string;
+  /** 서브타이틀 (둘째 줄) */
+  subtitle?: string;
+  /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
+  tag?: Omit<STagProps, 'size'>;
+  /** 이 옵션만 비활성 */
+  disabled?: boolean;
+}
+```
+
+## Dependencies
+
+### Depends on
+
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SRadioCard --> STag
+  style SRadioCard fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SRadioCard/SRadioCard.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties } from 'react';
+import { type SRadioValue } from '../SRadio';
+import { type STagProps } from '../STag';
+export interface SRadioCardProps {
+    /** 이 카드의 값 */
+    val: SRadioValue;
+    /** 그룹의 현재 선택 값 */
+    value?: SRadioValue | null;
+    /** 라벨 (첫 줄) */
+    label: string;
+    /** 서브타이틀 (둘째 줄). 라벨 왼쪽 끝에 맞춰 들여쓴다 */
+    subtitle?: string;
+    /** 라벨 오른쪽에 붙일 태그. `STag` 의 props 를 그대로 받되 크기는 `xs` 로 고정된다 */
+    tag?: Omit<STagProps, 'size'>;
+    /** 비활성 */
+    disabled?: boolean;
+    /** native radio name (form-agnostic 그룹핑) */
+    name?: string;
+    /** 선택 변경 (sdUpdate) — 선택된 val 전달 */
+    onValueChange?: (val: SRadioValue) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SRadioCard — 라디오 + 라벨 + 서브타이틀을 카드 한 장에 담은 선택지.
+ * 카드 전체가 클릭 영역이며 `value === val` 이면 선택 상태다.
+ * 선택지마다 설명이 붙어 한 줄짜리 `SRadio` 로는 담기 어려울 때 쓴다.
+ */
+export declare function SRadioCard({ val, value, label, subtitle, tag, disabled, name, onValueChange, className, style, }: SRadioCardProps): import("react").JSX.Element;

package/dist/components/SRadioCard/SRadioCardGroup.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties } from 'react';
+import { type SRadioValue } from '../SRadio';
+import { type STagProps } from '../STag';
+export interface SRadioCardOption {
+    /** 옵션 값 */
+    value: SRadioValue;
+    /** 라벨 (첫 줄) */
+    label: string;
+    /** 서브타이틀 (둘째 줄) */
+    subtitle?: string;
+    /** 라벨 오른쪽에 붙일 태그 (`STag` props, 크기는 `xs` 고정) */
+    tag?: Omit<STagProps, 'size'>;
+    /** 이 옵션만 비활성 */
+    disabled?: boolean;
+}
+export interface SRadioCardGroupProps {
+    /** 옵션 목록 */
+    options?: SRadioCardOption[];
+    /** 현재 선택 값 */
+    value?: SRadioValue | null;
+    /** 배치 방향 */
+    direction?: 'vertical' | 'horizontal';
+    /** 전체 비활성 */
+    disabled?: boolean;
+    /** 라디오 name 속성 (form-agnostic 그룹핑) */
+    groupName?: string;
+    /** 선택 변경 (sdUpdate) */
+    onValueChange?: (val: SRadioValue) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SRadioCardGroup — `options` 를 SRadioCard 로 렌더하고 카드 사이 간격을 맞춘다.
+ * 카드는 컨테이너 폭을 채우므로 horizontal 이면 카드들이 폭을 균등하게 나눠 갖는다.
+ */
+export declare function SRadioCardGroup({ options, value, direction, disabled, groupName, onValueChange, className, style, }: SRadioCardGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { SRadioCard, type SRadioCardProps } from './SRadioCard';
+export { SRadioCardGroup, type SRadioCardGroupProps, type SRadioCardOption, } from './SRadioCardGroup';