sellmate-design-system-react 9.0.0-beta.90 → 9.0.0-beta.91

package/dist/index.cjs

@@ -4515,6 +4515,8 @@ var SGhostButton = /* @__PURE__ */ react.forwardRef(function SGhostButton2({
   ariaExpanded,
   tooltipText,
   disabled = false,
+  href,
+  target,
   onClick,
   anchorClassName,
   anchorStyle,
@@ -4538,51 +4540,74 @@ var SGhostButton = /* @__PURE__ */ react.forwardRef(function SGhostButton2({
     cancelHide();
     hideTimer.current = setTimeout(() => setOpen(false), TOOLTIP_HIDE_DELAY_MS);
   };
-  const s = SIZE[size];
-  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
   const text = (tooltipText ?? "").trim();
   const hasTooltip = text !== "";
-  const btn2 = /* @__PURE__ */ jsxRuntime.jsxs(
+  const [prevHasTooltip, setPrevHasTooltip] = react.useState(hasTooltip);
+  if (prevHasTooltip !== hasTooltip) {
+    setPrevHasTooltip(hasTooltip);
+    if (!hasTooltip) setOpen(false);
+  }
+  const s = SIZE[size];
+  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const shared = {
+    "aria-disabled": disabled ? "true" : void 0,
+    "aria-label": ariaLabel.trim() || void 0,
+    "tabIndex": disabled ? -1 : void 0,
+    "onClick": (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      onClick?.(e);
+    },
+    "className": cn(
+      "group/ghost-button relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
+      disabled ? "cursor-not-allowed" : "cursor-pointer",
+      "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
+      className
+    ),
+    "style": {
+      width: `var(--cmp-ghostButton-${size}-size)`,
+      height: `var(--cmp-ghostButton-${size}-size)`,
+      borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
+      ...style
+    }
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/ghost-button:opacity-5",
+        style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
+  ] });
+  const btn2 = href != null ? (
+    // 비활성 링크는 주소를 뗀다 — `<a>` 에는 disabled 가 없어서 주소가 남으면 가운데 클릭으로 열린다.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        ref,
+        href: disabled ? void 0 : href,
+        target,
+        rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        role: disabled ? "link" : void 0,
+        ...shared,
+        children: content
+      }
+    )
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       ref,
       type: "button",
       disabled,
-      "aria-disabled": disabled ? "true" : void 0,
-      "aria-label": ariaLabel.trim() || void 0,
       "aria-pressed": ariaPressed,
       "aria-expanded": ariaExpanded,
-      tabIndex: disabled ? -1 : void 0,
-      onClick: (e) => {
-        if (disabled) {
-          e.preventDefault();
-          return;
-        }
-        onClick?.(e);
-      },
-      className: cn(
-        "group/ghost-button relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
-        disabled ? "cursor-not-allowed" : "cursor-pointer",
-        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
-        className
-      ),
-      style: {
-        width: `var(--cmp-ghostButton-${size}-size)`,
-        height: `var(--cmp-ghostButton-${size}-size)`,
-        borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
-        ...style
-      },
-      children: [
-        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/ghost-button:opacity-5",
-            style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
-      ]
+      ...shared,
+      children: content
     }
   );
   if (!hasTooltip) return btn2;
@@ -5310,6 +5335,9 @@ var FIELD_BORDER = 1;
 var TEXTAREA_MIN_HEIGHT = `calc(var(--cmp-chatInput-buttonFrame-height) - ${FIELD_BORDER * 2}px)`;
 var BUTTON_BOTTOM_INSET = `calc((var(--cmp-chatInput-buttonFrame-height) - var(--cmp-ghostButton-md-size)) / 2)`;
 var DEFAULT_MAX_ROWS = 5;
+function BarButton(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { ...props, size: "md", style: { marginBottom: BUTTON_BOTTOM_INSET } });
+}
 var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
   value = "",
   onValueChange,
@@ -5317,7 +5345,13 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
   disabled = false,
   onSend,
   hasAttachments = false,
+  onAttachFiles,
+  attachAccept,
+  attachMultiple = true,
   onAttach,
+  attachDisabled = false,
+  attachTooltip,
+  sendDisabled = false,
   onPasteFiles,
   busy = false,
   onStop,
@@ -5329,11 +5363,23 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
   ...rest
 }, ref) {
   const hasText = value.trim() !== "";
-  const canSend = !disabled && !busy && (hasText || hasAttachments);
-  const send = react.useCallback(() => {
+  const canSend = !disabled && !busy && !sendDisabled && (hasText || hasAttachments);
+  const send = () => {
     if (!canSend) return;
     onSend?.(hasText ? value : "");
-  }, [canSend, hasText, onSend, value]);
+  };
+  const fileInputRef = react.useRef(null);
+  const hasAttachButton = onAttachFiles != null || onAttach != null;
+  const attachLocked = disabled || attachDisabled;
+  const handleAttachClick = () => {
+    if (onAttachFiles != null) fileInputRef.current?.click();
+    else onAttach?.();
+  };
+  const handleFilesPicked = (e) => {
+    const files = Array.from(e.target.files ?? []);
+    e.target.value = "";
+    if (files.length > 0) onAttachFiles?.(files);
+  };
   const handleKeyDown = (e) => {
     rest.onKeyDown?.(e);
     if (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing) return;
@@ -5346,19 +5392,31 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
     const files = Array.from(e.clipboardData.files);
     if (files.length === 0) return;
     e.preventDefault();
+    if (attachDisabled) return;
     onPasteFiles(files);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col bg-(--cmp-chatInput-bg)", className), style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-(--cmp-chatInput-gap) p-(--cmp-chatInput-padding)", children: [
-      onAttach != null && /* @__PURE__ */ jsxRuntime.jsx(
-        SGhostButton,
+      hasAttachButton && /* @__PURE__ */ jsxRuntime.jsx(
+        BarButton,
         {
           icon: "attachFile",
-          size: "md",
           ariaLabel: "\uD30C\uC77C \uCCA8\uBD80",
-          disabled,
-          onClick: onAttach,
-          style: { marginBottom: BUTTON_BOTTOM_INSET }
+          tooltipText: attachTooltip,
+          disabled: attachLocked,
+          onClick: handleAttachClick
+        }
+      ),
+      onAttachFiles != null && /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          className: "hidden",
+          accept: attachAccept,
+          multiple: attachMultiple,
+          disabled: attachLocked,
+          onChange: handleFilesPicked
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -5382,26 +5440,26 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
           onPaste: handlePaste
         }
       ),
-      busy ? /* @__PURE__ */ jsxRuntime.jsx(
-        SGhostButton,
-        {
-          icon: "stop",
-          size: "md",
-          intent: "danger",
-          ariaLabel: "\uC751\uB2F5 \uC911\uC9C0",
-          onClick: onStop,
-          style: { marginBottom: BUTTON_BOTTOM_INSET }
-        }
+      busy ? (
+        // disabled 는 모두 잠근다 — 응답 도중 대화가 끝나면 정지도 할 수 없다
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BarButton,
+          {
+            icon: "stop",
+            intent: "danger",
+            ariaLabel: "\uC751\uB2F5 \uC911\uC9C0",
+            disabled,
+            onClick: onStop
+          }
+        )
       ) : /* @__PURE__ */ jsxRuntime.jsx(
-        SGhostButton,
+        BarButton,
         {
           icon: "send",
-          size: "md",
           intent: "subAction",
           ariaLabel: "\uC804\uC1A1",
           disabled: !canSend,
-          onClick: send,
-          style: { marginBottom: BUTTON_BOTTOM_INSET }
+          onClick: send
         }
       )
     ] }),
@@ -6642,6 +6700,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
     depth = 1,
     leading,
     trailing,
+    headerAction,
     bodyPadding = true,
     bordered = false,
     expanded,
@@ -6681,12 +6740,92 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
     );
     const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, selected: isSelected, disabled }) : leading;
     const hasSupportingText = supportingText != null && supportingText !== "";
+    const hasHeaderAction = headerAction != null && headerAction !== false;
     const id = react.useId();
+    const surfaceClass = cn(
+      isExpanded && "border-b border-(--cmp-listExpansionItem-title-border)",
+      hasChevronInteraction ? "hover:bg-(--sys-color-bg-neutralBright)" : !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
+      // 펼침 배경(파랑)은 bordered 일 때만. 카드처럼 테두리로 경계가 잡힌
+      // 아이템에서만 배경이 선택 상태를 나타낸다.
+      // 테두리 없는 리스트에서는 accentStripe 가 그 역할을 하므로,
+      // 배경까지 깔면 항목 경계가 없는 목록에서 선택 표시가 두 겹이 된다.
+      isExpanded && isSelected && bordered && "bg-(--cmp-listExpansionItem-title-bg-expanded)"
+    );
+    const hoverHandlers = {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
+    };
     react.useEffect(() => {
       if (!isExpanded) return;
       parentDescendantContext?.reportExpandedDescendant(1);
       return () => parentDescendantContext?.reportExpandedDescendant(-1);
     }, [isExpanded, parentDescendantContext]);
+    const toggleButton = /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-expanded": isExpanded,
+        "aria-controls": id,
+        ...hasHeaderAction ? {} : hoverHandlers,
+        onClick: (event) => {
+          if (disabled) return;
+          const next = !isExpanded;
+          if (expanded === void 0) setInternalExpanded(next);
+          onToggle?.(next, event);
+        },
+        className: cn(
+          "group/expansion-item-button flex w-full cursor-pointer items-center justify-between border-0 text-left text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
+          titleTypo,
+          // 헤더 액션이 있으면 면은 바깥 줄이 그린다 — 버튼은 남은 폭만 차지한다
+          hasHeaderAction ? "min-w-0 flex-1" : surfaceClass,
+          // 높이는 세로 패딩과 내용이 정한다 — 제목 줄에 높이를 못 박지 않는다 (SListItem 과 동일)
+          dense ? "py-(--cmp-listExpansionItem-title-paddingY-dense)" : "py-(--cmp-listExpansionItem-title-paddingY-normal)",
+          "gap-(--cmp-listExpansionItem-title-gap)",
+          // 헤더 액션이 있으면 오른쪽 끝 여백은 액션 칸이 갖고, 버튼은 액션과의 간격만 남긴다
+          hasHeaderAction ? "pr-(--cmp-listExpansionItem-title-gap)" : "pr-(--cmp-listExpansionItem-title-paddingX)",
+          depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
+          isExpanded && "text-(--cmp-listExpansionItem-title-text-expanded)"
+        ),
+        children: [
+          !leading && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "flex transition-transform duration-200 ease-out motion-reduce:transition-none",
+                isExpanded && "rotate-180"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: 12, color: "var(--sys-color-fg-quaternary)" })
+            }
+          ),
+          leadingNode,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "min-w-0 flex-1",
+                supportingTextPosition === "bottom" ? "flex flex-col" : "flex items-center gap-[8px] whitespace-nowrap"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title }),
+                hasSupportingText && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "typo-body-sm-default min-w-0 truncate text-(--sys-color-fg-secondary)",
+                      supportingTextPosition === "right" && "flex-1"
+                    ),
+                    children: supportingText
+                  }
+                )
+              ]
+            }
+          ),
+          trailing,
+          showInteractionChevron && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "chevronRight", size: 12, color: interactionChevronColor })
+        ]
+      }
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -6709,79 +6848,13 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
               className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 z-[1] w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              disabled,
-              "aria-expanded": isExpanded,
-              "aria-controls": id,
-              onMouseEnter: () => setHovered(true),
-              onMouseLeave: () => setHovered(false),
-              onClick: (event) => {
-                if (disabled) return;
-                const next = !isExpanded;
-                if (expanded === void 0) setInternalExpanded(next);
-                onToggle?.(next, event);
-              },
-              className: cn(
-                "group/expansion-item-button flex w-full cursor-pointer items-center justify-between border-0 text-left text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
-                titleTypo,
-                isExpanded && "border-b border-(--cmp-listExpansionItem-title-border)",
-                hasChevronInteraction ? "hover:bg-(--sys-color-bg-neutralBright)" : !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
-                // 높이는 세로 패딩과 내용이 정한다 — 제목 줄에 높이를 못 박지 않는다 (SListItem 과 동일)
-                dense ? "py-(--cmp-listExpansionItem-title-paddingY-dense)" : "py-(--cmp-listExpansionItem-title-paddingY-normal)",
-                "gap-(--cmp-listExpansionItem-title-gap)",
-                "pr-(--cmp-listExpansionItem-title-paddingX)",
-                depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
-                isExpanded && cn(
-                  "text-(--cmp-listExpansionItem-title-text-expanded)",
-                  // 펼침 배경(파랑)은 bordered 일 때만. 카드처럼 테두리로 경계가 잡힌
-                  // 아이템에서만 배경이 선택 상태를 나타낸다.
-                  // 테두리 없는 리스트에서는 accentStripe 가 그 역할을 하므로,
-                  // 배경까지 깔면 항목 경계가 없는 목록에서 선택 표시가 두 겹이 된다.
-                  isSelected && bordered && "bg-(--cmp-listExpansionItem-title-bg-expanded)"
-                )
-              ),
-              children: [
-                !leading && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "flex transition-transform duration-200 ease-out motion-reduce:transition-none",
-                      isExpanded && "rotate-180"
-                    ),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: 12, color: "var(--sys-color-fg-quaternary)" })
-                  }
-                ),
-                leadingNode,
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
-                  {
-                    className: cn(
-                      "min-w-0 flex-1",
-                      supportingTextPosition === "bottom" ? "flex flex-col" : "flex items-center gap-[8px] whitespace-nowrap"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title }),
-                      hasSupportingText && /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: cn(
-                            "typo-body-sm-default min-w-0 truncate text-(--sys-color-fg-secondary)",
-                            supportingTextPosition === "right" && "flex-1"
-                          ),
-                          children: supportingText
-                        }
-                      )
-                    ]
-                  }
-                ),
-                trailing,
-                showInteractionChevron && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "chevronRight", size: 12, color: interactionChevronColor })
-              ]
-            }
-          ),
+          hasHeaderAction ? (
+            // 헤더 액션은 여닫는 버튼의 형제다 — 안에 넣으면 버튼이 중첩되고 누를 때마다 여닫힌다
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center", surfaceClass), ...hoverHandlers, children: [
+              toggleButton,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-(--cmp-listExpansionItem-title-gap) pr-(--cmp-listExpansionItem-title-paddingX)", children: headerAction })
+            ] })
+          ) : toggleButton,
           /* @__PURE__ */ jsxRuntime.jsx(SExpansionItemDescendantContext.Provider, { value: descendantContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -14673,12 +14746,25 @@ function monthCells(year, month) {
   return cells;
 }
 var WEEK_LABELS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+var WEEKDAY_SUFFIX_EM = 0.25 + 3 * 1;
+var weekdaySuffixWidth = (fontSize) => Math.ceil(fontSize * WEEKDAY_SUFFIX_EM);
+function withWeekday(value) {
+  const [date = "", ...rest] = value.split(" ");
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(date);
+  if (!match) return value;
+  const day = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3])).getDay();
+  if (Number.isNaN(day)) return value;
+  return [date, `${WEEK_LABELS[day]}\uC694\uC77C`, ...rest].join(" ");
+}
 
 // src/components/SCalendarBoard/calendar-board-layout.ts
 function eventEndDate(event) {
   const end = event.endDate;
   return end != null && end > event.date ? end : event.date;
 }
+function compareDate(a, b) {
+  return a < b ? -1 : a > b ? 1 : 0;
+}
 function layoutCalendarBoard({
   cells,
   events,
@@ -14724,7 +14810,7 @@ function layoutCalendarBoard({
     flush(to);
   });
   runs.sort(
-    (a, b) => a.startIndex - b.startIndex || b.endIndex - b.startIndex - (a.endIndex - a.startIndex) || a.order - b.order
+    (a, b) => a.startIndex - b.startIndex || compareDate(a.event.date, b.event.date) || compareDate(eventEndDate(b.event), eventEndDate(a.event)) || a.order - b.order
   );
   const weekLanes = Array.from({ length: weekCount }, () => []);
   for (const run of runs) {
@@ -17997,7 +18083,8 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ title, to
   );
 });
 var NO_KEYS = /* @__PURE__ */ new Set();
-var ROW_ENTER_MS = 200;
+var EXPAND_MOTION = { duration: 220, easing: "ease-out" };
+var COLLAPSE_MOTION = { duration: 140, easing: "ease-in" };
 function STreeTable({
   rows = [],
   columns = [],
@@ -18044,32 +18131,88 @@ function STreeTable({
     if (expandedKeys === void 0) setInnerExpandedKeys(next);
     onExpandedChange?.(next, row);
   };
-  const visibleRows = react.useMemo(() => {
-    const out = [];
-    const walk = (nodes) => {
-      nodes.forEach((row) => {
-        out.push(row);
-        if (expandedSet.has(keyOf(row))) walk(childrenOf(row));
-      });
-    };
-    walk(rows);
-    return out;
-  }, [rows, expandedSet, rowKey, childrenKey]);
-  const [enteringKeys, setEnteringKeys] = react.useState(NO_KEYS);
+  const visibleRows = react.useMemo(
+    () => flattenRows(rows, (row) => expandedSet.has(keyOf(row)), childrenOf),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rows, expandedSet, rowKey, childrenKey]
+  );
+  const tableRef = react.useRef(null);
+  const [closingKeys, setClosingKeys] = react.useState(NO_KEYS);
+  const [prevExpand, setPrevExpand] = react.useState({ rows, expandedSet });
+  if (prevExpand.rows !== rows || prevExpand.expandedSet !== expandedSet) {
+    setPrevExpand({ rows, expandedSet });
+    let nextClosing = NO_KEYS;
+    if (prevExpand.rows === rows && motionAllowed()) {
+      const collapsed = [...prevExpand.expandedSet].filter((key) => !expandedSet.has(key));
+      const expanded = [...expandedSet].filter((key) => !prevExpand.expandedSet.has(key));
+      if (collapsed.length > 0 && expanded.length === 0) nextClosing = new Set(collapsed);
+    }
+    if (nextClosing !== closingKeys) setClosingKeys(nextClosing);
+  }
+  const renderedRows = react.useMemo(
+    () => closingKeys.size === 0 ? visibleRows : flattenRows(
+      rows,
+      (row) => expandedSet.has(keyOf(row)) || closingKeys.has(keyOf(row)),
+      childrenOf
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [visibleRows, closingKeys]
+  );
+  const visibleKeys = react.useMemo(
+    () => new Set(visibleRows.map(keyOf)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [visibleRows]
+  );
+  const motionRef = react.useRef(null);
   const prevVisibleRef = react.useRef(null);
   useIsomorphicLayoutEffect(() => {
-    const keys = new Set(visibleRows.map(keyOf));
     const prev = prevVisibleRef.current;
-    prevVisibleRef.current = { rows, keys };
-    if (!prev || prev.rows !== rows) return;
-    const added = [...keys].filter((key) => !prev.keys.has(key));
-    if (added.length > 0) setEnteringKeys(new Set(added));
-  }, [visibleRows]);
-  react.useEffect(() => {
-    if (enteringKeys.size === 0) return;
-    const timer = setTimeout(() => setEnteringKeys(NO_KEYS), ROW_ENTER_MS);
-    return () => clearTimeout(timer);
-  }, [enteringKeys]);
+    prevVisibleRef.current = { rows, keys: visibleKeys };
+    const running = motionRef.current;
+    if (running?.done) {
+      running.cancel();
+      motionRef.current = null;
+    }
+    if (!prev || prev.rows !== rows) {
+      motionRef.current?.cancel();
+      motionRef.current = null;
+      return;
+    }
+    const added = new Set([...visibleKeys].filter((key) => !prev.keys.has(key)));
+    const removed = new Set([...prev.keys].filter((key) => !visibleKeys.has(key)));
+    if (added.size === 0 && removed.size === 0) return;
+    let from = added.size > 0 ? 0 : 1;
+    if (motionRef.current) {
+      const current = motionRef.current;
+      const reversing = current.to === 0 && sameKeys(added, current.keys) || current.to === 1 && sameKeys(removed, current.keys);
+      if (reversing) from = current.openness();
+      current.cancel();
+      motionRef.current = null;
+    }
+    const scrollEl = tableRef.current?.getScrollElement();
+    const keys = added.size > 0 ? added : removed;
+    const canAnimate = scrollEl != null && motionAllowed() && (added.size === 0 || removed.size === 0);
+    const motion = canAnimate ? startRowMotion({
+      scrollEl,
+      rowKeys: renderedRows.map(keyOf),
+      blockKeys: keys,
+      from,
+      to: added.size > 0 ? 1 : 0
+    }) : null;
+    if (motion) {
+      motionRef.current = motion;
+      if (motion.to === 0) {
+        void motion.finished.then((completed) => {
+          if (!completed || motionRef.current !== motion) return;
+          motion.done = true;
+          setClosingKeys(NO_KEYS);
+        });
+      }
+    } else if (closingKeys.size > 0) {
+      setClosingKeys(NO_KEYS);
+    }
+  }, [renderedRows]);
+  react.useEffect(() => () => motionRef.current?.cancel(), []);
   const collectSelectable = (row) => canSelectRow(row) ? [row, ...childrenOf(row).flatMap(collectSelectable)] : [];
   const selectionOf = (keys) => {
     const state2 = /* @__PURE__ */ new Map();
@@ -18165,8 +18308,9 @@ function STreeTable({
     STable2,
     {
       ...rest,
+      ref: tableRef,
       columns: tableColumns,
-      rows: visibleRows,
+      rows: renderedRows,
       rowKey,
       resizable,
       selectable,
@@ -18174,14 +18318,113 @@ function STreeTable({
       isRowIndeterminate: selectionState ? (row) => !!selectionState.get(keyOf(row))?.indeterminate : void 0,
       rowClassName: (row) => cn(
         rowClassName?.(row),
-        // 위에서 4px 내려오며 나타난다(theme.css --animate-table-row-in). 모션을 줄인 환경에서는 끈다
-        enteringKeys.has(keyOf(row)) && "motion-safe:animate-table-row-in"
+        // 접히는 중인 행은 이미 접힌 행이다 — 사라지는 동안 눌리지 않게 한다
+        !visibleKeys.has(keyOf(row)) && "pointer-events-none"
       ) || void 0,
       selected: tableSelected,
       onSelectedChange: handleSelectedChange
     }
   );
 }
+function flattenRows(nodes, isOpen, childrenOf) {
+  const out = [];
+  const walk = (list) => {
+    list.forEach((row) => {
+      out.push(row);
+      if (isOpen(row)) walk(childrenOf(row));
+    });
+  };
+  walk(nodes);
+  return out;
+}
+function sameKeys(a, b) {
+  return a.size === b.size && [...a].every((key) => b.has(key));
+}
+function motionAllowed() {
+  if (typeof window === "undefined" || typeof Element.prototype.animate !== "function")
+    return false;
+  return !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function startRowMotion({
+  scrollEl,
+  rowKeys,
+  blockKeys,
+  from,
+  to
+}) {
+  const spec = to === 1 ? EXPAND_MOTION : COLLAPSE_MOTION;
+  const duration = spec.duration * Math.abs(to - from);
+  if (duration < 1) return null;
+  const trs = [...scrollEl.querySelectorAll("tr[data-row-index]")].map((tr) => {
+    const key = rowKeys[Number(tr.dataset.rowIndex)];
+    return {
+      tr,
+      inBlock: key !== void 0 && blockKeys.has(key),
+      height: tr.getBoundingClientRect().height
+    };
+  });
+  const viewBottom = scrollEl.scrollTop + scrollEl.clientHeight;
+  const openAt = (offset) => from + (to - from) * offset;
+  const translate = (shift2, s) => `translateY(${-shift2 * (1 - s)}px)`;
+  const timing = {
+    duration,
+    easing: spec.easing,
+    // 접힘은 남겨 둔 행이 빠질 때까지 끝 위치를 붙잡는다 — 놓으면 그 사이 한 프레임 제자리로 튄다
+    fill: to === 0 ? "forwards" : "none"
+  };
+  const animations = [];
+  let shift = 0;
+  let blockHeight = 0;
+  let y = 0;
+  trs.forEach(({ tr, inBlock, height }, i) => {
+    if (inBlock && !trs[i - 1]?.inBlock) {
+      blockHeight = 0;
+      for (let j = i; j < trs.length && trs[j].inBlock; j++) blockHeight += trs[j].height;
+      shift += blockHeight;
+      y = 0;
+    }
+    if (shift === 0 || tr.offsetTop - shift > viewBottom) return;
+    if (!inBlock) {
+      animations.push(
+        tr.animate(
+          [{ transform: translate(shift, from) }, { transform: translate(shift, to) }],
+          timing
+        )
+      );
+      return;
+    }
+    const rowY = y;
+    const clipAt = (s) => Math.min(height, Math.max(0, blockHeight * (1 - s) - rowY));
+    const bends = [1 - rowY / blockHeight, 1 - (rowY + height) / blockHeight].map((s) => (s - from) / (to - from)).filter((offset) => offset > 0 && offset < 1);
+    const offsets = [0, ...bends, 1].sort((a, b) => a - b);
+    animations.push(
+      tr.animate(
+        offsets.map((offset) => ({
+          offset,
+          transform: translate(shift, openAt(offset)),
+          clipPath: `inset(${clipAt(openAt(offset))}px 0 0 0)`
+        })),
+        timing
+      )
+    );
+    y += height;
+  });
+  if (animations.length === 0) return null;
+  return {
+    keys: blockKeys,
+    to,
+    done: false,
+    finished: Promise.all(animations.map((animation) => animation.finished)).then(
+      () => true,
+      () => false
+    ),
+    openness: () => {
+      const progress = animations[0].effect?.getComputedTiming().progress;
+      return progress == null ? to : openAt(progress);
+    },
+    cancel: () => animations.forEach((animation) => animation.cancel())
+  };
+}
 var OWN_CONTROL_SELECTOR = 'a, button, input, select, textarea, label, [role="button"], [role="checkbox"], [contenteditable="true"]';
 function isOwnControl(target, cell) {
   if (!(target instanceof Element)) return false;
@@ -19436,6 +19679,7 @@ function SDatePicker({
   placeholder,
   selectable,
   disabled = false,
+  showWeekday = false,
   clearable = false,
   width,
   maxWidth,
@@ -19465,6 +19709,7 @@ function SDatePicker({
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const hasValue = value != null && value !== "";
+  const weekday = showWeekday && mode === "date";
   const resolvedPlaceholder = placeholder ?? (mode === "year" ? "YYYY" : mode === "month" ? "YYYY-MM" : "YYYY-MM-DD");
   useFormField({
     name,
@@ -19477,7 +19722,7 @@ function SDatePicker({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const dims = size === "md" ? {
+  const baseDims = size === "md" ? {
     padX: 16,
     gap: 12,
     icon: 20,
@@ -19502,6 +19747,13 @@ function SDatePicker({
     lineHeight: 20,
     radius: 4
   };
+  const weekdayW = weekday ? weekdaySuffixWidth(baseDims.fontSize) : 0;
+  const dims = {
+    ...baseDims,
+    minW: baseDims.minW + weekdayW,
+    fieldMinW: baseDims.fieldMinW + weekdayW,
+    fieldMaxW: weekdayW ? `calc(${fieldWidthValue(baseDims.fieldMaxW)} + ${weekdayW}px)` : baseDims.fieldMaxW
+  };
   const select = (date) => {
     onValueChange?.(date);
     if (rules && rules.length > 0) setRuleError(runRules(date, rules));
@@ -19586,7 +19838,7 @@ function SDatePicker({
                     lineHeight: `${dims.lineHeight}px`,
                     color: disabled ? "var(--cmp-datepicker-text-disabled)" : hasValue ? "var(--cmp-datepicker-text-default)" : "var(--cmp-field-hint-color)"
                   },
-                  children: hasValue ? value : resolvedPlaceholder
+                  children: hasValue ? weekday ? withWeekday(value) : value : resolvedPlaceholder
                 }
               ),
               clearable && hasValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
@@ -19980,6 +20232,7 @@ function SDateRangePicker({
   selectable,
   maxRange,
   showTimePicker = false,
+  showWeekday = false,
   disabled = false,
   clearable = false,
   width,
@@ -20011,8 +20264,10 @@ function SDateRangePicker({
   const [pendingStart, setPendingStart] = react.useState(null);
   const hasValue = value != null && value[0] !== "" && value[1] !== "";
   const hasDisplay = pendingStart != null || hasValue;
-  const startText = pendingStart ?? (hasValue ? value[0] : "");
-  const endText = pendingStart ? "" : hasValue ? value[1] : "";
+  const rawStart = pendingStart ?? (hasValue ? value[0] : "");
+  const rawEnd = pendingStart ? "" : hasValue ? value[1] : "";
+  const startText = showWeekday && rawStart ? withWeekday(rawStart) : rawStart;
+  const endText = showWeekday && rawEnd ? withWeekday(rawEnd) : rawEnd;
   useFormField({
     name,
     validate: () => {
@@ -20024,7 +20279,7 @@ function SDateRangePicker({
   });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
-  const dims = size === "md" ? {
+  const baseDims = size === "md" ? {
     padX: 16,
     gap: 12,
     icon: 20,
@@ -20048,6 +20303,13 @@ function SDateRangePicker({
     lineHeight: 20,
     radius: 4
   };
+  const weekdayW = showWeekday ? weekdaySuffixWidth(baseDims.fontSize) * 2 : 0;
+  const dims = {
+    ...baseDims,
+    minW: baseDims.minW + weekdayW,
+    fieldMinW: baseDims.fieldMinW + weekdayW,
+    fieldMaxW: weekdayW ? `calc(${fieldWidthValue(baseDims.fieldMaxW)} + ${weekdayW}px)` : baseDims.fieldMaxW
+  };
   const select = (r3) => {
     setPendingStart(null);
     onValueChange?.(r3);
@@ -26049,7 +26311,7 @@ var isAtResetTarget = (field, value) => {
 var isInlineField = (field) => isInlineDateField(field) || field.type === "custom";
 var isFixedField = (field) => field.fixed === true || field.required === true;
 var isAddableField = (field) => !isFixedField(field);
-var sameKeys = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
+var sameKeys2 = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
 var isGroupSatisfied = (group, values) => {
   if (!group.rule) return true;
   const keys = group.fields.map((f) => f.key);
@@ -26232,7 +26494,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
       const kept = current.filter((key) => known.has(key));
       const additions = fields.filter((field) => isFixedField(field) && !kept.includes(field.key)).map((field) => field.key);
       const next = [...kept, ...additions];
-      return sameKeys(current, next) ? current : next;
+      return sameKeys2(current, next) ? current : next;
     });
   }, [fields, values]);
   react.useEffect(() => {