@sia.soul/sia-react-ui 0.1.0

package/dist/chunk-34TTF4Y7.js

@@ -0,0 +1,812 @@
+import {
+  Select
+} from "./chunk-JKZGAZMB.js";
+import {
+  Icon,
+  PopupPortal,
+  useControllableState
+} from "./chunk-YCVXUMGP.js";
+
+// src/components/DatePicker.tsx
+import { useEffect, useId, useMemo, useRef as useRef2, useState } from "react";
+
+// src/components/DatePickerPanel.tsx
+import { useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "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) {
+  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 : {};
+  return withTime(day, timePart(value, config.defaultValue ?? "00:00:00"), 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__ */ jsxs("div", { className: "sia-date-panel__month", children: [
+    /* @__PURE__ */ jsx("div", { className: "sia-date-panel__weekdays", "aria-hidden": "true", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx("span", { children: day }, day)) }),
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "sia-date-panel__header", children: [
+    /* @__PURE__ */ jsxs("span", { className: "sia-date-panel__nav", children: [
+      onPreviousYear ? /* @__PURE__ */ jsxs("button", { type: "button", "aria-label": "\u4E0A\u4E00\u5E74", onClick: onPreviousYear, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 13 }),
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 13 })
+      ] }) : null,
+      onPreviousMonth ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "\u4E0A\u4E2A\u6708", onClick: onPreviousMonth, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 15 }) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("strong", { children: [
+      label ? /* @__PURE__ */ jsx("small", { children: label }) : null,
+      /* @__PURE__ */ jsxs("span", { children: [
+        month.getFullYear(),
+        "\u5E74\xA0 ",
+        month.getMonth() + 1,
+        "\u6708"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "sia-date-panel__nav", children: [
+      onNextMonth ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "\u4E0B\u4E2A\u6708", onClick: onNextMonth, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 15 }) }) : null,
+      onNextYear ? /* @__PURE__ */ jsxs("button", { type: "button", "aria-label": "\u4E0B\u4E00\u5E74", onClick: onNextYear, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 13 }),
+        /* @__PURE__ */ 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 = useRef(null);
+  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];
+    values[index] = next;
+    onChange(values.join(":"));
+  }
+  return /* @__PURE__ */ jsxs("aside", { className: "sia-date-panel__time", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsxs("strong", { children: [
+      use12Hours ? pad(Number(hour) % 12 || 12) : hour,
+      ":",
+      minute,
+      showSecond ? `:${second}` : "",
+      use12Hours ? Number(hour) < 12 ? " AM" : " PM" : ""
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: columnsRef, className: "sia-date-panel__time-columns", children: columns.map((column) => /* @__PURE__ */ jsx("div", { 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;
+      return /* @__PURE__ */ jsx("button", { type: "button", role: "option", disabled: disabledTime?.(candidate.join(":")), "aria-selected": next === column.value, className: next === column.value ? "is-selected" : "", onKeyDown: (event) => {
+        if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+        event.preventDefault();
+        const buttons = Array.from(event.currentTarget.parentElement.querySelectorAll("button:not(:disabled)"));
+        const position = buttons.indexOf(event.currentTarget);
+        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)) })
+  ] });
+}
+function DatePanelFooter({
+  showToday = true,
+  needConfirm = false,
+  disabledConfirm = false,
+  confirmText = "\u786E\u5B9A",
+  extra,
+  onToday,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsxs("footer", { className: "sia-date-panel__footer", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      showToday ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onToday, children: "\u4ECA\u5929" }) : null,
+      extra
+    ] }),
+    needConfirm ? /* @__PURE__ */ jsx("button", { type: "button", className: "sia-date-panel__confirm", disabled: disabledConfirm, onClick: onConfirm, children: confirmText }) : null
+  ] });
+}
+
+// src/components/DatePicker.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatWeek(date) {
+  const target = new Date(date);
+  target.setHours(0, 0, 0, 0);
+  target.setDate(target.getDate() + 3 - (target.getDay() + 6) % 7);
+  const firstThursday = new Date(target.getFullYear(), 0, 4);
+  const week = 1 + Math.round(((target.getTime() - firstThursday.getTime()) / 864e5 - 3 + (firstThursday.getDay() + 6) % 7) / 7);
+  return `${target.getFullYear()}-W${String(week).padStart(2, "0")}`;
+}
+function formatPickerValue(day, picker) {
+  const date = parseDate(day);
+  if (!date) return day;
+  if (picker === "month") return day.slice(0, 7);
+  if (picker === "year") return day.slice(0, 4);
+  if (picker === "quarter") return `${day.slice(0, 4)}-Q${Math.floor(date.getMonth() / 3) + 1}`;
+  if (picker === "week") return formatWeek(date);
+  return day;
+}
+function dayFromValue(value) {
+  if (!value) return "";
+  if (/^\d{4}-\d{2}-\d{2}/.test(value)) return value.slice(0, 10);
+  if (/^\d{4}-\d{2}$/.test(value)) return `${value}-01`;
+  if (/^\d{4}-Q[1-4]$/.test(value)) return `${value.slice(0, 4)}-${String((Number(value.slice(-1)) - 1) * 3 + 1).padStart(2, "0")}-01`;
+  if (/^\d{4}$/.test(value)) return `${value}-01-01`;
+  return "";
+}
+function placeholderFor(picker, showTime, multiple) {
+  if (multiple) return "\u8BF7\u9009\u62E9\u591A\u4E2A\u65E5\u671F";
+  if (picker === "month") return "\u8BF7\u9009\u62E9\u6708\u4EFD";
+  if (picker === "year") return "\u8BF7\u9009\u62E9\u5E74\u4EFD";
+  if (picker === "quarter") return "\u8BF7\u9009\u62E9\u5B63\u5EA6";
+  if (picker === "week") return "\u8BF7\u9009\u62E9\u5468";
+  return showTime ? "\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4" : "\u8BF7\u9009\u62E9\u65E5\u671F";
+}
+function showSecondFrom(showTime) {
+  return Boolean(typeof showTime === "object" && showTime.showSecond);
+}
+function defaultTimeFrom(showTime) {
+  return typeof showTime === "object" ? showTime.defaultValue ?? "00:00:00" : "00:00:00";
+}
+function resolvePreset(value) {
+  return typeof value === "function" ? value() : value;
+}
+function resolveRangePreset(value) {
+  return typeof value === "function" ? value() : value;
+}
+function DatePicker({
+  value,
+  defaultValue,
+  picker = "date",
+  size = "medium",
+  status = "default",
+  allowClear = true,
+  multiple = false,
+  needConfirm,
+  showTime = false,
+  showToday = true,
+  open,
+  defaultOpen = false,
+  suffixIcon,
+  minDate,
+  maxDate,
+  presets,
+  disabledDate,
+  disabled,
+  className = "",
+  onChange,
+  onOpenChange,
+  placeholder,
+  ...props
+}) {
+  const id = useId();
+  const rootRef = useRef2(null);
+  const popupRef = useRef2(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] = useState(currentValue);
+  const firstCurrent = Array.isArray(currentValue) ? currentValue[0] : currentValue;
+  const [viewMonth, setViewMonth] = useState(() => startOfMonth(parseDate(dayFromValue(firstCurrent)) ?? /* @__PURE__ */ new Date()));
+  const [draftTime, setDraftTime] = useState(() => timePart(firstCurrent, defaultTimeFrom(showTime)));
+  const resolvedNeedConfirm = needConfirm ?? Boolean(showTime);
+  const showSecond = showSecondFrom(showTime);
+  const selectedDates = useMemo(() => {
+    const values = Array.isArray(draftValue) ? draftValue : draftValue ? [draftValue] : [];
+    return values.map(dayFromValue).filter(Boolean);
+  }, [draftValue]);
+  useEffect(() => {
+    if (!visible) return void 0;
+    const close = (event) => {
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !popupRef.current?.contains(target)) setVisible(false);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [setVisible, visible]);
+  function changeOpen(next) {
+    if (next) {
+      setDraftValue(currentValue);
+      const current = Array.isArray(currentValue) ? currentValue[0] : currentValue;
+      setViewMonth(startOfMonth(parseDate(dayFromValue(current)) ?? /* @__PURE__ */ new Date()));
+      setDraftTime(timePart(current, defaultTimeFrom(showTime)));
+    }
+    setVisible(next);
+  }
+  function isDisabled(day) {
+    const minimum = minDate ?? props.min;
+    const maximum = maxDate ?? props.max;
+    if (minimum && day < String(minimum).slice(0, 10)) return true;
+    if (maximum && day > String(maximum).slice(0, 10)) return true;
+    return disabledDate?.(day, { type: "date" }) ?? false;
+  }
+  function buildValue(day) {
+    const picked = formatPickerValue(day, picker);
+    return showTime && picker === "date" ? withTime(picked, draftTime, showSecond) : picked;
+  }
+  function selectDate(day) {
+    if (isDisabled(day)) return;
+    const nextValue = buildValue(day);
+    if (multiple) {
+      const current = Array.isArray(draftValue) ? [...draftValue] : [];
+      const exists = current.some((item) => dayFromValue(item) === day);
+      const next = exists ? current.filter((item) => dayFromValue(item) !== day) : [...current, nextValue];
+      setDraftValue(next);
+      if (!resolvedNeedConfirm) setCurrentValue(next);
+      return;
+    }
+    setDraftValue(nextValue);
+    if (!resolvedNeedConfirm) {
+      setCurrentValue(nextValue);
+      changeOpen(false);
+    }
+  }
+  function commitDraft() {
+    setCurrentValue(draftValue);
+    changeOpen(false);
+  }
+  function clearValue(event) {
+    event.stopPropagation();
+    const empty = multiple ? [] : "";
+    setDraftValue(empty);
+    setCurrentValue(empty);
+  }
+  const display = Array.isArray(currentValue) ? currentValue.join("\u3001") : currentValue;
+  const triggerLabel = props["aria-label"] ?? (typeof placeholder === "string" ? placeholder : "\u65E5\u671F\u9009\u62E9\u5668");
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: `sia-picker sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        id: props.id ?? id,
+        className: "sia-picker__trigger",
+        "aria-label": triggerLabel,
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-haspopup": "dialog",
+        "aria-expanded": visible,
+        "aria-invalid": status === "error" || void 0,
+        "aria-describedby": props["aria-describedby"],
+        "aria-errormessage": props["aria-errormessage"],
+        disabled,
+        onClick: () => changeOpen(!visible),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            changeOpen(true);
+          } else if (event.key === "Escape") changeOpen(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: `sia-picker__value${display ? "" : " is-placeholder"}`, children: display || placeholder || placeholderFor(picker, showTime, multiple) }),
+          allowClear && display && !disabled ? /* @__PURE__ */ jsx2("span", { role: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F", onClick: clearValue, children: /* @__PURE__ */ jsx2(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
+          /* @__PURE__ */ jsx2("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ jsx2(Icon, { name: "calendar", size: 16 }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel${showTime ? " sia-date-panel--with-time" : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u9009\u62E9\u9762\u677F", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "sia-date-panel__body", children: [
+        presets?.length ? /* @__PURE__ */ jsx2("aside", { className: "sia-date-panel__presets", children: presets.map((preset, index) => /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => {
+          const next = resolvePreset(preset.value);
+          setDraftValue(next);
+          if (!resolvedNeedConfirm) {
+            setCurrentValue(next);
+            changeOpen(false);
+          }
+        }, children: preset.label }, index)) }) : null,
+        /* @__PURE__ */ jsxs2("section", { className: "sia-date-panel__calendar", children: [
+          /* @__PURE__ */ jsx2(
+            CalendarHeader,
+            {
+              month: viewMonth,
+              onPreviousYear: () => setViewMonth(addMonths(viewMonth, -12)),
+              onPreviousMonth: () => setViewMonth(addMonths(viewMonth, -1)),
+              onNextMonth: () => setViewMonth(addMonths(viewMonth, 1)),
+              onNextYear: () => setViewMonth(addMonths(viewMonth, 12))
+            }
+          ),
+          /* @__PURE__ */ jsx2(CalendarMonth, { month: viewMonth, selectedDates, disabledDate: isDisabled, onSelect: selectDate })
+        ] }),
+        showTime ? /* @__PURE__ */ jsx2(TimePanel, { value: draftTime, showSecond, onChange: (next) => {
+          setDraftTime(next);
+          if (typeof draftValue === "string" && draftValue) setDraftValue(withTime(dayFromValue(draftValue), next, showSecond));
+        } }) : null
+      ] }),
+      /* @__PURE__ */ jsx2(
+        DatePanelFooter,
+        {
+          showToday,
+          needConfirm: resolvedNeedConfirm,
+          disabledConfirm: Array.isArray(draftValue) ? draftValue.length === 0 : !draftValue,
+          onToday: () => selectDate(dateKey(/* @__PURE__ */ new Date())),
+          onConfirm: commitDraft
+        }
+      )
+    ] })
+  ] });
+}
+function DateRangePicker({
+  value,
+  defaultValue = ["", ""],
+  placeholder = ["\u5F00\u59CB\u65E5\u671F", "\u7ED3\u675F\u65E5\u671F"],
+  separator = "\u2192",
+  presets,
+  maxRangeDays,
+  size = "medium",
+  status = "default",
+  allowClear = true,
+  needConfirm,
+  showTime = false,
+  showToday = true,
+  open,
+  defaultOpen = false,
+  suffixIcon,
+  minDate,
+  maxDate,
+  disabledDate,
+  disabled,
+  className = "",
+  onCalendarChange,
+  onChange,
+  onOpenChange,
+  ...props
+}) {
+  const id = useId();
+  const rootRef = useRef2(null);
+  const popupRef = useRef2(null);
+  const [currentValue, setCurrentValue] = useControllableState({ value, defaultValue, onChange });
+  const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
+  const [draftValue, setDraftValue] = useState(currentValue);
+  const [activeIndex, setActiveIndex] = useState(currentValue[0] && !currentValue[1] ? 1 : 0);
+  const [hoverDate, setHoverDate] = useState("");
+  const [viewMonth, setViewMonth] = useState(() => startOfMonth(parseDate(dayFromValue(currentValue[0] || currentValue[1])) ?? /* @__PURE__ */ new Date()));
+  const [endViewMonth, setEndViewMonth] = useState(() => startOfMonth(parseDate(dayFromValue(currentValue[1])) ?? addMonths(parseDate(dayFromValue(currentValue[0])) ?? /* @__PURE__ */ new Date(), 1)));
+  const [compactDateTime, setCompactDateTime] = useState(false);
+  const showSecond = showSecondFrom(showTime);
+  const defaultTime = defaultTimeFrom(showTime);
+  const [times, setTimes] = useState([
+    timePart(currentValue[0], defaultTime),
+    timePart(currentValue[1], defaultTime)
+  ]);
+  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]);
+  useEffect(() => {
+    if (!showTime || typeof document === "undefined") {
+      setCompactDateTime(false);
+      return void 0;
+    }
+    const updateLayout = () => {
+      const pairedPanelWidth = 2 * (280 + (showSecond ? 144 : 96) + 1) + 3;
+      setCompactDateTime(document.documentElement.clientWidth < pairedPanelWidth + 16);
+    };
+    updateLayout();
+    window.addEventListener("resize", updateLayout);
+    return () => window.removeEventListener("resize", updateLayout);
+  }, [showSecond, showTime]);
+  useEffect(() => {
+    if (!visible) return void 0;
+    const close = (event) => {
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !popupRef.current?.contains(target)) setVisible(false);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [setVisible, visible]);
+  function changeOpen(next) {
+    if (next) {
+      setDraftValue(currentValue);
+      setTimes([timePart(currentValue[0], defaultTime), timePart(currentValue[1], defaultTime)]);
+      setActiveIndex(currentValue[0] && !currentValue[1] ? 1 : 0);
+      const nextStartMonth = startOfMonth(parseDate(dayFromValue(currentValue[0] || currentValue[1])) ?? /* @__PURE__ */ new Date());
+      setViewMonth(nextStartMonth);
+      setEndViewMonth(startOfMonth(parseDate(dayFromValue(currentValue[1])) ?? addMonths(nextStartMonth, 1)));
+    }
+    setVisible(next);
+  }
+  function isDisabled(day, index = activeIndex, pairedDateTime = false) {
+    const minimum = minDate ?? props.min;
+    const maximum = maxDate ?? props.max;
+    if (minimum && day < String(minimum).slice(0, 10)) return true;
+    if (maximum && day > String(maximum).slice(0, 10)) return true;
+    const from = index === 1 ? rangeDates[0] : void 0;
+    if (pairedDateTime) {
+      const otherEndpoint = index === 0 ? rangeDates[1] : rangeDates[0];
+      if (index === 0 && otherEndpoint && day > otherEndpoint) return true;
+      if (index === 1 && otherEndpoint && day < otherEndpoint) return true;
+      if (otherEndpoint && maxRangeDays && Math.abs(daysBetween(otherEndpoint, day)) >= maxRangeDays) return true;
+    } else if (from && maxRangeDays && Math.abs(daysBetween(from, day)) >= maxRangeDays) return true;
+    return disabledDate?.(day, { from, type: "date" }) ?? false;
+  }
+  function buildRangeValue(day, index) {
+    return showTime ? withTime(day, times[index], showSecond) : day;
+  }
+  function updateDraft(next) {
+    setDraftValue(next);
+    onCalendarChange?.(next);
+  }
+  function selectDate(day) {
+    if (isDisabled(day)) return;
+    if (activeIndex === 0 || !rangeDates[0] || rangeDates[1]) {
+      const next = [buildRangeValue(day, 0), ""];
+      updateDraft(next);
+      setActiveIndex(1);
+      setHoverDate("");
+      return;
+    }
+    const startDay = rangeDates[0];
+    const ordered = day < startDay ? [buildRangeValue(day, 0), buildRangeValue(startDay, 1)] : [draftValue[0], buildRangeValue(day, 1)];
+    updateDraft(ordered);
+    setActiveIndex(0);
+    setHoverDate("");
+    if (!resolvedNeedConfirm) {
+      setCurrentValue(ordered);
+      changeOpen(false);
+    }
+  }
+  function selectDateTime(day, index) {
+    if (isDisabled(day, index, true)) return;
+    const nextValue = [...draftValue];
+    nextValue[index] = buildRangeValue(day, index);
+    updateDraft(nextValue);
+    setHoverDate("");
+    if (!resolvedNeedConfirm && compactDateTime && index === 0) {
+      setActiveIndex(1);
+      setEndViewMonth(startOfMonth(parseDate(day) ?? /* @__PURE__ */ new Date()));
+      return;
+    }
+    setActiveIndex(index);
+    if (!resolvedNeedConfirm && nextValue[0] && nextValue[1] && nextValue[0] <= nextValue[1]) {
+      setCurrentValue(nextValue);
+      changeOpen(false);
+    }
+  }
+  function changeTime(index, nextTime) {
+    const nextTimes = [...times];
+    nextTimes[index] = nextTime;
+    setTimes(nextTimes);
+    setActiveIndex(index);
+    if (draftValue[index]) {
+      const nextValue = [...draftValue];
+      nextValue[index] = withTime(dayFromValue(draftValue[index]), nextTime, showSecond);
+      updateDraft(nextValue);
+    }
+  }
+  function confirm() {
+    if (compactDateTime && showTime && activeIndex === 0) {
+      if (!draftValue[0]) return;
+      setActiveIndex(1);
+      setEndViewMonth(startOfMonth(parseDate(dayFromValue(draftValue[1] || draftValue[0])) ?? /* @__PURE__ */ new Date()));
+      setHoverDate("");
+      return;
+    }
+    if (!draftValue[0] || !draftValue[1] || invalidDateTimeRange) return;
+    setCurrentValue(draftValue);
+    changeOpen(false);
+  }
+  function applyPreset(preset) {
+    const raw = resolveRangePreset(preset.value);
+    const next = [
+      normalizeDateValue(raw[0], showTime),
+      normalizeDateValue(raw[1], showTime)
+    ];
+    updateDraft(next);
+    setTimes([timePart(next[0], defaultTime), timePart(next[1], defaultTime)]);
+    const nextStartMonth = startOfMonth(parseDate(dayFromValue(next[0] || next[1])) ?? /* @__PURE__ */ new Date());
+    setViewMonth(nextStartMonth);
+    setEndViewMonth(startOfMonth(parseDate(dayFromValue(next[1])) ?? addMonths(nextStartMonth, 1)));
+    if (!resolvedNeedConfirm) {
+      setCurrentValue(next);
+      changeOpen(false);
+    }
+  }
+  function clearValue(event) {
+    event.stopPropagation();
+    const empty = ["", ""];
+    updateDraft(empty);
+    setCurrentValue(empty);
+    setActiveIndex(0);
+  }
+  function renderDateTimeGroup(index) {
+    const month = index === 0 ? viewMonth : endViewMonth;
+    const setMonth = index === 0 ? setViewMonth : setEndViewMonth;
+    const endpointLabel = index === 0 ? "\u5F00\u59CB" : "\u7ED3\u675F";
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: `sia-date-panel__range-date-time-group${activeIndex === index ? " is-active" : ""}`,
+        "aria-label": `${endpointLabel}\u65E5\u671F\u65F6\u95F4`,
+        children: [
+          /* @__PURE__ */ jsxs2("section", { className: "sia-date-panel__calendar", children: [
+            /* @__PURE__ */ jsx2(
+              CalendarHeader,
+              {
+                month,
+                label: endpointLabel,
+                range: true,
+                onPreviousYear: () => setMonth(addMonths(month, -12)),
+                onPreviousMonth: () => setMonth(addMonths(month, -1)),
+                onNextMonth: () => setMonth(addMonths(month, 1)),
+                onNextYear: () => setMonth(addMonths(month, 12))
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              CalendarMonth,
+              {
+                month,
+                range: rangeDates,
+                disabledDate: (day) => isDisabled(day, index, true),
+                onSelect: (day) => selectDateTime(day, index)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2(
+            TimePanel,
+            {
+              value: times[index],
+              showSecond,
+              ariaLabel: `${endpointLabel}\u65F6\u95F4`,
+              onChange: (nextTime) => changeTime(index, nextTime)
+            }
+          )
+        ]
+      },
+      endpointLabel
+    );
+  }
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: `sia-picker sia-picker-range-control sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        id: props.id ?? id,
+        className: "sia-picker__trigger",
+        "aria-label": props["aria-label"] ?? "\u65E5\u671F\u8303\u56F4\u9009\u62E9\u5668",
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-haspopup": "dialog",
+        "aria-expanded": visible,
+        "aria-invalid": status === "error" || void 0,
+        "aria-describedby": props["aria-describedby"],
+        "aria-errormessage": props["aria-errormessage"],
+        disabled,
+        onClick: () => changeOpen(!visible),
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: `sia-picker-range-control__value${currentValue[0] ? "" : " is-placeholder"}`, children: currentValue[0] || placeholder[0] }),
+          /* @__PURE__ */ jsx2("span", { className: "sia-picker-range-control__separator", children: separator }),
+          /* @__PURE__ */ jsx2("span", { className: `sia-picker-range-control__value${currentValue[1] ? "" : " is-placeholder"}`, children: currentValue[1] || placeholder[1] }),
+          allowClear && (currentValue[0] || currentValue[1]) && !disabled ? /* @__PURE__ */ jsx2("span", { role: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F\u8303\u56F4", onClick: clearValue, children: /* @__PURE__ */ jsx2(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
+          /* @__PURE__ */ jsx2("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ jsx2(Icon, { name: "calendar", size: 16 }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel sia-date-panel--range${showTime ? ` sia-date-panel--with-time sia-date-panel--range-time-${compactDateTime ? "compact" : "paired"}` : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u8303\u56F4\u9009\u62E9\u9762\u677F", children: [
+      /* @__PURE__ */ jsx2("div", { className: "sia-date-panel__body", children: showTime ? /* @__PURE__ */ jsx2("div", { className: "sia-date-panel__range-date-time", children: compactDateTime ? renderDateTimeGroup(activeIndex) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        renderDateTimeGroup(0),
+        renderDateTimeGroup(1)
+      ] }) }) : /* @__PURE__ */ jsxs2("div", { className: "sia-date-panel__range-calendars", children: [
+        /* @__PURE__ */ jsxs2("section", { className: "sia-date-panel__calendar", children: [
+          /* @__PURE__ */ jsx2(
+            CalendarHeader,
+            {
+              month: viewMonth,
+              range: true,
+              onPreviousYear: () => setViewMonth(addMonths(viewMonth, -12)),
+              onPreviousMonth: () => setViewMonth(addMonths(viewMonth, -1))
+            }
+          ),
+          /* @__PURE__ */ jsx2(CalendarMonth, { month: viewMonth, range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
+        ] }),
+        /* @__PURE__ */ jsxs2("section", { className: "sia-date-panel__calendar", children: [
+          /* @__PURE__ */ jsx2(
+            CalendarHeader,
+            {
+              month: addMonths(viewMonth, 1),
+              range: true,
+              onNextMonth: () => setViewMonth(addMonths(viewMonth, 1)),
+              onNextYear: () => setViewMonth(addMonths(viewMonth, 12))
+            }
+          ),
+          /* @__PURE__ */ jsx2(CalendarMonth, { month: addMonths(viewMonth, 1), range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx2(
+        DatePanelFooter,
+        {
+          showToday: showToday && !presets?.length,
+          needConfirm: resolvedNeedConfirm,
+          disabledConfirm: compactDateTime && showTime && activeIndex === 0 ? !draftValue[0] : !draftValue[0] || !draftValue[1] || invalidDateTimeRange,
+          confirmText: compactDateTime && showTime && activeIndex === 0 ? "\u4E0B\u4E00\u6B65" : "\u786E\u5B9A",
+          extra: /* @__PURE__ */ jsxs2(Fragment, { children: [
+            presets?.map((preset, index) => /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => applyPreset(preset), children: preset.label }, index)),
+            compactDateTime && showTime && activeIndex === 1 ? /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => {
+              setActiveIndex(0);
+              setViewMonth(startOfMonth(parseDate(dayFromValue(draftValue[0])) ?? /* @__PURE__ */ new Date()));
+            }, children: "\u4E0A\u4E00\u6B65" }) : null,
+            invalidDateTimeRange ? /* @__PURE__ */ jsx2("small", { className: "sia-date-panel__range-error", children: "\u7ED3\u675F\u65F6\u95F4\u4E0D\u80FD\u65E9\u4E8E\u5F00\u59CB\u65F6\u95F4" }) : maxRangeDays ? /* @__PURE__ */ jsxs2("small", { children: [
+              "\u6700\u591A\u9009\u62E9 ",
+              maxRangeDays,
+              " \u5929"
+            ] }) : null
+          ] }),
+          onToday: () => showTime ? selectDateTime(dateKey(/* @__PURE__ */ new Date()), activeIndex) : selectDate(dateKey(/* @__PURE__ */ new Date())),
+          onConfirm: confirm
+        }
+      )
+    ] })
+  ] });
+}
+((DatePicker2) => {
+  DatePicker2.RangePicker = DateRangePicker;
+})(DatePicker || (DatePicker = {}));
+
+// src/components/SelectDateRange.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SelectDateRange({
+  options,
+  value,
+  defaultValue,
+  selectPlaceholder = "\u8BF7\u9009\u62E9\u7C7B\u578B",
+  selectWidth = 180,
+  rangePlaceholder = ["\u5F00\u59CB\u65E5\u671F", "\u7ED3\u675F\u65E5\u671F"],
+  selectAriaLabel = "\u9009\u62E9\u7C7B\u578B",
+  rangeAriaLabel = "\u65E5\u671F\u8303\u56F4",
+  presets,
+  size = "medium",
+  status = "default",
+  disabled = false,
+  onChange,
+  className = "",
+  style,
+  ...props
+}) {
+  const initialValue = defaultValue ?? { select: options[0]?.value ?? "", range: ["", ""] };
+  const [currentValue, setCurrentValue] = useControllableState({ value, defaultValue: initialValue, onChange });
+  return /* @__PURE__ */ jsxs3("div", { className: `sia-select-date-range sia-select-date-range--${size} ${className}`.trim(), role: "group", "aria-label": `${selectAriaLabel}\u4E0E${rangeAriaLabel}`, ...props, style: { ...style, "--sia-select-date-range-select-width": typeof selectWidth === "number" ? `${selectWidth}px` : selectWidth }, children: [
+    /* @__PURE__ */ jsx3(
+      Select,
+      {
+        className: "sia-select-date-range__select",
+        "aria-label": selectAriaLabel,
+        options,
+        value: currentValue.select,
+        placeholder: selectPlaceholder,
+        size,
+        status,
+        disabled,
+        onChange: (nextSelect) => {
+          if (nextSelect === null || Array.isArray(nextSelect)) return;
+          setCurrentValue({ ...currentValue, select: nextSelect });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      DatePicker.RangePicker,
+      {
+        className: "sia-select-date-range__picker",
+        "aria-label": rangeAriaLabel,
+        value: currentValue.range,
+        placeholder: rangePlaceholder,
+        presets,
+        size,
+        status,
+        disabled,
+        onChange: (nextRange) => setCurrentValue({ ...currentValue, range: nextRange })
+      }
+    )
+  ] });
+}
+
+export {
+  TimePanel,
+  DatePicker,
+  SelectDateRange
+};