universal-datetime-picker 2.0.0

package/dist/index.mjs

@@ -0,0 +1,2030 @@
+import { useId, useRef, useEffect, useSyncExternalStore, useCallback, useMemo, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import dayjs from 'dayjs';
+export { default as dayjs } from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import localeData from 'dayjs/plugin/localeData';
+import weekday from 'dayjs/plugin/weekday';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+dayjs.extend(customParseFormat);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+dayjs.extend(localeData);
+dayjs.extend(weekday);
+var DEFAULT_FORMAT = "YYYY-MM-DD HH:mm:ss";
+var DATE_FORMAT = "YYYY-MM-DD";
+var TIME_FORMAT = "HH:mm:ss";
+function resolveFormat(options) {
+  if (options.format) {
+    return options.format;
+  }
+  const mode = options.mode ?? "datetime";
+  const showSeconds = options.showSeconds !== false;
+  const use12Hours = Boolean(options.use12Hours);
+  const timePart = use12Hours ? showSeconds ? "hh:mm:ss A" : "hh:mm A" : showSeconds ? "HH:mm:ss" : "HH:mm";
+  if (mode === "date") {
+    return DATE_FORMAT;
+  }
+  if (mode === "time") {
+    return timePart;
+  }
+  return `${DATE_FORMAT} ${timePart}`;
+}
+function buildTimeValue(value, format) {
+  const hour24 = value.hour();
+  const { hour, isAm } = to12Hour(hour24);
+  return {
+    hour,
+    hour24,
+    minute: value.minute(),
+    second: value.second(),
+    ampm: isAm ? "AM" : "PM",
+    formatted: value.format(format)
+  };
+}
+var asStringDeprecationWarned = false;
+function warnAsStringDeprecation() {
+  if (asStringDeprecationWarned) {
+    return;
+  }
+  if (typeof process !== "undefined" && process.env.NODE_ENV === "production") {
+    return;
+  }
+  asStringDeprecationWarned = true;
+  console.warn(
+    "[universal-datetime-picker] Omitting `asString` currently returns a formatted string. Set `asString={true}` to keep strings, or `asString={false}` to receive a Date / TimeValue. A future major release will default to Date / TimeValue."
+  );
+}
+function parseValue(value, format = DEFAULT_FORMAT) {
+  if (value === void 0 || value === null || value === "") {
+    return null;
+  }
+  if (dayjs.isDayjs(value)) {
+    return value.isValid() ? value : null;
+  }
+  if (value instanceof Date) {
+    const parsed2 = dayjs(value);
+    return parsed2.isValid() ? parsed2 : null;
+  }
+  if (typeof value === "string") {
+    const parsed2 = dayjs(value, format, true);
+    if (parsed2.isValid()) {
+      return parsed2;
+    }
+    const fallback = dayjs(value);
+    return fallback.isValid() ? fallback : null;
+  }
+  const parsed = dayjs(value);
+  return parsed.isValid() ? parsed : null;
+}
+function formatValue(value, format = DEFAULT_FORMAT) {
+  if (!value || !value.isValid()) {
+    return null;
+  }
+  return value.format(format);
+}
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+var HOURS_24 = Array.from({ length: 24 }, (_, i) => pad2(i));
+var HOURS_12 = Array.from(
+  { length: 12 },
+  (_, i) => pad2(i === 0 ? 12 : i)
+);
+var MINUTES = Array.from({ length: 60 }, (_, i) => pad2(i));
+function to12Hour(hour24) {
+  const isAm = hour24 < 12;
+  const hour = hour24 % 12 === 0 ? 12 : hour24 % 12;
+  return { hour, isAm };
+}
+function to24Hour(hour12, isAm) {
+  if (hour12 === 12) {
+    return isAm ? 0 : 12;
+  }
+  return isAm ? hour12 : hour12 + 12;
+}
+function formatLocalized(date, template, locale) {
+  return date.locale(locale).format(template);
+}
+function getWeekdayLabels(locale, weekStartsOn) {
+  const labels = dayjs().locale(locale).localeData().weekdaysMin();
+  return [...labels.slice(weekStartsOn), ...labels.slice(0, weekStartsOn)];
+}
+function startOfWeek(date, weekStartsOn) {
+  const day = date.day();
+  const diff = (day - weekStartsOn + 7) % 7;
+  return date.subtract(diff, "day").startOf("day");
+}
+function endOfWeek(date, weekStartsOn) {
+  return startOfWeek(date, weekStartsOn).add(6, "day").endOf("day");
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function yearWindowStart(year) {
+  return Math.floor(year / 12) * 12;
+}
+function CalendarHeader(props) {
+  const {
+    viewMonth,
+    setViewMonth,
+    panel,
+    onPanelChange,
+    locale,
+    labels,
+    titleId
+  } = props;
+  const year = viewMonth.year();
+  const windowStart = yearWindowStart(year);
+  const windowEnd = windowStart + 11;
+  const now = dayjs();
+  const onPrev = () => {
+    if (panel === "day") {
+      setViewMonth((m) => m.subtract(1, "month"));
+      return;
+    }
+    if (panel === "month") {
+      setViewMonth((m) => m.subtract(1, "year"));
+      return;
+    }
+    setViewMonth((m) => m.subtract(12, "year"));
+  };
+  const onNext = () => {
+    if (panel === "day") {
+      setViewMonth((m) => m.add(1, "month"));
+      return;
+    }
+    if (panel === "month") {
+      setViewMonth((m) => m.add(1, "year"));
+      return;
+    }
+    setViewMonth((m) => m.add(12, "year"));
+  };
+  const prevLabel = panel === "day" ? labels.previousMonth : labels.previousYear;
+  const nextLabel = panel === "day" ? labels.nextMonth : labels.nextYear;
+  let titleContent;
+  if (panel === "day") {
+    titleContent = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ctp-current-month",
+        id: titleId,
+        "aria-label": `${formatLocalized(viewMonth, "MMMM YYYY", locale)}. ${labels.chooseMonth}`,
+        onClick: () => onPanelChange("month"),
+        children: formatLocalized(viewMonth, "MMMM YYYY", locale)
+      }
+    );
+  } else if (panel === "month") {
+    titleContent = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ctp-current-month",
+        id: titleId,
+        "aria-label": `${year}. ${labels.chooseYear}`,
+        onClick: () => onPanelChange("year"),
+        children: String(year)
+      }
+    );
+  } else {
+    titleContent = /* @__PURE__ */ jsxs("span", { className: "ctp-current-month", id: titleId, children: [
+      windowStart,
+      " \u2013 ",
+      windowEnd
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "ctp-month-year", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ctp-prev-month",
+          "aria-label": prevLabel,
+          onClick: onPrev,
+          children: "\u2039"
+        }
+      ),
+      titleContent,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ctp-next-month",
+          "aria-label": nextLabel,
+          onClick: onNext,
+          children: "\u203A"
+        }
+      )
+    ] }),
+    panel === "month" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ctp-month-grid",
+        role: "grid",
+        "aria-label": labels.chooseMonth,
+        children: Array.from({ length: 12 }, (_, monthIndex) => {
+          const monthDate = viewMonth.month(monthIndex);
+          const isCurrent = viewMonth.year() === now.year() && monthIndex === now.month();
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-current": isCurrent ? "date" : void 0,
+              "aria-label": formatLocalized(monthDate, "MMMM YYYY", locale),
+              className: cx(
+                "ctp-box",
+                "ctp-box-month",
+                isCurrent && "ctp-current"
+              ),
+              onClick: () => {
+                setViewMonth((m) => m.month(monthIndex));
+                onPanelChange("day");
+              },
+              children: formatLocalized(monthDate, "MMM", locale)
+            },
+            monthIndex
+          );
+        })
+      }
+    ),
+    panel === "year" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ctp-year-grid",
+        role: "grid",
+        "aria-label": labels.chooseYear,
+        children: Array.from({ length: 12 }, (_, offset) => {
+          const y = windowStart + offset;
+          const isCurrent = now.year() === y;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-current": isCurrent ? "date" : void 0,
+              "aria-label": String(y),
+              className: cx(
+                "ctp-box",
+                "ctp-box-year",
+                isCurrent && "ctp-current"
+              ),
+              onClick: () => {
+                setViewMonth((m) => m.year(y));
+                onPanelChange("month");
+              },
+              children: y
+            },
+            y
+          );
+        })
+      }
+    )
+  ] });
+}
+
+// src/core/logic/calendar.ts
+function isDisabledDay(date, options) {
+  const today = dayjs().startOf("day");
+  const day = date.startOf("day");
+  if (options.disablePastDates && day.isBefore(today, "day")) {
+    return true;
+  }
+  if (options.disableFutureDates && day.isAfter(today, "day")) {
+    return true;
+  }
+  const min = parseValue(options.minDate ?? null);
+  const max = parseValue(options.maxDate ?? null);
+  if (min && day.isBefore(min.startOf("day"), "day")) {
+    return true;
+  }
+  if (max && day.isAfter(max.startOf("day"), "day")) {
+    return true;
+  }
+  return false;
+}
+function buildCalendarMonth(options) {
+  const weekStartsOn = options.weekStartsOn ?? 0;
+  const monthStart = options.viewMonth.startOf("month");
+  const monthEnd = options.viewMonth.endOf("month");
+  const gridStart = startOfWeek(monthStart, weekStartsOn);
+  const gridEnd = endOfWeek(monthEnd, weekStartsOn);
+  const weeks = [];
+  let cursor = gridStart.clone();
+  while (cursor.isBefore(gridEnd) || cursor.isSame(gridEnd, "day")) {
+    const week = [];
+    for (let i = 0; i < 7; i += 1) {
+      const date = cursor.clone();
+      const isCurrentMonth = date.isSame(options.viewMonth, "month");
+      const isSelected = Boolean(
+        options.selected && date.isSame(options.selected, "day")
+      );
+      const isRangeStart = Boolean(
+        options.rangeStart && date.isSame(options.rangeStart, "day")
+      );
+      const isRangeEnd = Boolean(
+        options.rangeEnd && date.isSame(options.rangeEnd, "day")
+      );
+      const effectiveEnd = options.rangeEnd ?? options.hoverEnd ?? null;
+      let isInRange = false;
+      if (options.rangeStart && effectiveEnd) {
+        const rangeLow = options.rangeStart.isBefore(effectiveEnd, "day") ? options.rangeStart : effectiveEnd;
+        const rangeHigh = options.rangeStart.isBefore(effectiveEnd, "day") ? effectiveEnd : options.rangeStart;
+        isInRange = date.isAfter(rangeLow, "day") && date.isBefore(rangeHigh, "day") || date.isSame(rangeLow, "day") || date.isSame(rangeHigh, "day");
+      }
+      week.push({
+        date,
+        isCurrentMonth,
+        isCurrentDate: date.isSame(dayjs(), "day"),
+        isFuture: date.isAfter(dayjs(), "day"),
+        isPast: date.isBefore(dayjs(), "day"),
+        isWeekend: date.day() === 0 || date.day() === 6,
+        isDisabled: isDisabledDay(date, options),
+        isSelected,
+        isInRange,
+        isRangeStart,
+        isRangeEnd
+      });
+      cursor = cursor.add(1, "day");
+    }
+    weeks.push(week);
+  }
+  return weeks;
+}
+
+// src/core/types.ts
+var DEFAULT_LABELS = {
+  date: "Date",
+  time: "Time",
+  clear: "Clear",
+  close: "Close",
+  ok: "OK",
+  start: "Start",
+  end: "End",
+  chooseDate: "Choose date",
+  chooseDateRange: "Choose date range",
+  chooseMonth: "Choose month",
+  chooseYear: "Choose year",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  previousYear: "Previous year",
+  nextYear: "Next year",
+  selectEnd: "Select end date"
+};
+
+// src/core/controller.ts
+function padDisplay(n) {
+  return String(n).padStart(2, "0");
+}
+var PickerController = class {
+  constructor(options = {}) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.calPanel = "day";
+    this.showHours = false;
+    this.showMinutes = false;
+    this.showSecondsOpen = false;
+    this.showAmPm = false;
+    this.subscribe = (listener) => {
+      this.listeners.add(listener);
+      return () => {
+        this.listeners.delete(listener);
+      };
+    };
+    this.getSnapshot = () => this.snapshot;
+    /** Stable for useSyncExternalStore — returns same reference until mutate. */
+    this.getServerSnapshot = () => this.snapshot;
+    this.options = { ...options };
+    const mode = options.mode ?? "datetime";
+    const showSeconds = options.showSeconds !== false;
+    const use12Hours = Boolean(options.use12Hours);
+    const format = resolveFormat({
+      mode,
+      format: options.format,
+      use12Hours,
+      showSeconds
+    });
+    const initial = parseValue(options.value ?? options.defaultValue ?? dayjs(), format) ?? dayjs();
+    this.draft = initial;
+    this.viewMonth = initial.startOf("month");
+    this.focusedDay = initial;
+    this.tab = mode === "time" ? "time" : "date";
+    this.open = options.open ?? (options.inline ? true : options.defaultOpen ?? true);
+    this.snapshot = this.buildSnapshot();
+  }
+  setOptions(partial) {
+    const prev = this.options;
+    this.options = { ...this.options, ...partial };
+    if (partial.mode !== void 0 && partial.mode !== prev.mode) {
+      this.tab = partial.mode === "time" ? "time" : "date";
+    }
+    if (partial.open !== void 0) {
+      this.open = partial.open;
+    }
+    if ("value" in partial) {
+      if (partial.value === null) {
+        const fallback = dayjs();
+        this.draft = fallback;
+        this.viewMonth = fallback.startOf("month");
+        this.focusedDay = fallback;
+      } else if (partial.value !== void 0) {
+        const format = this.getResolvedFormat();
+        const parsed = parseValue(partial.value, format);
+        if (parsed) {
+          this.draft = parsed;
+          this.viewMonth = parsed.startOf("month");
+          this.focusedDay = parsed;
+        }
+      }
+    }
+    this.emit();
+  }
+  getResolvedFormat() {
+    return resolveFormat({
+      mode: this.options.mode ?? "datetime",
+      format: this.options.format,
+      use12Hours: Boolean(this.options.use12Hours),
+      showSeconds: this.options.showSeconds !== false
+    });
+  }
+  getLabels() {
+    return { ...DEFAULT_LABELS, ...this.options.labels };
+  }
+  emit() {
+    this.snapshot = this.buildSnapshot();
+    this.listeners.forEach((l) => l());
+  }
+  buildSnapshot() {
+    const mode = this.options.mode ?? "datetime";
+    const layout = this.options.layout ?? "combined";
+    const showSeconds = this.options.showSeconds !== false;
+    const use12Hours = Boolean(this.options.use12Hours);
+    const inline = Boolean(this.options.inline);
+    const popover = Boolean(this.options.popover);
+    const weekStartsOn = this.options.weekStartsOn ?? 0;
+    const locale = this.options.locale ?? "en";
+    const resolvedFormat = this.getResolvedFormat();
+    const labels = this.getLabels();
+    const weeks = buildCalendarMonth({
+      viewMonth: this.viewMonth,
+      selected: this.draft,
+      minDate: this.options.minDate,
+      maxDate: this.options.maxDate,
+      disablePastDates: this.options.disablePastDates,
+      disableFutureDates: this.options.disableFutureDates,
+      weekStartsOn
+    });
+    const showDate = mode !== "time";
+    const showTime = mode !== "date";
+    const useTabs = mode === "datetime" && layout === "tabs";
+    const showDatePanel = showDate && (!useTabs || this.tab === "date");
+    const showTimePanel = showTime && (!useTabs || this.tab === "time");
+    const hour24 = this.draft.hour();
+    const { hour: hour12, isAm } = to12Hour(hour24);
+    return {
+      draft: this.draft,
+      viewMonth: this.viewMonth,
+      calPanel: this.calPanel,
+      tab: this.tab,
+      showHours: this.showHours,
+      showMinutes: this.showMinutes,
+      showSecondsOpen: this.showSecondsOpen,
+      showAmPm: this.showAmPm,
+      focusedDay: this.focusedDay,
+      open: this.open,
+      mode,
+      layout,
+      showSeconds,
+      use12Hours,
+      inline,
+      popover,
+      weekStartsOn,
+      locale,
+      labels,
+      resolvedFormat,
+      asString: this.options.asString,
+      className: this.options.className,
+      theme: this.options.theme,
+      weeks,
+      weekdayLabels: getWeekdayLabels(locale, weekStartsOn),
+      showDate,
+      showTime,
+      useTabs,
+      showDatePanel,
+      showTimePanel,
+      showModeTabs: useTabs,
+      hour24,
+      hour12,
+      isAm,
+      hourOptions: use12Hours ? HOURS_12 : HOURS_24,
+      displayHour: use12Hours ? padDisplay(hour12) : padDisplay(hour24),
+      displayMinute: padDisplay(this.draft.minute()),
+      displaySecond: padDisplay(this.draft.second()),
+      minuteOptions: MINUTES
+    };
+  }
+  setOpen(open) {
+    if (this.options.inline) {
+      return;
+    }
+    this.open = open;
+    this.options.onOpenChange?.(open);
+    this.emit();
+  }
+  close() {
+    if (!this.options.inline) {
+      this.setOpen(false);
+    }
+  }
+  setTab(tab) {
+    this.tab = tab;
+    this.emit();
+  }
+  setCalPanel(panel) {
+    this.calPanel = panel;
+    this.emit();
+  }
+  setViewMonth(next) {
+    this.viewMonth = typeof next === "function" ? next(this.viewMonth) : next;
+    this.emit();
+  }
+  selectDay(day) {
+    this.draft = this.draft.year(day.year()).month(day.month()).date(day.date());
+    this.focusedDay = day;
+    this.emit();
+  }
+  setHour(hourValue) {
+    this.draft = this.draft.hour(hourValue);
+    this.emit();
+  }
+  setMinute(minute) {
+    this.draft = this.draft.minute(minute);
+    this.emit();
+  }
+  setSecond(second) {
+    this.draft = this.draft.second(second);
+    this.emit();
+  }
+  setAmPm(isAm) {
+    const { hour } = to12Hour(this.draft.hour());
+    this.draft = this.draft.hour(to24Hour(hour, isAm));
+    this.emit();
+  }
+  toggleHours() {
+    this.showHours = !this.showHours;
+    this.showMinutes = false;
+    this.showSecondsOpen = false;
+    this.showAmPm = false;
+    this.emit();
+  }
+  toggleMinutes() {
+    this.showMinutes = !this.showMinutes;
+    this.showHours = false;
+    this.showSecondsOpen = false;
+    this.showAmPm = false;
+    this.emit();
+  }
+  toggleSeconds() {
+    this.showSecondsOpen = !this.showSecondsOpen;
+    this.showHours = false;
+    this.showMinutes = false;
+    this.showAmPm = false;
+    this.emit();
+  }
+  toggleAmPm() {
+    this.showAmPm = !this.showAmPm;
+    this.showHours = false;
+    this.showMinutes = false;
+    this.showSecondsOpen = false;
+    this.emit();
+  }
+  closeTimeColumns() {
+    this.showHours = false;
+    this.showMinutes = false;
+    this.showSecondsOpen = false;
+    this.showAmPm = false;
+    this.emit();
+  }
+  selectHourOption(opt) {
+    const snap = this.snapshot;
+    if (snap.use12Hours) {
+      this.draft = this.draft.hour(to24Hour(Number(opt), snap.isAm));
+    } else {
+      this.draft = this.draft.hour(Number(opt));
+    }
+    this.showHours = false;
+    this.emit();
+  }
+  selectMinuteOption(opt) {
+    this.draft = this.draft.minute(Number(opt));
+    this.showMinutes = false;
+    this.emit();
+  }
+  selectSecondOption(opt) {
+    this.draft = this.draft.second(Number(opt));
+    this.showSecondsOpen = false;
+    this.emit();
+  }
+  selectAmPmOption(opt) {
+    const { hour } = to12Hour(this.draft.hour());
+    this.draft = this.draft.hour(to24Hour(hour, opt === "AM"));
+    this.showAmPm = false;
+    this.emit();
+  }
+  handleGridKeyDown(key) {
+    const snap = this.snapshot;
+    let next = this.focusedDay;
+    switch (key) {
+      case "ArrowLeft":
+        next = this.focusedDay.subtract(1, "day");
+        break;
+      case "ArrowRight":
+        next = this.focusedDay.add(1, "day");
+        break;
+      case "ArrowUp":
+        next = this.focusedDay.subtract(7, "day");
+        break;
+      case "ArrowDown":
+        next = this.focusedDay.add(7, "day");
+        break;
+      case "Home":
+        next = startOfWeek(this.focusedDay, snap.weekStartsOn);
+        break;
+      case "End":
+        next = endOfWeek(this.focusedDay, snap.weekStartsOn);
+        break;
+      case "PageUp":
+        next = this.focusedDay.subtract(1, "month");
+        this.viewMonth = next.startOf("month");
+        break;
+      case "PageDown":
+        next = this.focusedDay.add(1, "month");
+        this.viewMonth = next.startOf("month");
+        break;
+      case "Enter":
+      case " ": {
+        const cell = snap.weeks.flat().find((d) => d.date.isSame(this.focusedDay, "day"));
+        if (cell && !cell.isDisabled && cell.isCurrentMonth) {
+          this.selectDay(cell.date);
+        }
+        return true;
+      }
+      default:
+        return false;
+    }
+    this.focusedDay = next;
+    if (!next.isSame(this.viewMonth, "month")) {
+      this.viewMonth = next.startOf("month");
+    }
+    this.emit();
+    return true;
+  }
+  confirm() {
+    const snap = this.snapshot;
+    let payload;
+    if (snap.asString === false) {
+      if (snap.mode === "time") {
+        payload = buildTimeValue(this.draft, snap.resolvedFormat);
+      } else if (snap.mode === "date") {
+        payload = this.draft.startOf("day").toDate();
+      } else {
+        payload = this.draft.toDate();
+      }
+    } else {
+      if (snap.asString === void 0) {
+        warnAsStringDeprecation();
+      }
+      payload = formatValue(this.draft, snap.resolvedFormat);
+    }
+    this.options.onChange?.(payload);
+    this.close();
+    return payload;
+  }
+  clear() {
+    this.options.onChange?.(null);
+    this.close();
+  }
+  /** Year window helpers for month/year panels */
+  yearWindowStart(year) {
+    return Math.floor(year / 12) * 12;
+  }
+  navigatePrev() {
+    if (this.calPanel === "day") {
+      this.viewMonth = this.viewMonth.subtract(1, "month");
+    } else if (this.calPanel === "month") {
+      this.viewMonth = this.viewMonth.subtract(1, "year");
+    } else {
+      this.viewMonth = this.viewMonth.subtract(12, "year");
+    }
+    this.emit();
+  }
+  navigateNext() {
+    if (this.calPanel === "day") {
+      this.viewMonth = this.viewMonth.add(1, "month");
+    } else if (this.calPanel === "month") {
+      this.viewMonth = this.viewMonth.add(1, "year");
+    } else {
+      this.viewMonth = this.viewMonth.add(12, "year");
+    }
+    this.emit();
+  }
+  selectMonth(monthIndex) {
+    this.viewMonth = this.viewMonth.month(monthIndex);
+    this.calPanel = "day";
+    this.emit();
+  }
+  selectYear(year) {
+    this.viewMonth = this.viewMonth.year(year);
+    this.calPanel = "month";
+    this.emit();
+  }
+};
+
+// src/vanilla/a11y.ts
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var POPOVER_GAP = 8;
+var POPOVER_PADDING = 8;
+var DEFAULT_PICKER_WIDTH = 300;
+var DEFAULT_PICKER_HEIGHT = 360;
+function attachFocusTrap(container, active) {
+  const previouslyFocused = document.activeElement;
+  const focusables = () => Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+    (el) => !el.hasAttribute("disabled") && el.offsetParent !== null
+  );
+  const first = focusables()[0];
+  first?.focus({ preventScroll: true });
+  const onKeyDown = (event) => {
+    if (event.key !== "Tab") {
+      return;
+    }
+    const items = focusables();
+    if (items.length === 0) {
+      return;
+    }
+    const firstItem = items[0];
+    const lastItem = items[items.length - 1];
+    if (event.shiftKey && document.activeElement === firstItem) {
+      event.preventDefault();
+      lastItem.focus({ preventScroll: true });
+    } else if (!event.shiftKey && document.activeElement === lastItem) {
+      event.preventDefault();
+      firstItem.focus({ preventScroll: true });
+    }
+  };
+  container.addEventListener("keydown", onKeyDown);
+  return () => {
+    container.removeEventListener("keydown", onKeyDown);
+    previouslyFocused?.focus?.({ preventScroll: true });
+  };
+}
+function attachEscape(handler, active) {
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      handler();
+    }
+  };
+  document.addEventListener("keydown", onKeyDown);
+  return () => document.removeEventListener("keydown", onKeyDown);
+}
+function attachClickOutside(handler, active, floating, anchorEl) {
+  const onPointerDown = (event) => {
+    const target = event.target;
+    if (!(target instanceof Node)) {
+      return;
+    }
+    if (floating?.contains(target)) {
+      return;
+    }
+    if (anchorEl?.contains(target)) {
+      return;
+    }
+    handler();
+  };
+  document.addEventListener("pointerdown", onPointerDown, true);
+  return () => {
+    document.removeEventListener("pointerdown", onPointerDown, true);
+  };
+}
+function computePopoverPosition(anchorEl, pickerWidth, pickerHeight) {
+  const rect = anchorEl.getBoundingClientRect();
+  let top = rect.bottom + POPOVER_GAP;
+  let left = rect.left;
+  if (left + pickerWidth > window.innerWidth - POPOVER_PADDING) {
+    left = Math.max(
+      POPOVER_PADDING,
+      window.innerWidth - pickerWidth - POPOVER_PADDING
+    );
+  }
+  if (left < POPOVER_PADDING) {
+    left = POPOVER_PADDING;
+  }
+  if (top + pickerHeight > window.innerHeight - POPOVER_PADDING) {
+    const above = rect.top - pickerHeight - POPOVER_GAP;
+    if (above >= POPOVER_PADDING) {
+      top = above;
+    } else {
+      top = Math.max(
+        POPOVER_PADDING,
+        window.innerHeight - pickerHeight - POPOVER_PADDING
+      );
+    }
+  }
+  return { top, left };
+}
+function resolveThemeAttr(theme, anchorEl) {
+  if (theme === "light" || theme === "dark") {
+    return theme;
+  }
+  let node = anchorEl ?? null;
+  while (node) {
+    const attr = node.getAttribute("data-ctp-theme");
+    if (attr === "dark" || attr === "light") {
+      return attr;
+    }
+    node = node.parentElement;
+  }
+  if (typeof document !== "undefined") {
+    const root = document.documentElement.getAttribute("data-ctp-theme");
+    if (root === "dark" || root === "light") {
+      return root;
+    }
+  }
+  return void 0;
+}
+function useControllableState(options) {
+  const { value, defaultValue, onChange } = options;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const state = isControlled ? value : uncontrolled;
+  const setState = useCallback(
+    (next) => {
+      const resolved = typeof next === "function" ? next(state) : next;
+      if (!isControlled) {
+        setUncontrolled(resolved);
+      }
+      onChange?.(resolved);
+    },
+    [isControlled, onChange, state]
+  );
+  return [state, setState];
+}
+function cx2(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function usePopoverPosition(anchorEl, open, enabled, floatingRef) {
+  const [position, setPosition] = useState(null);
+  const update = useCallback(() => {
+    if (!enabled || !open || !anchorEl) {
+      setPosition(null);
+      return;
+    }
+    const floating = floatingRef.current;
+    const width = floating?.offsetWidth || DEFAULT_PICKER_WIDTH;
+    const height = floating?.offsetHeight || DEFAULT_PICKER_HEIGHT;
+    setPosition(computePopoverPosition(anchorEl, width, height));
+  }, [anchorEl, enabled, open, floatingRef]);
+  useIsomorphicLayoutEffect(() => {
+    update();
+  }, [update]);
+  useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    const floating = floatingRef.current;
+    let observer;
+    if (floating && typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(() => update());
+      observer.observe(floating);
+    }
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+      observer?.disconnect();
+    };
+  }, [open, enabled, update, floatingRef]);
+  if (!open || !enabled) {
+    return null;
+  }
+  return position;
+}
+function DateTime(props) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    asString,
+    showSeconds = true,
+    format,
+    mode = "datetime",
+    layout = "combined",
+    minDate,
+    maxDate,
+    disablePastDates = false,
+    disableFutureDates = false,
+    weekStartsOn = 0,
+    use12Hours = false,
+    inline = false,
+    className,
+    style,
+    locale = "en",
+    labels: labelsProp,
+    theme,
+    open: openProp,
+    defaultOpen = true,
+    onOpenChange,
+    anchorEl,
+    popover = false
+  } = props;
+  const titleId = useId();
+  const dialogRef = useRef(null);
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    defaultValue: inline ? true : defaultOpen,
+    onChange: onOpenChange
+  });
+  const controllerRef = useRef(null);
+  if (!controllerRef.current) {
+    controllerRef.current = new PickerController({
+      value,
+      defaultValue,
+      onChange,
+      asString,
+      showSeconds,
+      format,
+      mode,
+      layout,
+      minDate,
+      maxDate,
+      disablePastDates,
+      disableFutureDates,
+      weekStartsOn,
+      use12Hours,
+      inline,
+      className,
+      locale,
+      labels: labelsProp,
+      theme,
+      open,
+      popover,
+      anchorEl
+    });
+  }
+  const controller = controllerRef.current;
+  useEffect(() => {
+    controller.setOptions({
+      value,
+      onChange,
+      asString,
+      showSeconds,
+      format,
+      mode,
+      layout,
+      minDate,
+      maxDate,
+      disablePastDates,
+      disableFutureDates,
+      weekStartsOn,
+      use12Hours,
+      inline,
+      className,
+      locale,
+      labels: labelsProp,
+      theme,
+      open,
+      popover,
+      anchorEl,
+      onOpenChange: setOpen
+    });
+  }, [
+    controller,
+    value,
+    onChange,
+    asString,
+    showSeconds,
+    format,
+    mode,
+    layout,
+    minDate,
+    maxDate,
+    disablePastDates,
+    disableFutureDates,
+    weekStartsOn,
+    use12Hours,
+    inline,
+    className,
+    locale,
+    labelsProp,
+    theme,
+    open,
+    popover,
+    anchorEl,
+    setOpen
+  ]);
+  const snap = useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getServerSnapshot
+  );
+  const close = useCallback(() => {
+    if (!inline) {
+      setOpen(false);
+    }
+  }, [inline, setOpen]);
+  useEffect(() => {
+    if (!(open && !inline)) {
+      return;
+    }
+    const el = dialogRef.current;
+    if (!el) {
+      return;
+    }
+    return attachEscape(close);
+  }, [open, inline, close]);
+  useEffect(() => {
+    if (!(open && !inline)) {
+      return;
+    }
+    const el = dialogRef.current;
+    if (!el) {
+      return;
+    }
+    return attachFocusTrap(el);
+  }, [open, inline]);
+  useEffect(() => {
+    if (!(open && !inline && popover)) {
+      return;
+    }
+    return attachClickOutside(close, true, dialogRef.current, anchorEl);
+  }, [open, inline, popover, close, anchorEl]);
+  const position = usePopoverPosition(
+    anchorEl,
+    open && !inline,
+    popover,
+    dialogRef
+  );
+  const onGridKeyDown = (event) => {
+    if (controller.handleGridKeyDown(event.key)) {
+      event.preventDefault();
+    }
+  };
+  const onBackdropClick = (event) => {
+    if (event.target === event.currentTarget) {
+      close();
+    }
+  };
+  if (!open && !inline) {
+    return null;
+  }
+  const themeAttr = resolveThemeAttr(theme, anchorEl);
+  const pickerStyle = popover && !inline ? {
+    ...style,
+    position: "fixed",
+    top: position?.top ?? 80,
+    left: position?.left ?? 16
+  } : style;
+  const datePanel = /* @__PURE__ */ jsxs("div", { className: "ctp-body ctp-body-calendar-date", children: [
+    /* @__PURE__ */ jsx(
+      CalendarHeader,
+      {
+        viewMonth: snap.viewMonth,
+        setViewMonth: (next) => controller.setViewMonth(next),
+        panel: snap.calPanel,
+        onPanelChange: (p) => controller.setCalPanel(p),
+        locale: snap.locale,
+        labels: snap.labels,
+        titleId: snap.showDatePanel ? titleId : void 0
+      }
+    ),
+    snap.calPanel === "day" && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "ctp-main-calendar",
+        role: "grid",
+        "aria-label": snap.labels.chooseDate,
+        tabIndex: 0,
+        onKeyDown: onGridKeyDown,
+        children: [
+          snap.weekdayLabels.map((label) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ctp-box ctp-box-days",
+              role: "columnheader",
+              children: label
+            },
+            label
+          )),
+          snap.weeks.map(
+            (week) => week.map((dayData) => {
+              const selected = dayData.isSelected;
+              const focused = dayData.date.isSame(snap.focusedDay, "day");
+              const disabled = !dayData.isCurrentMonth || dayData.isDisabled;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  tabIndex: focused ? 0 : -1,
+                  "aria-selected": selected,
+                  "aria-disabled": disabled,
+                  disabled,
+                  "aria-label": formatLocalized(
+                    dayData.date,
+                    "dddd, MMMM D, YYYY",
+                    snap.locale
+                  ),
+                  className: cx2(
+                    "ctp-box",
+                    "ctp-box-date",
+                    !dayData.isCurrentMonth && "not-current-month",
+                    selected && "selected",
+                    dayData.isDisabled && "disabled-date",
+                    dayData.isWeekend && "weekend-day",
+                    dayData.isCurrentDate && "ctp-today",
+                    dayData.isInRange && "ctp-in-range",
+                    dayData.isRangeStart && "ctp-range-start",
+                    dayData.isRangeEnd && "ctp-range-end"
+                  ),
+                  onClick: () => {
+                    if (!disabled) {
+                      controller.selectDay(dayData.date);
+                    }
+                  },
+                  children: dayData.date.format("D")
+                },
+                dayData.date.format("YYYY-MM-DD")
+              );
+            })
+          )
+        ]
+      }
+    )
+  ] });
+  const timePanel = /* @__PURE__ */ jsxs("div", { className: "ctp-body ctp-body-calendar-time", children: [
+    snap.showDatePanel && /* @__PURE__ */ jsx("div", { className: "ctp-section-label", children: snap.labels.time }),
+    !snap.showDatePanel && /* @__PURE__ */ jsx("span", { className: "ctp-visually-hidden", id: titleId, children: snap.labels.time }),
+    /* @__PURE__ */ jsxs("div", { className: "ctp-main-time", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ctp-main-time-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "ctp-box", children: "Hr" }),
+        /* @__PURE__ */ jsx("div", { className: "ctp-box", children: "Min" }),
+        snap.showSeconds && /* @__PURE__ */ jsx("div", { className: "ctp-box", children: "Sec" }),
+        snap.use12Hours && /* @__PURE__ */ jsx("div", { className: "ctp-box", children: "AM/PM" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ctp-main-time-body", children: [
+        /* @__PURE__ */ jsx(
+          TimeColumn,
+          {
+            label: "hours",
+            open: snap.showHours,
+            onToggle: () => controller.toggleHours(),
+            display: snap.displayHour,
+            options: snap.hourOptions,
+            onSelect: (opt) => controller.selectHourOption(opt)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimeColumn,
+          {
+            label: "minutes",
+            open: snap.showMinutes,
+            onToggle: () => controller.toggleMinutes(),
+            display: snap.displayMinute,
+            options: snap.minuteOptions,
+            onSelect: (opt) => controller.selectMinuteOption(opt)
+          }
+        ),
+        snap.showSeconds && /* @__PURE__ */ jsx(
+          TimeColumn,
+          {
+            label: "seconds",
+            open: snap.showSecondsOpen,
+            onToggle: () => controller.toggleSeconds(),
+            display: snap.displaySecond,
+            options: snap.minuteOptions,
+            onSelect: (opt) => controller.selectSecondOption(opt)
+          }
+        ),
+        snap.use12Hours && /* @__PURE__ */ jsx(
+          TimeColumn,
+          {
+            label: "am-pm",
+            open: snap.showAmPm,
+            onToggle: () => controller.toggleAmPm(),
+            display: snap.isAm ? "AM" : "PM",
+            options: ["AM", "PM"],
+            onSelect: (opt) => controller.selectAmPmOption(opt)
+          }
+        )
+      ] })
+    ] })
+  ] });
+  const picker = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dialogRef,
+      className: cx2(
+        "ctp-calendar-time-picker",
+        popover && !inline && "ctp-popover",
+        snap.use12Hours && "ctp-use-12h",
+        snap.mode === "time" && "ctp-mode-time",
+        !snap.showSeconds && "ctp-no-seconds",
+        snap.showDatePanel && snap.showTimePanel && "ctp-layout-combined",
+        className
+      ),
+      style: pickerStyle,
+      "data-ctp-theme": themeAttr,
+      role: inline ? void 0 : "dialog",
+      "aria-modal": inline ? void 0 : true,
+      "aria-labelledby": titleId,
+      children: [
+        snap.showModeTabs && /* @__PURE__ */ jsx("div", { className: "ctp-header", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "ctp-button-container",
+            role: "tablist",
+            "aria-label": "Picker mode",
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": snap.tab === "date",
+                  className: cx2("ctp-date", snap.tab === "date" && "ctp-active"),
+                  onClick: () => controller.setTab("date"),
+                  children: snap.labels.date
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": snap.tab === "time",
+                  className: cx2("ctp-time", snap.tab === "time" && "ctp-active"),
+                  onClick: () => controller.setTab("time"),
+                  children: snap.labels.time
+                }
+              )
+            ]
+          }
+        ) }),
+        snap.showDatePanel && datePanel,
+        snap.showTimePanel && timePanel,
+        /* @__PURE__ */ jsxs("div", { className: "ctp-footer", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "close-button",
+              onClick: () => {
+                onChange?.(null);
+                close();
+              },
+              children: snap.labels.clear
+            }
+          ),
+          !inline && /* @__PURE__ */ jsx("button", { type: "button", className: "ctp-cancel", onClick: close, children: snap.labels.close }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                controller.confirm();
+                close();
+              },
+              children: snap.labels.ok
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  if (inline) {
+    return picker;
+  }
+  if (popover) {
+    return createPortal(picker, document.body);
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ctp-calendar-time-picker-absolute-container",
+        "data-ctp-theme": themeAttr,
+        onClick: onBackdropClick,
+        children: picker
+      }
+    ),
+    document.body
+  );
+}
+function TimeColumn(props) {
+  const listId = useId();
+  const listRef = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    if (props.open && listRef.current) {
+      listRef.current.scrollTop = 0;
+    }
+  }, [props.open]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx2("ctp-box", "ctp-box-time", !props.open && "not-opened"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `ctp-${props.label === "am-pm" ? "am-pm" : props.label.slice(0, -1)} ctp-initial-time`,
+            "aria-haspopup": "listbox",
+            "aria-expanded": props.open,
+            "aria-controls": listId,
+            "aria-label": `Select ${props.label}`,
+            onClick: props.onToggle,
+            children: props.display
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: listRef,
+            id: listId,
+            role: "listbox",
+            "aria-label": props.label,
+            className: cx2(
+              `ctp-overflow-${props.label}`,
+              !props.open && "not-visible"
+            ),
+            children: props.options.map((opt) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": opt === props.display,
+                className: `ctp-${props.label === "am-pm" ? "am-pm" : props.label.slice(0, -1)}`,
+                onClick: () => props.onSelect(opt),
+                children: opt
+              },
+              opt
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function cx3(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function isTimeValue(value) {
+  return typeof value === "object" && value !== null && !(value instanceof Date) && "formatted" in value && "hour24" in value;
+}
+function toDisplayString(value, format) {
+  if (value === null) {
+    return null;
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (isTimeValue(value)) {
+    return value.formatted;
+  }
+  return formatValue(dayjs(value), format);
+}
+function DateTimeInput(props) {
+  const {
+    value,
+    defaultValue = null,
+    onChange,
+    asString,
+    showSeconds = true,
+    format,
+    mode = "datetime",
+    use12Hours = false,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    placeholder = "Select date and time",
+    id,
+    name,
+    disabled = false,
+    readOnly = true,
+    className,
+    inputClassName,
+    style,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    ...pickerProps
+  } = props;
+  const resolvedFormat = useMemo(
+    () => resolveFormat({ mode, format, use12Hours, showSeconds }),
+    [mode, format, use12Hours, showSeconds]
+  );
+  const [anchorEl, setAnchorEl] = useState(null);
+  const controlledFormatted = value !== void 0 ? formatValue(parseValue(value, resolvedFormat), resolvedFormat) : void 0;
+  const defaultFormatted = useMemo(
+    () => formatValue(parseValue(defaultValue, resolvedFormat), resolvedFormat),
+    // only seed once from defaultValue
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const [internalValue, setInternalValue] = useControllableState({
+    value: controlledFormatted,
+    defaultValue: defaultFormatted,
+    onChange: void 0
+  });
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const display = internalValue ?? "";
+  const setInputRef = useCallback((node) => {
+    setAnchorEl(node);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: cx3("ctp-input-root", className), style, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: setInputRef,
+        id,
+        name,
+        className: cx3("ctp-input", inputClassName),
+        value: display,
+        readOnly,
+        disabled,
+        placeholder,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabel ?? placeholder,
+        onClick: () => {
+          if (!disabled) {
+            setOpen(true);
+          }
+        },
+        onKeyDown: (event) => {
+          if (disabled) {
+            return;
+          }
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setOpen(true);
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DateTime,
+      {
+        ...pickerProps,
+        format,
+        mode,
+        use12Hours,
+        asString,
+        showSeconds,
+        value: internalValue,
+        open,
+        onOpenChange: setOpen,
+        popover: true,
+        anchorEl,
+        onChange: (next) => {
+          setInternalValue(toDisplayString(next, resolvedFormat));
+          onChange?.(next);
+        }
+      }
+    )
+  ] });
+}
+
+// src/core/rangeController.ts
+var RangeController = class {
+  constructor(options = {}) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.hoverEnd = null;
+    this.calPanel = "day";
+    this.subscribe = (listener) => {
+      this.listeners.add(listener);
+      return () => {
+        this.listeners.delete(listener);
+      };
+    };
+    this.getSnapshot = () => this.snapshot;
+    this.getServerSnapshot = () => this.snapshot;
+    this.options = { ...options };
+    const format = options.format ?? DATE_FORMAT;
+    const parsed = this.parseRange(options.value ?? options.defaultValue, format);
+    this.start = parsed.start;
+    this.end = parsed.end;
+    this.viewMonth = (parsed.start ?? dayjs()).startOf("month");
+    this.focusedDay = parsed.start ?? dayjs();
+    this.open = options.open ?? (options.inline ? true : options.defaultOpen ?? true);
+    this.snapshot = this.buildSnapshot();
+  }
+  parseRange(range, format) {
+    return {
+      start: parseValue(range?.start ?? null, format),
+      end: parseValue(range?.end ?? null, format)
+    };
+  }
+  setOptions(partial) {
+    this.options = { ...this.options, ...partial };
+    if (partial.open !== void 0) {
+      this.open = partial.open;
+    }
+    if ("value" in partial) {
+      if (partial.value === null) {
+        this.start = null;
+        this.end = null;
+        this.hoverEnd = null;
+      } else if (partial.value !== void 0) {
+        const format = this.options.format ?? DATE_FORMAT;
+        const parsed = this.parseRange(partial.value, format);
+        this.start = parsed.start;
+        this.end = parsed.end;
+        if (parsed.start) {
+          this.viewMonth = parsed.start.startOf("month");
+          this.focusedDay = parsed.start;
+        }
+      }
+    }
+    this.emit();
+  }
+  getLabels() {
+    return { ...DEFAULT_LABELS, ...this.options.labels };
+  }
+  emit() {
+    this.snapshot = this.buildSnapshot();
+    this.listeners.forEach((l) => l());
+  }
+  buildSnapshot() {
+    const format = this.options.format ?? DATE_FORMAT;
+    const weekStartsOn = this.options.weekStartsOn ?? 0;
+    const locale = this.options.locale ?? "en";
+    const weeks = buildCalendarMonth({
+      viewMonth: this.viewMonth,
+      rangeStart: this.start,
+      rangeEnd: this.end,
+      hoverEnd: this.start && !this.end ? this.hoverEnd : null,
+      minDate: this.options.minDate,
+      maxDate: this.options.maxDate,
+      disablePastDates: this.options.disablePastDates,
+      disableFutureDates: this.options.disableFutureDates,
+      weekStartsOn
+    });
+    return {
+      start: this.start,
+      end: this.end,
+      hoverEnd: this.hoverEnd,
+      viewMonth: this.viewMonth,
+      focusedDay: this.focusedDay,
+      calPanel: this.calPanel,
+      open: this.open,
+      inline: Boolean(this.options.inline),
+      format,
+      asString: this.options.asString,
+      weekStartsOn,
+      locale,
+      labels: this.getLabels(),
+      className: this.options.className,
+      weeks,
+      weekdayLabels: getWeekdayLabels(locale, weekStartsOn)
+    };
+  }
+  setOpen(open) {
+    if (this.options.inline) {
+      return;
+    }
+    this.open = open;
+    this.options.onOpenChange?.(open);
+    this.emit();
+  }
+  close() {
+    if (!this.options.inline) {
+      this.setOpen(false);
+    }
+  }
+  setCalPanel(panel) {
+    this.calPanel = panel;
+    this.emit();
+  }
+  setViewMonth(next) {
+    this.viewMonth = typeof next === "function" ? next(this.viewMonth) : next;
+    this.emit();
+  }
+  navigatePrev() {
+    if (this.calPanel === "day") {
+      this.viewMonth = this.viewMonth.subtract(1, "month");
+    } else if (this.calPanel === "month") {
+      this.viewMonth = this.viewMonth.subtract(1, "year");
+    } else {
+      this.viewMonth = this.viewMonth.subtract(12, "year");
+    }
+    this.emit();
+  }
+  navigateNext() {
+    if (this.calPanel === "day") {
+      this.viewMonth = this.viewMonth.add(1, "month");
+    } else if (this.calPanel === "month") {
+      this.viewMonth = this.viewMonth.add(1, "year");
+    } else {
+      this.viewMonth = this.viewMonth.add(12, "year");
+    }
+    this.emit();
+  }
+  selectMonth(monthIndex) {
+    this.viewMonth = this.viewMonth.month(monthIndex);
+    this.calPanel = "day";
+    this.emit();
+  }
+  selectYear(year) {
+    this.viewMonth = this.viewMonth.year(year);
+    this.calPanel = "month";
+    this.emit();
+  }
+  emitRange(nextStart, nextEnd) {
+    if (this.options.asString === false) {
+      this.options.onChange?.({
+        start: nextStart ? nextStart.toDate() : null,
+        end: nextEnd ? nextEnd.toDate() : null
+      });
+    } else {
+      if (this.options.asString === void 0) {
+        warnAsStringDeprecation();
+      }
+      const format = this.options.format ?? DATE_FORMAT;
+      this.options.onChange?.({
+        start: formatValue(nextStart, format),
+        end: formatValue(nextEnd, format)
+      });
+    }
+  }
+  pickDay(day) {
+    if (!this.start || this.start && this.end) {
+      this.start = day;
+      this.end = null;
+      this.hoverEnd = null;
+      this.focusedDay = day;
+    } else if (day.isBefore(this.start, "day")) {
+      this.start = day;
+      this.end = null;
+      this.hoverEnd = null;
+      this.focusedDay = day;
+    } else {
+      this.end = day;
+      this.hoverEnd = null;
+      this.focusedDay = day;
+    }
+    this.emit();
+  }
+  setHoverEnd(day) {
+    if (this.start && !this.end) {
+      this.hoverEnd = day;
+      this.emit();
+    }
+  }
+  handleGridKeyDown(key) {
+    const snap = this.snapshot;
+    let next = this.focusedDay;
+    switch (key) {
+      case "ArrowLeft":
+        next = this.focusedDay.subtract(1, "day");
+        break;
+      case "ArrowRight":
+        next = this.focusedDay.add(1, "day");
+        break;
+      case "ArrowUp":
+        next = this.focusedDay.subtract(7, "day");
+        break;
+      case "ArrowDown":
+        next = this.focusedDay.add(7, "day");
+        break;
+      case "Home":
+        next = startOfWeek(this.focusedDay, snap.weekStartsOn);
+        break;
+      case "End":
+        next = endOfWeek(this.focusedDay, snap.weekStartsOn);
+        break;
+      case "PageUp":
+        next = this.focusedDay.subtract(1, "month");
+        this.viewMonth = next.startOf("month");
+        break;
+      case "PageDown":
+        next = this.focusedDay.add(1, "month");
+        this.viewMonth = next.startOf("month");
+        break;
+      case "Enter":
+      case " ": {
+        const cell = snap.weeks.flat().find((d) => d.date.isSame(this.focusedDay, "day"));
+        if (cell && !cell.isDisabled && cell.isCurrentMonth) {
+          this.pickDay(cell.date);
+        }
+        return true;
+      }
+      default:
+        return false;
+    }
+    this.focusedDay = next;
+    if (!next.isSame(this.viewMonth, "month")) {
+      this.viewMonth = next.startOf("month");
+    }
+    this.emit();
+    return true;
+  }
+  confirm() {
+    if (!this.start || !this.end) {
+      return null;
+    }
+    this.emitRange(this.start, this.end);
+    this.close();
+    return {
+      start: this.start.toDate(),
+      end: this.end.toDate()
+    };
+  }
+  clear() {
+    this.start = null;
+    this.end = null;
+    this.hoverEnd = null;
+    this.emitRange(null, null);
+    this.emit();
+    this.close();
+  }
+};
+function cx4(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function DateTimeRange(props) {
+  const {
+    value,
+    defaultValue = null,
+    onChange,
+    asString,
+    format,
+    minDate,
+    maxDate,
+    disablePastDates = false,
+    disableFutureDates = false,
+    weekStartsOn = 0,
+    locale = "en",
+    labels: labelsProp,
+    inline = false,
+    className,
+    style,
+    open: openProp,
+    defaultOpen = true,
+    onOpenChange
+  } = props;
+  const titleId = useId();
+  const dialogRef = useRef(null);
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    defaultValue: inline ? true : defaultOpen,
+    onChange: onOpenChange
+  });
+  const controllerRef = useRef(null);
+  if (!controllerRef.current) {
+    controllerRef.current = new RangeController({
+      value,
+      defaultValue,
+      onChange,
+      asString,
+      format,
+      minDate,
+      maxDate,
+      disablePastDates,
+      disableFutureDates,
+      weekStartsOn,
+      locale,
+      labels: labelsProp,
+      inline,
+      className,
+      open,
+      onOpenChange: setOpen
+    });
+  }
+  const controller = controllerRef.current;
+  useEffect(() => {
+    controller.setOptions({
+      value,
+      onChange,
+      asString,
+      format,
+      minDate,
+      maxDate,
+      disablePastDates,
+      disableFutureDates,
+      weekStartsOn,
+      locale,
+      labels: labelsProp,
+      inline,
+      className,
+      open,
+      onOpenChange: setOpen
+    });
+  }, [
+    controller,
+    value,
+    onChange,
+    asString,
+    format,
+    minDate,
+    maxDate,
+    disablePastDates,
+    disableFutureDates,
+    weekStartsOn,
+    locale,
+    labelsProp,
+    inline,
+    className,
+    open,
+    setOpen
+  ]);
+  const snap = useSyncExternalStore(
+    controller.subscribe,
+    controller.getSnapshot,
+    controller.getServerSnapshot
+  );
+  const close = useCallback(() => {
+    if (!inline) {
+      setOpen(false);
+    }
+  }, [inline, setOpen]);
+  useEffect(() => {
+    if (!(open && !inline)) {
+      return;
+    }
+    return attachEscape(close);
+  }, [open, inline, close]);
+  useEffect(() => {
+    if (!(open && !inline) || !dialogRef.current) {
+      return;
+    }
+    return attachFocusTrap(dialogRef.current);
+  }, [open, inline]);
+  const onGridKeyDown = (event) => {
+    if (controller.handleGridKeyDown(event.key)) {
+      event.preventDefault();
+    }
+  };
+  if (!open && !inline) {
+    return null;
+  }
+  const statusText = snap.start && !snap.end ? snap.labels.selectEnd : `${snap.start ? formatLocalized(snap.start, "MMM D, YYYY", snap.locale) : snap.labels.start} \u2014 ${snap.end ? formatLocalized(snap.end, "MMM D, YYYY", snap.locale) : snap.labels.end}`;
+  const picker = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dialogRef,
+      className: cx4("ctp-calendar-time-picker", className),
+      style,
+      role: inline ? void 0 : "dialog",
+      "aria-modal": inline ? void 0 : true,
+      "aria-labelledby": titleId,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ctp-header", children: /* @__PURE__ */ jsx("span", { id: titleId, className: "ctp-range-title", children: statusText }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ctp-body ctp-body-calendar-date", children: [
+          /* @__PURE__ */ jsx(
+            CalendarHeader,
+            {
+              viewMonth: snap.viewMonth,
+              setViewMonth: (next) => controller.setViewMonth(next),
+              panel: snap.calPanel,
+              onPanelChange: (p) => controller.setCalPanel(p),
+              locale: snap.locale,
+              labels: snap.labels
+            }
+          ),
+          snap.calPanel === "day" && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "ctp-main-calendar",
+              role: "grid",
+              "aria-label": snap.labels.chooseDateRange,
+              tabIndex: 0,
+              onKeyDown: onGridKeyDown,
+              children: [
+                snap.weekdayLabels.map((label) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "ctp-box ctp-box-days",
+                    role: "columnheader",
+                    children: label
+                  },
+                  label
+                )),
+                snap.weeks.map(
+                  (week) => week.map((dayData) => {
+                    const focused = dayData.date.isSame(snap.focusedDay, "day");
+                    const disabled = !dayData.isCurrentMonth || dayData.isDisabled;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "gridcell",
+                        tabIndex: focused ? 0 : -1,
+                        "aria-selected": Boolean(
+                          dayData.isRangeStart || dayData.isRangeEnd
+                        ),
+                        "aria-disabled": disabled,
+                        disabled,
+                        "aria-label": formatLocalized(
+                          dayData.date,
+                          "dddd, MMMM D, YYYY",
+                          snap.locale
+                        ),
+                        className: cx4(
+                          "ctp-box",
+                          "ctp-box-date",
+                          !dayData.isCurrentMonth && "not-current-month",
+                          dayData.isDisabled && "disabled-date",
+                          dayData.isWeekend && "weekend-day",
+                          dayData.isCurrentDate && "ctp-today",
+                          dayData.isInRange && "ctp-in-range",
+                          dayData.isRangeStart && "ctp-range-start",
+                          dayData.isRangeEnd && "ctp-range-end"
+                        ),
+                        onClick: () => {
+                          if (!disabled) {
+                            controller.pickDay(dayData.date);
+                          }
+                        },
+                        onMouseEnter: () => {
+                          if (!disabled && snap.start && !snap.end) {
+                            controller.setHoverEnd(dayData.date);
+                          }
+                        },
+                        children: dayData.date.format("D")
+                      },
+                      dayData.date.format("YYYY-MM-DD")
+                    );
+                  })
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ctp-footer", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "close-button",
+              onClick: () => {
+                controller.clear();
+                close();
+              },
+              children: snap.labels.clear
+            }
+          ),
+          !inline && /* @__PURE__ */ jsx("button", { type: "button", className: "ctp-cancel", onClick: close, children: snap.labels.close }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                controller.confirm();
+                close();
+              },
+              disabled: !snap.start || !snap.end,
+              children: snap.labels.ok
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  if (inline) {
+    return picker;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ctp-calendar-time-picker-absolute-container",
+        onClick: (event) => {
+          if (event.target === event.currentTarget) {
+            close();
+          }
+        },
+        children: picker
+      }
+    ),
+    document.body
+  );
+}
+
+// src/index.ts
+var DateTimeWithExtras = DateTime;
+DateTimeWithExtras.Input = DateTimeInput;
+DateTimeWithExtras.Range = DateTimeRange;
+var src_default = DateTimeWithExtras;
+
+export { DATE_FORMAT, DEFAULT_FORMAT, DEFAULT_LABELS, DateTime, DateTimeInput, DateTimeRange, TIME_FORMAT, buildCalendarMonth, src_default as default };