sellmate-design-system-react 9.0.0-beta.49 → 9.0.0-beta.50

package/AGENTS.md

@@ -45,7 +45,7 @@
 | **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(입력창 위, 아직 보내지 않은 첨부 한 칸) `SChatFile`(대화 흐름에 선, 보낸 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
 | **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SLoginCard`(통합 계정 로그인 화면의 카드) `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
-| **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다) |
+| **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) |
 | **표시·상태** | `STag` `SBadge` `SIcon` `SImage` `SCallout` `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
@@ -542,6 +542,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 사용자가 순서를 드래그로 바꾸게 한다 | `SDraggableList` + `SDraggableItem` | §3-7-6 |
 | 날짜별 일정을 한 달치 격자로 펼쳐 보여준다 | `SCalendarBoard` | §3-7-4 |
 | 항목끼리 크기를 눈으로 견주게 한다 (기간별 추이·채널별 비중) | `SBarChart` | 정확한 값을 읽어야 하면 `STable` — 그래프는 "어느 쪽이 큰가" 를 답하지 "얼마인가" 를 답하지 않는다 |
+| 항목의 크기와 **그 안의 구성**을 함께 보여준다 (주문 상태별 내역, 유입 경로별 몫) | `SBarChart stacked` | 계열끼리 견주는 것이 목적이면 `stacked` 없이 나란히 세운다. 더해서 뜻이 없는 값(비율·평균)은 쌓지 않는다 — 합계 라벨이 거짓말이 된다 |
 | 표 위에 건수 요약과 액션을 얹는다 | `STableBar` | §4-2 |
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
@@ -2153,6 +2154,10 @@ export default function ProductCreatePage() {
 - 조회 값은 `type: 'text'` 행으로 표시한다. **상태·분류 태그도 별도 영역이 아니라 표의 한 행**으로 넣는다 (`render` 에 `STag`).
 - 행이 많아지면 **유형별로 섹션을 나누고, 각 섹션을 `SSectionHeaderCard` 로 감싼다.**
   섹션 제목은 `title` prop 으로, 바디 여백은 `padding` prop 으로 준다.
+- **한 화면에 행이 많아 훑어보기가 목적이면 `SKeyValueTable` 에 `dense` 를 켠다** — 셀 상하 여백과
+  최소 높이가 함께 내려가 행이 좁아진다. 다만 **읽기 전용(`text`) 행에서만 실제로 좁아진다**:
+  폼 필드가 든 행은 필드 자체의 높이가 행 높이를 정하므로 거의 변하지 않는다. 그래서 필터(§4-2)나
+  폼(§4-3) 표에 켜 봐야 눈에 띄는 변화가 없다.
 - **수정·삭제 버튼은 하단에 둔다.** 내용이 짧아 우측 상단에 두는 변형도 있으나 기본은 하단이다.
 - **상세 페이지도 `contentHeight="fill"` 이 기본이다**(§2-2). 섹션이 많아 페이지가 실제로 스크롤되는 화면에서만 `auto` + `scrollEndSpacing` 을 켠다.
 - **섹션마다 독립 인라인 폼이 있는 형태**도 상세 페이지의 변형이다. 섹션 안에서 바로 수정·저장하게 하는 화면인데, 이때 버튼 강조는 **섹션 단위가 아니라 페이지 단위로 판단한다** — §3-5-1 의 "`secondary` 연속 배치 금지"는 섹션이 다르면 적용되지 않는다. 그 섹션 안에서 닫히는 저장·취소는 `SSectionHeaderCard` 의 `button`·`footerLeft` 로 넘긴다 (§3-7-8). 아래 예처럼 **페이지 전체를 확정하는 버튼은 카드 밖 하단 줄**에 둔다 — 둘을 섞지 않는다.

package/dist/components/SBarChart/README.md

@@ -11,6 +11,7 @@
 | `categories` | `string[]` | — | 가로축(가로 막대면 세로축)에 놓일 항목 이름 |
 | `series` | `SBarChartSeries[]` | — | 계열 목록. 각 `data` 는 `categories` 와 같은 순서다 |
 | `direction?` | `SBarChartDirection` | `'vertical'` | 막대가 자라는 방향 |
+| `stacked?` | `boolean` | `false` | 계열을 나란히 놓는 대신 **한 막대에 쌓는다**. 항목의 크기와 그 안의 구성을 함께 볼 때 쓴다. 첫 계열이 기준선에 붙고, 값 라벨은 조각마다가 아니라 **항목의 합계**를 한 번 적는다. 음수는 0 아래로 따로 쌓이며, 값 축도 개별 값이 아닌 항목별 합계로 잡힌다 |
 | `palette?` | `SBarChartPalette` | `'default'` | 색 팔레트. 계열이 하나면 계열 대신 **항목**마다 색이 바뀐다. `custom` 일 때만 `colors` 를 본다 |
 | `colors?` | `SBarChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 계열 순서대로. 계열보다 짧으면 앞에서부터 순환한다 |
 | `max?` | `number` | — | 값 축의 최댓값. 주지 않으면 데이터에서 읽기 좋은 값으로 정한다 |

package/dist/components/SBarChart/SBarChart.d.ts

@@ -39,6 +39,12 @@ export interface SBarChartProps {
     series: SBarChartSeries[];
     /** 막대가 자라는 방향 */
     direction?: SBarChartDirection;
+    /**
+     * 계열을 나란히 놓는 대신 **한 막대에 쌓는다**. 항목의 크기와 그 안의 구성을 함께 볼 때 쓴다.
+     * 첫 계열이 기준선에 붙고, 값 라벨은 조각마다가 아니라 **항목의 합계**를 한 번 적는다.
+     * 음수는 0 아래로 따로 쌓이며, 값 축도 개별 값이 아닌 항목별 합계로 잡힌다
+     */
+    stacked?: boolean;
     /** 색 팔레트. 계열이 하나면 계열 대신 **항목**마다 색이 바뀐다. `custom` 일 때만 `colors` 를 본다 */
     palette?: SBarChartPalette;
     /** `palette='custom'` 에서 쓸 색 이름을 계열 순서대로. 계열보다 짧으면 앞에서부터 순환한다 */

package/dist/components/SChatMessage/SChatMessage.d.ts

@@ -116,7 +116,8 @@ export interface SChatMessageProps extends Omit<HTMLAttributes<HTMLDivElement>,
  `direction` 하나로 받은 메시지(왼쪽)와
  * 보낸 메시지(오른쪽)가 갈리고, 그에 따라 정렬과 말풍선 색이 함께 뒤집힌다.
  *
- * **말풍선 폭은 내용이 정한다** — 짧은 메시지는 글자만큼만 차지하고, 길면 부모 폭에서 접힌다.
- * 대화 폭을 제한하려면 이 컴포넌트가 아니라 담는 쪽을 좁힌다.
+ * **말풍선 폭은 내용이 정한다** — 짧은 메시지는 글자만큼만 차지하고, 길면 접힌다. 다만 반대편
+ * 끝까지 가지는 않는다: 받은 메시지는 오른쪽, 보낸 메시지는 왼쪽에 여백이 남아 어느 쪽이 말한
+ * 것인지가 폭으로도 읽힌다. 대화 폭을 더 좁히려면 이 컴포넌트가 아니라 담는 쪽을 좁힌다.
  */
 export declare const SChatMessage: import("react").ForwardRefExoticComponent<SChatMessageProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SIcon/icons.gen.d.ts

@@ -28,6 +28,7 @@ export declare const ICONS: {
     readonly caretLeft: (p: IconRenderProps) => import("react").JSX.Element;
     readonly caretRight: (p: IconRenderProps) => import("react").JSX.Element;
     readonly caretUp: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly chat: (p: IconRenderProps) => import("react").JSX.Element;
     readonly check: (p: IconRenderProps) => import("react").JSX.Element;
     readonly checkFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly checkOutline: (p: IconRenderProps) => import("react").JSX.Element;
@@ -54,6 +55,7 @@ export declare const ICONS: {
     readonly edit: (p: IconRenderProps) => import("react").JSX.Element;
     readonly etc: (p: IconRenderProps) => import("react").JSX.Element;
     readonly event: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly focus: (p: IconRenderProps) => import("react").JSX.Element;
     readonly global: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpOutline: (p: IconRenderProps) => import("react").JSX.Element;
@@ -64,6 +66,7 @@ export declare const ICONS: {
     readonly launcher: (p: IconRenderProps) => import("react").JSX.Element;
     readonly leftRight: (p: IconRenderProps) => import("react").JSX.Element;
     readonly line: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly link: (p: IconRenderProps) => import("react").JSX.Element;
     readonly location: (p: IconRenderProps) => import("react").JSX.Element;
     readonly logout: (p: IconRenderProps) => import("react").JSX.Element;
     readonly minus: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SKeyValueTable/README.md

@@ -10,6 +10,7 @@
 |------|------|---------|-------------|
 | `fields?` | `SKeyValueField[][]` | `[]` | 2차원 배열. row → [th|td] 필드들 |
 | `values?` | `Record<string, unknown>` | `{}` | field name을 key로 하는 값 객체 (`{ [name]: value }`). 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다. `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다. |
+| `dense?` | `boolean` | `false` | 행을 좁게 그린다 — 셀의 상하 패딩(8px → 6px)과 짝이 되는 최소 높이(44px → 32px)를 함께 내린다. 한 화면에 행이 많아 훑어보기가 목적인 상세 조회 표에 쓴다. 좌우 패딩과 글자 크기는 그대로다. **`STable` 과 달리 밀도 토글이 붙지 않는 고정값이다** — 준 값 그대로 그린다. 읽기 전용(`text`) 행에서만 실제로 좁아진다: 폼 필드 행은 필드 높이가 행 높이를 정한다 |
 | `search?` | `boolean` | `false` | 우측 검색 패널 |
 | `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
 | `bordered?` | `boolean` | `true` | 바깥 테두리. 기본은 `true`. `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 — 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다. |

package/dist/components/SKeyValueTable/SKeyValueTable.d.ts

@@ -104,6 +104,13 @@ export interface SKeyValueTableProps {
      * `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
      */
     values?: Record<string, unknown>;
+    /**
+     * 행을 좁게 그린다 — 셀의 상하 패딩(8px → 6px)과 짝이 되는 최소 높이(44px → 32px)를 함께
+     * 내린다. 한 화면에 행이 많아 훑어보기가 목적인 상세 조회 표에 쓴다. 좌우 패딩과 글자 크기는
+     * 그대로다. **`STable` 과 달리 밀도 토글이 붙지 않는 고정값이다** — 준 값 그대로 그린다.
+     * 읽기 전용(`text`) 행에서만 실제로 좁아진다: 폼 필드 행은 필드 높이가 행 높이를 정한다
+     */
+    dense?: boolean;
     /** 우측 검색 패널 */
     search?: boolean;
     /** border-radius 제어 */
@@ -123,5 +130,5 @@ export interface SKeyValueTableProps {
     style?: CSSProperties;
 }
 /** SKeyValueTable — sd-key-value-table 포팅. th/td 폼 레이아웃 + 필드 렌더러. */
-export declare function SKeyValueTable({ fields, values, search, radius, bordered, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
+export declare function SKeyValueTable({ fields, values, dense, search, radius, bordered, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
 export {};

package/dist/index.cjs

@@ -967,6 +967,29 @@ var Icon_caretUp = (p) => {
     }
   );
 };
+var Icon_chat = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.2961 2.25C15.6684 2.25008 18.4344 4.83725 18.7228 8.13477C21.4143 9.74397 22.7011 13.2749 21.1398 16.3975C20.6005 17.4762 20.4853 18.7183 20.8166 19.8779L21.048 20.6885C21.2975 21.5618 20.3398 22.2835 19.5695 21.8027L16.2853 19.75H12.0002C9.43974 19.75 7.24026 18.2099 6.27457 16.0059L4.16129 17.3037C3.38392 17.7807 2.42724 17.0507 2.6818 16.1748L2.92301 15.3428C3.27732 14.1243 3.1547 12.8165 2.57926 11.6855C0.381511 7.36716 3.51808 2.25032 8.36344 2.25H12.2961ZM8.36344 3.75C4.63792 3.75032 2.22559 7.6845 3.9152 11.0049C4.60038 12.3512 4.79173 13.8901 4.46598 15.3564L6.89567 13.8643L7.06656 13.7744C7.24277 13.6973 7.43434 13.6572 7.62809 13.6572H12.2961C15.0317 13.6571 17.2499 11.4397 17.2502 8.7041C17.2502 5.9683 15.0318 3.75008 12.2961 3.75H8.36344Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_check = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1678,6 +1701,59 @@ var Icon_event = (p) => {
     }
   );
 };
+var Icon_focus = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3 16.25C3.41421 16.25 3.75 16.5858 3.75 17V20C3.75 20.1381 3.86193 20.25 4 20.25H7C7.41421 20.25 7.75 20.5858 7.75 21C7.75 21.4142 7.41421 21.75 7 21.75H4C3.0335 21.75 2.25 20.9665 2.25 20V17C2.25 16.5858 2.58579 16.25 3 16.25Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21 16.25C21.4142 16.25 21.75 16.5858 21.75 17V20C21.75 20.9665 20.9665 21.75 20 21.75H17C16.5858 21.75 16.25 21.4142 16.25 21C16.25 20.5858 16.5858 20.25 17 20.25H20C20.1381 20.25 20.25 20.1381 20.25 20V17C20.25 16.5858 20.5858 16.25 21 16.25Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M12 8.25C14.0711 8.25 15.75 9.92893 15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25ZM12 9.75C10.7574 9.75 9.75 10.7574 9.75 12C9.75 13.2426 10.7574 14.25 12 14.25C13.2426 14.25 14.25 13.2426 14.25 12C14.25 10.7574 13.2426 9.75 12 9.75Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M7 2.25C7.41421 2.25 7.75 2.58579 7.75 3C7.75 3.41421 7.41421 3.75 7 3.75H4C3.86193 3.75 3.75 3.86193 3.75 4V7C3.75 7.41421 3.41421 7.75 3 7.75C2.58579 7.75 2.25 7.41421 2.25 7V4C2.25 3.0335 3.0335 2.25 4 2.25H7Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M20 2.25C20.9665 2.25 21.75 3.0335 21.75 4V7C21.75 7.41421 21.4142 7.75 21 7.75C20.5858 7.75 20.25 7.41421 20.25 7V4C20.25 3.86193 20.1381 3.75 20 3.75H17C16.5858 3.75 16.25 3.41421 16.25 3C16.25 2.58579 16.5858 2.25 17 2.25H20Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_global = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2038,6 +2114,43 @@ var Icon_line = (p) => {
     }
   );
 };
+var Icon_link = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10 6.25C10.4142 6.25 10.75 6.58579 10.75 7C10.75 7.41421 10.4142 7.75 10 7.75H7C4.65279 7.75 2.75 9.65279 2.75 12C2.75 14.3472 4.65279 16.25 7 16.25H10C10.4142 16.25 10.75 16.5858 10.75 17C10.75 17.4142 10.4142 17.75 10 17.75H7C3.82436 17.75 1.25 15.1756 1.25 12C1.25 8.82436 3.82436 6.25 7 6.25H10Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M17 6.25C20.1756 6.25 22.75 8.82436 22.75 12C22.75 15.1756 20.1756 17.75 17 17.75H14C13.5858 17.75 13.25 17.4142 13.25 17C13.25 16.5858 13.5858 16.25 14 16.25H17C19.3472 16.25 21.25 14.3472 21.25 12C21.25 9.65279 19.3472 7.75 17 7.75H14C13.5858 7.75 13.25 7.41421 13.25 7C13.25 6.58579 13.5858 6.25 14 6.25H17Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M16 11.25C16.4142 11.25 16.75 11.5858 16.75 12C16.75 12.4142 16.4142 12.75 16 12.75H8C7.58579 12.75 7.25 12.4142 7.25 12C7.25 11.5858 7.58579 11.25 8 11.25H16Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_location = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3249,6 +3362,7 @@ var ICONS = {
   caretLeft: Icon_caretLeft,
   caretRight: Icon_caretRight,
   caretUp: Icon_caretUp,
+  chat: Icon_chat,
   check: Icon_check,
   checkFill: Icon_checkFill,
   checkOutline: Icon_checkOutline,
@@ -3275,6 +3389,7 @@ var ICONS = {
   edit: Icon_edit,
   etc: Icon_etc,
   event: Icon_event,
+  focus: Icon_focus,
   global: Icon_global,
   helpFill: Icon_helpFill,
   helpOutline: Icon_helpOutline,
@@ -3285,6 +3400,7 @@ var ICONS = {
   launcher: Icon_launcher,
   leftRight: Icon_leftRight,
   line: Icon_line,
+  link: Icon_link,
   location: Icon_location,
   logout: Icon_logout,
   minus: Icon_minus,
@@ -5024,6 +5140,11 @@ var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
         // items-start 라 이름이 있든 없든 아바타는 언제나 첫 줄에 붙는다.
         "flex items-start gap-(--cmp-chatMessage-avatarGap)",
         outgoing && "flex-row-reverse",
+        // 반대편은 비워 둔다 — 받은 메시지는 오른쪽, 보낸 메시지는 왼쪽. 긴 메시지가 화면 폭을
+        // 다 차지하면 어느 쪽이 말한 것인지가 자리로 읽히지 않으므로, 말풍선이 반대편 끝까지
+        // 가지 못하게 막는다. 논리 속성(ps/pe)을 쓰지 않는 이유: flex-row-reverse 는 글 방향을
+        // 뒤집지 않아 보낸 메시지에서 여백이 같은 쪽에 남는다.
+        outgoing ? "pl-(--cmp-chatMessage-row-paddingInset)" : "pr-(--cmp-chatMessage-row-paddingInset)",
         className
       ),
       ...rest,
@@ -17720,6 +17841,7 @@ var cssLen2 = (v) => v == null ? void 0 : typeof v === "number" ? `${v}px` : v;
 function SKeyValueTable({
   fields = [],
   values = {},
+  dense = false,
   search = false,
   radius = "default",
   bordered = true,
@@ -17734,8 +17856,8 @@ function SKeyValueTable({
     value,
     values: { ...values, [name]: value }
   });
-  const cellHeight = "var(--cmp-table-keyValue-height)";
-  const cellPadY = "var(--cmp-table-keyValue-body-paddingY)";
+  const cellHeight = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-keyValue-height)";
+  const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-keyValue-body-paddingY)";
   const renderField = (f) => {
     if (f.render) return f.render;
     const opt = { ...f.options ?? {} };
@@ -18253,6 +18375,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   categories,
   series,
   direction = "vertical",
+  stacked = false,
   palette = "default",
   colors: customColors,
   max,
@@ -18272,6 +18395,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   const { ref: plotRef, size } = useElementSize();
   const { ref: axisTextRef, size: axisText } = useElementSize();
   const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const clipId = react.useId();
   const [hovered, setHovered] = react.useState(null);
   const hoveredCategory = hovered?.category ?? null;
   const perCategory = series.length === 1;
@@ -18279,23 +18403,37 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
     (seriesIndex, categoryIndex) => paletteColor(palette, perCategory ? categoryIndex : seriesIndex, customColors),
     [palette, customColors, perCategory]
   );
+  const stackTotals = react.useMemo(
+    () => categories.map(
+      (_, categoryIndex) => series.reduce(
+        (acc, s) => {
+          const value = s.data[categoryIndex];
+          if (value == null || !Number.isFinite(value)) return acc;
+          return value < 0 ? { positive: acc.positive, negative: acc.negative + value } : { positive: acc.positive + value, negative: acc.negative };
+        },
+        { positive: 0, negative: 0 }
+      )
+    ),
+    [categories, series]
+  );
   const scale = react.useMemo(
     () => niceScale(
-      series.flatMap((s) => s.data),
+      stacked ? stackTotals.flatMap((total) => [total.positive, total.negative]) : series.flatMap((s) => s.data),
       tickCount,
       max
     ),
-    [series, tickCount, max]
+    [stacked, stackTotals, series, tickCount, max]
   );
+  const barSlots = stacked ? 1 : series.length;
   const axisLength = vertical ? size.width : size.height;
   const layout = react.useMemo(
-    () => bandLayout(axisLength, categories.length, series.length, barSize),
-    [axisLength, categories.length, series.length, barSize]
+    () => bandLayout(axisLength, categories.length, barSlots, barSize),
+    [axisLength, categories.length, barSlots, barSize]
   );
   const zeroRatio = ratioOf(0, scale);
-  const minPlotWidth = vertical ? categories.length * minBand(series.length) : 0;
+  const minPlotWidth = vertical ? categories.length * minBand(barSlots) : 0;
   const totalHeight = height ?? (vertical ? 320 : void 0);
-  const plotHeight = totalHeight == null ? Math.max(1, categories.length) * minBand(series.length) : typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
+  const plotHeight = totalHeight == null ? Math.max(1, categories.length) * minBand(barSlots) : typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
   const legend = showLegend ? /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: series.map((s, i) => ({ name: s.name, color: colorAt(i, 0) })) }) : null;
   const handleMove = (event) => {
     if (!showTooltip || categories.length === 0 || series.length === 0) return;
@@ -18352,7 +18490,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
     }
   );
   const bars = react.useMemo(
-    () => size.width > 0 && size.height > 0 ? series.flatMap(
+    () => !stacked && size.width > 0 && size.height > 0 ? series.flatMap(
       (s, seriesIndex) => categories.map((_, categoryIndex) => {
         const value = s.data[categoryIndex];
         if (value == null || !Number.isFinite(value)) return null;
@@ -18429,9 +18567,105 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
       formatValue,
       onBarClick,
       colorAt,
-      hoveredCategory
+      hoveredCategory,
+      stacked
     ]
   );
+  const stackedBars = react.useMemo(() => {
+    if (!stacked || size.width <= 0 || size.height <= 0) return [];
+    const pxOf = (value) => vertical ? size.height - ratioOf(value, scale) * size.height : ratioOf(value, scale) * size.width;
+    return categories.map((_, categoryIndex) => {
+      const dimmed = hoveredCategory != null && hoveredCategory !== categoryIndex;
+      const barStart = layout.offset + categoryIndex * layout.band + (layout.band - layout.bar) / 2;
+      let positive = 0;
+      let negative = 0;
+      const segments = series.flatMap((s, seriesIndex) => {
+        const value = s.data[categoryIndex];
+        if (value == null || !Number.isFinite(value) || value === 0) return [];
+        const from = value < 0 ? negative + value : positive;
+        const to = value < 0 ? negative : positive + value;
+        if (value < 0) negative += value;
+        else positive += value;
+        return [{ seriesIndex, name: s.name, value, from, to }];
+      });
+      if (segments.length === 0) return null;
+      const boxOf = (from, to) => {
+        const a = pxOf(from);
+        const b = pxOf(to);
+        return vertical ? { x: barStart, y: Math.min(a, b), width: layout.bar, height: Math.abs(a - b) } : { x: Math.min(a, b), y: barStart, width: Math.abs(a - b), height: layout.bar };
+      };
+      const outlineOf = (extent, negativeSide) => {
+        const box3 = negativeSide ? boxOf(extent, 0) : boxOf(0, extent);
+        return barPath(box3.x, box3.y, box3.width, box3.height, direction, negativeSide);
+      };
+      const positiveClip = `${clipId}-p-${categoryIndex}`;
+      const negativeClip = `${clipId}-n-${categoryIndex}`;
+      const total = positive + negative;
+      const outer = pxOf(total >= 0 ? positive : negative);
+      const labelX = vertical ? barStart + layout.bar / 2 : total >= 0 ? outer + VALUE_LABEL_GAP : outer - VALUE_LABEL_GAP;
+      const labelY = vertical ? total >= 0 ? outer - VALUE_LABEL_GAP : outer + VALUE_LABEL_GAP + 10 : barStart + layout.bar / 2;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          positive > 0 && /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: positiveClip, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: outlineOf(positive, false) }) }),
+          negative < 0 && /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: negativeClip, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: outlineOf(negative, true) }) })
+        ] }),
+        segments.map((segment) => {
+          const box3 = boxOf(segment.from, segment.to);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: box3.x,
+              y: box3.y,
+              width: box3.width,
+              height: box3.height,
+              clipPath: `url(#${segment.value < 0 ? negativeClip : positiveClip})`,
+              style: {
+                fill: colorAt(segment.seriesIndex, categoryIndex),
+                // 흐림은 조각에만 건다 — 묶음에 걸면 합계 라벨까지 같이 흐려진다.
+                opacity: dimmed ? BAR_OPACITY_DIMMED : BAR_OPACITY_DEFAULT,
+                cursor: onBarClick ? "pointer" : void 0
+              },
+              onClick: onBarClick ? () => onBarClick({
+                seriesIndex: segment.seriesIndex,
+                categoryIndex,
+                value: segment.value
+              }) : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${categories[categoryIndex]} ${segment.name} ${formatValue(segment.value)}` })
+            },
+            segment.seriesIndex
+          );
+        }),
+        showValueLabel && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: labelX,
+            y: labelY,
+            className: "typo-body-sm-medium",
+            style: { fill: BAR_VALUE_COLOR },
+            textAnchor: vertical ? "middle" : total >= 0 ? "start" : "end",
+            dominantBaseline: vertical ? "auto" : "central",
+            children: formatValue(total)
+          }
+        )
+      ] }, categoryIndex);
+    });
+  }, [
+    stacked,
+    size.width,
+    size.height,
+    series,
+    categories,
+    layout,
+    scale,
+    vertical,
+    direction,
+    showValueLabel,
+    formatValue,
+    onBarClick,
+    colorAt,
+    hoveredCategory,
+    clipId
+  ]);
   const axisLabels = /* @__PURE__ */ jsxRuntime.jsx(
     ChartAxisLabels,
     {
@@ -18465,7 +18699,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                   width: size.width,
                   height: size.height,
                   role: "img",
-                  "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 \uB9C9\uB300 \uADF8\uB798\uD504`,
+                  "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uB9C9\uB300 \uADF8\uB798\uD504`,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       ChartGrid,
@@ -18490,7 +18724,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                         }
                       }
                     ),
-                    bars
+                    stacked ? stackedBars : bars
                   ]
                 }
               ),