universal-datetime-picker 2.0.0

package/dist/vue/index.mjs

@@ -0,0 +1,2181 @@
+import 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';
+
+// src/core/logic/date.ts
+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";
+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");
+}
+
+// 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(
+    (el3) => !el3.hasAttribute("disabled") && el3.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 attachPopoverPosition(anchorEl, open, enabled, floating, onPosition) {
+  if (!anchorEl) {
+    onPosition(null);
+    return () => {
+    };
+  }
+  const update = () => {
+    if (!floating) {
+      onPosition(
+        computePopoverPosition(
+          anchorEl,
+          DEFAULT_PICKER_WIDTH,
+          DEFAULT_PICKER_HEIGHT
+        )
+      );
+      return;
+    }
+    const width = floating.offsetWidth || DEFAULT_PICKER_WIDTH;
+    const height = floating.offsetHeight || DEFAULT_PICKER_HEIGHT;
+    onPosition(computePopoverPosition(anchorEl, width, height));
+  };
+  update();
+  window.addEventListener("resize", update);
+  window.addEventListener("scroll", update, true);
+  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();
+  };
+}
+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 cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/vanilla/renderer.ts
+function applyStyle(el3, style) {
+  if (!style) {
+    return;
+  }
+  if (typeof style === "string") {
+    el3.setAttribute("style", style);
+    return;
+  }
+  Object.assign(el3.style, style);
+}
+function el(tag, props = {}, children = []) {
+  const node = document.createElement(tag);
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0 || value === null || value === false) {
+      continue;
+    }
+    if (key === "className") {
+      node.className = String(value);
+    } else if (key === "textContent") {
+      node.textContent = String(value);
+    } else if (key.startsWith("on") && typeof value === "function") {
+      const event = key.slice(2).toLowerCase();
+      node.addEventListener(event, value);
+    } else if (key === "disabled") {
+      node.disabled = Boolean(value);
+    } else if (key === "tabIndex") {
+      node.tabIndex = Number(value);
+    } else {
+      node.setAttribute(
+        key === "ariaLabel" ? "aria-label" : key === "ariaSelected" ? "aria-selected" : key === "ariaDisabled" ? "aria-disabled" : key === "ariaExpanded" ? "aria-expanded" : key === "ariaControls" ? "aria-controls" : key === "ariaHaspopup" ? "aria-haspopup" : key === "ariaModal" ? "aria-modal" : key === "ariaLabelledby" ? "aria-labelledby" : key === "ariaCurrent" ? "aria-current" : key,
+        String(value)
+      );
+    }
+  }
+  for (const child of children) {
+    if (child == null) {
+      continue;
+    }
+    node.append(typeof child === "string" ? child : child);
+  }
+  return node;
+}
+function renderHeader(controller, snap, titleId) {
+  const year = snap.viewMonth.year();
+  const windowStart = controller.yearWindowStart(year);
+  const windowEnd = windowStart + 11;
+  const now = dayjs();
+  const prevLabel = snap.calPanel === "day" ? snap.labels.previousMonth : snap.labels.previousYear;
+  const nextLabel = snap.calPanel === "day" ? snap.labels.nextMonth : snap.labels.nextYear;
+  let title;
+  if (snap.calPanel === "day") {
+    title = el(
+      "button",
+      {
+        type: "button",
+        className: "ctp-current-month",
+        id: titleId,
+        ariaLabel: `${formatLocalized(snap.viewMonth, "MMMM YYYY", snap.locale)}. ${snap.labels.chooseMonth}`,
+        onClick: () => controller.setCalPanel("month"),
+        textContent: formatLocalized(snap.viewMonth, "MMMM YYYY", snap.locale)
+      }
+    );
+  } else if (snap.calPanel === "month") {
+    title = el(
+      "button",
+      {
+        type: "button",
+        className: "ctp-current-month",
+        id: titleId,
+        ariaLabel: `${year}. ${snap.labels.chooseYear}`,
+        onClick: () => controller.setCalPanel("year"),
+        textContent: String(year)
+      }
+    );
+  } else {
+    title = el("span", {
+      className: "ctp-current-month",
+      id: titleId,
+      textContent: `${windowStart} \u2013 ${windowEnd}`
+    });
+  }
+  const fragment = el("div", { className: "ctp-body ctp-body-calendar-date" }, [
+    el("div", { className: "ctp-month-year" }, [
+      el("button", {
+        type: "button",
+        className: "ctp-prev-month",
+        ariaLabel: prevLabel,
+        onClick: () => controller.navigatePrev(),
+        textContent: "\u2039"
+      }),
+      title,
+      el("button", {
+        type: "button",
+        className: "ctp-next-month",
+        ariaLabel: nextLabel,
+        onClick: () => controller.navigateNext(),
+        textContent: "\u203A"
+      })
+    ])
+  ]);
+  if (snap.calPanel === "month") {
+    const grid = el("div", {
+      className: "ctp-month-grid",
+      role: "grid",
+      ariaLabel: snap.labels.chooseMonth
+    });
+    for (let monthIndex = 0; monthIndex < 12; monthIndex += 1) {
+      const monthDate = snap.viewMonth.month(monthIndex);
+      const isCurrent = snap.viewMonth.year() === now.year() && monthIndex === now.month();
+      grid.append(
+        el("button", {
+          type: "button",
+          role: "gridcell",
+          ariaCurrent: isCurrent ? "date" : void 0,
+          ariaLabel: formatLocalized(monthDate, "MMMM YYYY", snap.locale),
+          className: cx(
+            "ctp-box",
+            "ctp-box-month",
+            isCurrent && "ctp-current"
+          ),
+          onClick: () => controller.selectMonth(monthIndex),
+          textContent: formatLocalized(monthDate, "MMM", snap.locale)
+        })
+      );
+    }
+    fragment.append(grid);
+  } else if (snap.calPanel === "year") {
+    const grid = el("div", {
+      className: "ctp-year-grid",
+      role: "grid",
+      ariaLabel: snap.labels.chooseYear
+    });
+    for (let offset = 0; offset < 12; offset += 1) {
+      const y = windowStart + offset;
+      const isCurrent = now.year() === y;
+      grid.append(
+        el("button", {
+          type: "button",
+          role: "gridcell",
+          ariaCurrent: isCurrent ? "date" : void 0,
+          ariaLabel: String(y),
+          className: cx("ctp-box", "ctp-box-year", isCurrent && "ctp-current"),
+          onClick: () => controller.selectYear(y),
+          textContent: String(y)
+        })
+      );
+    }
+    fragment.append(grid);
+  } else {
+    const grid = el("div", {
+      className: "ctp-main-calendar",
+      role: "grid",
+      ariaLabel: snap.labels.chooseDate,
+      tabIndex: 0,
+      onKeydown: (event) => {
+        const ke = event;
+        if (controller.handleGridKeyDown(ke.key)) {
+          ke.preventDefault();
+        }
+      }
+    });
+    for (const label of snap.weekdayLabels) {
+      grid.append(
+        el("div", {
+          className: "ctp-box ctp-box-days",
+          role: "columnheader",
+          textContent: label
+        })
+      );
+    }
+    for (const week of snap.weeks) {
+      for (const dayData of week) {
+        const selected = dayData.isSelected;
+        const focused = dayData.date.isSame(snap.focusedDay, "day");
+        const disabled = !dayData.isCurrentMonth || dayData.isDisabled;
+        grid.append(
+          el("button", {
+            type: "button",
+            role: "gridcell",
+            tabIndex: focused ? 0 : -1,
+            ariaSelected: selected,
+            ariaDisabled: disabled,
+            disabled,
+            ariaLabel: formatLocalized(
+              dayData.date,
+              "dddd, MMMM D, YYYY",
+              snap.locale
+            ),
+            className: cx(
+              "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);
+              }
+            },
+            textContent: dayData.date.format("D")
+          })
+        );
+      }
+    }
+    fragment.append(grid);
+  }
+  return fragment;
+}
+function renderTimeColumn(label, open, display, options, onToggle, onSelect) {
+  const listId = `ctp-${label}-${Math.random().toString(36).slice(2, 8)}`;
+  const cls = label === "am-pm" ? "am-pm" : label.endsWith("s") ? label.slice(0, -1) : label;
+  const list = el(
+    "div",
+    {
+      id: listId,
+      role: "listbox",
+      ariaLabel: label,
+      className: cx(`ctp-overflow-${label}`, !open && "not-visible")
+    },
+    options.map(
+      (opt) => el("button", {
+        type: "button",
+        role: "option",
+        ariaSelected: opt === display,
+        className: `ctp-${cls}`,
+        onClick: () => onSelect(opt),
+        textContent: opt
+      })
+    )
+  );
+  return el(
+    "div",
+    { className: cx("ctp-box", "ctp-box-time", !open && "not-opened") },
+    [
+      el("button", {
+        type: "button",
+        className: `ctp-${cls} ctp-initial-time`,
+        ariaHaspopup: "listbox",
+        ariaExpanded: open,
+        ariaControls: listId,
+        ariaLabel: `Select ${label}`,
+        onClick: onToggle,
+        textContent: display
+      }),
+      list
+    ]
+  );
+}
+function renderTimePanel(controller, snap, titleId) {
+  const body = el("div", { className: "ctp-body ctp-body-calendar-time" });
+  if (snap.showDatePanel) {
+    body.append(
+      el("div", { className: "ctp-section-label", textContent: snap.labels.time })
+    );
+  } else {
+    body.append(
+      el("span", {
+        className: "ctp-visually-hidden",
+        id: titleId,
+        textContent: snap.labels.time
+      })
+    );
+  }
+  const header = el("div", { className: "ctp-main-time-header" }, [
+    el("div", { className: "ctp-box", textContent: "Hr" }),
+    el("div", { className: "ctp-box", textContent: "Min" }),
+    snap.showSeconds ? el("div", { className: "ctp-box", textContent: "Sec" }) : null,
+    snap.use12Hours ? el("div", { className: "ctp-box", textContent: "AM/PM" }) : null
+  ]);
+  const timeBody = el("div", { className: "ctp-main-time-body" }, [
+    renderTimeColumn(
+      "hours",
+      snap.showHours,
+      snap.displayHour,
+      snap.hourOptions,
+      () => controller.toggleHours(),
+      (opt) => controller.selectHourOption(opt)
+    ),
+    renderTimeColumn(
+      "minutes",
+      snap.showMinutes,
+      snap.displayMinute,
+      snap.minuteOptions,
+      () => controller.toggleMinutes(),
+      (opt) => controller.selectMinuteOption(opt)
+    ),
+    snap.showSeconds ? renderTimeColumn(
+      "seconds",
+      snap.showSecondsOpen,
+      snap.displaySecond,
+      snap.minuteOptions,
+      () => controller.toggleSeconds(),
+      (opt) => controller.selectSecondOption(opt)
+    ) : null,
+    snap.use12Hours ? renderTimeColumn(
+      "am-pm",
+      snap.showAmPm,
+      snap.isAm ? "AM" : "PM",
+      ["AM", "PM"],
+      () => controller.toggleAmPm(),
+      (opt) => controller.selectAmPmOption(opt)
+    ) : null
+  ]);
+  body.append(
+    el("div", { className: "ctp-main-time" }, [header, timeBody])
+  );
+  return body;
+}
+function renderPicker(controller, snap, titleId, position, options) {
+  const themeAttr = resolveThemeAttr(options.theme, options.anchorEl);
+  const picker = el("div", {
+    className: cx(
+      "ctp-calendar-time-picker",
+      snap.popover && !snap.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",
+      snap.className
+    ),
+    role: snap.inline ? void 0 : "dialog",
+    ariaModal: snap.inline ? void 0 : true,
+    ariaLabelledby: titleId
+  });
+  if (themeAttr) {
+    picker.setAttribute("data-ctp-theme", themeAttr);
+  }
+  applyStyle(picker, options.style);
+  if (snap.popover && !snap.inline && position) {
+    picker.style.position = "fixed";
+    picker.style.top = `${position.top}px`;
+    picker.style.left = `${position.left}px`;
+  }
+  if (snap.showModeTabs) {
+    picker.append(
+      el("div", { className: "ctp-header" }, [
+        el(
+          "div",
+          {
+            className: "ctp-button-container",
+            role: "tablist",
+            ariaLabel: "Picker mode"
+          },
+          [
+            el("button", {
+              type: "button",
+              role: "tab",
+              ariaSelected: snap.tab === "date",
+              className: cx("ctp-date", snap.tab === "date" && "ctp-active"),
+              onClick: () => controller.setTab("date"),
+              textContent: snap.labels.date
+            }),
+            el("button", {
+              type: "button",
+              role: "tab",
+              ariaSelected: snap.tab === "time",
+              className: cx("ctp-time", snap.tab === "time" && "ctp-active"),
+              onClick: () => controller.setTab("time"),
+              textContent: snap.labels.time
+            })
+          ]
+        )
+      ])
+    );
+  }
+  if (snap.showDatePanel) {
+    picker.append(renderHeader(controller, snap, titleId));
+  }
+  if (snap.showTimePanel) {
+    picker.append(renderTimePanel(controller, snap, titleId));
+  }
+  const footerChildren = [
+    el("button", {
+      type: "button",
+      className: "close-button",
+      onClick: () => controller.clear(),
+      textContent: snap.labels.clear
+    })
+  ];
+  if (!snap.inline) {
+    footerChildren.push(
+      el("button", {
+        type: "button",
+        className: "ctp-cancel",
+        onClick: () => controller.close(),
+        textContent: snap.labels.close
+      })
+    );
+  }
+  footerChildren.push(
+    el("button", {
+      type: "button",
+      onClick: () => controller.confirm(),
+      textContent: snap.labels.ok
+    })
+  );
+  picker.append(el("div", { className: "ctp-footer" }, footerChildren));
+  return picker;
+}
+function createDateTimePicker(target, options = {}) {
+  const controller = new PickerController(options);
+  const titleId = `ctp-title-${Math.random().toString(36).slice(2, 9)}`;
+  let cleanups = [];
+  let position = null;
+  let host = null;
+  let portalRoot = null;
+  const teardown = () => {
+    cleanups.forEach((c) => c());
+    cleanups = [];
+    portalRoot?.remove();
+    portalRoot = null;
+    if (host && host.parentElement === target) {
+      host.remove();
+    }
+    host = null;
+  };
+  const paint = () => {
+    teardown();
+    const snap = controller.getSnapshot();
+    if (!snap.open && !snap.inline) {
+      return;
+    }
+    const opts = { ...options };
+    const picker = renderPicker(
+      controller,
+      snap,
+      titleId,
+      position,
+      opts
+    );
+    if (snap.inline) {
+      host = picker;
+      target.append(picker);
+      return;
+    }
+    if (snap.popover) {
+      portalRoot = picker;
+      document.body.append(picker);
+      cleanups.push(
+        attachFocusTrap(picker),
+        attachEscape(() => controller.close()),
+        attachClickOutside(
+          () => controller.close(),
+          true,
+          picker,
+          options.anchorEl
+        ),
+        attachPopoverPosition(
+          options.anchorEl,
+          true,
+          true,
+          picker,
+          (pos) => {
+            position = pos;
+            if (pos) {
+              picker.style.position = "fixed";
+              picker.style.top = `${pos.top}px`;
+              picker.style.left = `${pos.left}px`;
+            }
+          }
+        )
+      );
+      return;
+    }
+    const themeAttr = resolveThemeAttr(options.theme, options.anchorEl);
+    const backdrop = el("div", {
+      className: "ctp-calendar-time-picker-absolute-container",
+      onClick: (event) => {
+        if (event.target === event.currentTarget) {
+          controller.close();
+        }
+      }
+    });
+    if (themeAttr) {
+      backdrop.setAttribute("data-ctp-theme", themeAttr);
+    }
+    backdrop.append(picker);
+    portalRoot = backdrop;
+    document.body.append(backdrop);
+    cleanups.push(
+      attachFocusTrap(picker),
+      attachEscape(() => controller.close())
+    );
+  };
+  const unsub = controller.subscribe(paint);
+  paint();
+  return {
+    update(partial) {
+      Object.assign(options, partial);
+      controller.setOptions(partial);
+    },
+    destroy() {
+      unsub();
+      teardown();
+    },
+    getController: () => controller
+  };
+}
+
+// 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();
+  }
+};
+
+// src/vanilla/rangeRenderer.ts
+function el2(tag, props = {}, children = []) {
+  const node = document.createElement(tag);
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0 || value === null || value === false) {
+      continue;
+    }
+    if (key === "className") {
+      node.className = String(value);
+    } else if (key === "textContent") {
+      node.textContent = String(value);
+    } else if (key.startsWith("on") && typeof value === "function") {
+      node.addEventListener(
+        key.slice(2).toLowerCase(),
+        value
+      );
+    } else if (key === "disabled") {
+      node.disabled = Boolean(value);
+    } else if (key === "tabIndex") {
+      node.tabIndex = Number(value);
+    } else {
+      const attr = key === "ariaLabel" ? "aria-label" : key === "ariaSelected" ? "aria-selected" : key === "ariaDisabled" ? "aria-disabled" : key === "ariaModal" ? "aria-modal" : key === "ariaLabelledby" ? "aria-labelledby" : key === "ariaCurrent" ? "aria-current" : key;
+      node.setAttribute(attr, String(value));
+    }
+  }
+  for (const child of children) {
+    if (child == null) {
+      continue;
+    }
+    node.append(typeof child === "string" ? child : child);
+  }
+  return node;
+}
+function applyStyle2(node, style) {
+  if (!style) {
+    return;
+  }
+  if (typeof style === "string") {
+    node.setAttribute("style", style);
+    return;
+  }
+  Object.assign(node.style, style);
+}
+function createDateTimeRangePicker(target, options = {}) {
+  const controller = new RangeController(options);
+  const titleId = `ctp-range-${Math.random().toString(36).slice(2, 9)}`;
+  let cleanups = [];
+  let host = null;
+  let portalRoot = null;
+  const teardown = () => {
+    cleanups.forEach((c) => c());
+    cleanups = [];
+    portalRoot?.remove();
+    portalRoot = null;
+    host?.remove();
+    host = null;
+  };
+  const paint = () => {
+    teardown();
+    const snap = controller.getSnapshot();
+    if (!snap.open && !snap.inline) {
+      return;
+    }
+    const now = dayjs();
+    const year = snap.viewMonth.year();
+    const windowStart = Math.floor(year / 12) * 12;
+    const windowEnd = windowStart + 11;
+    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}`;
+    let title;
+    if (snap.calPanel === "day") {
+      title = el2("button", {
+        type: "button",
+        className: "ctp-current-month",
+        ariaLabel: `${formatLocalized(snap.viewMonth, "MMMM YYYY", snap.locale)}. ${snap.labels.chooseMonth}`,
+        onClick: () => controller.setCalPanel("month"),
+        textContent: formatLocalized(snap.viewMonth, "MMMM YYYY", snap.locale)
+      });
+    } else if (snap.calPanel === "month") {
+      title = el2("button", {
+        type: "button",
+        className: "ctp-current-month",
+        ariaLabel: `${year}. ${snap.labels.chooseYear}`,
+        onClick: () => controller.setCalPanel("year"),
+        textContent: String(year)
+      });
+    } else {
+      title = el2("span", {
+        className: "ctp-current-month",
+        textContent: `${windowStart} \u2013 ${windowEnd}`
+      });
+    }
+    const body = el2("div", { className: "ctp-body ctp-body-calendar-date" }, [
+      el2("div", { className: "ctp-month-year" }, [
+        el2("button", {
+          type: "button",
+          className: "ctp-prev-month",
+          ariaLabel: snap.calPanel === "day" ? snap.labels.previousMonth : snap.labels.previousYear,
+          onClick: () => controller.navigatePrev(),
+          textContent: "\u2039"
+        }),
+        title,
+        el2("button", {
+          type: "button",
+          className: "ctp-next-month",
+          ariaLabel: snap.calPanel === "day" ? snap.labels.nextMonth : snap.labels.nextYear,
+          onClick: () => controller.navigateNext(),
+          textContent: "\u203A"
+        })
+      ])
+    ]);
+    if (snap.calPanel === "day") {
+      const grid = el2("div", {
+        className: "ctp-main-calendar",
+        role: "grid",
+        ariaLabel: snap.labels.chooseDateRange,
+        tabIndex: 0,
+        onKeydown: (event) => {
+          const ke = event;
+          if (controller.handleGridKeyDown(ke.key)) {
+            ke.preventDefault();
+          }
+        }
+      });
+      for (const label of snap.weekdayLabels) {
+        grid.append(
+          el2("div", {
+            className: "ctp-box ctp-box-days",
+            role: "columnheader",
+            textContent: label
+          })
+        );
+      }
+      for (const week of snap.weeks) {
+        for (const dayData of week) {
+          const focused = dayData.date.isSame(snap.focusedDay, "day");
+          const disabled = !dayData.isCurrentMonth || dayData.isDisabled;
+          grid.append(
+            el2("button", {
+              type: "button",
+              role: "gridcell",
+              tabIndex: focused ? 0 : -1,
+              ariaSelected: Boolean(
+                dayData.isRangeStart || dayData.isRangeEnd
+              ),
+              ariaDisabled: disabled,
+              disabled,
+              ariaLabel: formatLocalized(
+                dayData.date,
+                "dddd, MMMM D, YYYY",
+                snap.locale
+              ),
+              className: cx(
+                "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);
+                }
+              },
+              textContent: dayData.date.format("D")
+            })
+          );
+        }
+      }
+      body.append(grid);
+    } else if (snap.calPanel === "month") {
+      const grid = el2("div", {
+        className: "ctp-month-grid",
+        role: "grid",
+        ariaLabel: snap.labels.chooseMonth
+      });
+      for (let monthIndex = 0; monthIndex < 12; monthIndex += 1) {
+        const monthDate = snap.viewMonth.month(monthIndex);
+        const isCurrent = snap.viewMonth.year() === now.year() && monthIndex === now.month();
+        grid.append(
+          el2("button", {
+            type: "button",
+            role: "gridcell",
+            ariaCurrent: isCurrent ? "date" : void 0,
+            className: cx(
+              "ctp-box",
+              "ctp-box-month",
+              isCurrent && "ctp-current"
+            ),
+            onClick: () => controller.selectMonth(monthIndex),
+            textContent: formatLocalized(monthDate, "MMM", snap.locale)
+          })
+        );
+      }
+      body.append(grid);
+    } else {
+      const grid = el2("div", {
+        className: "ctp-year-grid",
+        role: "grid",
+        ariaLabel: snap.labels.chooseYear
+      });
+      for (let offset = 0; offset < 12; offset += 1) {
+        const y = windowStart + offset;
+        grid.append(
+          el2("button", {
+            type: "button",
+            role: "gridcell",
+            ariaCurrent: now.year() === y ? "date" : void 0,
+            className: cx(
+              "ctp-box",
+              "ctp-box-year",
+              now.year() === y && "ctp-current"
+            ),
+            onClick: () => controller.selectYear(y),
+            textContent: String(y)
+          })
+        );
+      }
+      body.append(grid);
+    }
+    const footerChildren = [
+      el2("button", {
+        type: "button",
+        className: "close-button",
+        onClick: () => controller.clear(),
+        textContent: snap.labels.clear
+      })
+    ];
+    if (!snap.inline) {
+      footerChildren.push(
+        el2("button", {
+          type: "button",
+          className: "ctp-cancel",
+          onClick: () => controller.close(),
+          textContent: snap.labels.close
+        })
+      );
+    }
+    footerChildren.push(
+      el2("button", {
+        type: "button",
+        disabled: !snap.start || !snap.end,
+        onClick: () => controller.confirm(),
+        textContent: snap.labels.ok
+      })
+    );
+    const picker = el2(
+      "div",
+      {
+        className: cx("ctp-calendar-time-picker", snap.className),
+        role: snap.inline ? void 0 : "dialog",
+        ariaModal: snap.inline ? void 0 : true,
+        ariaLabelledby: titleId
+      },
+      [
+        el2("div", { className: "ctp-header" }, [
+          el2("span", {
+            id: titleId,
+            className: "ctp-range-title",
+            textContent: statusText
+          })
+        ]),
+        body,
+        el2("div", { className: "ctp-footer" }, footerChildren)
+      ]
+    );
+    applyStyle2(picker, options.style);
+    if (snap.inline) {
+      host = picker;
+      target.append(picker);
+      return;
+    }
+    const backdrop = el2("div", {
+      className: "ctp-calendar-time-picker-absolute-container",
+      onClick: (event) => {
+        if (event.target === event.currentTarget) {
+          controller.close();
+        }
+      }
+    });
+    backdrop.append(picker);
+    portalRoot = backdrop;
+    document.body.append(backdrop);
+    cleanups.push(
+      attachFocusTrap(picker),
+      attachEscape(() => controller.close())
+    );
+  };
+  const unsub = controller.subscribe(paint);
+  paint();
+  return {
+    update(partial) {
+      Object.assign(options, partial);
+      controller.setOptions(partial);
+    },
+    destroy() {
+      unsub();
+      teardown();
+    },
+    getController: () => controller
+  };
+}
+
+// src/wc/index.ts
+function boolAttr(el3, name, fallback = false) {
+  if (!el3.hasAttribute(name)) {
+    return fallback;
+  }
+  const v = el3.getAttribute(name);
+  return v === "" || v === "true" || v === name;
+}
+function parseAsString(el3) {
+  if (!el3.hasAttribute("as-string")) {
+    return void 0;
+  }
+  return boolAttr(el3, "as-string", true);
+}
+function resolveControlledOpen(inline, el3) {
+  if (inline) {
+    return true;
+  }
+  if (!el3.hasAttribute("open")) {
+    return false;
+  }
+  return boolAttr(el3, "open");
+}
+function syncOpenAttribute(el3, isOpen) {
+  if (isOpen) {
+    el3.setAttribute("open", "");
+  } else {
+    el3.removeAttribute("open");
+  }
+}
+var BaseCalendarElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.handle = null;
+    this.mountEl = null;
+  }
+  connectedCallback() {
+    if (!this.mountEl) {
+      this.mountEl = document.createElement("div");
+      this.append(this.mountEl);
+    }
+    this.mount();
+  }
+  disconnectedCallback() {
+    this.handle?.destroy();
+    this.handle = null;
+  }
+  emitChange(detail) {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+var DateTimePickerElement = class extends BaseCalendarElement {
+  static get observedAttributes() {
+    return [
+      "mode",
+      "layout",
+      "inline",
+      "open",
+      "use12hours",
+      "show-seconds",
+      "as-string",
+      "locale",
+      "format",
+      "theme",
+      "value",
+      "popover"
+    ];
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.mount();
+    }
+  }
+  get value() {
+    return this._value ?? null;
+  }
+  set value(next) {
+    this._value = next;
+    if (this.isConnected) {
+      this.mount();
+    }
+  }
+  mount() {
+    this.handle?.destroy();
+    if (!this.mountEl) {
+      return;
+    }
+    this.mountEl.replaceChildren();
+    const mode = this.getAttribute("mode") || "datetime";
+    const layout = this.getAttribute("layout") || "combined";
+    const showSeconds = !this.hasAttribute("show-seconds") ? true : boolAttr(this, "show-seconds", true);
+    const use12Hours = boolAttr(this, "use12hours");
+    const inline = boolAttr(this, "inline");
+    const popover = boolAttr(this, "popover");
+    const asString = parseAsString(this);
+    const format = this.getAttribute("format") || void 0;
+    const locale = this.getAttribute("locale") || "en";
+    const theme = this.getAttribute("theme") || void 0;
+    const open = resolveControlledOpen(inline, this);
+    const attrValue = this.getAttribute("value");
+    const propValue = this._value;
+    const value = propValue !== void 0 ? propValue : attrValue != null ? attrValue : void 0;
+    this.handle = createDateTimePicker(this.mountEl, {
+      mode,
+      layout,
+      showSeconds,
+      use12Hours,
+      inline,
+      popover,
+      asString,
+      format,
+      locale,
+      theme,
+      open,
+      value: value === void 0 ? void 0 : value,
+      onChange: (next) => {
+        this._value = next;
+        this.emitChange(next);
+      },
+      onOpenChange: (isOpen) => {
+        syncOpenAttribute(this, isOpen);
+        this.dispatchEvent(
+          new CustomEvent("openchange", {
+            detail: isOpen,
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    });
+  }
+};
+var DateTimePickerInputElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.handle = null;
+    this.input = null;
+    this.root = null;
+  }
+  static get observedAttributes() {
+    return [
+      "mode",
+      "placeholder",
+      "disabled",
+      "use12hours",
+      "show-seconds",
+      "as-string",
+      "locale",
+      "format",
+      "value",
+      "theme"
+    ];
+  }
+  connectedCallback() {
+    if (!this.root) {
+      this.root = document.createElement("div");
+      this.root.className = "ctp-input-root";
+      this.input = document.createElement("input");
+      this.input.className = "ctp-input";
+      this.input.readOnly = true;
+      this.root.append(this.input);
+      this.append(this.root);
+    }
+    this.sync();
+  }
+  disconnectedCallback() {
+    this.handle?.destroy();
+    this.handle = null;
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.sync();
+    }
+  }
+  sync() {
+    if (!this.input || !this.root) {
+      return;
+    }
+    this.handle?.destroy();
+    const mode = this.getAttribute("mode") || "datetime";
+    const showSeconds = !this.hasAttribute("show-seconds") ? true : boolAttr(this, "show-seconds", true);
+    const use12Hours = boolAttr(this, "use12hours");
+    const asString = parseAsString(this);
+    const formatAttr = this.getAttribute("format") || void 0;
+    const resolvedFormat = resolveFormat({
+      mode,
+      format: formatAttr,
+      use12Hours,
+      showSeconds
+    });
+    const placeholder = this.getAttribute("placeholder") || "Select date and time";
+    const disabled = boolAttr(this, "disabled");
+    const locale = this.getAttribute("locale") || "en";
+    const theme = this.getAttribute("theme") || void 0;
+    const attrValue = this.getAttribute("value");
+    this.input.placeholder = placeholder;
+    this.input.disabled = disabled;
+    this.input.setAttribute("aria-haspopup", "dialog");
+    this.input.setAttribute("aria-label", placeholder);
+    const display = attrValue ? formatValue(parseValue(attrValue, resolvedFormat), resolvedFormat) ?? attrValue : "";
+    this.input.value = display;
+    const openPicker = () => {
+      if (disabled) {
+        return;
+      }
+      this.handle?.destroy();
+      this.handle = createDateTimePicker(this.root, {
+        mode,
+        showSeconds,
+        use12Hours,
+        asString,
+        format: formatAttr,
+        locale,
+        theme,
+        popover: true,
+        anchorEl: this.input,
+        open: true,
+        value: attrValue,
+        onChange: (next) => {
+          let text = "";
+          if (next === null) {
+            text = "";
+          } else if (typeof next === "string") {
+            text = next;
+          } else if (next instanceof Date) {
+            text = formatValue(dayjs(next), resolvedFormat) ?? "";
+          } else {
+            text = next.formatted;
+          }
+          if (this.input) {
+            this.input.value = text;
+          }
+          if (text) {
+            this.setAttribute("value", text);
+          } else {
+            this.removeAttribute("value");
+          }
+          this.dispatchEvent(
+            new CustomEvent("change", {
+              detail: next,
+              bubbles: true,
+              composed: true
+            })
+          );
+        },
+        onOpenChange: (isOpen) => {
+          this.input?.setAttribute("aria-expanded", String(isOpen));
+          if (!isOpen) {
+            this.handle?.destroy();
+            this.handle = null;
+          }
+        }
+      });
+    };
+    this.input.onclick = openPicker;
+    this.input.onkeydown = (event) => {
+      if (disabled) {
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        openPicker();
+      }
+    };
+  }
+};
+var DateTimePickerRangeElement = class extends BaseCalendarElement {
+  static get observedAttributes() {
+    return [
+      "inline",
+      "open",
+      "as-string",
+      "locale",
+      "format",
+      "value-start",
+      "value-end"
+    ];
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.mount();
+    }
+  }
+  mount() {
+    this.handle?.destroy();
+    if (!this.mountEl) {
+      return;
+    }
+    this.mountEl.replaceChildren();
+    const inline = boolAttr(this, "inline");
+    const asString = parseAsString(this);
+    const format = this.getAttribute("format") || void 0;
+    const locale = this.getAttribute("locale") || "en";
+    const open = resolveControlledOpen(inline, this);
+    const start = this.getAttribute("value-start");
+    const end = this.getAttribute("value-end");
+    this.handle = createDateTimeRangePicker(this.mountEl, {
+      inline,
+      asString,
+      format,
+      locale,
+      open,
+      value: start || end ? { start: start ?? null, end: end ?? null } : void 0,
+      onChange: (next) => {
+        if (typeof next.start === "string" || next.start === null) {
+          if (next.start) {
+            this.setAttribute("value-start", next.start);
+          } else {
+            this.removeAttribute("value-start");
+          }
+        }
+        if (typeof next.end === "string" || next.end === null) {
+          if (next.end) {
+            this.setAttribute("value-end", next.end);
+          } else {
+            this.removeAttribute("value-end");
+          }
+        }
+        this.emitChange(next);
+      },
+      onOpenChange: (isOpen) => {
+        syncOpenAttribute(this, isOpen);
+        this.dispatchEvent(
+          new CustomEvent("openchange", {
+            detail: isOpen,
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    });
+  }
+};
+var defaultTagsDefined = false;
+function resolveTag(base, prefix) {
+  const p = prefix?.trim();
+  if (!p) {
+    return base;
+  }
+  return `${p}-${base}`;
+}
+function defineElementTag(tag, Base, useUniqueConstructor) {
+  if (customElements.get(tag)) {
+    return;
+  }
+  const ctor = useUniqueConstructor ? class extends Base {
+  } : Base;
+  customElements.define(tag, ctor);
+}
+function defineCustomElements(options) {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const prefix = options?.prefix?.trim();
+  const useUniqueConstructor = Boolean(prefix);
+  const pickerTag = resolveTag("datetime-picker", prefix);
+  const inputTag = resolveTag("datetime-picker-input", prefix);
+  const rangeTag = resolveTag("datetime-picker-range", prefix);
+  if (!prefix) {
+    if (defaultTagsDefined) {
+      return;
+    }
+    defaultTagsDefined = true;
+  }
+  defineElementTag(pickerTag, DateTimePickerElement, useUniqueConstructor);
+  defineElementTag(inputTag, DateTimePickerInputElement, useUniqueConstructor);
+  defineElementTag(rangeTag, DateTimePickerRangeElement, useUniqueConstructor);
+}
+
+// src/framework/vue.ts
+defineCustomElements();
+function register() {
+  defineCustomElements();
+}
+
+export { defineCustomElements, register };