sellmate-design-system-react 2.2.0 → 3.1.0

package/dist/components/SList/SList.cjs

@@ -0,0 +1,38 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+var twMerge = tailwindMerge.extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+var SList = react.forwardRef(function SList2({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
+        usePadding && "p-(--cmp-list-group-padding)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+SList.displayName = "SList";
+
+exports.SList = SList;
+//# sourceMappingURL=SList.cjs.map
+//# sourceMappingURL=SList.cjs.map

package/dist/components/SList/SList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SList/SList.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SList","jsx"],"mappings":";;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACRO,IAAM,KAAA,GAAQC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAA,EAAU,MAAA,GAAS,KAAA,EAAO,UAAA,GAAa,KAAA,EAAO,GAAG,IAAA,IAC9D,GAAA,EACA;AACA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,MAAA,IAAU,0CAAA;AAAA,QACV,UAAA,IAAc,8BAAA;AAAA,QACd;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA","file":"SList.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListProps extends HTMLAttributes<HTMLDivElement> {\n  /** 리스트 컨테이너 내부에 렌더링할 내용 */\n  children?: ReactNode;\n  /** 리스트 아이템 사이 gap 토큰 적용 여부 */\n  useGap?: boolean;\n  /** 리스트 컨테이너 padding 토큰 적용 여부 */\n  usePadding?: boolean;\n}\n\nexport const SList = forwardRef<HTMLDivElement, SListProps>(function SList(\n  { className, children, useGap = false, usePadding = false, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        useGap && 'flex flex-col gap-(--cmp-list-group-gap)',\n        usePadding && 'p-(--cmp-list-group-padding)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nSList.displayName = 'SList';\n"]}

package/dist/components/SList/SList.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface SListProps extends HTMLAttributes<HTMLDivElement> {
+    /** 리스트 컨테이너 내부에 렌더링할 내용 */
+    children?: ReactNode;
+    /** 리스트 아이템 사이 gap 토큰 적용 여부 */
+    useGap?: boolean;
+    /** 리스트 컨테이너 padding 토큰 적용 여부 */
+    usePadding?: boolean;
+}
+export declare const SList: import("react").ForwardRefExoticComponent<SListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SList/SList.js

@@ -0,0 +1,36 @@
+"use client";
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SList = forwardRef(function SList2({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
+        usePadding && "p-(--cmp-list-group-padding)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+SList.displayName = "SList";
+
+export { SList };
+//# sourceMappingURL=SList.js.map
+//# sourceMappingURL=SList.js.map

package/dist/components/SList/SList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SList/SList.tsx"],"names":["SList"],"mappings":";;;;;AAQA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACRO,IAAM,KAAA,GAAQ,UAAA,CAAuC,SAASA,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAA,EAAU,MAAA,GAAS,KAAA,EAAO,UAAA,GAAa,KAAA,EAAO,GAAG,IAAA,IAC9D,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,MAAA,IAAU,0CAAA;AAAA,QACV,UAAA,IAAc,8BAAA;AAAA,QACd;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA","file":"SList.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListProps extends HTMLAttributes<HTMLDivElement> {\n  /** 리스트 컨테이너 내부에 렌더링할 내용 */\n  children?: ReactNode;\n  /** 리스트 아이템 사이 gap 토큰 적용 여부 */\n  useGap?: boolean;\n  /** 리스트 컨테이너 padding 토큰 적용 여부 */\n  usePadding?: boolean;\n}\n\nexport const SList = forwardRef<HTMLDivElement, SListProps>(function SList(\n  { className, children, useGap = false, usePadding = false, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        useGap && 'flex flex-col gap-(--cmp-list-group-gap)',\n        usePadding && 'p-(--cmp-list-group-padding)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nSList.displayName = 'SList';\n"]}

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

@@ -0,0 +1 @@
+export { SList, type SListProps } from './SList';

package/dist/components/SListItem/README.md

@@ -0,0 +1,19 @@
+# SListItem
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SListItem
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `SListItemSlot` | — | 리스트 아이템 제목 |
+| `depth?` | `1 \| 2 \| 3` | `1` | 중첩 단계. Figma 기준 1~3단계 |
+| `leading?` | `SListItemSlot` | — | 타이틀 앞에 표시할 아이콘/콘텐츠 |
+| `trailing?` | `SListItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
+| `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
+| `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
+| `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |
+| `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
+

package/dist/components/SListItem/SListItem.cjs

@@ -0,0 +1,83 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+var twMerge = tailwindMerge.extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+var SListItem = react.forwardRef(function SListItem2({
+  title,
+  depth = 1,
+  leading,
+  trailing,
+  bordered = false,
+  accentStripe = false,
+  dense = false,
+  disabled = false,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}, ref) {
+  const [hovered, setHovered] = react.useState(false);
+  const renderState = { hovered, disabled };
+  const titleNode = typeof title === "function" ? title(renderState) : title;
+  const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
+  const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
+  const handleMouseEnter = (event) => {
+    if (!disabled) setHovered(true);
+    onMouseEnter?.(event);
+  };
+  const handleMouseLeave = (event) => {
+    setHovered(false);
+    onMouseLeave?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "aria-disabled": disabled || void 0,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      className: cn(
+        "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)",
+        disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : "hover:bg-(--cmp-listItem-bg-hover)",
+        dense ? "h-[32px] py-(--cmp-listItem-paddingY-dense)" : "h-[40px] py-(--cmp-listItem-paddingY-normal)",
+        "gap-(--cmp-listItem-gap)",
+        "pr-(--cmp-listItem-paddingX)",
+        depth === 2 ? "pl-[calc(var(--cmp-listItem-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listItem-paddingX)+64px)]" : "pl-(--cmp-listItem-paddingX)",
+        bordered ? "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)" : "border-b border-(--cmp-listItem-border-default)",
+        className
+      ),
+      ...rest,
+      children: [
+        accentStripe && !bordered && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
+          }
+        ),
+        leadingNode,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: titleNode }) }),
+        trailingNode
+      ]
+    }
+  );
+});
+SListItem.displayName = "SListItem";
+
+exports.SListItem = SListItem;
+//# sourceMappingURL=SListItem.cjs.map
+//# sourceMappingURL=SListItem.cjs.map

package/dist/components/SListItem/SListItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SListItem/SListItem.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SListItem","useState","jsxs","jsx"],"mappings":";;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACUO,IAAM,SAAA,GAAYC,gBAAA,CAA2C,SAASC,UAAAA,CAC3E;AAAA,EACE,KAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA,GAAe,KAAA;AAAA,EACf,KAAA,GAAQ,KAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,WAAA,GAAc,EAAE,OAAA,EAAS,QAAA,EAAS;AACxC,EAAA,MAAM,YAAY,OAAO,KAAA,KAAU,UAAA,GAAa,KAAA,CAAM,WAAW,CAAA,GAAI,KAAA;AACrE,EAAA,MAAM,cAAc,OAAO,OAAA,KAAY,UAAA,GAAa,OAAA,CAAQ,WAAW,CAAA,GAAI,OAAA;AAC3E,EAAA,MAAM,eAAe,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE9E,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAsC;AAC9D,IAAA,IAAI,CAAC,QAAA,EAAU,UAAA,CAAW,IAAI,CAAA;AAC9B,IAAA,YAAA,GAAe,KAAK,CAAA;AAAA,EACtB,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAsC;AAC9D,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,YAAA,GAAe,KAAK,CAAA;AAAA,EACtB,CAAA;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,YAAA,EAAc,gBAAA;AAAA,MACd,YAAA,EAAc,gBAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oLAAA;AAAA,QACA,WACI,yEAAA,GACA,oCAAA;AAAA,QACJ,QACI,6CAAA,GACA,8CAAA;AAAA,QACJ,0BAAA;AAAA,QACA,8BAAA;AAAA,QACA,KAAA,KAAU,CAAA,GACN,8CAAA,GACA,KAAA,KAAU,IACR,8CAAA,GACA,8BAAA;AAAA,QACN,WACI,4JAAA,GACA,iDAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA,IAAgB,CAAC,QAAA,oBAChBC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,QAED,WAAA;AAAA,uCACA,MAAA,EAAA,EAAK,SAAA,EAAU,gCACd,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAM,qBAAU,CAAA,EACnB,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,SAAA,CAAU,WAAA,GAAc,WAAA","file":"SListItem.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { forwardRef, useState, type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListItemRenderState {\n  hovered: boolean;\n  disabled: boolean;\n}\n\nexport type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;\nexport type SListItemSlot = ReactNode | SListItemRenderProp;\n\nexport interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {\n  /** 리스트 아이템 제목 */\n  title: SListItemSlot;\n  /** 중첩 단계. Figma 기준 1~3단계 */\n  depth?: 1 | 2 | 3;\n  /** 타이틀 앞에 표시할 아이콘/콘텐츠 */\n  leading?: SListItemSlot;\n  /** 타이틀 뒤에 표시할 태그/콘텐츠 */\n  trailing?: SListItemSlot;\n  /** 외곽 테두리 사용 여부 */\n  bordered?: boolean;\n  /** 아이템 왼쪽 accent stripe 표시 여부 */\n  accentStripe?: boolean;\n  /** 조밀한 높이 사용 여부 */\n  dense?: boolean;\n  /** 비활성 상태 여부 */\n  disabled?: boolean;\n}\n\nexport const SListItem = forwardRef<HTMLDivElement, SListItemProps>(function SListItem(\n  {\n    title,\n    depth = 1,\n    leading,\n    trailing,\n    bordered = false,\n    accentStripe = false,\n    dense = false,\n    disabled = false,\n    className,\n    onMouseEnter,\n    onMouseLeave,\n    ...rest\n  },\n  ref,\n) {\n  const [hovered, setHovered] = useState(false);\n  const renderState = { hovered, disabled };\n  const titleNode = typeof title === 'function' ? title(renderState) : title;\n  const leadingNode = typeof leading === 'function' ? leading(renderState) : leading;\n  const trailingNode = typeof trailing === 'function' ? trailing(renderState) : trailing;\n\n  const handleMouseEnter = (event: MouseEvent<HTMLDivElement>) => {\n    if (!disabled) setHovered(true);\n    onMouseEnter?.(event);\n  };\n\n  const handleMouseLeave = (event: MouseEvent<HTMLDivElement>) => {\n    setHovered(false);\n    onMouseLeave?.(event);\n  };\n\n  return (\n    <div\n      ref={ref}\n      aria-disabled={disabled || undefined}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn(\n        'group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)',\n        disabled\n          ? 'pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)'\n          : 'hover:bg-(--cmp-listItem-bg-hover)',\n        dense\n          ? 'h-[32px] py-(--cmp-listItem-paddingY-dense)'\n          : 'h-[40px] py-(--cmp-listItem-paddingY-normal)',\n        'gap-(--cmp-listItem-gap)',\n        'pr-(--cmp-listItem-paddingX)',\n        depth === 2\n          ? 'pl-[calc(var(--cmp-listItem-paddingX)+32px)]'\n          : depth === 3\n            ? 'pl-[calc(var(--cmp-listItem-paddingX)+64px)]'\n            : 'pl-(--cmp-listItem-paddingX)',\n        bordered\n          ? 'overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)'\n          : 'border-b border-(--cmp-listItem-border-default)',\n        className,\n      )}\n      {...rest}\n    >\n      {accentStripe && !bordered && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)\"\n        />\n      )}\n      {leadingNode}\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span>{titleNode}</span>\n      </span>\n      {trailingNode}\n    </div>\n  );\n});\n\nSListItem.displayName = 'SListItem';\n"]}

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

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface SListItemRenderState {
+    hovered: boolean;
+    disabled: boolean;
+}
+export type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;
+export type SListItemSlot = ReactNode | SListItemRenderProp;
+export interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** 리스트 아이템 제목 */
+    title: SListItemSlot;
+    /** 중첩 단계. Figma 기준 1~3단계 */
+    depth?: 1 | 2 | 3;
+    /** 타이틀 앞에 표시할 아이콘/콘텐츠 */
+    leading?: SListItemSlot;
+    /** 타이틀 뒤에 표시할 태그/콘텐츠 */
+    trailing?: SListItemSlot;
+    /** 외곽 테두리 사용 여부 */
+    bordered?: boolean;
+    /** 아이템 왼쪽 accent stripe 표시 여부 */
+    accentStripe?: boolean;
+    /** 조밀한 높이 사용 여부 */
+    dense?: boolean;
+    /** 비활성 상태 여부 */
+    disabled?: boolean;
+}
+export declare const SListItem: import("react").ForwardRefExoticComponent<SListItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SListItem/SListItem.js

@@ -0,0 +1,81 @@
+"use client";
+import { forwardRef, useState } from 'react';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["10", "11", "12", "13", "14", "16", "18", "20", "24", "28", "32"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SListItem = forwardRef(function SListItem2({
+  title,
+  depth = 1,
+  leading,
+  trailing,
+  bordered = false,
+  accentStripe = false,
+  dense = false,
+  disabled = false,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}, ref) {
+  const [hovered, setHovered] = useState(false);
+  const renderState = { hovered, disabled };
+  const titleNode = typeof title === "function" ? title(renderState) : title;
+  const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
+  const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
+  const handleMouseEnter = (event) => {
+    if (!disabled) setHovered(true);
+    onMouseEnter?.(event);
+  };
+  const handleMouseLeave = (event) => {
+    setHovered(false);
+    onMouseLeave?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "aria-disabled": disabled || void 0,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      className: cn(
+        "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)",
+        disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : "hover:bg-(--cmp-listItem-bg-hover)",
+        dense ? "h-[32px] py-(--cmp-listItem-paddingY-dense)" : "h-[40px] py-(--cmp-listItem-paddingY-normal)",
+        "gap-(--cmp-listItem-gap)",
+        "pr-(--cmp-listItem-paddingX)",
+        depth === 2 ? "pl-[calc(var(--cmp-listItem-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listItem-paddingX)+64px)]" : "pl-(--cmp-listItem-paddingX)",
+        bordered ? "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)" : "border-b border-(--cmp-listItem-border-default)",
+        className
+      ),
+      ...rest,
+      children: [
+        accentStripe && !bordered && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
+          }
+        ),
+        leadingNode,
+        /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx("span", { children: titleNode }) }),
+        trailingNode
+      ]
+    }
+  );
+});
+SListItem.displayName = "SListItem";
+
+export { SListItem };
+//# sourceMappingURL=SListItem.js.map
+//# sourceMappingURL=SListItem.js.map

package/dist/components/SListItem/SListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SListItem/SListItem.tsx"],"names":["SListItem"],"mappings":";;;;;AAQA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACUO,IAAM,SAAA,GAAY,UAAA,CAA2C,SAASA,UAAAA,CAC3E;AAAA,EACE,KAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA,GAAe,KAAA;AAAA,EACf,KAAA,GAAQ,KAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,WAAA,GAAc,EAAE,OAAA,EAAS,QAAA,EAAS;AACxC,EAAA,MAAM,YAAY,OAAO,KAAA,KAAU,UAAA,GAAa,KAAA,CAAM,WAAW,CAAA,GAAI,KAAA;AACrE,EAAA,MAAM,cAAc,OAAO,OAAA,KAAY,UAAA,GAAa,OAAA,CAAQ,WAAW,CAAA,GAAI,OAAA;AAC3E,EAAA,MAAM,eAAe,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE9E,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAsC;AAC9D,IAAA,IAAI,CAAC,QAAA,EAAU,UAAA,CAAW,IAAI,CAAA;AAC9B,IAAA,YAAA,GAAe,KAAK,CAAA;AAAA,EACtB,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAsC;AAC9D,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,YAAA,GAAe,KAAK,CAAA;AAAA,EACtB,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,YAAA,EAAc,gBAAA;AAAA,MACd,YAAA,EAAc,gBAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oLAAA;AAAA,QACA,WACI,yEAAA,GACA,oCAAA;AAAA,QACJ,QACI,6CAAA,GACA,8CAAA;AAAA,QACJ,0BAAA;AAAA,QACA,8BAAA;AAAA,QACA,KAAA,KAAU,CAAA,GACN,8CAAA,GACA,KAAA,KAAU,IACR,8CAAA,GACA,8BAAA;AAAA,QACN,WACI,4JAAA,GACA,iDAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,YAAA,IAAgB,CAAC,QAAA,oBAChB,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,QAED,WAAA;AAAA,4BACA,MAAA,EAAA,EAAK,SAAA,EAAU,gCACd,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAM,qBAAU,CAAA,EACnB,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,SAAA,CAAU,WAAA,GAAc,WAAA","file":"SListItem.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { forwardRef, useState, type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport interface SListItemRenderState {\n  hovered: boolean;\n  disabled: boolean;\n}\n\nexport type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;\nexport type SListItemSlot = ReactNode | SListItemRenderProp;\n\nexport interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {\n  /** 리스트 아이템 제목 */\n  title: SListItemSlot;\n  /** 중첩 단계. Figma 기준 1~3단계 */\n  depth?: 1 | 2 | 3;\n  /** 타이틀 앞에 표시할 아이콘/콘텐츠 */\n  leading?: SListItemSlot;\n  /** 타이틀 뒤에 표시할 태그/콘텐츠 */\n  trailing?: SListItemSlot;\n  /** 외곽 테두리 사용 여부 */\n  bordered?: boolean;\n  /** 아이템 왼쪽 accent stripe 표시 여부 */\n  accentStripe?: boolean;\n  /** 조밀한 높이 사용 여부 */\n  dense?: boolean;\n  /** 비활성 상태 여부 */\n  disabled?: boolean;\n}\n\nexport const SListItem = forwardRef<HTMLDivElement, SListItemProps>(function SListItem(\n  {\n    title,\n    depth = 1,\n    leading,\n    trailing,\n    bordered = false,\n    accentStripe = false,\n    dense = false,\n    disabled = false,\n    className,\n    onMouseEnter,\n    onMouseLeave,\n    ...rest\n  },\n  ref,\n) {\n  const [hovered, setHovered] = useState(false);\n  const renderState = { hovered, disabled };\n  const titleNode = typeof title === 'function' ? title(renderState) : title;\n  const leadingNode = typeof leading === 'function' ? leading(renderState) : leading;\n  const trailingNode = typeof trailing === 'function' ? trailing(renderState) : trailing;\n\n  const handleMouseEnter = (event: MouseEvent<HTMLDivElement>) => {\n    if (!disabled) setHovered(true);\n    onMouseEnter?.(event);\n  };\n\n  const handleMouseLeave = (event: MouseEvent<HTMLDivElement>) => {\n    setHovered(false);\n    onMouseLeave?.(event);\n  };\n\n  return (\n    <div\n      ref={ref}\n      aria-disabled={disabled || undefined}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn(\n        'group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)',\n        disabled\n          ? 'pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)'\n          : 'hover:bg-(--cmp-listItem-bg-hover)',\n        dense\n          ? 'h-[32px] py-(--cmp-listItem-paddingY-dense)'\n          : 'h-[40px] py-(--cmp-listItem-paddingY-normal)',\n        'gap-(--cmp-listItem-gap)',\n        'pr-(--cmp-listItem-paddingX)',\n        depth === 2\n          ? 'pl-[calc(var(--cmp-listItem-paddingX)+32px)]'\n          : depth === 3\n            ? 'pl-[calc(var(--cmp-listItem-paddingX)+64px)]'\n            : 'pl-(--cmp-listItem-paddingX)',\n        bordered\n          ? 'overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)'\n          : 'border-b border-(--cmp-listItem-border-default)',\n        className,\n      )}\n      {...rest}\n    >\n      {accentStripe && !bordered && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)\"\n        />\n      )}\n      {leadingNode}\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span>{titleNode}</span>\n      </span>\n      {trailingNode}\n    </div>\n  );\n});\n\nSListItem.displayName = 'SListItem';\n"]}

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

@@ -0,0 +1 @@
+export { SListItem, type SListItemProps } from './SListItem';

package/dist/components/SLoadingContainer/README.md

@@ -0,0 +1,29 @@
+# SLoadingContainer
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLoadingContainer
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open?` | `boolean` | `false` | 오버레이 표시 여부 (Stencil의 show()/hide() 명령형 API → 제어 prop으로 대체) |
+| `message?` | `string` | — | 스피너 하단 메시지 |
+| `zIndex?` | `number` | `1200` | z-index. 기본값(1200)은 토스트(1100)·모달(1000/1001) 위 — 전체 화면을 막는 최상단 블로킹 오버레이 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+## Dependencies
+
+### Depends on
+
+- [SCircleProgress](../SCircleProgress)
+
+### Graph
+
+```mermaid
+graph TD;
+  SLoadingContainer --> SCircleProgress
+  style SLoadingContainer fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SLoadingModal/README.md

@@ -0,0 +1,52 @@
+# SLoadingModal
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLoadingModal
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open?` | `boolean` | — |  |
+| `persistent?` | `boolean` | — | true면 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). 로딩 중 닫힘 방지에 유용 |
+| `state?` | `LoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
+| `progress?` | `number` | — | 진행률 (0–100) — 지정 시 determinate 스피너 |
+| `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
+| `useButton?` | `boolean` | `false` | 하단 버튼 표시 |
+| `buttonLabel?` | `string` | — | 버튼 레이블 (없으면 state 기본값) |
+| `width?` | `number \| string` | `520` |  |
+| `height?` | `number \| string` | `320` |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `onClose` | `() => void` | 닫기(X) 버튼 클릭 (sdClose) — error 상태에서만 노출 |
+| `onButtonClick` | `() => void` | 버튼 클릭 (sdClick) |
+
+## Dependencies
+
+### Used by
+
+ - [SModal](../SModal)
+
+### Depends on
+
+- [SButton](../SButton)
+- [SCircleProgress](../SCircleProgress)
+- [SIcon](../SIcon)
+- [SModalContainer](../SModalContainer)
+
+### Graph
+
+```mermaid
+graph TD;
+  SLoadingModal --> SButton
+  SLoadingModal --> SCircleProgress
+  SLoadingModal --> SIcon
+  SLoadingModal --> SModalContainer
+  SModal --> SLoadingModal
+  style SLoadingModal fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SModal/README.md

@@ -0,0 +1,192 @@
+# SModal
+
+> 수작성 문서 — SModal 은 컴포넌트가 아니라 **명령형 모달 서비스**라 `docs:gen`(Props/Events 표) 대상이 아니다.
+
+버튼 핸들러에서 바로 호출해 모달을 띄우는 명령형 API. 선언형 `<SConfirmModal open>` / `<SLoadingModal open>` 을 **대체하지 않고 추가로** 제공한다. (원본 디자인 시스템 `sdModal` 파리티)
+
+호출 시마다 `document.body` 에 컨테이너를 만들어 모달을 렌더하고, 닫힘 애니메이션이 끝나면 자동으로 언마운트한다. 모든 메서드는 체이닝 핸들 [`SModalRef`](#smodalref) 를 반환한다.
+
+| 메서드 | 띄우는 모달 | 용도 | 주요 콜백/제어 |
+|---|---|---|---|
+| [`SModal.confirm(options)`](#smodalconfirm) | `SConfirmModal` | 확인/취소 | `onOk` / `onCancel` / `onClose` |
+| [`SModal.loading(options?)`](#smodalloading) | `SLoadingModal` | 로딩·에러 (persistent 기본 true) | `onClick` / `update` |
+| [`SModal.create({ component })`](#smodalcreate) | `SActionModal` | 액션 모달 | `modalRef` 주입 → `ok/cancel/close/submit` |
+
+> **띄울 수 있는 모달은 `SActionModal` / `SConfirmModal` / `SLoadingModal` 세 가지뿐이고, 위 메서드가 1:1 로 대응한다.** 그 밖의 스타일로 모달을 띄우는 경로는 제공하지 않는다. `create` 는 컨테이너를 덧씌우지 않고 `component` 를 **그대로** 렌더하므로, `component` 는 루트에 `SActionModal` 을 렌더해야 한다 — 그러지 않으면 딤·카드 없이 콘텐츠만 뜨며, 개발 모드에서 `console.warn` 으로 경고한다.
+
+```ts
+import { SModal } from 'sellmate-design-system-react';
+```
+
+---
+
+## SModal.confirm
+
+아이콘 + 제목 + 메시지 + 확인/취소 버튼. `type` 에 따라 아이콘·메인 버튼 색이 결정된다.
+
+```tsx
+SModal.confirm({
+  type: 'negative',                 // 'positive' | 'negative' | 'default'
+  modalTitle: '삭제하시겠습니까?',
+  topMessage: ['이 작업은 되돌릴 수 없습니다.'],
+  mainButtonLabel: '삭제',
+  subButtonLabel: '취소',
+})
+  .onOk(() => deleteItem())
+  .onCancel(() => {});
+```
+
+**옵션 (`SConfirmOptions`)** — 선언형 `SConfirmModalProps` 에서 제어 흐름 props(`open`/`onOpenChange`/`onOk`/`onCancel`/`onClose`)를 제외한 전부. 주요 키: `type`, `modalTitle`, `topMessage`/`bottomMessage`, `mainButtonLabel`/`mainButtonName`, `subButtonLabel`, `tagSlot`/`optionSlot`, `persistent`.
+
+---
+
+## SModal.loading
+
+스피너/에러 모달. 로딩 중 임의 닫힘을 막기 위해 **`persistent` 기본값이 `true`** 다(백드롭·ESC로 안 닫힘). "띄우고 → 작업 → 결과 반영" 흐름을 `update()` / `close()` 로 제어한다.
+
+```tsx
+const ref = SModal.loading({ message: '업로드 중...' });
+try {
+  await upload();
+  ref.close();
+} catch {
+  ref.update({ state: 'error', message: '업로드 실패' })  // 표시 중 상태 갱신
+     .onClick(() => retry());                             // 「다시 시도」 버튼
+}
+```
+
+진행률:
+
+```tsx
+const ref = SModal.loading({ progress: 0, message: '파일 업로드 중...' });
+ref.update({ progress: 60 });          // 0–100
+ref.update({ progress: 100 });
+ref.close();
+```
+
+> **버튼 클릭은 자동 닫힘이 아니다.** error 상태의 버튼(기본 "다시 시도")은 `onClick` 만 발화하고 모달은 유지된다. consumer 가 `update()`(다시 로딩) / `close()` 로 후속 동작을 결정한다.
+
+**옵션 (`SLoadingOptions`)** — `state`('loading' | 'error'), `progress`(0–100), `message`(string | string[]), `useButton`, `buttonLabel`, `width`/`height`, `persistent`.
+
+---
+
+## SModal.create
+
+**`SActionModal` 을 루트로 렌더하는 컴포넌트**를 띄운다. `create` 는 컨테이너를 덧씌우지 않고 `component` 를 **그대로** 렌더하며, 표시 제어(`open` / `onOpenChange` / `onClose`)와 [`modalRef`](#smodalref) 를 주입하고 닫힘 애니메이션 종료 후 언마운트를 담당한다.
+
+컴포넌트는 주입받은 `open` / `onOpenChange` / `onClose` 를 **SActionModal 에 그대로 전달**해야 한다. 전달하지 않으면 모달이 열리지도, 닫히지도 않는다.
+
+```tsx
+import { SModal, SActionModal, type SModalCreateComponentProps } from 'sellmate-design-system-react';
+
+// componentProps 로 넘긴 값 + 주입 prop 을 함께 받는다
+interface OrderModalProps extends SModalCreateComponentProps {
+  orderId: string;
+}
+
+function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderModalProps) {
+  return (
+    <SActionModal
+      open={open}
+      onOpenChange={onOpenChange}
+      onClose={onClose}
+      modalTitle="주문 처리"
+      button={{ label: '처리', onClick: () => modalRef.ok() }}
+    >
+      <p>주문번호 {orderId} 를 접수합니다.</p>
+    </SActionModal>
+  );
+}
+
+SModal.create({ component: OrderModal, componentProps: { orderId: 'ORD-001' } })
+  .onOk(() => toast('저장 완료'))
+  .onDismissed(() => cleanup());
+```
+
+**옵션 (`SCreateOptions<P>`)**
+
+| 키 | 타입 | 설명 |
+|---|---|---|
+| `component` | `ComponentType<P & SModalCreateComponentProps>` | 루트에 `SActionModal` 을 렌더하는 컴포넌트 |
+| `componentProps?` | `P` | 컴포넌트에 전달할 추가 props |
+
+**주입되는 prop (`SModalCreateComponentProps`)**
+
+| 키 | 타입 | 설명 |
+|---|---|---|
+| `open` | `boolean` | SActionModal 의 `open` 에 그대로 전달 |
+| `onOpenChange` | `(open: boolean) => void` | SActionModal 의 `onOpenChange` 에 그대로 전달 |
+| `onClose` | `() => void` | SActionModal 의 `onClose` 에 그대로 전달 |
+| `modalRef` | `SModalRef` | `ok()`/`cancel()`/`close()`/`submit()` 으로 자기 모달 제어 |
+
+### 비동기 제출 — 응답 보고 닫기
+
+SActionModal `button` 의 푸터 버튼은 클릭 시 **즉시 닫힌다**. 저장 API 응답에 따라 닫힘 여부를 정해야 하면 푸터 버튼 대신 **본문에 버튼을 두고** `modalRef` 로 닫힘 시점을 직접 제어한다.
+
+```tsx
+function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderModalProps) {
+  const [error, setError] = useState('');
+  const handleSubmit = async () => {
+    try {
+      await save(orderId);
+      modalRef.ok();          // 성공 → onOk + 닫기
+    } catch {
+      setError('저장 실패');   // 실패 → 모달 유지
+    }
+  };
+  return (
+    // button 을 주지 않으면 푸터가 렌더되지 않는다
+    <SActionModal open={open} onOpenChange={onOpenChange} onClose={onClose} persistent modalTitle="주문 처리">
+      {error && <p>{error}</p>}
+      <SButton label="저장" onClick={handleSubmit} />
+      <SButton label="취소" onClick={() => modalRef.cancel()} />
+    </SActionModal>
+  );
+}
+```
+
+---
+
+## SModalRef
+
+모든 `SModal.*` 호출이 반환하고, `create` 에서는 컴포넌트 prop 으로도 주입되는 제어 핸들. 콜백 등록(체이닝)과 트리거/갱신 메서드를 함께 제공한다. 모달 종류에 따라 관련 있는 메서드만 실제로 발화한다.
+
+### 콜백 등록 (체이닝)
+
+| 메서드 | 발화 시점 |
+|---|---|
+| `onOk(fn)` | 확인 버튼(confirm) 또는 `ok()` |
+| `onCancel(fn)` | 취소 버튼(confirm) 또는 `cancel()` |
+| `onClose(fn)` | 닫기(X) 버튼 또는 `close()` |
+| `onClick(fn)` | 단일 버튼 모달(loading error)의 버튼 클릭 — **닫힘 없음** |
+| `onSubmit(fn)` | create 커스텀 모달의 `submit()` — **닫힘 없음** |
+| `onDismissed(fn)` | 사유 무관 완전히 닫혀 언마운트된 뒤(백드롭·ESC 포함) |
+
+### 트리거 / 제어
+
+| 메서드 | 동작 |
+|---|---|
+| `ok()` | `onOk` 발화 + 닫기 (저장/처리 성공) |
+| `cancel()` | `onCancel` 발화 + 닫기 (작업 취소) |
+| `close()` | `onClose` 발화 + 닫기 (중립적 닫기) |
+| `submit()` | `onSubmit` 발화 (닫힘 없음) |
+| `update(patch)` | 표시 중 옵션 갱신 (loading→error, progress 등). create 는 미지원. |
+
+모든 닫힘은 애니메이션 종료 후 `onDismissed` 로 수렴한다. 이미 닫힘이 시작된 뒤의 중복 트리거는 무시된다.
+
+---
+
+## 주의사항
+
+- **선언형과 공존**: 서비스는 추가 API다. open 상태가 앱 상태/라우트에 묶인 경우엔 선언형 `<SConfirmModal open>` / `<SLoadingModal open>` 이 더 적합하다.
+- **백드롭·ESC = 중립적 닫힘**: 특정 콜백(onClose 등) 없이 `onDismissed` 만 발화한다. 명시적 버튼·메서드만 onOk/onCancel/onClose 를 발화한다.
+- **Context 미상속**: `create` 의 커스텀 컴포넌트는 새 React 트리(createRoot)에서 렌더되어 부모의 Context Provider(Theme·Store 등)를 상속하지 않는다. 필요하면 컴포넌트 내부에서 직접 Provider 로 감싸라. (confirm/loading 은 토큰이 `:root` CSS 변수라 무관)
+- **`create` 의 `component` 는 SActionModal 을 루트로**: `create` 는 컨테이너를 덧씌우지 않으므로, 본문만 렌더하는 컴포넌트를 넘기면 딤·카드 없이 콘텐츠가 그대로 화면에 붙는다. TypeScript 는 이를 막지 못한다(`component` 타입이 아무 컴포넌트나 허용). 개발 모드에서는 마운트 직후 렌더 결과로 이를 감지해 `console.warn` 으로 경고한다 — 세 모달은 모두 Portal 로 `body` 에 렌더되므로 `create` 가 만든 host 는 비어 있어야 하는데, host 에 엘리먼트가 남아 있으면 모달이 아닌 것으로 판정한다.
+
+## Dependencies
+
+### Depends on
+
+- [SActionModal](../SActionModal)
+- [SConfirmModal](../SConfirmModal)
+- [SLoadingModal](../SLoadingModal)