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

package/dist/index.js

@@ -13394,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"
+          }
+        )
       ]
     }
   );
@@ -14275,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;
@@ -19374,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);
@@ -19431,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;
     });
@@ -19440,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,
@@ -19456,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
@@ -19471,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) => {
@@ -19485,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
           },
@@ -19546,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(
@@ -19566,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,
@@ -28658,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 })
       ]
     }
   );
@@ -28901,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;
@@ -28926,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));
@@ -28969,7 +28930,6 @@ function STimePicker({
         /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: triggerRef,
             id: triggerId,
             role: "button",
             "aria-disabled": disabled,
@@ -29033,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);
+                }
               }
             )
           }
@@ -29076,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
@@ -29085,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,
@@ -29092,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");
+  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;
     }
-    if (next < 0) {
-      commit(side, (hour + 23) % 24, next + 60, delta > 0 ? "increase" : "decrease");
-      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)
           }
         )
       ]
@@ -29377,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;
@@ -29405,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));
@@ -29447,7 +29205,6 @@ function STimeRangePicker({
         /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: triggerRef,
             id: triggerId,
             role: "button",
             "aria-disabled": disabled,
@@ -29511,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