@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-G2QFRTJ2.js

@@ -0,0 +1,823 @@
+import { Select } from './chunk-5IMACPJS.js';
+import { Popover } from './chunk-DD5BBGBE.js';
+import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
+import { Input } from './chunk-O6232G37.js';
+import { isComposing } from './chunk-ITHXJHBB.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { Button } from './chunk-BZYDZBAN.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './TimeWindowPicker-7I7KWCMU.css';
+import { useMemo, useState, useRef, useId, useEffect } from 'react';
+import { ScheduleGlyph, KeyboardArrowDownGlyph, CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/TimeWindowPicker/mask.ts
+var DATE_MASK = "YYYY/MM/DD";
+var TIME_MASK = "HH:MM:SS";
+var DATE_SEGMENTS = [
+  { start: 0, end: 3, min: 1, max: 9999 },
+  { start: 5, end: 6, min: 1, max: 12 },
+  { start: 8, end: 9, min: 1, max: 31 }
+];
+var TIME_SEGMENTS = [
+  { start: 0, end: 1, min: 0, max: 23 },
+  { start: 3, end: 4, min: 0, max: 59 },
+  { start: 6, end: 7, min: 0, max: 59 }
+];
+var isSeparator = (mask, position) => {
+  const char = mask[position];
+  return char !== void 0 && !/[A-Za-z]/.test(char);
+};
+var slotCount = (mask) => [...mask].filter((_, at) => !isSeparator(mask, at)).length;
+function project(mask, text) {
+  const digits = text.replace(/\D/g, "").slice(0, slotCount(mask));
+  let out = "";
+  let at = 0;
+  for (const digit of digits) {
+    while (at < mask.length && isSeparator(mask, at)) {
+      out += mask[at];
+      at += 1;
+    }
+    out += digit;
+    at += 1;
+  }
+  return out;
+}
+function remainder(mask, text) {
+  return mask.slice(project(mask, text).length);
+}
+var isComplete = (mask, text) => text.replace(/\D/g, "").length === slotCount(mask);
+function isRealDate(text) {
+  const match = /^(\d{4})\/(\d{2})\/(\d{2})$/.exec(text);
+  if (!match) return false;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  if (year < 1 || month < 1 || month > 12 || day < 1) return false;
+  const when = new Date(year, month - 1, day);
+  return when.getFullYear() === year && when.getMonth() === month - 1 && when.getDate() === day;
+}
+function isRealTime(text) {
+  const match = /^(\d{2}):(\d{2}):(\d{2})$/.exec(text);
+  if (!match) return false;
+  const [hour, minute, second] = [Number(match[1]), Number(match[2]), Number(match[3])];
+  return hour <= 23 && minute <= 59 && second <= 59;
+}
+function segmentAt(segments, position) {
+  return segments.find((segment) => position >= segment.start && position <= segment.end + 1) ?? segments[segments.length - 1];
+}
+function stepSegment(mask, text, segment, by) {
+  const filled = project(mask, text).padEnd(mask.length, " ");
+  const width = segment.end - segment.start + 1;
+  const run = filled.slice(segment.start, segment.end + 1);
+  const digits = run.replace(/[^0-9]/g, "");
+  const next = digits.length === 0 ? segment.min : Math.min(segment.max, Math.max(segment.min, Number(digits) + by));
+  const before = filled.slice(0, segment.start).replace(/ /g, "");
+  if (before.replace(/\D/g, "").length < slotCount(mask.slice(0, segment.start))) return text;
+  const after = filled.slice(segment.end + 1).replace(/ /g, "");
+  return project(mask, before + String(next).padStart(width, "0") + after);
+}
+var TIME_WINDOW_SPANS = ["today", "yesterday"];
+var DURATION = /^\s*(\d+)\s*(m|h|d|w)\s*$/i;
+var MILLISECONDS = {
+  m: 6e4,
+  h: 36e5,
+  d: 864e5,
+  w: 6048e5
+};
+var DAY = MILLISECONDS.d;
+function parseTimeWindowDuration(text) {
+  const match = DURATION.exec(text);
+  if (!match) return 0;
+  const amount = Number.parseInt(match[1], 10);
+  if (!Number.isFinite(amount)) return 0;
+  return amount * MILLISECONDS[match[2].toLowerCase()];
+}
+function splitDuration(text) {
+  if (!text) return null;
+  const match = DURATION.exec(text);
+  if (!match) return null;
+  const amount = Number.parseInt(match[1], 10);
+  if (!Number.isFinite(amount) || amount <= 0) return null;
+  return { amount, unit: match[2].toLowerCase() };
+}
+function spanBounds(span, zone, now) {
+  if (zone === "utc") {
+    const midnight2 = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+    if (span === "today") return { from: new Date(midnight2) };
+    return { from: new Date(midnight2 - DAY), to: new Date(midnight2) };
+  }
+  const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  if (span === "today") return { from: midnight };
+  return { from: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1), to: midnight };
+}
+function resolveTimeWindow(value, now = /* @__PURE__ */ new Date()) {
+  const nothing = { from: void 0, to: void 0 };
+  if (!value) return nothing;
+  if (value.kind === "relative") {
+    if (value.span) {
+      const bounds = spanBounds(value.span, value.timezone ?? "local", now);
+      return { from: bounds.from.toISOString(), to: bounds.to?.toISOString() };
+    }
+    const span = parseTimeWindowDuration(value.duration ?? "");
+    if (span <= 0) return nothing;
+    return { from: new Date(now.getTime() - span).toISOString(), to: void 0 };
+  }
+  if (value.kind === "absolute") {
+    const suffix = value.timezone === "utc" ? "Z" : "";
+    return {
+      from: value.from ? new Date(value.from + suffix).toISOString() : void 0,
+      to: value.to ? new Date(value.to + suffix).toISOString() : void 0
+    };
+  }
+  return nothing;
+}
+var DEFAULT_PRESETS = [
+  { label: "Last 15 minutes", duration: "15m" },
+  { label: "Last hour", duration: "1h" },
+  { label: "Last 4 hours", duration: "4h" },
+  { label: "Today", span: "today" },
+  { label: "Yesterday", span: "yesterday" },
+  { label: "Last 24 hours", duration: "24h" },
+  { label: "Last 7 days", duration: "7d" },
+  { label: "Last 30 days", duration: "30d" }
+];
+var SINGULAR = {
+  m: "minute",
+  h: "hour",
+  d: "day",
+  w: "week"
+};
+var PLURAL = {
+  m: "minutes",
+  h: "hours",
+  d: "days",
+  w: "weeks"
+};
+var DEFAULT_TIME_WINDOW_LABELS = {
+  placeholder: "Pick a time window",
+  triggerName: (name, window) => `${name}: ${window}`,
+  presetsLabel: "Relative windows",
+  absoluteLabel: "Absolute range",
+  timezoneLabel: "Time zone",
+  localLabel: "Local time zone",
+  utcLabel: "UTC",
+  startLabel: "Start",
+  endLabel: "End",
+  startDateLabel: "Start date",
+  startTimeLabel: "Start time",
+  endDateLabel: "End date",
+  endTimeLabel: "End time",
+  previousMonthLabel: "Previous month",
+  nextMonthLabel: "Next month",
+  customLabel: "Or the last",
+  customAmountLabel: "Custom amount",
+  customUnitLabel: "Custom unit",
+  unitNames: { m: "Minutes", h: "Hours", d: "Days", w: "Weeks" },
+  spanNames: { today: "Today", yesterday: "Yesterday" },
+  durationWindow: (amount, unit) => `Last ${amount} ${amount === 1 ? SINGULAR[unit] : PLURAL[unit]}`,
+  range: (from, to) => `${from} to ${to}`,
+  nowLabel: "now",
+  earliestLabel: "the earliest record",
+  unsetLabel: "Any time",
+  summary: (window, range) => `${window}: ${range}`,
+  resetLabel: "Reset to default",
+  cancelLabel: "Cancel",
+  applyLabel: "Apply"
+};
+var withLabels = (labels) => labels ? { ...DEFAULT_TIME_WINDOW_LABELS, ...labels } : DEFAULT_TIME_WINDOW_LABELS;
+var MOMENT_FORMAT = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit",
+  // h23 rather than `hour12: false`, which renders midnight as 24 in several
+  // locales: a window said to start at 24:00 on the 8th starts on the 9th.
+  hourCycle: "h23"
+};
+var momentText = (at, zone) => new Intl.DateTimeFormat(void 0, zone === "utc" ? { ...MOMENT_FORMAT, timeZone: "UTC" } : MOMENT_FORMAT).format(at);
+function timeWindowMatchesPreset(value, preset) {
+  if (!value || value.kind !== "relative") return false;
+  if (preset.span) return value.span === preset.span;
+  if (!preset.duration || value.span) return false;
+  return parseTimeWindowDuration(value.duration ?? "") === parseTimeWindowDuration(preset.duration);
+}
+function isTimeWindowSet(value) {
+  if (!value) return false;
+  if (value.kind === "relative") return Boolean(value.span) || parseTimeWindowDuration(value.duration ?? "") > 0;
+  return Boolean(value.from || value.to);
+}
+function describeTimeWindow(value, options = {}) {
+  const labels = withLabels(options.labels);
+  const presets = options.presets ?? DEFAULT_PRESETS;
+  const now = options.now ?? /* @__PURE__ */ new Date();
+  const zone = value?.timezone ?? "local";
+  const resolved = resolveTimeWindow(value, now);
+  const range = (() => {
+    if (!resolved.from && !resolved.to) return labels.unsetLabel;
+    const from = resolved.from ? momentText(new Date(resolved.from), zone) : labels.earliestLabel;
+    const to = resolved.to ? momentText(new Date(resolved.to), zone) : labels.nowLabel;
+    return labels.range(from, to);
+  })();
+  const window = (() => {
+    if (!isTimeWindowSet(value)) return labels.unsetLabel;
+    if (value.kind === "absolute") return range;
+    const named = presets.find((preset) => timeWindowMatchesPreset(value, preset));
+    if (named) return named.label;
+    if (value.span) return labels.spanNames[value.span];
+    const parts = splitDuration(value.duration);
+    return parts ? labels.durationWindow(parts.amount, parts.unit) : labels.unsetLabel;
+  })();
+  return { window, range, spoken: window === range ? window : labels.summary(window, range) };
+}
+var pad = (n) => String(n).padStart(2, "0");
+function parseMoment(text) {
+  if (!text) return null;
+  const at = text.indexOf("T");
+  const date = at >= 0 ? text.slice(0, at) : text;
+  const time = at >= 0 ? text.slice(at + 1) : "00:00:00";
+  const parts = date.split("-");
+  if (parts.length < 3) return null;
+  const [year, month, day] = parts.map((part) => Number.parseInt(part, 10));
+  if (![year, month, day].every((n) => Number.isFinite(n))) return null;
+  const clock = time.split(":");
+  const hour = Number.parseInt(clock[0] || "0", 10);
+  const minute = Number.parseInt(clock[1] || "0", 10);
+  const second = Number.parseInt(clock[2] || "0", 10);
+  return {
+    year,
+    month: month - 1,
+    day,
+    hour: Number.isFinite(hour) ? hour : 0,
+    minute: Number.isFinite(minute) ? minute : 0,
+    second: Number.isFinite(second) ? second : 0
+  };
+}
+var momentIn = (at, zone) => zone === "utc" ? {
+  year: at.getUTCFullYear(),
+  month: at.getUTCMonth(),
+  day: at.getUTCDate(),
+  hour: at.getUTCHours(),
+  minute: at.getUTCMinutes(),
+  second: at.getUTCSeconds()
+} : {
+  year: at.getFullYear(),
+  month: at.getMonth(),
+  day: at.getDate(),
+  hour: at.getHours(),
+  minute: at.getMinutes(),
+  second: at.getSeconds()
+};
+var formatMoment = (moment) => `${moment.year}-${pad(moment.month + 1)}-${pad(moment.day)}T${pad(moment.hour)}:${pad(moment.minute)}:${pad(moment.second)}`;
+var dateText = (moment) => `${moment.year}/${pad(moment.month + 1)}/${pad(moment.day)}`;
+var timeText = (moment) => `${pad(moment.hour)}:${pad(moment.minute)}:${pad(moment.second)}`;
+var readDate = (text) => {
+  const match = /^(\d{4})\/(\d{2})\/(\d{2})$/.exec(text);
+  if (!match || !isRealDate(text)) return null;
+  return { year: Number(match[1]), month: Number(match[2]) - 1, day: Number(match[3]) };
+};
+var readTime = (text) => {
+  const match = /^(\d{2}):(\d{2}):(\d{2})$/.exec(text);
+  if (!match || !isRealTime(text)) return null;
+  return { hour: Number(match[1]), minute: Number(match[2]), second: Number(match[3]) };
+};
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DAY_START = { hour: 0, minute: 0, second: 0 };
+var DAY_END = { hour: 23, minute: 59, second: 59 };
+function normalise(value) {
+  if (!value) return { kind: "relative" };
+  if (value.kind !== "relative") return value;
+  const zone = value.timezone ? { timezone: value.timezone } : {};
+  if (value.span) return { kind: "relative", span: value.span, ...zone };
+  return { kind: "relative", duration: value.duration ?? "", ...zone };
+}
+var fromPreset = (preset, zone) => preset.span ? { kind: "relative", span: preset.span, timezone: zone } : { kind: "relative", duration: preset.duration ?? "", timezone: zone };
+function TimeWindowPicker({
+  value,
+  onChange,
+  defaultValue,
+  presets = DEFAULT_PRESETS,
+  allowRelative = true,
+  allowAbsolute = true,
+  allowCustom = true,
+  bounds,
+  firstDayOfWeek = 0,
+  ariaLabel = "Time window",
+  className = "",
+  disabled = false,
+  size = "md",
+  labels: labelOverrides
+}) {
+  const labels = useMemo(() => withLabels(labelOverrides), [labelOverrides]);
+  const isSet = isTimeWindowSet(value);
+  const described = describeTimeWindow(value, { presets, labels });
+  const shown = isSet ? described.window : labels.placeholder;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      align: "start",
+      side: "bottom",
+      width: "auto",
+      label: ariaLabel,
+      className: "crewlet-time-window__popover",
+      trigger: (open, toggle) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cx(
+            "crewlet-time-window",
+            `crewlet-time-window--${size}`,
+            isSet && "is-set",
+            open && "is-open",
+            disabled && "is-disabled",
+            className
+          ),
+          onClick: () => {
+            if (!disabled) toggle();
+          },
+          disabled,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-label": labels.triggerName(ariaLabel, shown),
+          children: [
+            /* @__PURE__ */ jsx(ScheduleGlyph, { className: "crewlet-time-window__icon", size: "sm" }),
+            /* @__PURE__ */ jsx("span", { className: cx("crewlet-time-window__label", !isSet && "is-placeholder"), children: shown }),
+            /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-time-window__chevron", size: "sm" })
+          ]
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsx(
+        Panel,
+        {
+          value,
+          onChange,
+          close,
+          defaultValue,
+          presets,
+          allowRelative,
+          allowAbsolute,
+          allowCustom,
+          bounds,
+          firstDayOfWeek,
+          labels
+        }
+      )
+    }
+  );
+}
+function Panel({
+  value,
+  onChange,
+  close,
+  defaultValue,
+  presets,
+  allowRelative,
+  allowAbsolute,
+  allowCustom,
+  bounds,
+  firstDayOfWeek,
+  labels
+}) {
+  const now = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const [draft, setDraft] = useState(() => normalise(value));
+  const zone = draft.timezone ?? "local";
+  const described = describeTimeWindow(draft, { presets, labels, now });
+  const resolved = useMemo(() => resolveTimeWindow(draft, now), [draft, now]);
+  const from = resolved.from ? momentIn(new Date(resolved.from), zone) : null;
+  const to = resolved.to ? momentIn(new Date(resolved.to), zone) : draft.kind === "relative" && isTimeWindowSet(draft) ? momentIn(now, zone) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-time-window__panel",
+        allowRelative && allowAbsolute && "crewlet-time-window__panel--both"
+      ),
+      children: [
+        allowRelative ? /* @__PURE__ */ jsx(
+          RelativeRail,
+          {
+            draft,
+            setDraft,
+            presets,
+            allowCustom,
+            zone,
+            labels
+          }
+        ) : null,
+        allowAbsolute ? /* @__PURE__ */ jsx(
+          AbsolutePane,
+          {
+            draft,
+            setDraft,
+            from,
+            to,
+            zone,
+            bounds,
+            firstDayOfWeek,
+            labels
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__footer", children: [
+          /* @__PURE__ */ jsx("p", { className: "crewlet-time-window__summary", "aria-live": "polite", children: described.spoken }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__actions", children: [
+            defaultValue ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "tertiary",
+                onClick: () => setDraft(normalise(defaultValue)),
+                children: labels.resetLabel
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "tertiary", onClick: close, children: labels.cancelLabel }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "secondary",
+                onClick: () => {
+                  onChange(draft);
+                  close();
+                },
+                children: labels.applyLabel
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function RelativeRail({ draft, setDraft, presets, allowCustom, zone, labels }) {
+  const rail = useRef(null);
+  const custom = useId();
+  const chosen = presets.findIndex((preset) => timeWindowMatchesPreset(draft, preset));
+  const stop = chosen >= 0 ? chosen : 0;
+  const held = splitDuration(draft.kind === "relative" && !draft.span ? draft.duration : void 0);
+  const [amount, setAmount] = useState(() => String(held?.amount ?? 1));
+  const [unit, setUnit] = useState(() => held?.unit ?? "h");
+  const heldAmount = held?.amount;
+  const heldUnit = held?.unit;
+  useEffect(() => {
+    if (heldAmount === void 0 || heldUnit === void 0) return;
+    setAmount(String(heldAmount));
+    setUnit(heldUnit);
+  }, [heldAmount, heldUnit]);
+  const take = (at) => {
+    const preset = presets[at];
+    if (preset) setDraft(fromPreset(preset, zone));
+  };
+  function onKeyDown(event, at) {
+    const last = presets.length - 1;
+    let to;
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        to = at === last ? 0 : at + 1;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        to = at === 0 ? last : at - 1;
+        break;
+      case "Home":
+        to = 0;
+        break;
+      case "End":
+        to = last;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    take(to);
+    rail.current?.querySelectorAll('[role="radio"]')[to]?.focus();
+  }
+  const commit = (nextAmount, nextUnit) => {
+    const parsed = Number.parseInt(nextAmount, 10);
+    if (!Number.isFinite(parsed) || parsed <= 0) return;
+    setDraft({ kind: "relative", duration: `${parsed}${nextUnit}`, timezone: zone });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__relative", children: [
+    /* @__PURE__ */ jsx("div", { className: "crewlet-time-window__rail", role: "radiogroup", "aria-label": labels.presetsLabel, ref: rail, children: presets.map((preset, at) => {
+      const on = at === chosen;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": on,
+          tabIndex: at === stop ? 0 : -1,
+          className: cx("crewlet-time-window__preset", on && "is-active"),
+          onClick: () => take(at),
+          onKeyDown: (event) => onKeyDown(event, at),
+          children: [
+            /* @__PURE__ */ jsx(CheckGlyph, { className: "crewlet-time-window__tick", size: "xs", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__preset-label", children: preset.label })
+          ]
+        },
+        preset.span ?? preset.duration ?? preset.label
+      );
+    }) }),
+    allowCustom ? /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__custom", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__custom-label", id: custom, children: labels.customLabel }),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__custom-row", role: "group", "aria-labelledby": custom, children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            inputSize: "sm",
+            width: "xs",
+            inputMode: "numeric",
+            "aria-label": labels.customAmountLabel,
+            value: amount,
+            onChange: (event) => {
+              const next = event.target.value.replace(/[^0-9]/g, "");
+              setAmount(next);
+              commit(next, unit);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "sm",
+            width: "auto",
+            ariaLabel: labels.customUnitLabel,
+            value: unit,
+            onChange: (next) => {
+              setUnit(String(next));
+              commit(amount, String(next));
+            },
+            options: ["m", "h", "d", "w"].map((key) => ({
+              value: key,
+              label: labels.unitNames[key]
+            }))
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+function AbsolutePane({ draft, setDraft, from, to, zone, bounds, firstDayOfWeek, labels }) {
+  const heading = useId();
+  const nowDay = useMemo(today, []);
+  const min = useMemo(() => bounds?.min ? parseMoment(bounds.min) : null, [bounds?.min]);
+  const max = useMemo(() => bounds?.max ? parseMoment(bounds.max) : nowDay, [bounds?.max, nowDay]);
+  const [view, setView] = useState(() => from ?? nowDay);
+  const [focused, setFocused] = useState(() => from ?? nowDay);
+  const [hover, setHover] = useState(null);
+  const [phase, setPhase] = useState("start");
+  const startYear = from?.year;
+  const startMonth = from?.month;
+  useEffect(() => {
+    if (startYear === void 0 || startMonth === void 0) return;
+    setView((held) => {
+      const right2 = shiftMonth(held, 1);
+      const seen = held.year === startYear && held.month === startMonth || right2.year === startYear && right2.month === startMonth;
+      return seen ? held : { year: startYear, month: startMonth, day: 1 };
+    });
+  }, [startYear, startMonth]);
+  const right = shiftMonth(view, 1);
+  const refused = (date) => min !== null && compareDays(date, min) < 0 || max !== null && compareDays(date, max) > 0;
+  const step = (months) => setView(shiftMonth(view, months));
+  const absolute = (next) => ({
+    kind: "absolute",
+    from: next.from ?? (from ? formatMoment(from) : ""),
+    to: next.to ?? (to ? formatMoment(to) : ""),
+    timezone: zone
+  });
+  function pick(date) {
+    if (phase === "start") {
+      setDraft({ kind: "absolute", from: formatMoment({ ...date, ...DAY_START }), to: "", timezone: zone });
+      setPhase("end");
+      return;
+    }
+    const start2 = parseMoment(draft.from);
+    if (start2 && compareDays(date, start2) < 0) {
+      setDraft({
+        kind: "absolute",
+        from: formatMoment({ ...date, ...DAY_START }),
+        to: formatMoment({ year: start2.year, month: start2.month, day: start2.day, ...DAY_END }),
+        timezone: zone
+      });
+    } else {
+      setDraft(
+        absolute({ to: formatMoment({ ...date, hour: to?.hour ?? 23, minute: to?.minute ?? 59, second: to?.second ?? 59 }) })
+      );
+    }
+    setPhase("start");
+    setHover(null);
+  }
+  const start = from ? { year: from.year, month: from.month, day: from.day } : null;
+  const end = to ? { year: to.year, month: to.month, day: to.day } : phase === "end" ? hover : null;
+  const selected = [start, end].filter((day) => day !== null);
+  const inRange = (date) => {
+    if (!start || !end) return false;
+    const low = compareDays(start, end) <= 0 ? start : end;
+    const high = compareDays(start, end) <= 0 ? end : start;
+    return compareDays(date, low) > 0 && compareDays(date, high) < 0;
+  };
+  const commitDate = (which, text) => {
+    const date = readDate(text);
+    if (!date) return;
+    const held = which === "from" ? from : to;
+    const clock = held ?? (which === "from" ? DAY_START : DAY_END);
+    const moment = formatMoment({
+      ...date,
+      hour: clock.hour,
+      minute: clock.minute,
+      second: clock.second
+    });
+    setDraft(absolute(which === "from" ? { from: moment } : { to: moment }));
+    setPhase("start");
+  };
+  const commitTime = (which, text) => {
+    const clock = readTime(text);
+    const held = which === "from" ? from : to;
+    if (!clock || !held) return;
+    const moment = formatMoment({ year: held.year, month: held.month, day: held.day, ...clock });
+    setDraft(absolute(which === "from" ? { from: moment } : { to: moment }));
+    setPhase("start");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__absolute", role: "group", "aria-labelledby": heading, children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__absolute-head", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__absolute-title", id: heading, children: labels.absoluteLabel }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          size: "sm",
+          width: "auto",
+          ariaLabel: labels.timezoneLabel,
+          className: "crewlet-time-window__tz",
+          value: zone,
+          onChange: (next) => setDraft({ ...draft, timezone: next }),
+          options: [
+            { value: "local", label: labels.localLabel },
+            { value: "utc", label: labels.utcLabel }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "crewlet-time-window__calendars", children: [view, right].map((month, at) => /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__calendar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__calendar-head", children: [
+        at === 0 ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "secondary",
+            label: labels.previousMonthLabel,
+            icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, {}),
+            onClick: () => step(-1)
+          }
+        ) : /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-time-window__calendar-title", "aria-live": "polite", children: [
+          MONTH_NAMES[month.month],
+          " ",
+          month.year
+        ] }),
+        at === 1 ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "secondary",
+            label: labels.nextMonthLabel,
+            icon: /* @__PURE__ */ jsx(ChevronRightGlyph, {}),
+            onClick: () => step(1)
+          }
+        ) : /* @__PURE__ */ jsx("span", {})
+      ] }),
+      /* @__PURE__ */ jsx(
+        CalendarGrid,
+        {
+          label: `${MONTH_NAMES[month.month]} ${month.year}`,
+          year: month.year,
+          month: month.month,
+          focused,
+          onFocusedChange: setFocused,
+          onMonthChange: (year, monthIndex) => setView({ year, month: monthIndex, day: 1 }),
+          onSelect: pick,
+          onHover: setHover,
+          selected,
+          inRange,
+          isDisabled: refused,
+          firstDayOfWeek,
+          showOutsideDays: false
+        }
+      )
+    ] }, `${month.year}-${month.month}`)) }),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__fields", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__field", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__field-label", children: labels.startLabel }),
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__field-row", children: [
+          /* @__PURE__ */ jsx(
+            MaskedInput,
+            {
+              mask: DATE_MASK,
+              segments: DATE_SEGMENTS,
+              value: from ? dateText(from) : "",
+              onCommit: (text) => commitDate("from", text),
+              isValid: isRealDate,
+              label: labels.startDateLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MaskedInput,
+            {
+              mask: TIME_MASK,
+              segments: TIME_SEGMENTS,
+              value: from ? timeText(from) : "",
+              onCommit: (text) => commitTime("from", text),
+              isValid: isRealTime,
+              label: labels.startTimeLabel
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__field", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__field-label", children: labels.endLabel }),
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-time-window__field-row", children: [
+          /* @__PURE__ */ jsx(
+            MaskedInput,
+            {
+              mask: DATE_MASK,
+              segments: DATE_SEGMENTS,
+              value: to ? dateText(to) : "",
+              onCommit: (text) => commitDate("to", text),
+              isValid: isRealDate,
+              label: labels.endDateLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MaskedInput,
+            {
+              mask: TIME_MASK,
+              segments: TIME_SEGMENTS,
+              value: to ? timeText(to) : "",
+              onCommit: (text) => commitTime("to", text),
+              isValid: isRealTime,
+              label: labels.endTimeLabel
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function MaskedInput({ mask, segments, value, onCommit, isValid, label }) {
+  const [text, setText] = useState(() => project(mask, value));
+  useEffect(() => {
+    setText(project(mask, value));
+  }, [mask, value]);
+  function onKeyDown(event) {
+    if (isComposing(event)) return;
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      const caret = event.currentTarget.selectionStart ?? text.length;
+      const segment = segmentAt(segments, caret);
+      if (!segment) return;
+      event.preventDefault();
+      setText(stepSegment(mask, text, segment, event.key === "ArrowUp" ? 1 : -1));
+      return;
+    }
+    if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1) return;
+    if (!/\d/.test(event.key)) event.preventDefault();
+  }
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-time-window__masked", text === "" && "is-empty"), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        inputMode: "numeric",
+        className: "crewlet-time-window__masked-input",
+        size: Math.max(text.length, 1),
+        value: text,
+        "aria-label": label,
+        "aria-invalid": text !== "" && isComplete(mask, text) && !isValid(text) ? true : void 0,
+        onChange: (event) => setText(project(mask, event.target.value)),
+        onKeyDown,
+        onBlur: () => {
+          if (!isComplete(mask, text) || !isValid(text)) {
+            setText(project(mask, value));
+            return;
+          }
+          onCommit(text);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-time-window__masked-rest", "aria-hidden": "true", children: remainder(mask, text) })
+  ] });
+}
+
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset };