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

package/dist/index.js

@@ -4486,6 +4486,8 @@ var SGhostButton = /* @__PURE__ */ forwardRef(function SGhostButton2({
   ariaExpanded,
   tooltipText,
   disabled = false,
+  href,
+  target,
   onClick,
   anchorClassName,
   anchorStyle,
@@ -4509,51 +4511,74 @@ var SGhostButton = /* @__PURE__ */ 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__ */ jsxs(
+  const [prevHasTooltip, setPrevHasTooltip] = 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__ */ jsxs(Fragment, { children: [
+    !disabled && /* @__PURE__ */ 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__ */ jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
+  ] });
+  const btn2 = href != null ? (
+    // 비활성 링크는 주소를 뗀다 — `<a>` 에는 disabled 가 없어서 주소가 남으면 가운데 클릭으로 열린다.
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
-      ]
+      ...shared,
+      children: content
     }
   );
   if (!hasTooltip) return btn2;
@@ -5281,6 +5306,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__ */ jsx(SGhostButton, { ...props, size: "md", style: { marginBottom: BUTTON_BOTTOM_INSET } });
+}
 var SChatInputImpl = /* @__PURE__ */ forwardRef(function SChatInput({
   value = "",
   onValueChange,
@@ -5288,7 +5316,13 @@ var SChatInputImpl = /* @__PURE__ */ forwardRef(function SChatInput({
   disabled = false,
   onSend,
   hasAttachments = false,
+  onAttachFiles,
+  attachAccept,
+  attachMultiple = true,
   onAttach,
+  attachDisabled = false,
+  attachTooltip,
+  sendDisabled = false,
   onPasteFiles,
   busy = false,
   onStop,
@@ -5300,11 +5334,23 @@ var SChatInputImpl = /* @__PURE__ */ forwardRef(function SChatInput({
   ...rest
 }, ref) {
   const hasText = value.trim() !== "";
-  const canSend = !disabled && !busy && (hasText || hasAttachments);
-  const send = useCallback(() => {
+  const canSend = !disabled && !busy && !sendDisabled && (hasText || hasAttachments);
+  const send = () => {
     if (!canSend) return;
     onSend?.(hasText ? value : "");
-  }, [canSend, hasText, onSend, value]);
+  };
+  const fileInputRef = 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;
@@ -5317,19 +5363,31 @@ var SChatInputImpl = /* @__PURE__ */ forwardRef(function SChatInput({
     const files = Array.from(e.clipboardData.files);
     if (files.length === 0) return;
     e.preventDefault();
+    if (attachDisabled) return;
     onPasteFiles(files);
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-(--cmp-chatInput-bg)", className), style, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-(--cmp-chatInput-gap) p-(--cmp-chatInput-padding)", children: [
-      onAttach != null && /* @__PURE__ */ jsx(
-        SGhostButton,
+      hasAttachButton && /* @__PURE__ */ 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__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          className: "hidden",
+          accept: attachAccept,
+          multiple: attachMultiple,
+          disabled: attachLocked,
+          onChange: handleFilesPicked
         }
       ),
       /* @__PURE__ */ jsx(
@@ -5353,26 +5411,26 @@ var SChatInputImpl = /* @__PURE__ */ forwardRef(function SChatInput({
           onPaste: handlePaste
         }
       ),
-      busy ? /* @__PURE__ */ jsx(
-        SGhostButton,
-        {
-          icon: "stop",
-          size: "md",
-          intent: "danger",
-          ariaLabel: "\uC751\uB2F5 \uC911\uC9C0",
-          onClick: onStop,
-          style: { marginBottom: BUTTON_BOTTOM_INSET }
-        }
+      busy ? (
+        // disabled 는 모두 잠근다 — 응답 도중 대화가 끝나면 정지도 할 수 없다
+        /* @__PURE__ */ jsx(
+          BarButton,
+          {
+            icon: "stop",
+            intent: "danger",
+            ariaLabel: "\uC751\uB2F5 \uC911\uC9C0",
+            disabled,
+            onClick: onStop
+          }
+        )
       ) : /* @__PURE__ */ jsx(
-        SGhostButton,
+        BarButton,
         {
           icon: "send",
-          size: "md",
           intent: "subAction",
           ariaLabel: "\uC804\uC1A1",
           disabled: !canSend,
-          onClick: send,
-          style: { marginBottom: BUTTON_BOTTOM_INSET }
+          onClick: send
         }
       )
     ] }),
@@ -6613,6 +6671,7 @@ var SExpansionItem = /* @__PURE__ */ forwardRef(
     depth = 1,
     leading,
     trailing,
+    headerAction,
     bodyPadding = true,
     bordered = false,
     expanded,
@@ -6652,12 +6711,92 @@ var SExpansionItem = /* @__PURE__ */ 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 = 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)
+    };
     useEffect(() => {
       if (!isExpanded) return;
       parentDescendantContext?.reportExpandedDescendant(1);
       return () => parentDescendantContext?.reportExpandedDescendant(-1);
     }, [isExpanded, parentDescendantContext]);
+    const toggleButton = /* @__PURE__ */ 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__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex transition-transform duration-200 ease-out motion-reduce:transition-none",
+                isExpanded && "rotate-180"
+              ),
+              children: /* @__PURE__ */ jsx(SIcon, { name: "caretDown", size: 12, color: "var(--sys-color-fg-quaternary)" })
+            }
+          ),
+          leadingNode,
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "min-w-0 flex-1",
+                supportingTextPosition === "bottom" ? "flex flex-col" : "flex items-center gap-[8px] whitespace-nowrap"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: title }),
+                hasSupportingText && /* @__PURE__ */ 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__ */ jsx(SIcon, { name: "chevronRight", size: 12, color: interactionChevronColor })
+        ]
+      }
+    );
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -6680,79 +6819,13 @@ var SExpansionItem = /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "flex transition-transform duration-200 ease-out motion-reduce:transition-none",
-                      isExpanded && "rotate-180"
-                    ),
-                    children: /* @__PURE__ */ jsx(SIcon, { name: "caretDown", size: 12, color: "var(--sys-color-fg-quaternary)" })
-                  }
-                ),
-                leadingNode,
-                /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    className: cn(
-                      "min-w-0 flex-1",
-                      supportingTextPosition === "bottom" ? "flex flex-col" : "flex items-center gap-[8px] whitespace-nowrap"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: title }),
-                      hasSupportingText && /* @__PURE__ */ 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__ */ jsx(SIcon, { name: "chevronRight", size: 12, color: interactionChevronColor })
-              ]
-            }
-          ),
+          hasHeaderAction ? (
+            // 헤더 액션은 여닫는 버튼의 형제다 — 안에 넣으면 버튼이 중첩되고 누를 때마다 여닫힌다
+            /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", surfaceClass), ...hoverHandlers, children: [
+              toggleButton,
+              /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-(--cmp-listExpansionItem-title-gap) pr-(--cmp-listExpansionItem-title-paddingX)", children: headerAction })
+            ] })
+          ) : toggleButton,
           /* @__PURE__ */ jsx(SExpansionItemDescendantContext.Provider, { value: descendantContextValue, children: /* @__PURE__ */ jsx(
             "div",
             {
@@ -13321,9 +13394,20 @@ var SystemButton = /* @__PURE__ */ forwardRef(function SystemButton2({
           }
         ),
         label && /* @__PURE__ */ jsx("span", { className: "typo-body-sm-semibold min-w-0 truncate", children: label }),
-        count != null && count > 0 && // 개수 오른쪽은 버튼 여백(alertButton.paddingX)만으로는 좁다 — 시안이 4px 을 더 준다.
+        count != null && count > 0 && // 개수는 채운 배지로 단다 — 배경·글자색·치수는 xs deep 태그 토큰이 쥔다(시안).
+        // 배지 색은 고정이다: 흰 면은 파랑, 어두운 면(dark·darker)은 노랑 바탕에 검은 글자.
+        // 배지 오른쪽은 버튼 여백(alertButton.paddingX)만으로는 좁다 — 시안이 4px 을 더 준다.
         // 대응 토큰이 없어 디자인 값을 그대로 쓴다.
-        /* @__PURE__ */ jsx("span", { className: "typo-body-md-bold me-[4px] shrink-0", style: { color: accentColor }, children: count.toLocaleString() })
+        /* @__PURE__ */ jsx(
+          STag,
+          {
+            size: "xs",
+            deep: true,
+            color: color === "light" ? "blue" : "yellow",
+            label: count.toLocaleString(),
+            className: "me-[4px] shrink-0"
+          }
+        )
       ]
     }
   );
@@ -14202,7 +14286,7 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
     items.findIndex((item4, index) => getItemValue(item4, index) === value)
   );
   const lastCompletedIndex = items.reduce(
-    (lastIndex, item4, index) => item4.completed === true ? index : lastIndex,
+    (lastIndex2, item4, index) => item4.completed === true ? index : lastIndex2,
     -1
   );
   const resolvedClickableIndex = lastCompletedIndex + 1;
@@ -14644,12 +14728,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,
@@ -14695,7 +14792,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) {
@@ -17968,7 +18065,8 @@ var STableBar = /* @__PURE__ */ forwardRef(function STableBar2({ title, total, s
   );
 });
 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 = [],
@@ -18015,32 +18113,88 @@ function STreeTable({
     if (expandedKeys === void 0) setInnerExpandedKeys(next);
     onExpandedChange?.(next, row);
   };
-  const visibleRows = 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] = useState(NO_KEYS);
+  const visibleRows = useMemo(
+    () => flattenRows(rows, (row) => expandedSet.has(keyOf(row)), childrenOf),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rows, expandedSet, rowKey, childrenKey]
+  );
+  const tableRef = useRef(null);
+  const [closingKeys, setClosingKeys] = useState(NO_KEYS);
+  const [prevExpand, setPrevExpand] = 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 = 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 = useMemo(
+    () => new Set(visibleRows.map(keyOf)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [visibleRows]
+  );
+  const motionRef = useRef(null);
   const prevVisibleRef = 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]);
-  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]);
+  useEffect(() => () => motionRef.current?.cancel(), []);
   const collectSelectable = (row) => canSelectRow(row) ? [row, ...childrenOf(row).flatMap(collectSelectable)] : [];
   const selectionOf = (keys) => {
     const state2 = /* @__PURE__ */ new Map();
@@ -18136,8 +18290,9 @@ function STreeTable({
     STable2,
     {
       ...rest,
+      ref: tableRef,
       columns: tableColumns,
-      rows: visibleRows,
+      rows: renderedRows,
       rowKey,
       resizable,
       selectable,
@@ -18145,14 +18300,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;
@@ -19131,13 +19385,21 @@ function SCalendar({
     }
   );
 }
+
+// src/lib/mode-listbox.ts
+var MODE_LIST_HEIGHT = 240;
+var MODE_ITEM_HEIGHT = 28;
+var modeListItemClass = (selected, disabled) => cn(
+  "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
+  disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
+  !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
+  !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
+);
 var MODE_NOUN = {
   date: "\uB0A0\uC9DC",
   month: "\uC6D4",
   year: "\uC5F0\uB3C4"
 };
-var DATEPICKER_MODE_LIST_HEIGHT = 240;
-var DATEPICKER_MODE_ITEM_HEIGHT = 28;
 var YEAR_LIST_EDGE_BUFFER = 24;
 var YEAR_LIST_EXPAND_SIZE = 80;
 var MONTHS = Array.from({ length: 12 }, (_, i) => i + 1);
@@ -19188,7 +19450,7 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
     if (!list) return;
     const index = anchorYearRef.current - rangeStartRef.current;
     syncingScrollRef.current = true;
-    list.scrollTop = index * DATEPICKER_MODE_ITEM_HEIGHT;
+    list.scrollTop = index * MODE_ITEM_HEIGHT;
     requestAnimationFrame(() => {
       syncingScrollRef.current = false;
     });
@@ -19197,7 +19459,7 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
     const list = listRef.current;
     if (!list) return;
     if (syncingScrollRef.current) return;
-    if (list.scrollTop < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+    if (list.scrollTop < MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
       const previousHeight = list.scrollHeight;
       setRange((current) => ({
         start: current.start - YEAR_LIST_EXPAND_SIZE,
@@ -19213,7 +19475,7 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
       });
       return;
     }
-    if (list.scrollHeight - list.scrollTop - list.clientHeight < DATEPICKER_MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
+    if (list.scrollHeight - list.scrollTop - list.clientHeight < MODE_ITEM_HEIGHT * YEAR_LIST_EDGE_BUFFER) {
       setRange((current) => ({
         start: current.start,
         end: current.end + YEAR_LIST_EXPAND_SIZE
@@ -19228,8 +19490,8 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
       "aria-label": "year",
       className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
       style: {
-        paddingTop: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`,
-        paddingBottom: `calc((${DATEPICKER_MODE_LIST_HEIGHT}px - ${DATEPICKER_MODE_ITEM_HEIGHT}px) / 2)`
+        paddingTop: `calc((${MODE_LIST_HEIGHT}px - ${MODE_ITEM_HEIGHT}px) / 2)`,
+        paddingBottom: `calc((${MODE_LIST_HEIGHT}px - ${MODE_ITEM_HEIGHT}px) / 2)`
       },
       onScroll: handleScroll,
       children: years.map((year) => {
@@ -19242,12 +19504,7 @@ function YearWheel({ value, anchorYear, selectable, onCommit }) {
             role: "option",
             "aria-selected": selected,
             disabled,
-            className: cn(
-              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
-              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
-              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
-              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
-            ),
+            className: modeListItemClass(selected, disabled),
             onClick: () => !disabled && onCommit(year),
             children: year
           },
@@ -19303,7 +19560,7 @@ function MonthWheel({ year, value, selectable, onCommit }) {
     if (!list) return;
     list.scrollTop = Math.max(
       0,
-      (initialValueRef.current - 1) * DATEPICKER_MODE_ITEM_HEIGHT - (list.clientHeight - DATEPICKER_MODE_ITEM_HEIGHT) / 2
+      (initialValueRef.current - 1) * MODE_ITEM_HEIGHT - (list.clientHeight - MODE_ITEM_HEIGHT) / 2
     );
   }, []);
   return /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsx(
@@ -19323,12 +19580,7 @@ function MonthWheel({ year, value, selectable, onCommit }) {
             role: "option",
             "aria-selected": selected,
             disabled,
-            className: cn(
-              "flex w-full items-center justify-center gap-[var(--cmp-datepicker-mode-item-gap)] border-0 px-[var(--cmp-datepicker-mode-item-paddingX)] py-[var(--cmp-datepicker-mode-item-paddingY)] text-center font-base text-12 leading-[20px]",
-              disabled && "cursor-not-allowed bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-disabled)]",
-              !disabled && !selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-medium text-[color:var(--cmp-datepicker-mode-item-content-default)] hover:bg-[var(--cmp-datepicker-mode-item-bg-hover)] hover:text-[color:var(--cmp-datepicker-mode-item-content-hover)]",
-              !disabled && selected && "cursor-pointer bg-[var(--cmp-datepicker-mode-item-bg-default)] font-bold text-[color:var(--cmp-datepicker-mode-item-content-selected)]"
-            ),
+            className: modeListItemClass(selected, disabled),
             onClick: () => !disabled && onCommit(month),
             children: [
               month,
@@ -19407,6 +19659,7 @@ function SDatePicker({
   placeholder,
   selectable,
   disabled = false,
+  showWeekday = false,
   clearable = false,
   width,
   maxWidth,
@@ -19436,6 +19689,7 @@ function SDatePicker({
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = 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,
@@ -19448,7 +19702,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,
@@ -19473,6 +19727,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));
@@ -19557,7 +19818,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__ */ jsx(
@@ -19951,6 +20212,7 @@ function SDateRangePicker({
   selectable,
   maxRange,
   showTimePicker = false,
+  showWeekday = false,
   disabled = false,
   clearable = false,
   width,
@@ -19982,8 +20244,10 @@ function SDateRangePicker({
   const [pendingStart, setPendingStart] = 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: () => {
@@ -19995,7 +20259,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,
@@ -20019,6 +20283,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);
@@ -26020,7 +26291,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);
@@ -26203,7 +26474,7 @@ var SChipFilter = /* @__PURE__ */ 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]);
   useEffect(() => {
@@ -28396,212 +28667,171 @@ function formatTimeDisplay(value, type) {
   const displayHour = hour % 12 === 0 ? 12 : hour % 12;
   return `${meridiem} ${padTimePart(displayHour)}:${padTimePart(minute)}`;
 }
-var TIME_SELECTOR_WIDTH = 136;
-var MERIDIEM_TIME_SELECTOR_WIDTH = 154;
-function TimeSelector({
+function scrollSelectedIntoView(list, index, center) {
+  const top = index * MODE_ITEM_HEIGHT;
+  if (center) {
+    list.scrollTop = Math.max(0, top - (list.clientHeight - MODE_ITEM_HEIGHT) / 2);
+    return;
+  }
+  if (top < list.scrollTop) list.scrollTop = top;
+  else if (top + MODE_ITEM_HEIGHT > list.scrollTop + list.clientHeight)
+    list.scrollTop = top + MODE_ITEM_HEIGHT - list.clientHeight;
+}
+function lastIndex(arr, pred) {
+  for (let i = arr.length - 1; i >= 0; i--) if (pred(arr[i], i)) return i;
+  return -1;
+}
+function ListColumn({ ariaLabel, items }) {
+  const listRef = useRef(null);
+  const mountedRef = useRef(false);
+  const selectedIndex = items.findIndex((item4) => item4.selected);
+  const tabIndexTarget = selectedIndex >= 0 ? selectedIndex : items.findIndex((item4) => !item4.disabled);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list || selectedIndex < 0) return;
+    scrollSelectedIntoView(list, selectedIndex, !mountedRef.current);
+    mountedRef.current = true;
+  }, [selectedIndex]);
+  const onKeyDown = (event) => {
+    const buttons = [...listRef.current?.querySelectorAll("button") ?? []];
+    const current = buttons.indexOf(document.activeElement);
+    if (current < 0) return;
+    const enabled = (item4, i) => !item4.disabled && i !== current;
+    let next;
+    if (event.key === "ArrowDown") next = items.findIndex((it, i) => i > current && enabled(it, i));
+    else if (event.key === "ArrowUp")
+      next = lastIndex(items, (it, i) => i < current && enabled(it, i));
+    else if (event.key === "Home") next = items.findIndex((it) => !it.disabled);
+    else if (event.key === "End") next = lastIndex(items, (it) => !it.disabled);
+    else return;
+    event.preventDefault();
+    if (next < 0) return;
+    buttons[next]?.focus({ preventScroll: true });
+    if (listRef.current) scrollSelectedIntoView(listRef.current, next, false);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-[var(--cmp-datepicker-mode-yearMonth-column-width)] min-w-0 overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": ariaLabel,
+      tabIndex: -1,
+      className: "h-full overflow-y-auto overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      onKeyDown,
+      children: items.map((item4, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": item4.selected,
+          disabled: item4.disabled,
+          tabIndex: index === tabIndexTarget ? 0 : -1,
+          className: cn(modeListItemClass(item4.selected, item4.disabled), "outline-offset-[-2px]"),
+          onClick: () => !item4.disabled && item4.onSelect(),
+          children: item4.label
+        },
+        item4.key
+      ))
+    }
+  ) });
+}
+var HOURS_24 = Array.from({ length: 24 }, (_, i) => i);
+var HOURS_12 = [12, ...Array.from({ length: 11 }, (_, i) => i + 1)];
+function TimeListbox({
   value,
   showMeridiem,
   minuteStep,
-  onChange
+  isDisabled,
+  onChange,
+  labelPrefix,
+  elevated = true
 }) {
-  const parsed = useMemo(() => parseTimeValue(value), [value]);
-  const [hour, setHour] = useState(parsed.hour);
-  const [minute, setMinute] = useState(parsed.minute);
-  const [editingPart, setEditingPart] = useState(null);
-  const [inputDraft, setInputDraft] = useState({});
+  const toState = (v) => v ? parseTimeValue(v) : null;
+  const [time, setTime] = useState(() => toState(value));
   useEffect(() => {
-    setHour(parsed.hour);
-    setMinute(parsed.minute);
-  }, [parsed.hour, parsed.minute]);
-  const meridiem = hour >= 12 ? "PM" : "AM";
-  const displayHour = showMeridiem ? hour % 12 === 0 ? 12 : hour % 12 : hour;
-  const commit = (nextHour, nextMinute) => {
-    const h = clampTimePart(nextHour, 0, 23);
-    const m = clampTimePart(nextMinute, 0, 59);
-    setHour(h);
-    setMinute(m);
-    onChange(formatTimeValue(h, m));
-  };
-  const setMeridiem = (next) => {
-    if (next === meridiem) return;
-    commit(next === "AM" ? hour - 12 : hour + 12, minute);
-  };
-  const changeMinute = (delta) => {
-    const next = minute + delta;
-    if (next > 59) {
-      commit((hour + 1) % 24, next - 60);
-      return;
-    }
-    if (next < 0) {
-      commit((hour + 23) % 24, next + 60);
-      return;
-    }
-    commit(hour, next);
-  };
-  const changeHour = (delta) => commit((hour + delta + 24) % 24, minute);
-  const sanitizeInput = (next) => next.replace(/\D/g, "").slice(0, 2);
-  const beginEdit = (part, currentValue) => {
-    setEditingPart(part);
-    setInputDraft((prev) => ({ ...prev, [part]: String(currentValue).padStart(2, "0") }));
-  };
-  const commitHourDraft = (draft) => {
-    const clamped = clampTimePart(Number(draft), showMeridiem ? 1 : 0, showMeridiem ? 12 : 23);
-    const nextHour = showMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
-    commit(nextHour, minute);
-    return clamped;
-  };
-  const commitMinuteDraft = (draft) => {
-    const clamped = clampTimePart(Number(draft), 0, 59);
-    commit(hour, clamped);
-    return clamped;
-  };
-  const endEdit = (part) => {
-    const draft = inputDraft[part];
-    if (part === "hour" && draft != null && draft !== "") {
-      commitHourDraft(draft);
-    }
-    if (part === "minute" && draft != null && draft !== "") {
-      commitMinuteDraft(draft);
-    }
-    setEditingPart(null);
-    setInputDraft({});
-  };
-  const inputStyle = {
-    width: "var(--cmp-timepicker-selector-time-input-width)",
-    height: "var(--cmp-textinput-sm-height)",
-    borderRadius: "var(--cmp-textinput-sm-radius)",
-    border: "var(--cmp-textinput-borderWidth) solid var(--cmp-textinput-border-default)",
-    color: "var(--cmp-textinput-text-default)",
-    fontSize: 12,
-    lineHeight: "20px"
+    setTime(toState(value));
+  }, [value]);
+  const step = Math.max(1, Math.floor(minuteStep));
+  const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step);
+  const blocked = (h, m) => isDisabled?.(h * 60 + m) ?? false;
+  const hourBlocked = (h) => minutes.every((m) => blocked(h, m));
+  const commit = (hours, preferred, part) => {
+    let next = blocked(preferred.hour, preferred.minute) ? null : preferred;
+    for (const h of hours) {
+      if (next) break;
+      const m = minutes.find((mm) => !blocked(h, mm));
+      if (m !== void 0) next = { hour: h, minute: m };
+    }
+    if (!next) return;
+    setTime(next);
+    onChange(formatTimeValue(next.hour, next.minute), part);
   };
-  const renderColumn = (type) => {
-    const isHour = type === "hour";
-    const val = isHour ? displayHour : minute;
-    const displayValue2 = editingPart === type ? inputDraft[type] ?? "" : String(val).padStart(2, "0");
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex flex-col items-center justify-center",
-        style: { gap: "var(--cmp-timepicker-selector-time-column-gap)" },
-        children: [
-          /* @__PURE__ */ jsx(
-            SGhostButton,
-            {
-              icon: "chevronUp",
-              size: "xs",
-              ariaLabel: `${isHour ? "\uC2DC" : "\uBD84"} \uC99D\uAC00`,
-              onClick: () => isHour ? changeHour(1) : changeMinute(minuteStep)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              "aria-label": isHour ? "\uC2DC" : "\uBD84",
-              inputMode: "numeric",
-              value: displayValue2,
-              placeholder: "-",
-              onFocus: () => beginEdit(type, val),
-              onBlur: () => endEdit(type),
-              onChange: (event) => {
-                const draft = sanitizeInput(event.target.value);
-                setInputDraft((prev) => ({ ...prev, [type]: draft }));
-                if (draft === "") return;
-                const raw = Number(draft);
-                if (isHour) {
-                  if (draft.length < 2) return;
-                  const clamped2 = commitHourDraft(draft);
-                  const displayDraft2 = raw === clamped2 ? draft : String(clamped2);
-                  setInputDraft((prev) => ({ ...prev, [type]: displayDraft2 }));
-                  return;
-                }
-                if (draft.length < 2) return;
-                const clamped = commitMinuteDraft(draft);
-                const displayDraft = raw === clamped ? draft : String(clamped);
-                setInputDraft((prev) => ({ ...prev, [type]: displayDraft }));
-              },
-              className: "box-border bg-white text-center outline-none",
-              style: inputStyle
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            SGhostButton,
-            {
-              icon: "chevronDown",
-              size: "xs",
-              ariaLabel: `${isHour ? "\uC2DC" : "\uBD84"} \uAC10\uC18C`,
-              onClick: () => isHour ? changeHour(-1) : changeMinute(-minuteStep)
-            }
-          )
-        ]
+  const hour = time?.hour;
+  const minute = time?.minute ?? 0;
+  const meridiem = hour === void 0 ? void 0 : hour >= 12 ? "PM" : "AM";
+  const prefix = labelPrefix ? `${labelPrefix} ` : "";
+  const meridiemItems = ["AM", "PM"].map((item4) => {
+    const base = item4 === "AM" ? 0 : 12;
+    const range = HOURS_24.slice(base, base + 12);
+    return {
+      key: item4,
+      label: item4 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4",
+      selected: meridiem === item4,
+      disabled: range.every(hourBlocked),
+      onSelect: () => {
+        if (meridiem === item4) return;
+        const h = hour === void 0 ? base : hour % 12 + base;
+        commit(range, { hour: h, minute }, "meridiem");
       }
-    );
-  };
+    };
+  });
+  const hourItems = showMeridiem ? HOURS_12.map((display) => {
+    const h = display % 12 + (meridiem === "PM" ? 12 : 0);
+    return {
+      key: String(display),
+      label: `${padTimePart(display)}\uC2DC`,
+      selected: hour === h,
+      disabled: hourBlocked(h),
+      onSelect: () => commit([h], { hour: h, minute }, "hour")
+    };
+  }) : HOURS_24.map((h) => ({
+    key: String(h),
+    label: `${padTimePart(h)}\uC2DC`,
+    selected: hour === h,
+    disabled: hourBlocked(h),
+    onSelect: () => commit([h], { hour: h, minute }, "hour")
+  }));
+  const minuteHour = hour ?? (meridiem === "PM" ? 12 : 0);
+  const minuteItems = minutes.map((m) => ({
+    key: String(m),
+    label: `${padTimePart(m)}\uBD84`,
+    selected: time != null && minute === m,
+    disabled: blocked(minuteHour, m),
+    onSelect: () => commit([minuteHour], { hour: minuteHour, minute: m }, "minute")
+  }));
+  const divider = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "w-[var(--border-width-1)] self-stretch bg-[var(--sys-color-divider-default)]"
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "flex flex-col items-stretch justify-center overflow-hidden",
-      style: {
-        background: "var(--cmp-timepicker-selector-bg)",
-        borderRadius: "var(--cmp-timepicker-selector-radius)",
-        boxShadow: "4px 8px 16px -4px rgba(34,34,34,0.1), 0 0 24px -6px rgba(34,34,34,0.12)"
-      },
+      className: cn(
+        "inline-flex gap-[var(--cmp-datepicker-mode-yearMonth-gap)] overflow-hidden bg-[var(--cmp-datepicker-mode-bg)]",
+        elevated && "rounded-[var(--cmp-datepicker-mode-radius)] shadow-normal-sm"
+      ),
+      style: { height: MODE_LIST_HEIGHT },
       children: [
-        showMeridiem && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex items-center justify-center",
-            style: {
-              padding: "var(--cmp-timepicker-selector-section-paddingY) var(--cmp-timepicker-selector-section-paddingX)"
-            },
-            children: /* @__PURE__ */ jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item4, index) => {
-              const selected = item4 === meridiem;
-              return /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setMeridiem(item4),
-                  className: cn(
-                    "box-border h-[var(--cmp-textinput-sm-height)] w-[61px] cursor-pointer border border-solid bg-white text-center text-[12px] font-medium leading-[20px]",
-                    index === 0 ? "rounded-l-[var(--cmp-select-sm-radius)]" : "rounded-r-[var(--cmp-select-sm-radius)]",
-                    index === 0 ? "-mr-px" : "",
-                    selected ? "z-[1] border-[var(--cmp-timepicker-border-focus)] text-[var(--cmp-timepicker-border-focus)]" : "border-[var(--cmp-timepicker-border-default)] text-[var(--cmp-field-hint-color)]"
-                  ),
-                  children: item4 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
-                },
-                item4
-              );
-            }) })
-          }
-        ),
-        showMeridiem && /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-[var(--sys-color-divider-default)]" }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex items-center justify-center",
-            style: {
-              gap: "var(--cmp-timepicker-selector-time-gap)",
-              padding: "var(--cmp-timepicker-selector-section-paddingY) var(--cmp-timepicker-selector-section-paddingX)"
-            },
-            children: [
-              renderColumn("hour"),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "text-center",
-                  style: {
-                    width: "var(--cmp-timepicker-selector-colon-size)",
-                    color: "var(--cmp-field-hint-color)",
-                    fontSize: "var(--cmp-timepicker-selector-colon-size)",
-                    lineHeight: "var(--cmp-timepicker-selector-colon-size)"
-                  },
-                  children: ":"
-                }
-              ),
-              renderColumn("minute")
-            ]
-          }
-        )
+        showMeridiem && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ListColumn, { ariaLabel: `${prefix}\uC624\uC804/\uC624\uD6C4`, items: meridiemItems }),
+          divider
+        ] }),
+        /* @__PURE__ */ jsx(ListColumn, { ariaLabel: `${prefix}\uC2DC`, items: hourItems }),
+        divider,
+        /* @__PURE__ */ jsx(ListColumn, { ariaLabel: `${prefix}\uBD84`, items: minuteItems })
       ]
     }
   );
@@ -28639,11 +28869,9 @@ function STimePicker({
   style
 }) {
   const portalContainer = usePortalContainer();
-  const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
   const triggerId = useFieldControlId();
   const triggerTextId = `${triggerId}-text`;
-  const [popoverAlignOffset, setPopoverAlignOffset] = useState(0);
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
@@ -28664,11 +28892,6 @@ function STimePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const commitOpen = (next) => {
     if (disabled) return;
-    if (next) {
-      const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
-      const selectorWidth = effectiveShowMeridiem ? MERIDIEM_TIME_SELECTOR_WIDTH : TIME_SELECTOR_WIDTH;
-      setPopoverAlignOffset(Math.max(0, (triggerWidth - selectorWidth) / 2));
-    }
     setOpen(next);
     onOpenChange?.(next);
     if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
@@ -28707,7 +28930,6 @@ function STimePicker({
         /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: triggerRef,
             id: triggerId,
             role: "button",
             "aria-disabled": disabled,
@@ -28771,20 +28993,22 @@ function STimePicker({
           RPopover13.Content,
           {
             side: "bottom",
-            align: "start",
+            align: "center",
             sideOffset: 4,
-            alignOffset: popoverAlignOffset,
             className: cn(
               "z-50 max-w-[var(--radix-popover-content-available-width)]",
               FLOATING_SLIDE_ANIM
             ),
             children: /* @__PURE__ */ jsx(
-              TimeSelector,
+              TimeListbox,
               {
                 value: normalized,
                 showMeridiem: effectiveShowMeridiem,
                 minuteStep,
-                onChange: commitValue
+                onChange: (time, part) => {
+                  commitValue(time);
+                  if (part === "minute") commitOpen(false);
+                }
               }
             )
           }
@@ -28814,7 +29038,6 @@ function formatTimeRangeDisplay(value, type) {
   if (value == null || value[0] === "" || value[1] === "") return "";
   return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
 }
-var TIME_RANGE_SELECTOR_WIDTH = 345;
 var MIDDAY_FIELD_MIN_WIDTH = {
   sm: 178,
   md: 216
@@ -28823,6 +29046,10 @@ var MIDDAY_FIELD_MAX_WIDTH = {
   sm: "lg",
   md: "lg"
 };
+var toMinutes = (time) => {
+  const { hour, minute } = parseTimeValue(time);
+  return hour * 60 + minute;
+};
 function RangeTimeSelector({
   value,
   showMeridiem,
@@ -28830,233 +29057,32 @@ function RangeTimeSelector({
   rangeOrder,
   onChange
 }) {
-  const range = useMemo(() => value ?? ["00:00", "23:59"], [value]);
-  const [editingKey, setEditingKey] = useState(null);
-  const [inputDraft, setInputDraft] = useState({});
-  const autoAdjustedRef = useRef(null);
-  const getParts = (side) => parseTimeValue(side === "start" ? range[0] : range[1]);
-  const getMeridiem = (side) => getParts(side).hour >= 12 ? "PM" : "AM";
-  const getDisplayHour = (side) => {
-    const { hour } = getParts(side);
-    if (!showMeridiem) return hour;
-    const displayHour = hour % 12;
-    return displayHour === 0 ? 12 : displayHour;
-  };
-  const commit = (side, hour, minute, direction = "unknown") => {
-    const next = formatTimeValue(hour, minute);
-    onChange(
-      normalizeNextRange(side === "start" ? [next, range[1]] : [range[0], next], side, direction)
-    );
-  };
-  const getTimeMinutes2 = (time) => {
-    const { hour, minute } = parseTimeValue(time);
-    return hour * 60 + minute;
-  };
-  const normalizeNextRange = (nextRange, changedSide, direction) => {
-    if (rangeOrder === "allow-cross-day") return nextRange;
-    const [start, end] = nextRange;
-    const [currentStart, currentEnd] = range;
-    if (getTimeMinutes2(start) <= getTimeMinutes2(end)) {
-      const shouldKeepSynced = autoAdjustedRef.current?.side === changedSide && currentStart === currentEnd && start !== end && (direction === "unknown" || autoAdjustedRef.current.direction === direction);
-      if (shouldKeepSynced) {
-        return changedSide === "start" ? [start, start] : [end, end];
-      }
-      autoAdjustedRef.current = null;
-      return nextRange;
-    }
-    autoAdjustedRef.current = {
-      side: changedSide,
-      direction: changedSide === "start" ? "increase" : "decrease"
-    };
-    return changedSide === "start" ? [start, start] : [end, end];
-  };
-  const changeHour = (side, delta) => {
-    const { hour, minute } = getParts(side);
-    commit(side, (hour + delta + 24) % 24, minute, delta > 0 ? "increase" : "decrease");
-  };
-  const changeMinute = (side, delta) => {
-    const { hour, minute } = getParts(side);
-    const next = minute + delta;
-    if (next > 59) {
-      commit(side, (hour + 1) % 24, next - 60, delta > 0 ? "increase" : "decrease");
-      return;
-    }
-    if (next < 0) {
-      commit(side, (hour + 23) % 24, next + 60, delta > 0 ? "increase" : "decrease");
+  const range = value ?? ["00:00", "23:59"];
+  const strict = rangeOrder !== "allow-cross-day";
+  const change = (side, time) => {
+    if (side === "end") {
+      onChange([range[0], time]);
       return;
     }
-    commit(side, hour, next, delta > 0 ? "increase" : "decrease");
-  };
-  const setMeridiem = (side, next) => {
-    const current = getMeridiem(side);
-    if (current === next) return;
-    const { hour, minute } = getParts(side);
-    commit(side, next === "AM" ? hour - 12 : hour + 12, minute);
-  };
-  const getEditingKey = (side, part) => `${side}-${part}`;
-  const sanitizeInput = (next) => next.replace(/\D/g, "").slice(0, 2);
-  const beginEdit = (side, part, currentValue) => {
-    const key = getEditingKey(side, part);
-    setEditingKey(key);
-    setInputDraft((prev) => ({ ...prev, [key]: String(currentValue).padStart(2, "0") }));
-  };
-  const commitHourDraft = (side, draft) => {
-    const clamped = clampTimePart(Number(draft), showMeridiem ? 1 : 0, showMeridiem ? 12 : 23);
-    const parts = getParts(side);
-    const meridiem = getMeridiem(side);
-    const nextHour = showMeridiem ? meridiem === "PM" ? clamped === 12 ? 12 : clamped + 12 : clamped === 12 ? 0 : clamped : clamped;
-    commit(side, nextHour, parts.minute);
-    return clamped;
-  };
-  const commitMinuteDraft = (side, draft) => {
-    const { hour } = getParts(side);
-    const clamped = clampTimePart(Number(draft), 0, 59);
-    commit(side, hour, clamped);
-    return clamped;
-  };
-  const endEdit = (side, part) => {
-    const key = getEditingKey(side, part);
-    const draft = inputDraft[key];
-    if (part === "hour" && draft != null && draft !== "") {
-      commitHourDraft(side, draft);
-    }
-    if (part === "minute" && draft != null && draft !== "") {
-      commitMinuteDraft(side, draft);
-    }
-    setEditingKey(null);
-    setInputDraft({});
-  };
-  const inputStyle = {
-    width: "var(--cmp-timepicker-selector-time-input-width)",
-    height: "var(--cmp-textinput-sm-height)",
-    borderRadius: "var(--cmp-textinput-sm-radius)",
-    border: "var(--cmp-textinput-borderWidth) solid var(--cmp-textinput-border-default)",
-    color: "var(--cmp-textinput-text-default)",
-    fontSize: 12,
-    lineHeight: "20px"
-  };
-  const renderColumn = (side, kind) => {
-    const isHour = kind === "hour";
-    const { minute } = getParts(side);
-    const val = isHour ? getDisplayHour(side) : minute;
-    const currentEditingKey = getEditingKey(side, kind);
-    const displayValue2 = editingKey === currentEditingKey ? inputDraft[currentEditingKey] ?? "" : String(val).padStart(2, "0");
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex flex-col items-center justify-center",
-        style: { gap: "var(--cmp-timepicker-selector-time-column-gap)" },
-        children: [
-          /* @__PURE__ */ jsx(
-            SGhostButton,
-            {
-              icon: "chevronUp",
-              size: "xs",
-              ariaLabel: `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"} \uC99D\uAC00`,
-              onClick: () => isHour ? changeHour(side, 1) : changeMinute(side, minuteStep)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              "aria-label": `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"}`,
-              inputMode: "numeric",
-              value: displayValue2,
-              placeholder: "-",
-              onFocus: () => beginEdit(side, kind, val),
-              onBlur: () => endEdit(side, kind),
-              onChange: (event) => {
-                const draft = sanitizeInput(event.target.value);
-                setInputDraft((prev) => ({ ...prev, [currentEditingKey]: draft }));
-                if (draft === "") return;
-                const raw = Number(draft);
-                if (isHour) {
-                  if (draft.length < 2) return;
-                  const clamped2 = commitHourDraft(side, draft);
-                  const displayDraft2 = raw === clamped2 ? draft : String(clamped2);
-                  setInputDraft((prev) => ({ ...prev, [currentEditingKey]: displayDraft2 }));
-                  return;
-                }
-                if (draft.length < 2) return;
-                const clamped = commitMinuteDraft(side, draft);
-                const displayDraft = raw === clamped ? draft : String(clamped);
-                setInputDraft((prev) => ({ ...prev, [currentEditingKey]: displayDraft }));
-              },
-              className: "box-border bg-white text-center outline-none",
-              style: inputStyle
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            SGhostButton,
-            {
-              icon: "chevronDown",
-              size: "xs",
-              ariaLabel: `${side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC"} ${isHour ? "\uC2DC" : "\uBD84"} \uAC10\uC18C`,
-              onClick: () => isHour ? changeHour(side, -1) : changeMinute(side, -minuteStep)
-            }
-          )
-        ]
-      }
-    );
+    onChange([time, strict && toMinutes(time) > toMinutes(range[1]) ? time : range[1]]);
   };
   const renderPanel = (side, title) => /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "flex flex-col items-center justify-center",
-      style: { gap: "var(--cmp-timepicker-selector-range-section-gap)" },
+      className: "flex flex-col items-center",
+      style: { gap: "var(--cmp-timepicker-selector-range-heading-gap)" },
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "flex flex-col items-center",
-            style: { gap: "var(--cmp-timepicker-selector-range-heading-gap)" },
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[12px] font-bold leading-[20px] text-[var(--cmp-timepicker-selector-range-heading-color)]", children: title }),
-              showMeridiem && /* @__PURE__ */ jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item4, index) => {
-                const selected = item4 === getMeridiem(side);
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setMeridiem(side, item4),
-                    className: cn(
-                      "box-border h-[var(--cmp-textinput-sm-height)] w-[61px] cursor-pointer border border-solid bg-white text-center text-[12px] font-medium leading-[20px]",
-                      index === 0 ? "rounded-l-[var(--cmp-select-sm-radius)] -mr-px" : "rounded-r-[var(--cmp-select-sm-radius)]",
-                      selected ? "z-[1] border-[var(--cmp-timepicker-border-focus)] text-[var(--cmp-timepicker-border-focus)]" : "border-[var(--cmp-timepicker-border-default)] text-[var(--cmp-field-hint-color)]"
-                    ),
-                    children: item4 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
-                  },
-                  item4
-                );
-              }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[12px] font-bold leading-[20px] text-[var(--cmp-timepicker-selector-range-heading-color)]", children: title }),
+        /* @__PURE__ */ jsx(
+          TimeListbox,
           {
-            className: "flex items-center justify-center",
-            style: {
-              gap: "var(--cmp-timepicker-selector-time-gap)",
-              padding: "0 var(--cmp-timepicker-selector-section-paddingX)"
-            },
-            children: [
-              renderColumn(side, "hour"),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "text-center",
-                  style: {
-                    width: "var(--cmp-timepicker-selector-colon-size)",
-                    color: "var(--cmp-field-hint-color)",
-                    fontSize: "var(--cmp-timepicker-selector-colon-size)",
-                    lineHeight: "var(--cmp-timepicker-selector-colon-size)"
-                  },
-                  children: ":"
-                }
-              ),
-              renderColumn(side, "minute")
-            ]
+            value: side === "start" ? range[0] : range[1],
+            showMeridiem,
+            minuteStep,
+            labelPrefix: side === "start" ? "\uC2DC\uC791" : "\uC885\uB8CC",
+            elevated: false,
+            isDisabled: strict && side === "end" ? (minutes) => minutes < toMinutes(range[0]) : void 0,
+            onChange: (time) => change(side, time)
           }
         )
       ]
@@ -29115,11 +29141,9 @@ function STimeRangePicker({
   style
 }) {
   const portalContainer = usePortalContainer();
-  const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
   const triggerId = useFieldControlId();
   const triggerTextId = `${triggerId}-text`;
-  const [popoverAlignOffset, setPopoverAlignOffset] = useState(0);
   const [focused, setFocused] = useState(false);
   const [ruleError, setRuleError] = useState("");
   const dims = TIMEPICKER_SIZE_CONFIG[size] ?? TIMEPICKER_SIZE_CONFIG.sm;
@@ -29143,10 +29167,6 @@ function STimeRangePicker({
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const commitOpen = (next) => {
     if (disabled) return;
-    if (next) {
-      const triggerWidth = triggerRef.current?.getBoundingClientRect().width ?? 0;
-      setPopoverAlignOffset(Math.max(0, (triggerWidth - TIME_RANGE_SELECTOR_WIDTH) / 2));
-    }
     setOpen(next);
     onOpenChange?.(next);
     if (!next && rules && rules.length > 0) setRuleError(runRules(value, rules));
@@ -29185,7 +29205,6 @@ function STimeRangePicker({
         /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: triggerRef,
             id: triggerId,
             role: "button",
             "aria-disabled": disabled,
@@ -29249,9 +29268,8 @@ function STimeRangePicker({
           RPopover13.Content,
           {
             side: "bottom",
-            align: "start",
+            align: "center",
             sideOffset: 4,
-            alignOffset: popoverAlignOffset,
             className: cn(
               "z-50 max-w-[var(--radix-popover-content-available-width)]",
               FLOATING_SLIDE_ANIM