@wipco/sdui 0.18.1 → 0.19.0

package/dist/chunk-L6HNC4B5.js

@@ -0,0 +1,778 @@
+import { Icon } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import React, { useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var OVERLAY_ROOT_ID = "wp-overlay-root";
+var DOCUMENT_POSITION_FOLLOWING = 4;
+function getOverlayRoot() {
+  if (typeof document === "undefined") return null;
+  const existing = document.getElementById(OVERLAY_ROOT_ID);
+  if (existing) return existing;
+  const created = document.createElement("div");
+  created.id = OVERLAY_ROOT_ID;
+  document.body.appendChild(created);
+  return created;
+}
+var layers = [];
+var nextId = 0;
+var subscribers = /* @__PURE__ */ new Set();
+var keyListenerBound = false;
+function emit() {
+  layers = layers.slice();
+  subscribers.forEach((fn) => fn());
+}
+function topLayer(list) {
+  let best;
+  let bestNode = null;
+  for (const layer of list) {
+    const node = layer.node();
+    if (!best) {
+      best = layer;
+      bestNode = node;
+      continue;
+    }
+    if (!node) continue;
+    if (!bestNode) {
+      best = layer;
+      bestNode = node;
+      continue;
+    }
+    if (bestNode.compareDocumentPosition(node) & DOCUMENT_POSITION_FOLLOWING) {
+      best = layer;
+      bestNode = node;
+    }
+  }
+  return best;
+}
+function layerHoldsTop(list, id) {
+  const top = topLayer(list);
+  if (!top) return false;
+  if (top.id === id) return true;
+  const mine = list.find((l) => l.id === id)?.node();
+  const topNode = top.node();
+  return !!mine && !!topNode && mine.contains(topNode);
+}
+function escapeTopmost() {
+  topLayer(layers)?.onEscape();
+}
+function handleKeyDown(event) {
+  if (event.key !== "Escape") return;
+  escapeTopmost();
+}
+function push(layer) {
+  layers.push(layer);
+  if (!keyListenerBound && typeof document !== "undefined") {
+    document.addEventListener("keydown", handleKeyDown);
+    keyListenerBound = true;
+  }
+  emit();
+}
+function remove(id) {
+  layers = layers.filter((l) => l.id !== id);
+  emit();
+}
+function subscribe(fn) {
+  subscribers.add(fn);
+  return () => {
+    subscribers.delete(fn);
+  };
+}
+var snapshot = () => layers;
+var serverSnapshot = () => [];
+function useOverlayLayer(active, onEscape, nodeRef) {
+  const idRef = useRef(0);
+  if (idRef.current === 0) idRef.current = ++nextId;
+  const escapeRef = useRef(onEscape);
+  escapeRef.current = onEscape;
+  const nodeRefRef = useRef(nodeRef);
+  nodeRefRef.current = nodeRef;
+  useEffect(() => {
+    if (!active) return;
+    const id2 = idRef.current;
+    push({
+      id: id2,
+      onEscape: () => escapeRef.current?.(),
+      node: () => nodeRefRef.current?.current ?? null
+    });
+    return () => remove(id2);
+  }, [active]);
+  const current = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+  const id = idRef.current;
+  return {
+    isTop: active && topLayer(current)?.id === id,
+    holdsTop: active && layerHoldsTop(current, id)
+  };
+}
+var OverlayContainerContext = React.createContext(null);
+function OverlayLayer({
+  onClose,
+  children
+}) {
+  const ref = useRef(null);
+  const container = React.useContext(OverlayContainerContext);
+  const { holdsTop } = useOverlayLayer(true, onClose, ref);
+  useEffect(() => {
+    ref.current?.toggleAttribute("inert", !holdsTop);
+  }, [holdsTop]);
+  const layer = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "wp-overlay-layer",
+      onClick: (event) => {
+        if (onClose && event.target instanceof HTMLElement && event.target.classList.contains("wp-overlay")) {
+          onClose();
+        }
+      },
+      children
+    }
+  );
+  const root = container ?? getOverlayRoot();
+  return root ? createPortal(layer, root) : layer;
+}
+function HoistedStyle({ id, css }) {
+  return /* @__PURE__ */ jsx("style", { href: id, precedence: "medium", children: css });
+}
+var YMD_RE = /^\d{4}-\d{2}-\d{2}$/;
+var HM_RE = /^\d{2}:\d{2}$/;
+function parseYmd(value) {
+  if (typeof value !== "string" || !YMD_RE.test(value)) return void 0;
+  const y = Number(value.slice(0, 4));
+  const m = Number(value.slice(5, 7));
+  const d = Number(value.slice(8, 10));
+  const date = new Date(y, m - 1, d, 12, 0, 0, 0);
+  if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d) return void 0;
+  return date;
+}
+function formatYmd(date) {
+  const y = String(date.getFullYear()).padStart(4, "0");
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function addDays(date, days) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+function addMonths(date, months) {
+  const next = new Date(date.getFullYear(), date.getMonth() + months, 1, 12, 0, 0, 0);
+  const lastDay = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate();
+  next.setDate(Math.min(date.getDate(), lastDay));
+  return next;
+}
+function clampDate(date, min, max) {
+  if (min && date.getTime() < min.getTime()) return min;
+  if (max && date.getTime() > max.getTime()) return max;
+  return date;
+}
+function monthIndex(date) {
+  return date.getFullYear() * 12 + date.getMonth();
+}
+function monthStart(index) {
+  return new Date(Math.floor(index / 12), index % 12, 1, 12, 0, 0, 0);
+}
+function isSameDay(a, b) {
+  return a !== void 0 && b !== void 0 && formatYmd(a) === formatYmd(b);
+}
+function withinRange(date, min, max) {
+  if (min && date.getTime() < min.getTime()) return false;
+  if (max && date.getTime() > max.getTime()) return false;
+  return true;
+}
+function viewFromDigits(digits, current, min, max) {
+  if (digits.length < 4) return void 0;
+  const year = Number(digits.slice(0, 4));
+  if (!Number.isFinite(year) || year < 1) return void 0;
+  const month = digits.length >= 6 ? Number(digits.slice(4, 6)) : current.getMonth() + 1;
+  if (!(month >= 1 && month <= 12)) return void 0;
+  return clampDate(new Date(year, month - 1, 1, 12, 0, 0, 0), min, max);
+}
+function maskYmd(text) {
+  const digits = text.replace(/\D/g, "").slice(0, 8);
+  if (digits.length <= 4) return digits;
+  if (digits.length <= 6) return `${digits.slice(0, 4)}-${digits.slice(4)}`;
+  return `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}`;
+}
+function maskYmdHm(text) {
+  const digits = text.replace(/\D/g, "").slice(0, 12);
+  const date = maskYmd(digits.slice(0, 8));
+  if (digits.length <= 8) return date;
+  const time = digits.slice(8);
+  return time.length <= 2 ? `${date} ${time}` : `${date} ${time.slice(0, 2)}:${time.slice(2)}`;
+}
+function isValidHm(text) {
+  if (!HM_RE.test(text)) return false;
+  return Number(text.slice(0, 2)) <= 23 && Number(text.slice(3, 5)) <= 59;
+}
+function splitDateTime(value) {
+  if (!value) return ["", ""];
+  const [date = "", time = ""] = value.split(/[T ]/, 2);
+  return [date, time.slice(0, 5)];
+}
+function toFieldText(value, withTime) {
+  if (!withTime) return splitDateTime(value)[0];
+  const [date, time] = splitDateTime(value);
+  return date && time ? `${date} ${time}` : date;
+}
+function toFieldValue(text, withTime) {
+  if (text === "") return "";
+  if (!withTime) return YMD_RE.test(text) && parseYmd(text) ? text : void 0;
+  const [date, time] = splitDateTime(text);
+  if (!parseYmd(date) || !isValidHm(time)) return void 0;
+  return `${date}T${time}`;
+}
+var WEEKDAYS_KO = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+var WEEKS_PER_MONTH = 6;
+function buildMonthCells(index, min, max) {
+  const first = monthStart(index);
+  const gridStart = addDays(first, -first.getDay());
+  const weeks = [];
+  for (let w = 0; w < WEEKS_PER_MONTH; w += 1) {
+    const row = [];
+    for (let d = 0; d < 7; d += 1) {
+      const date = addDays(gridStart, w * 7 + d);
+      row.push({
+        date,
+        ymd: formatYmd(date),
+        outside: monthIndex(date) !== index,
+        disabled: min !== void 0 && date.getTime() < min.getTime() || max !== void 0 && date.getTime() > max.getTime()
+      });
+    }
+    weeks.push(row);
+  }
+  return weeks;
+}
+function Calendar({
+  monthCount,
+  minDate,
+  maxDate,
+  dayState,
+  onPick,
+  focusDate,
+  onFocusDateChange,
+  autoFocus = false
+}) {
+  const focusIdx = monthIndex(focusDate);
+  const [viewIdx, setViewIdx] = useState(focusIdx);
+  const gridRef = useRef(null);
+  const focusYmd = formatYmd(focusDate);
+  const visibleIdx = focusIdx < viewIdx ? focusIdx : focusIdx > viewIdx + monthCount - 1 ? focusIdx - monthCount + 1 : viewIdx;
+  if (visibleIdx !== viewIdx) setViewIdx(visibleIdx);
+  const claimFocusRef = useRef(autoFocus);
+  useLayoutEffect(() => {
+    const grid = gridRef.current;
+    if (!grid) return;
+    const holdsFocus = document.activeElement instanceof Node && grid.contains(document.activeElement);
+    const claim = claimFocusRef.current || holdsFocus;
+    claimFocusRef.current = false;
+    if (claim) grid.querySelector('[tabindex="0"]')?.focus();
+  }, [focusYmd]);
+  const todayYmd = formatYmd(/* @__PURE__ */ new Date());
+  const minIdx = minDate ? monthIndex(minDate) : -Infinity;
+  const maxIdx = maxDate ? monthIndex(maxDate) : Infinity;
+  const prevDisabled = visibleIdx <= minIdx;
+  const nextDisabled = visibleIdx + monthCount - 1 >= maxIdx;
+  const moveFocus = (next) => {
+    onFocusDateChange(clampDate(next, minDate, maxDate));
+  };
+  const handleKeyDown2 = (event) => {
+    const deltaDays = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" ? -7 : event.key === "ArrowDown" ? 7 : 0;
+    if (deltaDays !== 0) {
+      event.preventDefault();
+      moveFocus(addDays(focusDate, deltaDays));
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const offset = event.key === "Home" ? -focusDate.getDay() : 6 - focusDate.getDay();
+      moveFocus(addDays(focusDate, offset));
+      return;
+    }
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      moveFocus(addMonths(focusDate, event.key === "PageUp" ? -1 : 1));
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "wp-dp", children: /* @__PURE__ */ jsxs("div", { className: "wp-dp__months", ref: gridRef, onKeyDown: handleKeyDown2, children: [
+    /* @__PURE__ */ jsxs("div", { className: "wp-dp__nav", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "wp-dp__navbtn",
+          "aria-label": "\uC774\uC804 \uB2EC",
+          "aria-disabled": prevDisabled || void 0,
+          disabled: prevDisabled,
+          onClick: () => setViewIdx(visibleIdx - 1),
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "wp-dp__navbtn",
+          "aria-label": "\uB2E4\uC74C \uB2EC",
+          "aria-disabled": nextDisabled || void 0,
+          disabled: nextDisabled,
+          onClick: () => setViewIdx(visibleIdx + 1),
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
+        }
+      )
+    ] }),
+    Array.from({ length: monthCount }, (_, offset) => {
+      const idx = visibleIdx + offset;
+      const first = monthStart(idx);
+      const weeks = buildMonthCells(idx, minDate, maxDate);
+      const caption = `${first.getFullYear()}\uB144 ${first.getMonth() + 1}\uC6D4`;
+      return /* @__PURE__ */ jsxs("div", { className: "wp-dp__month", children: [
+        /* @__PURE__ */ jsx("div", { className: "wp-dp__caption", children: /* @__PURE__ */ jsx("span", { className: "wp-dp__caption-label", children: caption }) }),
+        /* @__PURE__ */ jsxs("table", { className: "wp-dp__grid", role: "grid", "aria-label": caption, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "wp-dp__weekdays", children: WEEKDAYS_KO.map((name) => /* @__PURE__ */ jsx("th", { scope: "col", className: "wp-dp__weekday", abbr: name, children: name }, name)) }) }),
+          /* @__PURE__ */ jsx("tbody", { className: "wp-dp__weeks", children: weeks.map((week, w) => /* @__PURE__ */ jsx("tr", { className: "wp-dp__week", children: week.map((cell) => {
+            const state = cell.disabled ? {} : dayState(cell.date);
+            const classes = ["wp-dp__day"];
+            if (cell.outside) classes.push("wp-dp__day--outside");
+            if (cell.disabled) classes.push("wp-dp__day--disabled");
+            if (cell.ymd === todayYmd) classes.push("wp-dp__day--today");
+            if (state.selected) classes.push("wp-dp__day--selected");
+            if (state.rangeStart) classes.push("wp-dp__day--range-start");
+            if (state.rangeMiddle) classes.push("wp-dp__day--range-middle");
+            if (state.rangeEnd) classes.push("wp-dp__day--range-end");
+            return /* @__PURE__ */ jsx("td", { className: classes.join(" "), children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "wp-dp__day-btn",
+                "data-ymd": cell.ymd,
+                tabIndex: cell.ymd === focusYmd && !cell.outside ? 0 : -1,
+                disabled: cell.disabled,
+                "aria-selected": state.selected || state.rangeStart || state.rangeEnd || void 0,
+                "aria-label": cell.ymd,
+                onClick: () => {
+                  onFocusDateChange(cell.date);
+                  onPick(cell.date);
+                },
+                children: cell.date.getDate()
+              }
+            ) }, cell.ymd);
+          }) }, w)) })
+        ] })
+      ] }, idx);
+    })
+  ] }) });
+}
+function useDismiss(open, hostRef, onDismiss) {
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
+      onDismiss("outside");
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [open, hostRef, onDismiss]);
+  useOverlayLayer(open, () => onDismiss("escape"), hostRef);
+}
+function DateInput({
+  inputRef,
+  value,
+  placeholder,
+  size,
+  invalid,
+  disabled,
+  maxLength,
+  lead,
+  expanded,
+  ariaLabel,
+  onValueChange,
+  onKeyDown,
+  onFocus,
+  onPointerDown
+}) {
+  const classes = ["wp-input", "wp-input--mono", "wp-dp-input"];
+  if (maxLength > 10) classes.push("wp-dp-input--time");
+  if (size !== "md") classes.push(`wp-input--${size}`);
+  if (invalid) classes.push("wp-input--invalid");
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      className: classes.join(" "),
+      inputMode: "numeric",
+      autoComplete: "off",
+      spellCheck: false,
+      maxLength,
+      placeholder,
+      value,
+      disabled,
+      "aria-label": ariaLabel,
+      "aria-invalid": invalid || void 0,
+      "aria-haspopup": "dialog",
+      "aria-expanded": expanded,
+      onChange: (event) => onValueChange(event.target.value),
+      onKeyDown,
+      onFocus,
+      onPointerDown
+    }
+  );
+  if (!lead) return input;
+  return /* @__PURE__ */ jsxs("div", { className: "wp-inputwrap wp-inputwrap--lead", children: [
+    /* @__PURE__ */ jsx("span", { className: "wp-inputwrap__lead", children: /* @__PURE__ */ jsx(Icon, { name: "calendar", size: size === "lg" ? 16 : 15 }) }),
+    input
+  ] });
+}
+function DatePickerImpl({
+  value,
+  onChange,
+  min,
+  max,
+  placeholder,
+  invalid = false,
+  disabled = false,
+  size = "md",
+  withTime = false
+}) {
+  const [open, setOpen] = useState(false);
+  const [innerValue, setInnerValue] = useState("");
+  const hostRef = useRef(null);
+  const popRef = useRef(null);
+  const inputRef = useRef(null);
+  const isControlled = value !== void 0;
+  const currentValue = (isControlled ? value : innerValue) ?? "";
+  const fieldText = useMemo(() => toFieldText(currentValue, withTime), [currentValue, withTime]);
+  const [text, setText] = useState(fieldText);
+  useEffect(() => {
+    setText(fieldText);
+  }, [fieldText]);
+  const selectedDate = useMemo(() => parseYmd(splitDateTime(currentValue)[0]), [currentValue]);
+  const minDate = useMemo(() => parseYmd(min), [min]);
+  const maxDate = useMemo(() => parseYmd(max), [max]);
+  const [focusDate, setFocusDate] = useState(() => selectedDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
+  const [grabFocus, setGrabFocus] = useState(false);
+  const dismiss = useCallback((reason) => {
+    setOpen(false);
+    if (reason === "escape") inputRef.current?.focus();
+  }, []);
+  useDismiss(open, hostRef, dismiss);
+  const isInvalid = Boolean(invalid);
+  const commit = (next) => {
+    if (!isControlled) setInnerValue(next);
+    onChange?.(next);
+  };
+  const openCalendar = (claimFocus) => {
+    setFocusDate(selectedDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
+    setGrabFocus(claimFocus);
+    setOpen(true);
+  };
+  const handleTextChange = (raw) => {
+    const masked = withTime ? maskYmdHm(raw) : maskYmd(raw);
+    setText(masked);
+    const view = viewFromDigits(masked.replace(/\D/g, "").slice(0, 8), focusDate, minDate, maxDate);
+    if (view) setFocusDate(view);
+    const next = toFieldValue(masked, withTime);
+    if (next === void 0) return;
+    const parsed = parseYmd(splitDateTime(next)[0]);
+    if (parsed) {
+      if (!withinRange(parsed, minDate, maxDate)) return;
+      setFocusDate(parsed);
+    }
+    commit(next);
+  };
+  const handleKeyDown2 = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (open) popRef.current?.querySelector('[tabindex="0"]')?.focus();
+      else openCalendar(true);
+      return;
+    }
+    if (event.key === "Enter" && open) {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+  const handleBlur = (event) => {
+    const next = event.relatedTarget;
+    if (next instanceof Node && hostRef.current?.contains(next)) return;
+    if (text !== fieldText) setText(fieldText);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host", onBlur: handleBlur, children: [
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
+    /* @__PURE__ */ jsx(
+      DateInput,
+      {
+        inputRef,
+        value: text,
+        placeholder: placeholder ?? (withTime ? "YYYY-MM-DD HH:MM" : "YYYY-MM-DD"),
+        size,
+        invalid: isInvalid,
+        disabled,
+        maxLength: withTime ? 16 : 10,
+        lead: true,
+        expanded: open,
+        onValueChange: handleTextChange,
+        onKeyDown: handleKeyDown2,
+        onPointerDown: () => {
+          if (!disabled && !open) openCalendar(false);
+        }
+      }
+    ),
+    open ? /* @__PURE__ */ jsx("div", { ref: popRef, className: "wp-dp-pop", role: "dialog", "aria-label": "\uB0A0\uC9DC \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        monthCount: 1,
+        minDate,
+        maxDate,
+        focusDate,
+        onFocusDateChange: setFocusDate,
+        autoFocus: grabFocus,
+        dayState: (date) => ({ selected: isSameDay(date, selectedDate) }),
+        onPick: (date) => {
+          const ymd = formatYmd(date);
+          const time = withTime ? splitDateTime(text)[1] : "";
+          const next = withTime ? `${ymd}T${isValidHm(time) ? time : "00:00"}` : ymd;
+          setText(toFieldText(next, withTime));
+          commit(next);
+          setOpen(false);
+          inputRef.current?.focus();
+        }
+      }
+    ) }) }) : null
+  ] });
+}
+function DateRangePickerImpl({
+  value,
+  onChange,
+  min,
+  max,
+  invalid = false,
+  disabled = false,
+  size = "md"
+}) {
+  const [open, setOpen] = useState(false);
+  const [innerRange, setInnerRange] = useState({});
+  const hostRef = useRef(null);
+  const popRef = useRef(null);
+  const fromRef = useRef(null);
+  const toRef = useRef(null);
+  const isControlled = value !== void 0;
+  const currentRange = (isControlled ? value : innerRange) ?? {};
+  const fromValue = currentRange.from ?? "";
+  const toValue = currentRange.to ?? "";
+  const [fromText, setFromText] = useState(fromValue);
+  const [toText, setToText] = useState(toValue);
+  useEffect(() => {
+    setFromText(fromValue);
+  }, [fromValue]);
+  useEffect(() => {
+    setToText(toValue);
+  }, [toValue]);
+  const fromDate = useMemo(() => parseYmd(fromValue), [fromValue]);
+  const toDate = useMemo(() => parseYmd(toValue), [toValue]);
+  const minDate = useMemo(() => parseYmd(min), [min]);
+  const maxDate = useMemo(() => parseYmd(max), [max]);
+  const [focusDate, setFocusDate] = useState(() => fromDate ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate));
+  const [grabFocus, setGrabFocus] = useState(false);
+  const [end, setEnd] = useState("from");
+  const dismiss = useCallback((reason) => {
+    setOpen(false);
+    if (reason === "escape") (end === "to" ? toRef : fromRef).current?.focus();
+  }, [end]);
+  useDismiss(open, hostRef, dismiss);
+  const isInvalid = Boolean(invalid);
+  const commit = (nextFrom, nextTo) => {
+    const next = { from: nextFrom || void 0, to: nextTo || void 0 };
+    const a = parseYmd(nextFrom);
+    const b = parseYmd(nextTo);
+    if (a && b) next.days = Math.round((b.getTime() - a.getTime()) / 864e5) + 1;
+    if (!isControlled) setInnerRange(next);
+    onChange?.(next);
+  };
+  const openCalendar = (which, claimFocus) => {
+    setEnd(which);
+    setFocusDate(
+      (which === "to" ? toDate ?? fromDate : fromDate ?? toDate) ?? clampDate(/* @__PURE__ */ new Date(), minDate, maxDate)
+    );
+    setGrabFocus(claimFocus);
+    setOpen(true);
+  };
+  const handleTextChange = (which, raw) => {
+    const masked = maskYmd(raw);
+    if (which === "from") setFromText(masked);
+    else setToText(masked);
+    const view = viewFromDigits(masked.replace(/\D/g, ""), focusDate, minDate, maxDate);
+    if (view) setFocusDate(view);
+    if (masked === "") {
+      commit(which === "from" ? "" : fromValue, which === "to" ? "" : toValue);
+      return;
+    }
+    if (masked.length !== 10) return;
+    const parsed = parseYmd(masked);
+    if (!parsed || !withinRange(parsed, minDate, maxDate)) return;
+    setFocusDate(parsed);
+    if (which === "from") {
+      commit(masked, toDate && parsed.getTime() > toDate.getTime() ? "" : toValue);
+    } else {
+      commit(fromDate && parsed.getTime() < fromDate.getTime() ? "" : fromValue, masked);
+    }
+  };
+  const handleKeyDown2 = (which) => (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (open) popRef.current?.querySelector('[tabindex="0"]')?.focus();
+      else openCalendar(which, true);
+      return;
+    }
+    if (event.key === "Enter" && open) {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+  const handleBlur = (event) => {
+    const next = event.relatedTarget;
+    if (next instanceof Node && hostRef.current?.contains(next)) return;
+    if (fromText !== fromValue) setFromText(fromValue);
+    if (toText !== toValue) setToText(toValue);
+  };
+  const pick = (date) => {
+    const ymd = formatYmd(date);
+    if (end === "from") {
+      const keepTo = toDate && date.getTime() > toDate.getTime() ? "" : toValue;
+      commit(ymd, keepTo);
+      setEnd("to");
+      toRef.current?.focus();
+      return;
+    }
+    if (fromDate && date.getTime() < fromDate.getTime()) {
+      commit(ymd, "");
+      setEnd("to");
+      toRef.current?.focus();
+      return;
+    }
+    commit(fromValue, ymd);
+    setOpen(false);
+    toRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: "wp-dp-host wp-dp-host--range", onBlur: handleBlur, children: [
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-datepicker", css: DP_CSS }),
+    /* @__PURE__ */ jsxs("div", { className: "wp-dp-range", children: [
+      /* @__PURE__ */ jsx(
+        DateInput,
+        {
+          inputRef: fromRef,
+          value: fromText,
+          placeholder: "YYYY-MM-DD",
+          size,
+          invalid: isInvalid,
+          disabled,
+          maxLength: 10,
+          lead: true,
+          expanded: open,
+          ariaLabel: "\uC2DC\uC791\uC77C",
+          onValueChange: (raw) => handleTextChange("from", raw),
+          onKeyDown: handleKeyDown2("from"),
+          onFocus: () => setEnd("from"),
+          onPointerDown: () => {
+            if (!disabled && !open) openCalendar("from", false);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "wp-dp-range__sep", "aria-hidden": true, children: "~" }),
+      /* @__PURE__ */ jsx(
+        DateInput,
+        {
+          inputRef: toRef,
+          value: toText,
+          placeholder: "YYYY-MM-DD",
+          size,
+          invalid: isInvalid,
+          disabled,
+          maxLength: 10,
+          lead: false,
+          expanded: open,
+          ariaLabel: "\uC885\uB8CC\uC77C",
+          onValueChange: (raw) => handleTextChange("to", raw),
+          onKeyDown: handleKeyDown2("to"),
+          onFocus: () => setEnd("to"),
+          onPointerDown: () => {
+            if (!disabled && !open) openCalendar("to", false);
+          }
+        }
+      )
+    ] }),
+    open ? /* @__PURE__ */ jsx("div", { ref: popRef, className: "wp-dp-pop wp-dp-pop--wide", role: "dialog", "aria-label": "\uAE30\uAC04 \uC120\uD0DD \uB2EC\uB825", children: /* @__PURE__ */ jsx("div", { className: "wp-dp-pop__body", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        monthCount: 2,
+        minDate,
+        maxDate,
+        focusDate,
+        onFocusDateChange: setFocusDate,
+        autoFocus: grabFocus,
+        dayState: (date) => {
+          const t = date.getTime();
+          const start = fromDate?.getTime();
+          const end2 = toDate?.getTime();
+          if (start !== void 0 && end2 !== void 0 && t > start && t < end2) return { rangeMiddle: true };
+          return {
+            rangeStart: start !== void 0 && t === start && end2 !== void 0,
+            rangeEnd: end2 !== void 0 && t === end2,
+            // 한쪽 끝만 정해진 상태는 단일 선택처럼 보인다
+            selected: start !== void 0 && t === start && end2 === void 0 || end2 !== void 0 && t === end2 && start === void 0 || void 0
+          };
+        },
+        onPick: pick
+      }
+    ) }) }) : null
+  ] });
+}
+var DP_CSS = `
+.wp-dp-host{position:relative}
+.wp-dp-pop{position:absolute;top:calc(100% + var(--wp-space-2));left:0;min-width:100%;width:max-content;background:var(--wp-surface-card);border:1px solid var(--wp-border-subtle);border-radius:var(--wp-radius-lg);box-shadow:var(--wp-shadow-lg);z-index:300}
+.wp-dp-pop--wide{max-width:min(640px,90vw)}
+.wp-dp-pop__body{padding:var(--wp-space-4);max-height:60vh;overflow:auto}
+.wp-dp-range{display:flex;align-items:center;gap:var(--wp-space-1)}
+.wp-dp-range>*{flex:1 1 0;min-width:0}
+.wp-dp-range__sep{flex:none;color:var(--wp-text-subtle)}
+/* \uC5F4 \uD3ED\uC774 \uC881\uC740 \uC790\uB9AC(\uC0C1\uC138\uAC80\uC0C9 2\uB2E8 \uACA9\uC790)\uC5D0\uC11C\uB3C4 'YYYY-MM-DD' \uC5F4 \uAE00\uC790\uAC00 \uC798\uB9AC\uC9C0 \uC54A\uAC8C \u2014
+   \uC120\uD589 \uC544\uC774\uCF58 \uC5EC\uBC31\uC744 \uC870\uC778\uB2E4. \uD074\uB798\uC2A4\uB97C \uB450 \uBC88 \uC801\uC5B4 DS\uC758 wp-inputwrap--lead \uADDC\uCE59\uC744 \uB118\uB294\uB2E4. */
+.wp-dp-input{padding-right:6px;min-width:calc(10ch + 14px)}
+.wp-dp-input--time{min-width:calc(16ch + 14px)}
+.wp-inputwrap--lead .wp-dp-input.wp-dp-input{padding-left:26px;min-width:calc(10ch + 36px)}
+.wp-inputwrap--lead .wp-dp-input--time.wp-dp-input--time{min-width:calc(16ch + 36px)}
+.wp-dp{font-family:inherit;font-size:13px;color:var(--wp-text-default)}
+.wp-dp__months{position:relative;display:flex;flex-wrap:wrap;gap:var(--wp-space-5)}
+.wp-dp__nav{position:absolute;top:0;right:0;display:flex;gap:var(--wp-space-1);z-index:1}
+.wp-dp__navbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--wp-radius-sm);color:var(--wp-text-muted);cursor:pointer;transition:background 0.12s,color 0.12s}
+.wp-dp__navbtn:hover:not(:disabled){background:var(--wp-surface-hover);color:var(--wp-text-strong)}
+.wp-dp__navbtn:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:1px}
+.wp-dp__navbtn:disabled{color:var(--wp-text-disabled);cursor:default;background:transparent}
+.wp-dp__caption{display:flex;align-items:center;height:28px;margin-bottom:var(--wp-space-2);padding-left:var(--wp-space-1)}
+.wp-dp__caption-label{font-size:13px;font-weight:600;color:var(--wp-text-strong)}
+.wp-dp__grid{border-collapse:collapse}
+.wp-dp__weekday{width:32px;height:28px;padding:0;font-size:12px;font-weight:500;color:var(--wp-text-muted);text-align:center}
+.wp-dp__weekday:first-child{color:var(--wp-text-danger)}
+.wp-dp__day{padding:0;text-align:center}
+.wp-dp__day-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;padding:0;border:none;background:transparent;border-radius:var(--wp-radius-sm);font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;transition:background 0.12s,color 0.12s}
+.wp-dp__day:not(.wp-dp__day--selected):not(.wp-dp__day--disabled) .wp-dp__day-btn:hover{background:var(--wp-surface-hover)}
+.wp-dp__day-btn:focus-visible{outline:2px solid var(--wp-border-focus);outline-offset:-1px}
+.wp-dp__day--today .wp-dp__day-btn{box-shadow:inset 0 0 0 1px var(--wp-border-focus)}
+.wp-dp__day--outside{color:var(--wp-text-subtle)}
+.wp-dp__day--disabled{color:var(--wp-text-disabled)}
+.wp-dp__day--disabled .wp-dp__day-btn{cursor:default}
+.wp-dp__day--selected .wp-dp__day-btn{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
+.wp-dp__day--selected.wp-dp__day--today .wp-dp__day-btn{box-shadow:none}
+.wp-dp__day--range-middle .wp-dp__day-btn{background:var(--wp-surface-selected);color:var(--wp-text-default);border-radius:0;font-weight:400}
+.wp-dp__day--range-start .wp-dp__day-btn,.wp-dp__day--range-end .wp-dp__day-btn{background:var(--wp-action-primary-bg);color:var(--wp-action-primary-fg);font-weight:500}
+.wp-dp__day--range-start.wp-dp__day--today .wp-dp__day-btn,.wp-dp__day--range-end.wp-dp__day--today .wp-dp__day-btn{box-shadow:none}
+`;
+var DatePicker = boxed(DatePickerImpl, "DatePicker");
+var DateRangePicker = boxed(DateRangePickerImpl, "DateRangePicker");
+
+export { DatePicker, DateRangePicker, HoistedStyle, OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer };