sellmate-design-system-react 9.0.0-beta.79 → 9.0.0-beta.80

package/dist/components/SExpansionItem/README.md

@@ -11,10 +11,10 @@
 | `title` | `ReactNode` | — |  |
 | `supportingText?` | `ReactNode` | — | 제목을 보조하는 텍스트 |
 | `supportingTextPosition?` | `SExpansionItemSupportingTextPosition` | `'right'` | 보조 텍스트 위치 |
-| `depth?` | `1 \| 2 \| 3` | `1` | 중첩 단계. Figma 기준 1~3단계 |
+| `depth?` | `1 \| 2 \| 3` | `1` | 중첩 단계. Figma 기준 1~3단계. `SExpansionList` 안에서는 주지 않아도 중첩에서 정해진다 — 직접 주면 그 값이 우선한다. |
 | `leading?` | `ReactNode \| SExpansionItemRenderProp` | — | 타이틀 앞에 표시할 아이콘/콘텐츠 |
 | `trailing?` | `ReactNode` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
-| `bodyPadding?` | `boolean` | `true` | body 내부 패딩 사용 여부 |
+| `bodyPadding?` | `boolean` | `true` | body 내부 패딩 사용 여부. `SExpansionList` 안에서 본문이 목록(`SListItem`·`SExpansionItem` 만, 또는 `SExpansionList`)이면 기본으로 꺼진다. |
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
 | `expanded?` | `boolean` | — |  |
 | `defaultExpanded?` | `boolean` | `false` |  |

package/dist/components/SExpansionItem/SExpansionItem.d.ts

@@ -14,13 +14,19 @@ export interface SExpansionItemProps extends Omit<HTMLAttributes<HTMLDivElement>
     supportingText?: ReactNode;
     /** 보조 텍스트 위치 */
     supportingTextPosition?: SExpansionItemSupportingTextPosition;
-    /** 중첩 단계. Figma 기준 1~3단계 */
+    /**
+     * 중첩 단계. Figma 기준 1~3단계.
+     * `SExpansionList` 안에서는 주지 않아도 중첩에서 정해진다 — 직접 주면 그 값이 우선한다.
+     */
     depth?: 1 | 2 | 3;
     /** 타이틀 앞에 표시할 아이콘/콘텐츠 */
     leading?: ReactNode | SExpansionItemRenderProp;
     /** 타이틀 뒤에 표시할 태그/콘텐츠 */
     trailing?: ReactNode;
-    /** body 내부 패딩 사용 여부 */
+    /**
+     * body 내부 패딩 사용 여부.
+     * `SExpansionList` 안에서 본문이 목록(`SListItem`·`SExpansionItem` 만, 또는 `SExpansionList`)이면 기본으로 꺼진다.
+     */
     bodyPadding?: boolean;
     /** 외곽 테두리 사용 여부 */
     bordered?: boolean;

package/dist/components/SListItem/README.md

@@ -11,12 +11,12 @@
 | `title` | `SListItemSlot` | — | 리스트 아이템 제목 |
 | `supportingText?` | `SListItemSlot` | — | 제목을 보조하는 텍스트 |
 | `supportingTextPosition?` | `SListItemSupportingTextPosition` | `'right'` | 보조 텍스트 위치 |
-| `depth?` | `1 \| 2 \| 3` | `1` | 중첩 단계. Figma 기준 1~3단계 |
+| `depth?` | `1 \| 2 \| 3` | `1` | 중첩 단계. Figma 기준 1~3단계. `SExpansionList` 안에서는 주지 않아도 중첩에서 정해진다 — 직접 주면 그 값이 우선한다. |
 | `leading?` | `SListItemSlot` | — | 타이틀 앞에 표시할 아이콘/콘텐츠 |
 | `trailing?` | `SListItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
 | `selected?` | `boolean` | `false` | 선택 상태 여부. `clickable` 이 false 면 무시된다 |
-| `clickable?` | `boolean` | `false` | 클릭 가능 상태 여부. hover·selected·chevron 등 인터랙션 표현이 여기에 딸린다 |
+| `clickable?` | `boolean` | `false` | 클릭 가능 상태 여부. hover·selected·chevron 등 인터랙션 표현이 여기에 딸린다. `SExpansionList` 안에서는 기본으로 켜진다 — 표시 전용이면 `false` 를 준다. |
 | `interaction?` | `SListItemInteraction` | — | hover/selected 상태에서 적용할 인터랙션 preset |
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |

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

@@ -15,7 +15,10 @@ export interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch
     supportingText?: SListItemSlot;
     /** 보조 텍스트 위치 */
     supportingTextPosition?: SListItemSupportingTextPosition;
-    /** 중첩 단계. Figma 기준 1~3단계 */
+    /**
+     * 중첩 단계. Figma 기준 1~3단계.
+     * `SExpansionList` 안에서는 주지 않아도 중첩에서 정해진다 — 직접 주면 그 값이 우선한다.
+     */
     depth?: 1 | 2 | 3;
     /** 타이틀 앞에 표시할 아이콘/콘텐츠 */
     leading?: SListItemSlot;
@@ -25,7 +28,10 @@ export interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch
     bordered?: boolean;
     /** 선택 상태 여부. `clickable` 이 false 면 무시된다 */
     selected?: boolean;
-    /** 클릭 가능 상태 여부. hover·selected·chevron 등 인터랙션 표현이 여기에 딸린다 */
+    /**
+     * 클릭 가능 상태 여부. hover·selected·chevron 등 인터랙션 표현이 여기에 딸린다.
+     * `SExpansionList` 안에서는 기본으로 켜진다 — 표시 전용이면 `false` 를 준다.
+     */
     clickable?: boolean;
     /** hover/selected 상태에서 적용할 인터랙션 preset */
     interaction?: SListItemInteraction;

package/dist/components/SSkeleton/README.md

@@ -0,0 +1,55 @@
+# SSkeleton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSkeleton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type?` | `SSkeletonType` | `'rect'` | 자리표시 모양 - `rect`: 사각형. 폭은 부모를, 높이는 한 줄 높이를 따른다 — 이미지·카드 영역은 `height` 를 준다 - `circle`: 원형(아바타 등) - `text`: 텍스트 한 줄. 부모 타이포의 line-height 를 따르고 세로로 절반만 칠한다 - `button`·`input`·`tag`·`checkbox`·`radio`·`switch`: 해당 컴포넌트 기본 size 의 크기·모서리 |
+| `animation?` | `SSkeletonAnimation` | `'wave'` | 로딩 애니메이션 - `wave`: 하이라이트 띠가 왼쪽에서 오른쪽으로 지나간다 - `pulse`: 크기가 숨쉬듯 줄었다 커진다. 블록 전체가 움직이므로 아바타처럼 작은 모양에만 쓴다 - `fade`: 투명도가 숨쉬듯 바뀐다 - `none`: 애니메이션 없음 OS 의 동작 줄이기 설정이 켜져 있으면 어떤 값이든 멈춘다. |
+| `animationSpeed?` | `number` | `1500` | 애니메이션 한 주기 (ms) |
+| `square?` | `boolean` | `false` | 모서리를 각지게 |
+| `bordered?` | `boolean` | `false` | 테두리 |
+| `size?` | `string \| number` | — | 가로·세로를 한 번에 지정. `width`·`height` 가 있으면 그쪽이 우선한다. 숫자는 px |
+| `width?` | `string \| number` | — | 폭. 숫자는 px |
+| `height?` | `string \| number` | — | 높이. 숫자는 px |
+
+## Types
+
+### SSkeletonType
+
+```ts
+export type SSkeletonType = (typeof SKELETON_TYPES)[number];
+```
+
+### SSkeletonAnimation
+
+```ts
+export type SSkeletonAnimation = (typeof SKELETON_ANIMATIONS)[number];
+```
+
+### SKELETON_TYPES
+
+```ts
+export const SKELETON_TYPES = [
+  'rect',
+  'circle',
+  'text',
+  'button',
+  'input',
+  'tag',
+  'checkbox',
+  'radio',
+  'switch',
+] as const;
+```
+
+### SKELETON_ANIMATIONS
+
+```ts
+export const SKELETON_ANIMATIONS = ['wave', 'pulse', 'fade', 'none'] as const;
+```
+

package/dist/components/SSkeleton/SSkeleton.d.ts

@@ -0,0 +1,39 @@
+import { type HTMLAttributes } from 'react';
+import { type SSkeletonAnimation, type SSkeletonType } from './skeleton.config';
+export interface SSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 자리표시 모양
+     * - `rect`: 사각형. 폭은 부모를, 높이는 한 줄 높이를 따른다 — 이미지·카드 영역은 `height` 를 준다
+     * - `circle`: 원형(아바타 등)
+     * - `text`: 텍스트 한 줄. 부모 타이포의 line-height 를 따르고 세로로 절반만 칠한다
+     * - `button`·`input`·`tag`·`checkbox`·`radio`·`switch`: 해당 컴포넌트 기본 size 의 크기·모서리
+     */
+    type?: SSkeletonType;
+    /**
+     * 로딩 애니메이션
+     * - `wave`: 하이라이트 띠가 왼쪽에서 오른쪽으로 지나간다
+     * - `pulse`: 크기가 숨쉬듯 줄었다 커진다. 블록 전체가 움직이므로 아바타처럼 작은 모양에만 쓴다
+     * - `fade`: 투명도가 숨쉬듯 바뀐다
+     * - `none`: 애니메이션 없음
+     *
+     * OS 의 동작 줄이기 설정이 켜져 있으면 어떤 값이든 멈춘다.
+     */
+    animation?: SSkeletonAnimation;
+    /** 애니메이션 한 주기 (ms) */
+    animationSpeed?: number;
+    /** 모서리를 각지게 */
+    square?: boolean;
+    /** 테두리 */
+    bordered?: boolean;
+    /** 가로·세로를 한 번에 지정. `width`·`height` 가 있으면 그쪽이 우선한다. 숫자는 px */
+    size?: string | number;
+    /** 폭. 숫자는 px */
+    width?: string | number;
+    /** 높이. 숫자는 px */
+    height?: string | number;
+}
+/**
+ * SSkeleton — 데이터가 오기 전 콘텐츠 자리를 같은 모양으로 채워 두는 자리표시. Quasar QSkeleton 모티브.
+ * 장식이라 보조기기에는 숨긴다(`aria-hidden`). 로딩 중이라는 사실은 감싸는 영역에 `aria-busy` 로 알린다.
+ */
+export declare const SSkeleton: import("react").ForwardRefExoticComponent<SSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { SSkeleton, type SSkeletonProps } from './SSkeleton';
+export { SKELETON_TYPES, SKELETON_ANIMATIONS, SKELETON_TYPE_CONFIG, type SSkeletonType, type SSkeletonAnimation, } from './skeleton.config';

package/dist/components/SSkeleton/skeleton.config.d.ts

@@ -0,0 +1,22 @@
+export declare const SKELETON_TYPES: readonly ["rect", "circle", "text", "button", "input", "tag", "checkbox", "radio", "switch"];
+export type SSkeletonType = (typeof SKELETON_TYPES)[number];
+export declare const SKELETON_ANIMATIONS: readonly ["wave", "pulse", "fade", "none"];
+export type SSkeletonAnimation = (typeof SKELETON_ANIMATIONS)[number];
+/**
+ * type 별 기본 크기·모서리. 값이 없는 축은 내용(공백 한 글자)과 부모 폭을 따른다.
+ * DS 모양(button·input…)은 해당 컴포넌트의 **기본 size** 토큰을 그대로 가리켜
+ * 토큰이 바뀌어도 실제 컴포넌트와 어긋나지 않는다. 폭은 토큰이 없어 Quasar 기본값을 따른다.
+ */
+export declare const SKELETON_TYPE_CONFIG: Record<SSkeletonType, {
+    width?: string;
+    height?: string;
+    radius: string;
+}>;
+export declare const SKELETON_COLORS: {
+    /** Quasar rgba(0,0,0,.12) ≈ 흰 바탕 위 #E1E1E1 */
+    bg: string;
+    /** Quasar rgba(0,0,0,.05) 테두리 — 배경보다 한 단계 짙게 */
+    border: string;
+    /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
+    wave: string;
+};

package/dist/index.cjs

@@ -5689,6 +5689,8 @@ var SChatSystemMessageImpl = /* @__PURE__ */ react.forwardRef(
     const notices = message ?? [];
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col items-center gap-sd-8", className), ...rest, children: notices.map((notice, i) => (
       // 알약은 문구 길이만큼만 차지하고, 길면 줄바꿈해 여러 줄로 선다.
+      // inline-flex 로 두면 안의 글자와 <b> 같은 인라인 태그가 각각 flex 아이템이 되어 그 사이 띄어쓰기가
+      // 사라진다(`상담사 <b>김셀메</b>가` → 상담사김셀메가). 글 흐름 그대로 두려고 inline-block 이다.
       // 안내는 HTML 문자열을 허용하되 sanitizeInlineHtml 로 살균 후 innerHTML 렌더 (XSS 방어)
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
@@ -5697,7 +5699,7 @@ var SChatSystemMessageImpl = /* @__PURE__ */ react.forwardRef(
             // 라운드는 말풍선과 같은 토큰을 쓴다 — 여러 줄이 돼도 모서리가 상자 높이를 따라
             // 부풀지 않는다. 제 몫인 chatSystemMessage.radius 는 pill(9999px)이라 쓰지 않는다.
             // 두 줄부터 좌우가 커다란 반원이 되어 첫 글자가 안으로 밀리기 때문이다.
-            "inline-flex max-w-full rounded-(--cmp-chatBubble-radius) border",
+            "inline-block max-w-full rounded-(--cmp-chatBubble-radius) border",
             "border-(--cmp-chatSystemMessage-border-color) bg-(--cmp-chatSystemMessage-bg)",
             "typo-body-sm-medium text-(--cmp-chatSystemMessage-color)",
             "px-(--cmp-chatSystemMessage-paddingX) py-(--cmp-chatSystemMessage-paddingY) text-center",
@@ -6851,17 +6853,26 @@ var SListItemImpl = /* @__PURE__ */ react.forwardRef(function SListItem({
   );
 });
 var SListItem2 = /* @__PURE__ */ withDisplayName(SListItemImpl, "SListItem");
+var SExpansionListDepthContext = /* @__PURE__ */ react.createContext(null);
+var MAX_DEPTH = 3;
 function isExpansionItemElement(node) {
   return react.isValidElement(node) && node.type === SExpansionItem;
 }
 function isListItemElement(node) {
   return react.isValidElement(node) && node.type === SListItem2;
 }
-function getInitialOpenKeys(children) {
+function isExpansionListElement(node) {
+  return react.isValidElement(node) && node.type === SExpansionList2;
+}
+function isLevelBody(children) {
+  const nodes = react.Children.toArray(children);
+  return nodes.length > 0 && nodes.every((node) => isListItemElement(node) || isExpansionItemElement(node));
+}
+function getInitialOpenKeys(children, levelDepth) {
   const openKeys = {};
   react.Children.forEach(children, (child, index) => {
     if (!isExpansionItemElement(child)) return;
-    const depth = child.props.depth ?? 1;
+    const depth = child.props.depth ?? levelDepth;
     if (openKeys[depth] != null) return;
     if (child.props.expanded === true || child.props.defaultExpanded === true) {
       openKeys[depth] = String(child.key ?? index);
@@ -6870,15 +6881,28 @@ function getInitialOpenKeys(children) {
   return openKeys;
 }
 var SExpansionListImpl = /* @__PURE__ */ react.forwardRef(function SExpansionList({ children, ...rest }, ref) {
-  const [openKeys, setOpenKeys] = react.useState(() => getInitialOpenKeys(children));
+  const parentDepth = react.useContext(SExpansionListDepthContext);
+  const levelDepth = parentDepth == null ? 1 : Math.min(parentDepth + 1, MAX_DEPTH);
+  const [openKeys, setOpenKeys] = react.useState(
+    () => getInitialOpenKeys(children, levelDepth)
+  );
   const listChildren = react.Children.map(children, (child, index) => {
     if (isListItemElement(child)) {
-      return react.cloneElement(child, { clickable: child.props.clickable ?? true });
+      return react.cloneElement(child, {
+        clickable: child.props.clickable ?? true,
+        depth: child.props.depth ?? levelDepth
+      });
     }
     if (!isExpansionItemElement(child)) return child;
-    const depth = child.props.depth ?? 1;
+    const depth = child.props.depth ?? levelDepth;
     const itemKey = String(child.key ?? index);
+    const body = child.props.children;
+    const bodyIsList = isExpansionListElement(body);
+    const wrapBody = !bodyIsList && isLevelBody(body);
     return react.cloneElement(child, {
+      depth,
+      bodyPadding: child.props.bodyPadding ?? (bodyIsList || wrapBody ? false : void 0),
+      ...wrapBody && { children: /* @__PURE__ */ jsxRuntime.jsx(SExpansionListImpl, { children: body }) },
       expanded: openKeys[depth] === itemKey,
       onToggle: (next, event) => {
         setOpenKeys((current) => ({
@@ -6889,7 +6913,7 @@ var SExpansionListImpl = /* @__PURE__ */ react.forwardRef(function SExpansionLis
       }
     });
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(SList2, { ref, ...rest, children: listChildren });
+  return /* @__PURE__ */ jsxRuntime.jsx(SExpansionListDepthContext.Provider, { value: levelDepth, children: /* @__PURE__ */ jsxRuntime.jsx(SList2, { ref, ...rest, children: listChildren }) });
 });
 var SExpansionList2 = /* @__PURE__ */ withDisplayName(SExpansionListImpl, "SExpansionList");
 
@@ -14094,6 +14118,22 @@ function groupAdjacentItems(items) {
     []
   );
 }
+function scrollItemIntoContainer(item4) {
+  const view = item4.ownerDocument.defaultView;
+  if (!view) return;
+  let container = item4.parentElement;
+  while (container) {
+    const { overflowY } = view.getComputedStyle(container);
+    if ((overflowY === "auto" || overflowY === "scroll") && container.scrollHeight > container.clientHeight)
+      break;
+    container = container.parentElement;
+  }
+  if (!container) return;
+  const box3 = container.getBoundingClientRect();
+  const rect = item4.getBoundingClientRect();
+  if (rect.top < box3.top) container.scrollTop -= box3.top - rect.top;
+  else if (rect.bottom > box3.bottom) container.scrollTop += rect.bottom - box3.bottom;
+}
 var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
   items,
   value,
@@ -14127,10 +14167,16 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
   const resolvedClickableIndex = lastCompletedIndex + 1;
   const [visitedMaxIndex, setVisitedMaxIndex] = react.useState(activeIndex);
   const firstErrorIndex = items.findIndex((item4) => item4.error === true);
+  const firstErrorIndexRef = react.useRef(firstErrorIndex);
+  firstErrorIndexRef.current = firstErrorIndex;
   react.useImperativeHandle(
     ref,
     () => ({
-      showItemTooltip: () => setCustomTooltipOpen(true),
+      showItemTooltip: () => {
+        const errorItem = verticalItemRefs.current[firstErrorIndexRef.current];
+        if (errorItem) scrollItemIntoContainer(errorItem);
+        setCustomTooltipOpen(true);
+      },
       hideItemTooltip: () => setCustomTooltipOpen(false)
     }),
     []
@@ -14154,6 +14200,11 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
       transform: `translateY(${activeItem.offsetTop}px)`
     });
   }, [activeIndex, vertical, items]);
+  react.useLayoutEffect(() => {
+    if (!vertical) return;
+    const activeItem = verticalItemRefs.current[activeIndex];
+    if (activeItem) scrollItemIntoContainer(activeItem);
+  }, [activeIndex, vertical]);
   const getState = (item4, index) => {
     if (index === activeIndex) return "active";
     if (item4.completed != null) return item4.completed ? "completed" : "default";
@@ -14274,6 +14325,9 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
         className: cn("relative inline-flex flex-col items-start", className),
         style: {
           width: STEPPER_VERTICAL_LAYOUT.width,
+          // 폭은 토큰이 정하되 부모보다 넓어지지 않는다 — 부모가 세로 스크롤바만큼 좁아지면 따라 줄어
+          // 가로 넘침(가로 스크롤바)이 생기지 않는다
+          maxWidth: "100%",
           fontSize: config.fontSize,
           lineHeight: config.lineHeight,
           ...style
@@ -22581,6 +22635,113 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
     );
   }
 );
+
+// src/components/SSkeleton/skeleton.config.ts
+var SKELETON_TYPES = [
+  "rect",
+  "circle",
+  "text",
+  "button",
+  "input",
+  "tag",
+  "checkbox",
+  "radio",
+  "switch"
+];
+var SKELETON_ANIMATIONS = ["wave", "pulse", "fade", "none"];
+var SKELETON_TYPE_CONFIG = {
+  rect: { radius: "var(--sys-radius-control-sm)" },
+  circle: { width: "48px", height: "48px", radius: "50%" },
+  text: { radius: "var(--sys-radius-control-sm)" },
+  button: {
+    width: "90px",
+    height: "var(--cmp-button-sm-height)",
+    radius: "var(--cmp-button-radius-sm)"
+  },
+  input: { height: "var(--cmp-textinput-sm-height)", radius: "var(--cmp-textinput-sm-radius)" },
+  tag: { width: "70px", height: "var(--cmp-tag-sm-height)", radius: "var(--cmp-tag-sm-radius)" },
+  checkbox: {
+    width: "var(--cmp-checkbox-size)",
+    height: "var(--cmp-checkbox-size)",
+    radius: "var(--cmp-checkbox-radius)"
+  },
+  radio: {
+    width: "var(--cmp-radio-size)",
+    height: "var(--cmp-radio-size)",
+    radius: "var(--cmp-radio-radius)"
+  },
+  switch: {
+    width: "var(--cmp-switch-width)",
+    height: "var(--cmp-switch-height)",
+    radius: "var(--cmp-switch-radius)"
+  }
+};
+var SKELETON_COLORS = {
+  /** Quasar rgba(0,0,0,.12) ≈ 흰 바탕 위 #E1E1E1 */
+  bg: "var(--sys-color-disabled-bg)",
+  /** Quasar rgba(0,0,0,.05) 테두리 — 배경보다 한 단계 짙게 */
+  border: "color-mix(in srgb, var(--sys-color-border-strong) 25%, transparent)",
+  /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
+  wave: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--sys-color-bg-frame) 50%, transparent), transparent)"
+};
+var ANIMATION_CLASS = {
+  pulse: "animate-skeleton-pulse",
+  fade: "animate-skeleton-fade"
+};
+var toCss = (v) => typeof v === "number" ? `${v}px` : v;
+var SSkeleton = /* @__PURE__ */ react.forwardRef(function SSkeleton2({
+  type = "rect",
+  animation = "wave",
+  animationSpeed = 1500,
+  square = false,
+  bordered = false,
+  size,
+  width,
+  height,
+  className,
+  style,
+  ...props
+}, ref) {
+  const t = SKELETON_TYPE_CONFIG[type];
+  const duration = `${animationSpeed}ms`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      ...props,
+      className: cn(
+        "box-border cursor-wait select-none",
+        // text 는 transform 이 아니라 scale 속성으로 줄여서 pulse 의 transform 애니메이션과 겹치지 않는다
+        type === "text" && "scale-y-50",
+        bordered && "border border-solid",
+        animation === "wave" && "relative overflow-hidden",
+        animation !== "wave" && animation !== "none" && ANIMATION_CLASS[animation],
+        "motion-reduce:animate-none",
+        className
+      ),
+      style: {
+        width: toCss(width ?? size) ?? t.width,
+        height: toCss(height ?? size) ?? t.height,
+        borderRadius: square ? 0 : t.radius,
+        background: SKELETON_COLORS.bg,
+        borderColor: bordered ? SKELETON_COLORS.border : void 0,
+        animationDuration: animation === "pulse" || animation === "fade" ? duration : void 0,
+        ...style
+      },
+      children: [
+        "\xA0",
+        animation === "wave" && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute inset-0 animate-skeleton-wave motion-reduce:hidden",
+            style: { background: SKELETON_COLORS.wave, animationDuration: duration }
+          }
+        )
+      ]
+    }
+  );
+});
 var SForm = /* @__PURE__ */ react.forwardRef(function SForm2({ formClassName, onSubmit, onValidationError, children, className, style }, ref) {
   const formRef = react.useRef(null);
   const fieldsRef = react.useRef(/* @__PURE__ */ new Set());
@@ -28436,6 +28597,9 @@ exports.SGuide = SGuide;
 exports.SIcon = SIcon;
 exports.SImage = SImage;
 exports.SInput = SInput;
+exports.SKELETON_ANIMATIONS = SKELETON_ANIMATIONS;
+exports.SKELETON_TYPES = SKELETON_TYPES;
+exports.SKELETON_TYPE_CONFIG = SKELETON_TYPE_CONFIG;
 exports.SKeyValueTable = SKeyValueTable;
 exports.SLAYOUT_MIN_WIDTH = SLAYOUT_MIN_WIDTH;
 exports.SLauncherListBox = SLauncherListBox;
@@ -28470,6 +28634,7 @@ exports.SScrollArea = SScrollArea;
 exports.SSearchInput = SSearchInput;
 exports.SSectionHeaderCard = SSectionHeaderCard2;
 exports.SSelect = SSelect2;
+exports.SSkeleton = SSkeleton;
 exports.SSplitter = SSplitter2;
 exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;