@sia.soul/sia-react-ui 0.1.25 → 0.1.26

package/dist/select-date-range.cjs

@@ -301,7 +301,7 @@ function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
 }
 
 // src/components/DatePicker.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/components/Icon.tsx
 var import_react3 = require("react");
@@ -1113,167 +1113,548 @@ var Icon = (0, import_react3.forwardRef)(function Icon2({ name, size = "1em", st
 });
 
 // src/components/DatePickerPanel.tsx
+var import_react6 = require("react");
+
+// src/components/FloatingScrollbarProvider.tsx
+var import_react5 = require("react");
+
+// src/components/useScrollbarProximity.ts
 var import_react4 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function pad(value) {
-  return String(value).padStart(2, "0");
-}
-function dateKey(date) {
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-}
-function parseDate(value) {
-  const match = value?.match(/^(\d{4})-(\d{2})-(\d{2})/);
-  if (!match) return null;
-  const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
-  return Number.isNaN(date.getTime()) ? null : date;
-}
-function startOfMonth(value) {
-  return new Date(value.getFullYear(), value.getMonth(), 1);
-}
-function addMonths(value, amount) {
-  return new Date(value.getFullYear(), value.getMonth() + amount, 1);
-}
-function addDays(value, amount) {
-  return new Date(value.getFullYear(), value.getMonth(), value.getDate() + amount);
-}
-function daysBetween(left, right) {
-  const leftDate = parseDate(left);
-  const rightDate = parseDate(right);
-  if (!leftDate || !rightDate) return 0;
-  return Math.round((rightDate.getTime() - leftDate.getTime()) / 864e5);
-}
-function timePart(value, fallback = "00:00:00") {
-  const match = value?.match(/[T ](\d{2}):(\d{2})(?::(\d{2}))?/);
-  return match ? `${match[1]}:${match[2]}:${match[3] ?? "00"}` : fallback;
-}
-function withTime(date, time, showSecond = false) {
-  if (!date) return "";
-  const [hour = "00", minute = "00", second = "00"] = time.split(":");
-  return `${date} ${hour}:${minute}${showSecond ? `:${second}` : ""}`;
-}
-function normalizeDateValue(value, showTime, index = 0) {
-  if (!value) return "";
-  const date = parseDate(value);
-  if (!date) return value;
-  const day = dateKey(date);
-  if (!showTime) return day;
-  const config = typeof showTime === "object" ? showTime : {};
-  const fallback = typeof config.defaultValue === "string" ? config.defaultValue : config.defaultValue?.[index] ?? "00:00:00";
-  return withTime(day, timePart(value, fallback), Boolean(config.showSecond));
+var users = 0;
+var cleanup;
+function useScrollbarProximity() {
+  (0, import_react4.useEffect)(() => {
+    if (users++ === 0) {
+      let frame = 0;
+      let x = -Infinity;
+      let y = -Infinity;
+      const nearby = /* @__PURE__ */ new Set();
+      const clear = () => {
+        nearby.forEach((track) => track.removeAttribute("data-scrollbar-near"));
+        nearby.clear();
+      };
+      const update = () => {
+        frame = 0;
+        const next = /* @__PURE__ */ new Set();
+        document.querySelectorAll(".sia-scrollbar-track").forEach((track) => {
+          const rect = track.getBoundingClientRect();
+          const proximity = Number.parseFloat(getComputedStyle(track).getPropertyValue("--sia-scrollbar-proximity")) || 16;
+          if (rect.width && rect.height && x >= rect.left - proximity && x <= rect.right + proximity && y >= rect.top - proximity && y <= rect.bottom + proximity) {
+            next.add(track);
+            if (!nearby.has(track)) track.setAttribute("data-scrollbar-near", "true");
+          }
+        });
+        nearby.forEach((track) => {
+          if (!next.has(track)) track.removeAttribute("data-scrollbar-near");
+        });
+        nearby.clear();
+        next.forEach((track) => nearby.add(track));
+      };
+      const move = (event) => {
+        if (event.pointerType === "touch") return;
+        x = event.clientX;
+        y = event.clientY;
+        if (!frame) frame = requestAnimationFrame(update);
+      };
+      const leave = () => {
+        x = y = -Infinity;
+        clear();
+      };
+      document.addEventListener("pointermove", move, { passive: true });
+      document.documentElement.addEventListener("pointerleave", leave);
+      window.addEventListener("blur", leave);
+      cleanup = () => {
+        if (frame) cancelAnimationFrame(frame);
+        document.removeEventListener("pointermove", move);
+        document.documentElement.removeEventListener("pointerleave", leave);
+        window.removeEventListener("blur", leave);
+        clear();
+      };
+    }
+    return () => {
+      if (--users === 0) {
+        cleanup?.();
+        cleanup = void 0;
+      }
+    };
+  }, []);
 }
-var WEEKDAYS = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"];
-function CalendarMonth({
-  month,
-  selectedDates = [],
-  range = ["", ""],
-  previewEnd,
-  disabledDate,
-  onSelect,
-  onHover
-}) {
-  const first = startOfMonth(month);
-  const mondayIndex = (first.getDay() + 6) % 7;
-  const gridStart = addDays(first, -mondayIndex);
-  const today = dateKey(/* @__PURE__ */ new Date());
-  const start = range[0];
-  const end = range[1] || previewEnd || "";
-  const low = start && end ? start <= end ? start : end : "";
-  const high = start && end ? start <= end ? end : start : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "sia-date-panel__month", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sia-date-panel__weekdays", "aria-hidden": "true", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: day }, day)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sia-date-panel__days", children: Array.from({ length: 42 }, (_, index) => {
-      const date = addDays(gridStart, index);
-      const key = dateKey(date);
-      const outside = date.getMonth() !== month.getMonth();
-      const disabled = disabledDate?.(key) ?? false;
-      const selected = selectedDates.includes(key);
-      const rangeStart = Boolean(start && key === start);
-      const rangeEnd = Boolean(range[1] && key === range[1]);
-      const inRange = Boolean(low && high && key >= low && key <= high);
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "span",
-        {
-          className: `sia-date-panel__cell${outside ? " is-outside" : ""}${selected ? " is-selected" : ""}${rangeStart ? " is-range-start" : ""}${rangeEnd ? " is-range-end" : ""}${inRange ? " is-in-range" : ""}${key === today ? " is-today" : ""}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            "button",
-            {
-              type: "button",
-              "aria-label": key,
-              "aria-pressed": selected || rangeStart || rangeEnd || void 0,
-              disabled,
-              onClick: () => onSelect(key),
-              onMouseEnter: () => onHover?.(key),
-              children: date.getDate()
-            }
-          )
-        },
-        key
-      );
-    }) })
-  ] });
+
+// src/components/FloatingScrollbarProvider.tsx
+var scrollableOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
+var clippingOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay", "hidden", "clip"]);
+function isRootScroller(target) {
+  return target === document.scrollingElement || target === document.documentElement;
 }
-function CalendarHeader({
-  month,
-  label,
-  range = false,
-  onPreviousYear,
-  onPreviousMonth,
-  onNextMonth,
-  onNextYear
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "sia-date-panel__header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "sia-date-panel__nav", children: [
-      onPreviousYear ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", "aria-label": "\u4E0A\u4E00\u5E74", onClick: onPreviousYear, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-left", size: 13 }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-left", size: 13 })
-      ] }) : null,
-      onPreviousMonth ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "\u4E0A\u4E2A\u6708", onClick: onPreviousMonth, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-left", size: 15 }) }) : null
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("strong", { children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("small", { children: label }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-        month.getFullYear(),
-        "\u5E74\xA0 ",
-        month.getMonth() + 1,
-        "\u6708"
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "sia-date-panel__nav", children: [
-      onNextMonth ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "\u4E0B\u4E2A\u6708", onClick: onNextMonth, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-right", size: 15 }) }) : null,
-      onNextYear ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", "aria-label": "\u4E0B\u4E00\u5E74", onClick: onNextYear, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-right", size: 13 }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-right", size: 13 })
-      ] }) : null
-    ] }),
-    range ? null : null
-  ] });
+function canScroll(target, axis) {
+  if (target.matches(".sia-table__viewport, [data-sia-native-scrollbar]")) return false;
+  if (isRootScroller(target)) {
+    return axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
+  }
+  const style = getComputedStyle(target);
+  const overflow = axis === "horizontal" ? style.overflowX : style.overflowY;
+  const hasOverflow = axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
+  return hasOverflow && scrollableOverflow.has(overflow);
 }
-function TimePanel({
-  value,
-  showSecond = false,
-  ariaLabel = "\u65F6\u95F4",
-  disabledTime,
-  use12Hours = false,
-  onChange
-}) {
-  const [hour = "00", minute = "00", second = "00"] = value.split(":");
-  const columnsRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useLayoutEffect)(() => {
-    for (const column of columnsRef.current?.children ?? []) {
-      const selected = column.querySelector('[aria-selected="true"]');
-      const first = column.firstElementChild;
-      if (!selected || !first) continue;
-      const top = selected.offsetTop - first.offsetTop + parseFloat(getComputedStyle(column).paddingTop || "0");
-      const bottom = top + selected.offsetHeight;
-      if (top < column.scrollTop || bottom > column.scrollTop + column.clientHeight) {
-        column.scrollTop = Math.max(0, top - (column.clientHeight - selected.offsetHeight) / 2);
+function visibleRect(target) {
+  if (isRootScroller(target)) {
+    return { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0, width: window.innerWidth, height: window.innerHeight };
+  }
+  const ownRect = target.getBoundingClientRect();
+  let top = Math.max(0, ownRect.top);
+  let right = Math.min(window.innerWidth, ownRect.right);
+  let bottom = Math.min(window.innerHeight, ownRect.bottom);
+  let left = Math.max(0, ownRect.left);
+  let parent = target.parentElement;
+  while (parent && parent !== document.body && parent !== document.documentElement) {
+    const style = getComputedStyle(parent);
+    const clipX = clippingOverflow.has(style.overflowX);
+    const clipY = clippingOverflow.has(style.overflowY);
+    if (clipX || clipY) {
+      const rect = parent.getBoundingClientRect();
+      if (clipX) {
+        left = Math.max(left, rect.left);
+        right = Math.min(right, rect.right);
+      }
+      if (clipY) {
+        top = Math.max(top, rect.top);
+        bottom = Math.min(bottom, rect.bottom);
       }
     }
-  }, [hour, minute, second, showSecond, ariaLabel]);
-  const columns = [
-    { label: "\u5C0F\u65F6", value: hour, count: 24, index: 0 },
-    { label: "\u5206\u949F", value: minute, count: 60, index: 1 },
-    ...showSecond ? [{ label: "\u79D2", value: second, count: 60, index: 2 }] : []
+    parent = parent.parentElement;
+  }
+  return {
+    top,
+    right,
+    bottom,
+    left,
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top)
+  };
+}
+function createTrack(axis) {
+  const track = document.createElement("div");
+  const thumb = document.createElement("div");
+  track.className = `sia-scrollbar-track sia-floating-scrollbar sia-floating-scrollbar--${axis}`;
+  thumb.className = "sia-floating-scrollbar__thumb";
+  track.dataset.axis = axis;
+  track.setAttribute("aria-hidden", "true");
+  track.append(thumb);
+  return { track, thumb };
+}
+function FloatingScrollbarProvider({ disabled = false, targetRef }) {
+  useScrollbarProximity();
+  (0, import_react5.useEffect)(() => {
+    if (disabled) return;
+    const layer = document.createElement("div");
+    layer.className = "sia-floating-scrollbar-layer";
+    layer.setAttribute("aria-hidden", "true");
+    document.body.append(layer);
+    const entries = /* @__PURE__ */ new Map();
+    let scanFrame = 0;
+    let updateFrame = 0;
+    const setEntryVisible = (entry, visible) => {
+      entry.horizontalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
+      entry.verticalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
+    };
+    const showEntry = (entry) => {
+      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
+      entry.hideTimer = null;
+      setEntryVisible(entry, true);
+    };
+    const scheduleHide = (entry, delay = 500) => {
+      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
+      entry.hideTimer = window.setTimeout(() => {
+        entry.hideTimer = null;
+        if (!entry.hoveringTarget && !entry.hoveringTrack && !entry.dragging) setEntryVisible(entry, false);
+      }, delay);
+    };
+    const updateEntry = (entry) => {
+      const { target, horizontalTrack, horizontalThumb, verticalTrack, verticalThumb } = entry;
+      const hasHorizontal = canScroll(target, "horizontal");
+      const hasVertical = canScroll(target, "vertical");
+      const rect = visibleRect(target);
+      const thickness = 10;
+      horizontalTrack.hidden = !hasHorizontal || rect.width <= thickness || rect.height <= 0;
+      verticalTrack.hidden = !hasVertical || rect.height <= thickness || rect.width <= 0;
+      if (!horizontalTrack.hidden) {
+        const trackWidth = Math.max(0, rect.width - (hasVertical ? thickness : 0));
+        const thumbWidth = Math.max(24, Math.min(trackWidth, trackWidth * target.clientWidth / target.scrollWidth));
+        const travel = Math.max(0, trackWidth - thumbWidth);
+        const maxScroll = Math.max(1, target.scrollWidth - target.clientWidth);
+        horizontalTrack.style.left = `${rect.left}px`;
+        horizontalTrack.style.top = `${rect.bottom - thickness}px`;
+        horizontalTrack.style.width = `${trackWidth}px`;
+        horizontalTrack.style.height = `${thickness}px`;
+        horizontalThumb.style.width = `${thumbWidth}px`;
+        horizontalThumb.style.transform = `translate3d(${travel * target.scrollLeft / maxScroll}px, 0, 0)`;
+      }
+      if (!verticalTrack.hidden) {
+        const trackHeight = Math.max(0, rect.height - (hasHorizontal ? thickness : 0));
+        const thumbHeight = Math.max(24, Math.min(trackHeight, trackHeight * target.clientHeight / target.scrollHeight));
+        const travel = Math.max(0, trackHeight - thumbHeight);
+        const maxScroll = Math.max(1, target.scrollHeight - target.clientHeight);
+        verticalTrack.style.left = `${rect.right - thickness}px`;
+        verticalTrack.style.top = `${rect.top}px`;
+        verticalTrack.style.width = `${thickness}px`;
+        verticalTrack.style.height = `${trackHeight}px`;
+        verticalThumb.style.height = `${thumbHeight}px`;
+        verticalThumb.style.transform = `translate3d(0, ${travel * target.scrollTop / maxScroll}px, 0)`;
+      }
+    };
+    const scheduleUpdateAll = () => {
+      if (updateFrame) return;
+      updateFrame = window.requestAnimationFrame(() => {
+        updateFrame = 0;
+        entries.forEach(updateEntry);
+      });
+    };
+    const bindTrackDrag = (entry, axis, track, thumb) => {
+      const target = entry.target;
+      const onTrackPointerEnter = () => {
+        entry.hoveringTrack = true;
+        showEntry(entry);
+      };
+      const onTrackPointerLeave = () => {
+        entry.hoveringTrack = false;
+        scheduleHide(entry);
+      };
+      const onTrackPointerDown = (event) => {
+        if (event.target === thumb || event.button !== 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const trackRect = track.getBoundingClientRect();
+        const thumbRect = thumb.getBoundingClientRect();
+        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
+        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
+        const pointer = axis === "vertical" ? event.clientY - trackRect.top : event.clientX - trackRect.left;
+        const ratio = Math.max(0, Math.min(1, (pointer - thumbLength / 2) / Math.max(1, trackLength - thumbLength)));
+        if (axis === "vertical") target.scrollTop = ratio * (target.scrollHeight - target.clientHeight);
+        else target.scrollLeft = ratio * (target.scrollWidth - target.clientWidth);
+      };
+      const onThumbPointerDown = (event) => {
+        if (event.button !== 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        entry.dragging = true;
+        showEntry(entry);
+        thumb.setPointerCapture(event.pointerId);
+        const startPointer = axis === "vertical" ? event.clientY : event.clientX;
+        const startScroll = axis === "vertical" ? target.scrollTop : target.scrollLeft;
+        const trackRect = track.getBoundingClientRect();
+        const thumbRect = thumb.getBoundingClientRect();
+        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
+        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
+        const maxScroll = axis === "vertical" ? target.scrollHeight - target.clientHeight : target.scrollWidth - target.clientWidth;
+        const travel = Math.max(1, trackLength - thumbLength);
+        const onPointerMove = (moveEvent) => {
+          if (moveEvent.pointerId !== event.pointerId) return;
+          const pointer = axis === "vertical" ? moveEvent.clientY : moveEvent.clientX;
+          const nextScroll = startScroll + (pointer - startPointer) * maxScroll / travel;
+          if (axis === "vertical") target.scrollTop = nextScroll;
+          else target.scrollLeft = nextScroll;
+        };
+        const onPointerUp = (upEvent) => {
+          if (upEvent.pointerId !== event.pointerId) return;
+          entry.dragging = false;
+          thumb.releasePointerCapture(event.pointerId);
+          window.removeEventListener("pointermove", onPointerMove);
+          window.removeEventListener("pointerup", onPointerUp);
+          window.removeEventListener("pointercancel", onPointerUp);
+          scheduleHide(entry);
+        };
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+        window.addEventListener("pointercancel", onPointerUp);
+      };
+      track.addEventListener("pointerenter", onTrackPointerEnter);
+      track.addEventListener("pointerleave", onTrackPointerLeave);
+      track.addEventListener("pointerdown", onTrackPointerDown);
+      thumb.addEventListener("pointerdown", onThumbPointerDown);
+      return () => {
+        track.removeEventListener("pointerenter", onTrackPointerEnter);
+        track.removeEventListener("pointerleave", onTrackPointerLeave);
+        track.removeEventListener("pointerdown", onTrackPointerDown);
+        thumb.removeEventListener("pointerdown", onThumbPointerDown);
+      };
+    };
+    const resizeObserver = new ResizeObserver((observedEntries) => {
+      observedEntries.forEach(({ target }) => {
+        const entry = entries.get(target);
+        if (entry) updateEntry(entry);
+      });
+    });
+    const addTarget = (target) => {
+      if (entries.has(target)) return;
+      const horizontal = createTrack("horizontal");
+      const vertical = createTrack("vertical");
+      layer.append(horizontal.track, vertical.track);
+      const onPointerEnter = () => {
+        const entry2 = entries.get(target);
+        if (!entry2) return;
+        entry2.hoveringTarget = true;
+        showEntry(entry2);
+      };
+      const onPointerLeave = () => {
+        const entry2 = entries.get(target);
+        if (!entry2) return;
+        entry2.hoveringTarget = false;
+        scheduleHide(entry2);
+      };
+      const onScroll = () => {
+        const entry2 = entries.get(target);
+        if (!entry2) return;
+        updateEntry(entry2);
+        showEntry(entry2);
+        scheduleHide(entry2, 700);
+      };
+      target.addEventListener("pointerenter", onPointerEnter);
+      target.addEventListener("pointerleave", onPointerLeave);
+      target.addEventListener("scroll", onScroll, { passive: true });
+      const entry = {
+        target,
+        horizontalTrack: horizontal.track,
+        horizontalThumb: horizontal.thumb,
+        verticalTrack: vertical.track,
+        verticalThumb: vertical.thumb,
+        hideTimer: null,
+        hoveringTarget: target.matches(":hover"),
+        hoveringTrack: false,
+        dragging: false,
+        cleanup: () => void 0
+      };
+      const cleanupHorizontal = bindTrackDrag(entry, "horizontal", horizontal.track, horizontal.thumb);
+      const cleanupVertical = bindTrackDrag(entry, "vertical", vertical.track, vertical.thumb);
+      entry.cleanup = () => {
+        if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
+        cleanupHorizontal();
+        cleanupVertical();
+        target.removeEventListener("pointerenter", onPointerEnter);
+        target.removeEventListener("pointerleave", onPointerLeave);
+        target.removeEventListener("scroll", onScroll);
+        resizeObserver.unobserve(target);
+        target.removeAttribute("data-sia-floating-scrollbar");
+        horizontal.track.remove();
+        vertical.track.remove();
+      };
+      entries.set(target, entry);
+      target.setAttribute("data-sia-floating-scrollbar", "");
+      resizeObserver.observe(target);
+      updateEntry(entry);
+      if (entry.hoveringTarget) showEntry(entry);
+    };
+    const removeTarget = (target) => {
+      const entry = entries.get(target);
+      if (!entry) return;
+      entry.cleanup();
+      entries.delete(target);
+    };
+    const scanTargets = () => {
+      scanFrame = 0;
+      const candidates = (targetRef ? [targetRef.current] : [document.scrollingElement, ...document.querySelectorAll("*")]).filter((target) => target instanceof HTMLElement);
+      const nextTargets = /* @__PURE__ */ new Set();
+      candidates.forEach((target) => {
+        if (canScroll(target, "horizontal") || canScroll(target, "vertical")) {
+          nextTargets.add(target);
+          if (entries.has(target) || !target.hasAttribute("data-sia-floating-scrollbar")) addTarget(target);
+        }
+      });
+      entries.forEach((_entry, target) => {
+        if (!target.isConnected || !nextTargets.has(target)) removeTarget(target);
+        else updateEntry(_entry);
+      });
+    };
+    const scheduleScan = () => {
+      if (scanFrame) return;
+      scanFrame = window.requestAnimationFrame(scanTargets);
+    };
+    const mutationObserver = new MutationObserver((mutations) => {
+      if (mutations.some((mutation) => !layer.contains(mutation.target))) scheduleScan();
+    });
+    mutationObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true });
+    window.addEventListener("resize", scheduleScan);
+    window.addEventListener("scroll", scheduleUpdateAll, true);
+    scheduleScan();
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", scheduleScan);
+      window.removeEventListener("scroll", scheduleUpdateAll, true);
+      if (scanFrame) window.cancelAnimationFrame(scanFrame);
+      if (updateFrame) window.cancelAnimationFrame(updateFrame);
+      entries.forEach((entry) => entry.cleanup());
+      entries.clear();
+      layer.remove();
+    };
+  }, [disabled, targetRef]);
+  return null;
+}
+
+// src/components/DatePickerPanel.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function dateKey(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function parseDate(value) {
+  const match = value?.match(/^(\d{4})-(\d{2})-(\d{2})/);
+  if (!match) return null;
+  const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function startOfMonth(value) {
+  return new Date(value.getFullYear(), value.getMonth(), 1);
+}
+function addMonths(value, amount) {
+  return new Date(value.getFullYear(), value.getMonth() + amount, 1);
+}
+function addDays(value, amount) {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate() + amount);
+}
+function daysBetween(left, right) {
+  const leftDate = parseDate(left);
+  const rightDate = parseDate(right);
+  if (!leftDate || !rightDate) return 0;
+  return Math.round((rightDate.getTime() - leftDate.getTime()) / 864e5);
+}
+function timePart(value, fallback = "00:00:00") {
+  const match = value?.match(/[T ](\d{2}):(\d{2})(?::(\d{2}))?/);
+  return match ? `${match[1]}:${match[2]}:${match[3] ?? "00"}` : fallback;
+}
+function withTime(date, time, showSecond = false) {
+  if (!date) return "";
+  const [hour = "00", minute = "00", second = "00"] = time.split(":");
+  return `${date} ${hour}:${minute}${showSecond ? `:${second}` : ""}`;
+}
+function normalizeDateValue(value, showTime, index = 0) {
+  if (!value) return "";
+  const date = parseDate(value);
+  if (!date) return value;
+  const day = dateKey(date);
+  if (!showTime) return day;
+  const config = typeof showTime === "object" ? showTime : {};
+  const fallback = typeof config.defaultValue === "string" ? config.defaultValue : config.defaultValue?.[index] ?? "00:00:00";
+  return withTime(day, timePart(value, fallback), Boolean(config.showSecond));
+}
+var WEEKDAYS = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"];
+function CalendarMonth({
+  month,
+  selectedDates = [],
+  range = ["", ""],
+  previewEnd,
+  disabledDate,
+  onSelect,
+  onHover
+}) {
+  const first = startOfMonth(month);
+  const mondayIndex = (first.getDay() + 6) % 7;
+  const gridStart = addDays(first, -mondayIndex);
+  const today = dateKey(/* @__PURE__ */ new Date());
+  const start = range[0];
+  const end = range[1] || previewEnd || "";
+  const low = start && end ? start <= end ? start : end : "";
+  const high = start && end ? start <= end ? end : start : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "sia-date-panel__month", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sia-date-panel__weekdays", "aria-hidden": "true", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: day }, day)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sia-date-panel__days", children: Array.from({ length: 42 }, (_, index) => {
+      const date = addDays(gridStart, index);
+      const key = dateKey(date);
+      const outside = date.getMonth() !== month.getMonth();
+      const disabled = disabledDate?.(key) ?? false;
+      const selected = selectedDates.includes(key);
+      const rangeStart = Boolean(start && key === start);
+      const rangeEnd = Boolean(range[1] && key === range[1]);
+      const inRange = Boolean(low && high && key >= low && key <= high);
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "span",
+        {
+          className: `sia-date-panel__cell${outside ? " is-outside" : ""}${selected ? " is-selected" : ""}${rangeStart ? " is-range-start" : ""}${rangeEnd ? " is-range-end" : ""}${inRange ? " is-in-range" : ""}${key === today ? " is-today" : ""}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": key,
+              "aria-pressed": selected || rangeStart || rangeEnd || void 0,
+              disabled,
+              onClick: () => onSelect(key),
+              onMouseEnter: () => onHover?.(key),
+              children: date.getDate()
+            }
+          )
+        },
+        key
+      );
+    }) })
+  ] });
+}
+function CalendarHeader({
+  month,
+  label,
+  range = false,
+  onPreviousYear,
+  onPreviousMonth,
+  onNextMonth,
+  onNextYear
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "sia-date-panel__header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "sia-date-panel__nav", children: [
+      onPreviousYear ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", "aria-label": "\u4E0A\u4E00\u5E74", onClick: onPreviousYear, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-left", size: 13 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-left", size: 13 })
+      ] }) : null,
+      onPreviousMonth ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "\u4E0A\u4E2A\u6708", onClick: onPreviousMonth, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-left", size: 15 }) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("strong", { children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("small", { children: label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+        month.getFullYear(),
+        "\u5E74\xA0 ",
+        month.getMonth() + 1,
+        "\u6708"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "sia-date-panel__nav", children: [
+      onNextMonth ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "\u4E0B\u4E2A\u6708", onClick: onNextMonth, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-right", size: 15 }) }) : null,
+      onNextYear ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", "aria-label": "\u4E0B\u4E00\u5E74", onClick: onNextYear, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-right", size: 13 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "chevron-right", size: 13 })
+      ] }) : null
+    ] }),
+    range ? null : null
+  ] });
+}
+function TimePanel({
+  value,
+  showSecond = false,
+  ariaLabel = "\u65F6\u95F4",
+  disabledTime,
+  use12Hours = false,
+  onChange
+}) {
+  const [hour = "00", minute = "00", second = "00"] = value.split(":");
+  const columnsRef = (0, import_react6.useRef)(null);
+  const hourRef = (0, import_react6.useRef)(null);
+  const minuteRef = (0, import_react6.useRef)(null);
+  const secondRef = (0, import_react6.useRef)(null);
+  const columnRefs = [hourRef, minuteRef, secondRef];
+  (0, import_react6.useLayoutEffect)(() => {
+    for (const column of columnsRef.current?.children ?? []) {
+      const selected = column.querySelector('[aria-selected="true"]');
+      const first = column.firstElementChild;
+      if (!selected || !first) continue;
+      const top = selected.offsetTop - first.offsetTop + parseFloat(getComputedStyle(column).paddingTop || "0");
+      const bottom = top + selected.offsetHeight;
+      if (top < column.scrollTop || bottom > column.scrollTop + column.clientHeight) {
+        column.scrollTop = Math.max(0, top - (column.clientHeight - selected.offsetHeight) / 2);
+      }
+    }
+  }, [hour, minute, second, showSecond, ariaLabel]);
+  const columns = [
+    { label: "\u5C0F\u65F6", value: hour, count: 24, index: 0 },
+    { label: "\u5206\u949F", value: minute, count: 60, index: 1 },
+    ...showSecond ? [{ label: "\u79D2", value: second, count: 60, index: 2 }] : []
   ];
   function update(index, next) {
     const values = [hour, minute, second];
@@ -1288,7 +1669,7 @@ function TimePanel({
       showSecond ? `:${second}` : "",
       use12Hours ? Number(hour) < 12 ? " AM" : " PM" : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: columnsRef, className: "sia-date-panel__time-columns", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "listbox", "aria-label": `${ariaLabel}${column.label}`, children: Array.from({ length: column.count }, (_, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: columnsRef, className: "sia-date-panel__time-columns", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: columnRefs[column.index], role: "listbox", "aria-label": `${ariaLabel}${column.label}`, children: Array.from({ length: column.count }, (_, index) => {
       const next = pad(index);
       const candidate = [hour, minute, second];
       candidate[column.index] = next;
@@ -1300,7 +1681,8 @@ function TimePanel({
         const target = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : Math.max(0, Math.min(buttons.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)));
         buttons[target]?.focus();
       }, onClick: () => update(column.index, next), children: use12Hours && column.index === 0 ? `${pad(index % 12 || 12)} ${index < 12 ? "AM" : "PM"}` : next }, next);
-    }) }, column.label)) })
+    }) }, column.label)) }),
+    columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FloatingScrollbarProvider, { targetRef: columnRefs[column.index] }, column.index))
   ] });
 }
 function DatePanelFooter({
@@ -1398,23 +1780,23 @@ function DatePicker({
   ...props
 }) {
   const size = useControlSize(sizeProp);
-  const id = (0, import_react5.useId)();
-  const rootRef = (0, import_react5.useRef)(null);
-  const popupRef = (0, import_react5.useRef)(null);
+  const id = (0, import_react7.useId)();
+  const rootRef = (0, import_react7.useRef)(null);
+  const popupRef = (0, import_react7.useRef)(null);
   const initialValue = defaultValue ?? (multiple ? [] : "");
   const [currentValue, setCurrentValue] = useControllableState({ value, defaultValue: initialValue, onChange });
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
-  const [draftValue, setDraftValue] = (0, import_react5.useState)(currentValue);
+  const [draftValue, setDraftValue] = (0, import_react7.useState)(currentValue);
   const firstCurrent = Array.isArray(currentValue) ? currentValue[0] : currentValue;
-  const [viewMonth, setViewMonth] = (0, import_react5.useState)(() => startOfMonth(parseDate(dayFromValue(firstCurrent)) ?? /* @__PURE__ */ new Date()));
-  const [draftTime, setDraftTime] = (0, import_react5.useState)(() => timePart(firstCurrent, defaultTimeFrom(showTime)));
+  const [viewMonth, setViewMonth] = (0, import_react7.useState)(() => startOfMonth(parseDate(dayFromValue(firstCurrent)) ?? /* @__PURE__ */ new Date()));
+  const [draftTime, setDraftTime] = (0, import_react7.useState)(() => timePart(firstCurrent, defaultTimeFrom(showTime)));
   const resolvedNeedConfirm = needConfirm ?? Boolean(showTime);
   const showSecond = showSecondFrom(showTime);
-  const selectedDates = (0, import_react5.useMemo)(() => {
+  const selectedDates = (0, import_react7.useMemo)(() => {
     const values = Array.isArray(draftValue) ? draftValue : draftValue ? [draftValue] : [];
     return values.map(dayFromValue).filter(Boolean);
   }, [draftValue]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!visible) return void 0;
     const close = (event) => {
       const target = event.target;
@@ -1580,28 +1962,28 @@ function DateRangePicker({
   ...props
 }) {
   const size = useControlSize(sizeProp);
-  const id = (0, import_react5.useId)();
-  const rootRef = (0, import_react5.useRef)(null);
-  const popupRef = (0, import_react5.useRef)(null);
+  const id = (0, import_react7.useId)();
+  const rootRef = (0, import_react7.useRef)(null);
+  const popupRef = (0, import_react7.useRef)(null);
   const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : Array.isArray(value) ? value : ["", ""], defaultValue, onChange });
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
-  const [draftValue, setDraftValue] = (0, import_react5.useState)(currentValue);
-  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(currentValue[0] && !currentValue[1] ? 1 : 0);
-  const [hoverDate, setHoverDate] = (0, import_react5.useState)("");
-  const [viewMonth, setViewMonth] = (0, import_react5.useState)(() => startOfMonth(parseDate(dayFromValue(currentValue[0] || currentValue[1])) ?? /* @__PURE__ */ new Date()));
-  const [endViewMonth, setEndViewMonth] = (0, import_react5.useState)(() => startOfMonth(parseDate(dayFromValue(currentValue[1])) ?? addMonths(parseDate(dayFromValue(currentValue[0])) ?? /* @__PURE__ */ new Date(), 1)));
-  const [compactDateTime, setCompactDateTime] = (0, import_react5.useState)(false);
+  const [draftValue, setDraftValue] = (0, import_react7.useState)(currentValue);
+  const [activeIndex, setActiveIndex] = (0, import_react7.useState)(currentValue[0] && !currentValue[1] ? 1 : 0);
+  const [hoverDate, setHoverDate] = (0, import_react7.useState)("");
+  const [viewMonth, setViewMonth] = (0, import_react7.useState)(() => startOfMonth(parseDate(dayFromValue(currentValue[0] || currentValue[1])) ?? /* @__PURE__ */ new Date()));
+  const [endViewMonth, setEndViewMonth] = (0, import_react7.useState)(() => startOfMonth(parseDate(dayFromValue(currentValue[1])) ?? addMonths(parseDate(dayFromValue(currentValue[0])) ?? /* @__PURE__ */ new Date(), 1)));
+  const [compactDateTime, setCompactDateTime] = (0, import_react7.useState)(false);
   const showSecond = showSecondFrom(showTime);
   const defaultTime = defaultTimeFrom(showTime);
   const defaultEndTime = defaultTimeFrom(showTime, 1);
-  const [times, setTimes] = (0, import_react5.useState)([
+  const [times, setTimes] = (0, import_react7.useState)([
     timePart(currentValue[0], defaultTime),
     timePart(currentValue[1], defaultEndTime)
   ]);
   const resolvedNeedConfirm = needConfirm ?? Boolean(showTime);
   const rangeDates = [dayFromValue(draftValue[0]), dayFromValue(draftValue[1])];
   const invalidDateTimeRange = Boolean(showTime && draftValue[0] && draftValue[1] && draftValue[0] > draftValue[1]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!showTime || typeof document === "undefined") {
       setCompactDateTime(false);
       return void 0;
@@ -1614,7 +1996,7 @@ function DateRangePicker({
     window.addEventListener("resize", updateLayout);
     return () => window.removeEventListener("resize", updateLayout);
   }, [showSecond, showTime]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!visible) return void 0;
     const close = (event) => {
       const target = event.target;
@@ -1918,13 +2300,13 @@ function DateRangePicker({
 var import_react16 = require("react");
 
 // src/components/Modal.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_client2 = require("react-dom/client");
 
 // src/components/Button.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Button = (0, import_react6.forwardRef)(function Button2({
+var Button = (0, import_react8.forwardRef)(function Button2({
   variant = "default",
   size: sizeProp,
   loading = false,
@@ -1940,7 +2322,7 @@ var Button = (0, import_react6.forwardRef)(function Button2({
   ...props
 }, forwardedRef) {
   const size = useControlSize(sizeProp);
-  const localRef = (0, import_react6.useRef)(null);
+  const localRef = (0, import_react8.useRef)(null);
   function setRef(node) {
     localRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);
@@ -1979,7 +2361,7 @@ var Button = (0, import_react6.forwardRef)(function Button2({
 });
 
 // src/components/Overlay.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_react_dom2 = require("react-dom");
 var bodyLockCount = 0;
 var previousBodyOverflow = "";
@@ -2001,10 +2383,10 @@ function focusableElements(container) {
   )].filter((element) => !element.hidden && element.getAttribute("aria-hidden") !== "true");
 }
 function useOverlayLifecycle(open, panelRef, onRequestClose, keyboard = true) {
-  const overlayIdRef = (0, import_react7.useRef)(/* @__PURE__ */ Symbol("sia-overlay"));
-  const closeRef = (0, import_react7.useRef)(onRequestClose);
+  const overlayIdRef = (0, import_react9.useRef)(/* @__PURE__ */ Symbol("sia-overlay"));
+  const closeRef = (0, import_react9.useRef)(onRequestClose);
   closeRef.current = onRequestClose;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!open || typeof document === "undefined") return void 0;
     const overlayId = overlayIdRef.current;
     const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -2068,7 +2450,7 @@ var typeIcons = {
   error: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "circle-close", size: 23 }),
   confirm: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "question", size: 23 })
 };
-var ModalRoot = (0, import_react8.forwardRef)(function Modal({
+var ModalRoot = (0, import_react10.forwardRef)(function Modal({
   open,
   title,
   children,
@@ -2097,20 +2479,20 @@ var ModalRoot = (0, import_react8.forwardRef)(function Modal({
   style,
   ...props
 }, forwardedRef) {
-  const localRef = (0, import_react8.useRef)(null);
-  const titleId = (0, import_react8.useId)();
-  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
-  const [rendered, setRendered] = (0, import_react8.useState)(open);
-  const [closing, setClosing] = (0, import_react8.useState)(false);
-  const afterOpenChangeRef = (0, import_react8.useRef)(afterOpenChange);
+  const localRef = (0, import_react10.useRef)(null);
+  const titleId = (0, import_react10.useId)();
+  const [submitting, setSubmitting] = (0, import_react10.useState)(false);
+  const [rendered, setRendered] = (0, import_react10.useState)(open);
+  const [closing, setClosing] = (0, import_react10.useState)(false);
+  const afterOpenChangeRef = (0, import_react10.useRef)(afterOpenChange);
   afterOpenChangeRef.current = afterOpenChange;
-  const submitLock = (0, import_react8.useRef)(false);
-  (0, import_react8.useEffect)(() => {
+  const submitLock = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
     if (!open || !rendered) return void 0;
     const timer = window.setTimeout(() => afterOpenChangeRef.current?.(true), MODAL_MOTION_DURATION);
     return () => window.clearTimeout(timer);
   }, [open, rendered]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (open) {
       setRendered(true);
       setClosing(false);
@@ -2285,16 +2667,16 @@ var Modal2 = Object.assign(ModalRoot, {
 });
 
 // src/components/Input.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Input = (0, import_react9.forwardRef)(function Input2({
+var Input = (0, import_react11.forwardRef)(function Input2({
   label,
   hint,
   status = "default",
   size: sizeProp,
   prefix,
   suffix,
-  allowClear = false,
+  allowClear = true,
   onClear,
   showCount = false,
   placeholderMode,
@@ -2309,10 +2691,10 @@ var Input = (0, import_react9.forwardRef)(function Input2({
   ...props
 }, forwardedRef) {
   const size = useControlSize(sizeProp);
-  const fallbackId = (0, import_react9.useId)();
+  const fallbackId = (0, import_react11.useId)();
   const inputId = id ?? fallbackId;
-  const localRef = (0, import_react9.useRef)(null);
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react9.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
+  const localRef = (0, import_react11.useRef)(null);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react11.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
   const currentText = value !== void 0 ? String(value) : uncontrolledValue;
   const hasValue = currentText.length > 0;
   const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
@@ -2389,17 +2771,17 @@ var Input = (0, import_react9.forwardRef)(function Input2({
 });
 
 // src/components/Checkbox.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react10.createContext)(null);
-var CheckboxRoot = (0, import_react10.forwardRef)(function Checkbox({ value, size: sizeProp, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
+var CheckboxGroupContext = (0, import_react12.createContext)(null);
+var CheckboxRoot = (0, import_react12.forwardRef)(function Checkbox({ value, size: sizeProp, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
   const size = useControlSize(sizeProp);
-  const group = (0, import_react10.useContext)(CheckboxGroupContext);
-  const localRef = (0, import_react10.useRef)(null);
-  const fallbackId = (0, import_react10.useId)();
+  const group = (0, import_react12.useContext)(CheckboxGroupContext);
+  const localRef = (0, import_react12.useRef)(null);
+  const fallbackId = (0, import_react12.useId)();
   const grouped = group !== null && value !== void 0;
   const currentChecked = grouped ? group.values.includes(value) : checked;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (localRef.current) localRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
   function setRef(node) {
@@ -2444,7 +2826,7 @@ function CheckboxGroup({
 }) {
   const size = useControlSize(sizeProp);
   const [values, setValues] = useControllableState({ value, defaultValue, onChange });
-  const context = (0, import_react10.useMemo)(() => ({
+  const context = (0, import_react12.useMemo)(() => ({
     values,
     disabled,
     name,
@@ -2467,10 +2849,10 @@ var Checkbox2 = Object.assign(CheckboxRoot, {
 });
 
 // src/components/SelectionPanel.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/components/FloatingDisplay.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var FLOATING_GAP = 9;
@@ -2528,17 +2910,17 @@ function Floating({
   role = "tooltip",
   onOpenChange
 }) {
-  const rootRef = (0, import_react11.useRef)(null);
-  const overlayRef = (0, import_react11.useRef)(null);
-  const enterTimer = (0, import_react11.useRef)();
-  const leaveTimer = (0, import_react11.useRef)();
-  const contentId = (0, import_react11.useId)();
+  const rootRef = (0, import_react13.useRef)(null);
+  const overlayRef = (0, import_react13.useRef)(null);
+  const enterTimer = (0, import_react13.useRef)();
+  const leaveTimer = (0, import_react13.useRef)();
+  const contentId = (0, import_react13.useId)();
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
-  const [position, setPosition] = (0, import_react11.useState)();
-  const setVisibleRef = (0, import_react11.useRef)(setVisible);
+  const [position, setPosition] = (0, import_react13.useState)();
+  const setVisibleRef = (0, import_react13.useRef)(setVisible);
   setVisibleRef.current = setVisible;
-  const closeSelfRef = (0, import_react11.useRef)();
+  const closeSelfRef = (0, import_react13.useRef)();
   if (!closeSelfRef.current) closeSelfRef.current = () => setVisibleRef.current(false);
   const exclusiveTooltip = role === "tooltip" && triggers.includes("hover");
   function openNow() {
@@ -2566,7 +2948,7 @@ function Floating({
     if (delay <= 0) closeNow();
     else leaveTimer.current = window.setTimeout(closeNow, delay * 1e3);
   }
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!visible || !triggers.includes("click")) return;
     const close = (event) => {
       const target = event.target;
@@ -2575,7 +2957,7 @@ function Floating({
     document.addEventListener("pointerdown", close);
     return () => document.removeEventListener("pointerdown", close);
   }, [triggers.join("|"), visible]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react13.useLayoutEffect)(() => {
     if (!visible) {
       setPosition(void 0);
       return;
@@ -2596,11 +2978,11 @@ function Floating({
       observer.disconnect();
     };
   }, [children, content, placement, visible]);
-  (0, import_react11.useEffect)(() => () => {
+  (0, import_react13.useEffect)(() => () => {
     clearTimers();
     if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
   }, []);
-  const child = (0, import_react11.cloneElement)(children, {
+  const child = (0, import_react13.cloneElement)(children, {
     ...triggers.includes("hover") ? { onMouseEnter: (event) => {
       children.props.onMouseEnter?.(event);
       show(mouseEnterDelay);
@@ -2680,26 +3062,26 @@ function SelectionPanel({
   maxHeight = 250,
   autoFocusSearch = false
 }) {
-  const [localSearch, setLocalSearch] = (0, import_react12.useState)("");
+  const [localSearch, setLocalSearch] = (0, import_react14.useState)("");
   const search = searchValue ?? localSearch;
-  const [scrollTop, setScrollTop] = (0, import_react12.useState)(0);
-  const [active, setActive] = (0, import_react12.useState)();
-  const [keyboardActive, setKeyboardActive] = (0, import_react12.useState)(false);
-  const [deselectedHover, setDeselectedHover] = (0, import_react12.useState)();
-  const listRef = (0, import_react12.useRef)(null);
-  const id = (0, import_react12.useId)();
-  const selected = (0, import_react12.useMemo)(() => new Set(value), [value]);
+  const [scrollTop, setScrollTop] = (0, import_react14.useState)(0);
+  const [active, setActive] = (0, import_react14.useState)();
+  const [keyboardActive, setKeyboardActive] = (0, import_react14.useState)(false);
+  const [deselectedHover, setDeselectedHover] = (0, import_react14.useState)();
+  const listRef = (0, import_react14.useRef)(null);
+  const id = (0, import_react14.useId)();
+  const selected = (0, import_react14.useMemo)(() => new Set(value), [value]);
   const count = Math.max(1, Math.floor(columns));
-  const allOptions = (0, import_react12.useMemo)(() => {
+  const allOptions = (0, import_react14.useMemo)(() => {
     if (!includeUnknownValues) return [...options];
     const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
     return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
   }, [options, value, includeUnknownValues]);
-  const filtered = (0, import_react12.useMemo)(
+  const filtered = (0, import_react14.useMemo)(
     () => allOptions.filter((option) => (!selectedOnly || selected.has(option.value)) && (!search || option.optionType !== "divider" && [option.label, option.value].some((text) => String(text ?? "").toLowerCase().includes(search.toLowerCase())))),
     [allOptions, selectedOnly, selected, search]
   );
-  const rows = (0, import_react12.useMemo)(() => {
+  const rows = (0, import_react14.useMemo)(() => {
     const groups = /* @__PURE__ */ new Map();
     filtered.forEach((option) => {
       const items = groups.get(option.group) ?? [];
@@ -2725,7 +3107,7 @@ function SelectionPanel({
   const virtual = filtered.length > 100;
   const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
   const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     setScrollTop(0);
     if (listRef.current) listRef.current.scrollTop = 0;
     setActive(void 0);
@@ -2749,6 +3131,7 @@ function SelectionPanel({
     onChange([...retained, ...add]);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "sia-selection-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
     showSearch && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Input,
       {
@@ -2829,445 +3212,70 @@ function SelectionPanel({
                   if (deselectedHover === option.value) setDeselectedHover(void 0);
                 },
                 onClick: (event) => {
-                  if (!event.target.closest(".sia-checkbox")) toggle(option);
-                },
-                children: multiple ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "sia-selection-panel__text", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
-                  showValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { children: String(option.value) })
-                ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "sia-selection-panel__text", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
-                  showValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { children: String(option.value) })
-                ] })
-              }
-            ) }, `${typeof option.value}-${option.value}`))
-          },
-          row.key
-        )) })
-      }
-    )
-  ] });
-}
-
-// src/components/OverflowTags.tsx
-var import_react13 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function OverflowTags({ items, maxCount, className = "", tagClassName, restClassName = "" }) {
-  const rootRef = (0, import_react13.useRef)(null);
-  const measureRef = (0, import_react13.useRef)(null);
-  const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount) || 0));
-  const [visibleCount, setVisibleCount] = (0, import_react13.useState)(0);
-  (0, import_react13.useLayoutEffect)(() => {
-    const root = rootRef.current;
-    const measure = measureRef.current;
-    if (!root || !measure) return;
-    const update = () => {
-      const gap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
-      const widths = Array.from(measure.children, (child) => child.getBoundingClientRect().width);
-      let used = 0;
-      let fitting = 0;
-      for (let count2 = 1; count2 <= limit; count2 += 1) {
-        used += widths[count2 - 1] + (count2 > 1 ? gap : 0);
-        const rest = count2 < items.length ? gap + widths[limit + count2] : 0;
-        if (used + rest <= root.clientWidth) fitting = count2;
-      }
-      setVisibleCount((previous) => previous === fitting ? previous : fitting);
-    };
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(root);
-    for (const child of measure.children) observer.observe(child);
-    return () => observer.disconnect();
-  }, [items, limit]);
-  const count = Math.min(visibleCount, limit);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
-    items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
-    items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
-      "+",
-      items.length - count
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
-      items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
-      Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
-        "+",
-        items.length - index
-      ] }, `rest-${index}`))
-    ] })
-  ] });
-}
-
-// src/components/FloatingScrollbarProvider.tsx
-var import_react15 = require("react");
-
-// src/components/useScrollbarProximity.ts
-var import_react14 = require("react");
-var users = 0;
-var cleanup;
-function useScrollbarProximity() {
-  (0, import_react14.useEffect)(() => {
-    if (users++ === 0) {
-      let frame = 0;
-      let x = -Infinity;
-      let y = -Infinity;
-      const nearby = /* @__PURE__ */ new Set();
-      const clear = () => {
-        nearby.forEach((track) => track.removeAttribute("data-scrollbar-near"));
-        nearby.clear();
-      };
-      const update = () => {
-        frame = 0;
-        const next = /* @__PURE__ */ new Set();
-        document.querySelectorAll(".sia-scrollbar-track").forEach((track) => {
-          const rect = track.getBoundingClientRect();
-          const proximity = Number.parseFloat(getComputedStyle(track).getPropertyValue("--sia-scrollbar-proximity")) || 16;
-          if (rect.width && rect.height && x >= rect.left - proximity && x <= rect.right + proximity && y >= rect.top - proximity && y <= rect.bottom + proximity) {
-            next.add(track);
-            if (!nearby.has(track)) track.setAttribute("data-scrollbar-near", "true");
-          }
-        });
-        nearby.forEach((track) => {
-          if (!next.has(track)) track.removeAttribute("data-scrollbar-near");
-        });
-        nearby.clear();
-        next.forEach((track) => nearby.add(track));
-      };
-      const move = (event) => {
-        if (event.pointerType === "touch") return;
-        x = event.clientX;
-        y = event.clientY;
-        if (!frame) frame = requestAnimationFrame(update);
-      };
-      const leave = () => {
-        x = y = -Infinity;
-        clear();
-      };
-      document.addEventListener("pointermove", move, { passive: true });
-      document.documentElement.addEventListener("pointerleave", leave);
-      window.addEventListener("blur", leave);
-      cleanup = () => {
-        if (frame) cancelAnimationFrame(frame);
-        document.removeEventListener("pointermove", move);
-        document.documentElement.removeEventListener("pointerleave", leave);
-        window.removeEventListener("blur", leave);
-        clear();
-      };
-    }
-    return () => {
-      if (--users === 0) {
-        cleanup?.();
-        cleanup = void 0;
-      }
-    };
-  }, []);
-}
-
-// src/components/FloatingScrollbarProvider.tsx
-var scrollableOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
-var clippingOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay", "hidden", "clip"]);
-function isRootScroller(target) {
-  return target === document.scrollingElement || target === document.documentElement;
-}
-function canScroll(target, axis) {
-  if (target.matches(".sia-table__viewport, [data-sia-native-scrollbar]")) return false;
-  if (isRootScroller(target)) {
-    return axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
-  }
-  const style = getComputedStyle(target);
-  const overflow = axis === "horizontal" ? style.overflowX : style.overflowY;
-  const hasOverflow = axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
-  return hasOverflow && scrollableOverflow.has(overflow);
-}
-function visibleRect(target) {
-  if (isRootScroller(target)) {
-    return { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0, width: window.innerWidth, height: window.innerHeight };
-  }
-  const ownRect = target.getBoundingClientRect();
-  let top = Math.max(0, ownRect.top);
-  let right = Math.min(window.innerWidth, ownRect.right);
-  let bottom = Math.min(window.innerHeight, ownRect.bottom);
-  let left = Math.max(0, ownRect.left);
-  let parent = target.parentElement;
-  while (parent && parent !== document.body && parent !== document.documentElement) {
-    const style = getComputedStyle(parent);
-    const clipX = clippingOverflow.has(style.overflowX);
-    const clipY = clippingOverflow.has(style.overflowY);
-    if (clipX || clipY) {
-      const rect = parent.getBoundingClientRect();
-      if (clipX) {
-        left = Math.max(left, rect.left);
-        right = Math.min(right, rect.right);
-      }
-      if (clipY) {
-        top = Math.max(top, rect.top);
-        bottom = Math.min(bottom, rect.bottom);
-      }
-    }
-    parent = parent.parentElement;
-  }
-  return {
-    top,
-    right,
-    bottom,
-    left,
-    width: Math.max(0, right - left),
-    height: Math.max(0, bottom - top)
-  };
-}
-function createTrack(axis) {
-  const track = document.createElement("div");
-  const thumb = document.createElement("div");
-  track.className = `sia-scrollbar-track sia-floating-scrollbar sia-floating-scrollbar--${axis}`;
-  thumb.className = "sia-floating-scrollbar__thumb";
-  track.dataset.axis = axis;
-  track.setAttribute("aria-hidden", "true");
-  track.append(thumb);
-  return { track, thumb };
-}
-function FloatingScrollbarProvider({ disabled = false, targetRef }) {
-  useScrollbarProximity();
-  (0, import_react15.useEffect)(() => {
-    if (disabled) return;
-    const layer = document.createElement("div");
-    layer.className = "sia-floating-scrollbar-layer";
-    layer.setAttribute("aria-hidden", "true");
-    document.body.append(layer);
-    const entries = /* @__PURE__ */ new Map();
-    let scanFrame = 0;
-    let updateFrame = 0;
-    const setEntryVisible = (entry, visible) => {
-      entry.horizontalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
-      entry.verticalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
-    };
-    const showEntry = (entry) => {
-      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
-      entry.hideTimer = null;
-      setEntryVisible(entry, true);
-    };
-    const scheduleHide = (entry, delay = 500) => {
-      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
-      entry.hideTimer = window.setTimeout(() => {
-        entry.hideTimer = null;
-        if (!entry.hoveringTarget && !entry.hoveringTrack && !entry.dragging) setEntryVisible(entry, false);
-      }, delay);
-    };
-    const updateEntry = (entry) => {
-      const { target, horizontalTrack, horizontalThumb, verticalTrack, verticalThumb } = entry;
-      const hasHorizontal = canScroll(target, "horizontal");
-      const hasVertical = canScroll(target, "vertical");
-      const rect = visibleRect(target);
-      const thickness = 10;
-      horizontalTrack.hidden = !hasHorizontal || rect.width <= thickness || rect.height <= 0;
-      verticalTrack.hidden = !hasVertical || rect.height <= thickness || rect.width <= 0;
-      if (!horizontalTrack.hidden) {
-        const trackWidth = Math.max(0, rect.width - (hasVertical ? thickness : 0));
-        const thumbWidth = Math.max(24, Math.min(trackWidth, trackWidth * target.clientWidth / target.scrollWidth));
-        const travel = Math.max(0, trackWidth - thumbWidth);
-        const maxScroll = Math.max(1, target.scrollWidth - target.clientWidth);
-        horizontalTrack.style.left = `${rect.left}px`;
-        horizontalTrack.style.top = `${rect.bottom - thickness}px`;
-        horizontalTrack.style.width = `${trackWidth}px`;
-        horizontalTrack.style.height = `${thickness}px`;
-        horizontalThumb.style.width = `${thumbWidth}px`;
-        horizontalThumb.style.transform = `translate3d(${travel * target.scrollLeft / maxScroll}px, 0, 0)`;
+                  if (!event.target.closest(".sia-checkbox")) toggle(option);
+                },
+                children: multiple ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "sia-selection-panel__text", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
+                  showValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { children: String(option.value) })
+                ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "sia-selection-panel__text", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
+                  showValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("small", { children: String(option.value) })
+                ] })
+              }
+            ) }, `${typeof option.value}-${option.value}`))
+          },
+          row.key
+        )) })
       }
-      if (!verticalTrack.hidden) {
-        const trackHeight = Math.max(0, rect.height - (hasHorizontal ? thickness : 0));
-        const thumbHeight = Math.max(24, Math.min(trackHeight, trackHeight * target.clientHeight / target.scrollHeight));
-        const travel = Math.max(0, trackHeight - thumbHeight);
-        const maxScroll = Math.max(1, target.scrollHeight - target.clientHeight);
-        verticalTrack.style.left = `${rect.right - thickness}px`;
-        verticalTrack.style.top = `${rect.top}px`;
-        verticalTrack.style.width = `${thickness}px`;
-        verticalTrack.style.height = `${trackHeight}px`;
-        verticalThumb.style.height = `${thumbHeight}px`;
-        verticalThumb.style.transform = `translate3d(0, ${travel * target.scrollTop / maxScroll}px, 0)`;
+    )
+  ] });
+}
+
+// src/components/OverflowTags.tsx
+var import_react15 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function OverflowTags({ items, maxCount, className = "", tagClassName, restClassName = "" }) {
+  const rootRef = (0, import_react15.useRef)(null);
+  const measureRef = (0, import_react15.useRef)(null);
+  const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount) || 0));
+  const [visibleCount, setVisibleCount] = (0, import_react15.useState)(0);
+  (0, import_react15.useLayoutEffect)(() => {
+    const root = rootRef.current;
+    const measure = measureRef.current;
+    if (!root || !measure) return;
+    const update = () => {
+      const gap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
+      const widths = Array.from(measure.children, (child) => child.getBoundingClientRect().width);
+      let used = 0;
+      let fitting = 0;
+      for (let count2 = 1; count2 <= limit; count2 += 1) {
+        used += widths[count2 - 1] + (count2 > 1 ? gap : 0);
+        const rest = count2 < items.length ? gap + widths[limit + count2] : 0;
+        if (used + rest <= root.clientWidth) fitting = count2;
       }
+      setVisibleCount((previous) => previous === fitting ? previous : fitting);
     };
-    const scheduleUpdateAll = () => {
-      if (updateFrame) return;
-      updateFrame = window.requestAnimationFrame(() => {
-        updateFrame = 0;
-        entries.forEach(updateEntry);
-      });
-    };
-    const bindTrackDrag = (entry, axis, track, thumb) => {
-      const target = entry.target;
-      const onTrackPointerEnter = () => {
-        entry.hoveringTrack = true;
-        showEntry(entry);
-      };
-      const onTrackPointerLeave = () => {
-        entry.hoveringTrack = false;
-        scheduleHide(entry);
-      };
-      const onTrackPointerDown = (event) => {
-        if (event.target === thumb || event.button !== 0) return;
-        event.preventDefault();
-        event.stopPropagation();
-        const trackRect = track.getBoundingClientRect();
-        const thumbRect = thumb.getBoundingClientRect();
-        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
-        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
-        const pointer = axis === "vertical" ? event.clientY - trackRect.top : event.clientX - trackRect.left;
-        const ratio = Math.max(0, Math.min(1, (pointer - thumbLength / 2) / Math.max(1, trackLength - thumbLength)));
-        if (axis === "vertical") target.scrollTop = ratio * (target.scrollHeight - target.clientHeight);
-        else target.scrollLeft = ratio * (target.scrollWidth - target.clientWidth);
-      };
-      const onThumbPointerDown = (event) => {
-        if (event.button !== 0) return;
-        event.preventDefault();
-        event.stopPropagation();
-        entry.dragging = true;
-        showEntry(entry);
-        thumb.setPointerCapture(event.pointerId);
-        const startPointer = axis === "vertical" ? event.clientY : event.clientX;
-        const startScroll = axis === "vertical" ? target.scrollTop : target.scrollLeft;
-        const trackRect = track.getBoundingClientRect();
-        const thumbRect = thumb.getBoundingClientRect();
-        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
-        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
-        const maxScroll = axis === "vertical" ? target.scrollHeight - target.clientHeight : target.scrollWidth - target.clientWidth;
-        const travel = Math.max(1, trackLength - thumbLength);
-        const onPointerMove = (moveEvent) => {
-          if (moveEvent.pointerId !== event.pointerId) return;
-          const pointer = axis === "vertical" ? moveEvent.clientY : moveEvent.clientX;
-          const nextScroll = startScroll + (pointer - startPointer) * maxScroll / travel;
-          if (axis === "vertical") target.scrollTop = nextScroll;
-          else target.scrollLeft = nextScroll;
-        };
-        const onPointerUp = (upEvent) => {
-          if (upEvent.pointerId !== event.pointerId) return;
-          entry.dragging = false;
-          thumb.releasePointerCapture(event.pointerId);
-          window.removeEventListener("pointermove", onPointerMove);
-          window.removeEventListener("pointerup", onPointerUp);
-          window.removeEventListener("pointercancel", onPointerUp);
-          scheduleHide(entry);
-        };
-        window.addEventListener("pointermove", onPointerMove);
-        window.addEventListener("pointerup", onPointerUp);
-        window.addEventListener("pointercancel", onPointerUp);
-      };
-      track.addEventListener("pointerenter", onTrackPointerEnter);
-      track.addEventListener("pointerleave", onTrackPointerLeave);
-      track.addEventListener("pointerdown", onTrackPointerDown);
-      thumb.addEventListener("pointerdown", onThumbPointerDown);
-      return () => {
-        track.removeEventListener("pointerenter", onTrackPointerEnter);
-        track.removeEventListener("pointerleave", onTrackPointerLeave);
-        track.removeEventListener("pointerdown", onTrackPointerDown);
-        thumb.removeEventListener("pointerdown", onThumbPointerDown);
-      };
-    };
-    const resizeObserver = new ResizeObserver((observedEntries) => {
-      observedEntries.forEach(({ target }) => {
-        const entry = entries.get(target);
-        if (entry) updateEntry(entry);
-      });
-    });
-    const addTarget = (target) => {
-      if (entries.has(target)) return;
-      const horizontal = createTrack("horizontal");
-      const vertical = createTrack("vertical");
-      layer.append(horizontal.track, vertical.track);
-      const onPointerEnter = () => {
-        const entry2 = entries.get(target);
-        if (!entry2) return;
-        entry2.hoveringTarget = true;
-        showEntry(entry2);
-      };
-      const onPointerLeave = () => {
-        const entry2 = entries.get(target);
-        if (!entry2) return;
-        entry2.hoveringTarget = false;
-        scheduleHide(entry2);
-      };
-      const onScroll = () => {
-        const entry2 = entries.get(target);
-        if (!entry2) return;
-        updateEntry(entry2);
-        showEntry(entry2);
-        scheduleHide(entry2, 700);
-      };
-      target.addEventListener("pointerenter", onPointerEnter);
-      target.addEventListener("pointerleave", onPointerLeave);
-      target.addEventListener("scroll", onScroll, { passive: true });
-      const entry = {
-        target,
-        horizontalTrack: horizontal.track,
-        horizontalThumb: horizontal.thumb,
-        verticalTrack: vertical.track,
-        verticalThumb: vertical.thumb,
-        hideTimer: null,
-        hoveringTarget: target.matches(":hover"),
-        hoveringTrack: false,
-        dragging: false,
-        cleanup: () => void 0
-      };
-      const cleanupHorizontal = bindTrackDrag(entry, "horizontal", horizontal.track, horizontal.thumb);
-      const cleanupVertical = bindTrackDrag(entry, "vertical", vertical.track, vertical.thumb);
-      entry.cleanup = () => {
-        if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
-        cleanupHorizontal();
-        cleanupVertical();
-        target.removeEventListener("pointerenter", onPointerEnter);
-        target.removeEventListener("pointerleave", onPointerLeave);
-        target.removeEventListener("scroll", onScroll);
-        resizeObserver.unobserve(target);
-        target.removeAttribute("data-sia-floating-scrollbar");
-        horizontal.track.remove();
-        vertical.track.remove();
-      };
-      entries.set(target, entry);
-      target.setAttribute("data-sia-floating-scrollbar", "");
-      resizeObserver.observe(target);
-      updateEntry(entry);
-      if (entry.hoveringTarget) showEntry(entry);
-    };
-    const removeTarget = (target) => {
-      const entry = entries.get(target);
-      if (!entry) return;
-      entry.cleanup();
-      entries.delete(target);
-    };
-    const scanTargets = () => {
-      scanFrame = 0;
-      const candidates = (targetRef ? [targetRef.current] : [document.scrollingElement, ...document.querySelectorAll("*")]).filter((target) => target instanceof HTMLElement);
-      const nextTargets = /* @__PURE__ */ new Set();
-      candidates.forEach((target) => {
-        if (canScroll(target, "horizontal") || canScroll(target, "vertical")) {
-          nextTargets.add(target);
-          if (entries.has(target) || !target.hasAttribute("data-sia-floating-scrollbar")) addTarget(target);
-        }
-      });
-      entries.forEach((_entry, target) => {
-        if (!target.isConnected || !nextTargets.has(target)) removeTarget(target);
-        else updateEntry(_entry);
-      });
-    };
-    const scheduleScan = () => {
-      if (scanFrame) return;
-      scanFrame = window.requestAnimationFrame(scanTargets);
-    };
-    const mutationObserver = new MutationObserver((mutations) => {
-      if (mutations.some((mutation) => !layer.contains(mutation.target))) scheduleScan();
-    });
-    mutationObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true });
-    window.addEventListener("resize", scheduleScan);
-    window.addEventListener("scroll", scheduleUpdateAll, true);
-    scheduleScan();
-    return () => {
-      mutationObserver.disconnect();
-      resizeObserver.disconnect();
-      window.removeEventListener("resize", scheduleScan);
-      window.removeEventListener("scroll", scheduleUpdateAll, true);
-      if (scanFrame) window.cancelAnimationFrame(scanFrame);
-      if (updateFrame) window.cancelAnimationFrame(updateFrame);
-      entries.forEach((entry) => entry.cleanup());
-      entries.clear();
-      layer.remove();
-    };
-  }, [disabled, targetRef]);
-  return null;
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(root);
+    for (const child of measure.children) observer.observe(child);
+    return () => observer.disconnect();
+  }, [items, limit]);
+  const count = Math.min(visibleCount, limit);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
+    items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
+    items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
+      "+",
+      items.length - count
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
+      items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
+      Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
+        "+",
+        items.length - index
+      ] }, `rest-${index}`))
+    ] })
+  ] });
 }
 
 // src/components/Select.tsx
@@ -3332,6 +3340,8 @@ var Select = (0, import_react16.forwardRef)(function Select2({
   const [query, setQuery] = (0, import_react16.useState)("");
   const [activeIndex, setActiveIndex] = (0, import_react16.useState)(-1);
   const [scrollTop, setScrollTop] = (0, import_react16.useState)(0);
+  const [dropdownFontSize, setDropdownFontSize] = (0, import_react16.useState)();
+  const pendingSelectedScroll = (0, import_react16.useRef)(false);
   const deferredQuery = (0, import_react16.useDeferredValue)(query.trim());
   const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
   const [currentValue, setCurrentValue] = useControllableState({
@@ -3389,10 +3399,31 @@ var Select = (0, import_react16.forwardRef)(function Select2({
   (0, import_react16.useEffect)(() => {
     if (disabled || loading) closeDropdown();
   }, [disabled, loading]);
+  (0, import_react16.useEffect)(() => {
+    if (!open || popupMode !== "dropdown" || !pendingSelectedScroll.current || query) return;
+    const index = filteredOptions.findIndex((option) => selectedValueSet.has(option.value));
+    if (index < 0) return;
+    const frame = requestAnimationFrame(() => {
+      const list = listRef.current;
+      if (!list) return;
+      const item = virtualEnabled ? null : list.querySelectorAll('[role="option"]')[index];
+      const top = virtualEnabled ? index * optionHeight : item ? item.getBoundingClientRect().top - list.getBoundingClientRect().top + list.scrollTop : 0;
+      list.scrollTop = Math.max(0, top - (list.clientHeight - (item?.offsetHeight ?? optionHeight)) / 2);
+      setScrollTop(list.scrollTop);
+      pendingSelectedScroll.current = false;
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open, popupMode, filteredOptions, selectedValueSet, virtualEnabled, optionHeight, query]);
+  (0, import_react16.useLayoutEffect)(() => {
+    if (!open || popupMode !== "dropdown") return;
+    const trigger = rootRef.current?.querySelector(".sia-select__trigger");
+    if (trigger) setDropdownFontSize(getComputedStyle(trigger).fontSize);
+  }, [open, popupMode, size]);
   function firstEnabledIndex() {
     return filteredOptions.findIndex((option) => !option.disabled);
   }
   function closeDropdown() {
+    pendingSelectedScroll.current = false;
     setOpen(false);
     setQuery("");
     setScrollTop(0);
@@ -3417,6 +3448,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
   }
   function openDropdown() {
     if (disabled || loading) return;
+    pendingSelectedScroll.current = true;
     setOpenedMode(automaticMode);
     const selectedIndex = filteredOptions.findIndex((option) => selectedValueSet.has(option.value) && !option.disabled);
     setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex());
@@ -3591,7 +3623,7 @@ var Select = (0, import_react16.forwardRef)(function Select2({
       }
     ),
     allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && popupMode === "dropdown", className: `sia-select__dropdown${filteredOptions.length === 0 && !canSubmitInput ? " sia-select__dropdown--empty" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && popupMode === "dropdown", style: { fontSize: dropdownFontSize }, className: `sia-select__dropdown${filteredOptions.length === 0 && !canSubmitInput ? " sia-select__dropdown--empty" : ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
       showSearch || allowInput ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "sia-select__search", children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "search", size: 15 }),