kalendly 0.1.7 → 0.2.0

package/dist/vanilla/index.js

@@ -1,1064 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/vanilla/index.ts
-var index_exports = {};
-__export(index_exports, {
-  CalendarEngine: () => CalendarEngine,
-  DAYS: () => DAYS,
-  DEFAULT_CATEGORY_COLORS: () => DEFAULT_CATEGORY_COLORS,
-  MONTHS: () => MONTHS,
-  MONTHS_FULL: () => MONTHS_FULL,
-  VanillaCalendar: () => VanillaCalendar,
-  createCalendar: () => createCalendar,
-  formatAttendees: () => formatAttendees,
-  formatDateForDisplay: () => formatDateForDisplay,
-  formatTimeRange: () => formatTimeRange,
-  generateCalendarDates: () => generateCalendarDates,
-  generateYears: () => generateYears,
-  getCategoryColor: () => getCategoryColor,
-  getCellClasses: () => getCellClasses,
-  getDefaultEventColor: () => getDefaultEventColor,
-  getEventsForDate: () => getEventsForDate,
-  getMonthYearText: () => getMonthYearText,
-  getPopupPositionClass: () => getPopupPositionClass,
-  hasEvents: () => hasEvents,
-  isSameDay: () => isSameDay,
-  isToday: () => isToday,
-  isValidHexColor: () => isValidHexColor,
-  mergeCategoryColors: () => mergeCategoryColors,
-  normalizeDate: () => normalizeDate,
-  sortEventsByTime: () => sortEventsByTime
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/core/utils.ts
-var MONTHS = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-var MONTHS_FULL = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var DAYS = [
-  "Sunday",
-  "Monday",
-  "Tuesday",
-  "Wednesday",
-  "Thursday",
-  "Friday",
-  "Saturday"
-];
-function normalizeDate(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
-}
-function isSameDay(date1, date2) {
-  return normalizeDate(date1).getTime() === normalizeDate(date2).getTime();
-}
-function isToday(date) {
-  return isSameDay(date, /* @__PURE__ */ new Date());
-}
-function generateYears(minYear, maxYear) {
-  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-  const min = minYear ?? currentYear - 30;
-  const max = maxYear ?? currentYear + 10;
-  return Array.from({ length: max - min + 1 }, (_, i) => min + i);
-}
-function getEventsForDate(events, date) {
-  const normalizedTargetDate = normalizeDate(date);
-  return events.filter((event) => {
-    const eventDate = normalizeDate(new Date(event.date));
-    return eventDate.getTime() === normalizedTargetDate.getTime();
-  });
-}
-function hasEvents(events, date) {
-  return getEventsForDate(events, date).length > 0;
-}
-function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
-  const firstDay = new Date(year, month, 1);
-  const lastDay = new Date(year, month + 1, 0);
-  const daysInMonth = lastDay.getDate();
-  const prevMonthLastDay = new Date(year, month, 0).getDate();
-  let firstDayOfWeek = firstDay.getDay();
-  if (weekStartsOn === 1) {
-    firstDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
-  }
-  const dates = [];
-  let day = 1;
-  let nextMonthDay = 1;
-  for (let week = 0; week < 6; week++) {
-    const weekDates = [];
-    for (let dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {
-      if (week === 0 && dayOfWeek < firstDayOfWeek) {
-        const prevDay = prevMonthLastDay - firstDayOfWeek + dayOfWeek + 1;
-        const prevDate = new Date(year, month - 1, prevDay);
-        const dateEvents = getEventsForDate(events, prevDate);
-        weekDates.push({
-          date: prevDate,
-          isCurrentMonth: false,
-          isToday: isToday(prevDate),
-          hasEvents: dateEvents.length > 0,
-          events: dateEvents
-        });
-      } else if (day > daysInMonth) {
-        const nextDate = new Date(year, month + 1, nextMonthDay);
-        const dateEvents = getEventsForDate(events, nextDate);
-        weekDates.push({
-          date: nextDate,
-          isCurrentMonth: false,
-          isToday: isToday(nextDate),
-          hasEvents: dateEvents.length > 0,
-          events: dateEvents
-        });
-        nextMonthDay++;
-      } else {
-        const currentDate = new Date(year, month, day);
-        const dateEvents = getEventsForDate(events, currentDate);
-        weekDates.push({
-          date: currentDate,
-          isCurrentMonth: true,
-          isToday: isToday(currentDate),
-          hasEvents: dateEvents.length > 0,
-          events: dateEvents
-        });
-        day++;
-      }
-    }
-    dates.push(weekDates);
-  }
-  return dates;
-}
-function getPopupPositionClass(selectedDayIndex) {
-  if (selectedDayIndex === null) return "popup-center-bottom";
-  if (selectedDayIndex < 3) {
-    return "popup-right";
-  } else if (selectedDayIndex > 4) {
-    return "popup-left";
-  } else {
-    return "popup-center-bottom";
-  }
-}
-function getCellClasses(calendarDate) {
-  const classes = [];
-  if (!calendarDate.isCurrentMonth) {
-    classes.push("other-month");
-  }
-  if (calendarDate.isToday) {
-    classes.push("schedule--current--exam");
-  }
-  if (calendarDate.hasEvents) {
-    classes.push("has--event");
-  }
-  return classes;
-}
-function formatDateForDisplay(date) {
-  return `${DAYS[date.getDay()]} ${date.getDate()}`;
-}
-function getMonthYearText(year, month) {
-  return `${MONTHS_FULL[month]} ${year}`;
-}
-function formatTimeRange(event) {
-  if (event.allDay || !event.startTime && !event.endTime) {
-    return "All day";
-  }
-  if (event.startTime && event.endTime) {
-    return `${event.startTime} - ${event.endTime}`;
-  }
-  if (event.startTime) {
-    return `${event.startTime}`;
-  }
-  return "";
-}
-function formatAttendees(attendees) {
-  if (!attendees || attendees.length === 0) return "";
-  if (attendees.length === 1) return attendees[0];
-  if (attendees.length === 2) return attendees.join(" and ");
-  return `${attendees.slice(0, -1).join(", ")}, and ${attendees[attendees.length - 1]}`;
-}
-function sortEventsByTime(events) {
-  return [...events].sort((a, b) => {
-    const aAllDay = a.allDay || !a.startTime && !a.endTime;
-    const bAllDay = b.allDay || !b.startTime && !b.endTime;
-    if (aAllDay && !bAllDay) return -1;
-    if (!aAllDay && bAllDay) return 1;
-    if (!a.startTime || !b.startTime) return 0;
-    return a.startTime.localeCompare(b.startTime);
-  });
-}
-var DEFAULT_CATEGORY_COLORS = {
-  work: "#3b82f6",
-  personal: "#8b5cf6",
-  meeting: "#10b981",
-  deadline: "#ef4444",
-  appointment: "#f59e0b",
-  other: "#6b7280"
-};
-function getDefaultEventColor(category, customColors) {
-  const colorMap = customColors || DEFAULT_CATEGORY_COLORS;
-  if (category && colorMap[category]) {
-    return colorMap[category];
-  }
-  return "#fc8917";
-}
-function mergeCategoryColors(customColors) {
-  return {
-    ...DEFAULT_CATEGORY_COLORS,
-    ...customColors
-  };
-}
-function isValidHexColor(color) {
-  return /^#([0-9A-F]{3}){1,2}$/i.test(color);
-}
-function getCategoryColor(category, customColors) {
-  const colorMap = mergeCategoryColors(customColors);
-  const color = colorMap[category] || colorMap.other || "#fc8917";
-  return isValidHexColor(color) ? color : "#fc8917";
-}
-
-// src/core/calendar-engine.ts
-var CalendarEngine = class {
-  constructor(config) {
-    this.listeners = /* @__PURE__ */ new Set();
-    this.config = config;
-    this.categoryColors = mergeCategoryColors(config.categoryColors);
-    const initialDate = config.initialDate || /* @__PURE__ */ new Date();
-    this.state = {
-      currentYear: initialDate.getFullYear(),
-      currentMonth: initialDate.getMonth(),
-      currentDate: initialDate.getDate(),
-      selectedDate: null,
-      selectedDayIndex: null,
-      tasks: []
-    };
-  }
-  /**
-   * Subscribe to state changes
-   */
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-  /**
-   * Notify all listeners of state changes
-   */
-  notify() {
-    this.listeners.forEach((listener) => listener());
-  }
-  /**
-   * Get current state
-   */
-  getState() {
-    return { ...this.state };
-  }
-  /**
-   * Get view model with computed properties
-   */
-  getViewModel() {
-    const calendarDates = generateCalendarDates(
-      this.state.currentYear,
-      this.state.currentMonth,
-      this.config.events,
-      this.config.weekStartsOn
-    );
-    return {
-      ...this.state,
-      months: MONTHS,
-      days: DAYS,
-      years: generateYears(this.config.minYear, this.config.maxYear),
-      monthAndYearText: getMonthYearText(
-        this.state.currentYear,
-        this.state.currentMonth
-      ),
-      scheduleDay: this.state.selectedDate ? formatDateForDisplay(this.state.selectedDate) : "",
-      calendarDates,
-      popupPositionClass: getPopupPositionClass(this.state.selectedDayIndex)
-    };
-  }
-  /**
-   * Get actions object
-   */
-  getActions() {
-    return {
-      next: this.next.bind(this),
-      previous: this.previous.bind(this),
-      jump: this.jump.bind(this),
-      goToToday: this.goToToday.bind(this),
-      isCurrentMonth: this.isCurrentMonth.bind(this),
-      selectDate: this.selectDate.bind(this),
-      updateTasks: this.updateTasks.bind(this)
-    };
-  }
-  /**
-   * Navigate to next month
-   */
-  next() {
-    if (this.state.currentMonth === 11) {
-      this.state.currentMonth = 0;
-      this.state.currentYear++;
-    } else {
-      this.state.currentMonth++;
-    }
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Navigate to previous month
-   */
-  previous() {
-    if (this.state.currentMonth === 0) {
-      this.state.currentMonth = 11;
-      this.state.currentYear--;
-    } else {
-      this.state.currentMonth--;
-    }
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Jump to specific month and year
-   */
-  jump(year, month) {
-    this.state.currentYear = year;
-    this.state.currentMonth = month;
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Navigate to current month (today)
-   */
-  goToToday() {
-    const today = /* @__PURE__ */ new Date();
-    this.state.currentYear = today.getFullYear();
-    this.state.currentMonth = today.getMonth();
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Check if currently viewing today's month
-   */
-  isCurrentMonth() {
-    const today = /* @__PURE__ */ new Date();
-    return this.state.currentYear === today.getFullYear() && this.state.currentMonth === today.getMonth();
-  }
-  /**
-   * Select a specific date
-   */
-  selectDate(date, dayIndex) {
-    this.state.selectedDate = date;
-    this.state.selectedDayIndex = dayIndex ?? null;
-    this.state.currentDate = date.getDate();
-    this.state.currentMonth = date.getMonth();
-    this.state.currentYear = date.getFullYear();
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Update tasks for the currently selected date
-   */
-  updateTasks() {
-    if (!this.state.selectedDate) {
-      this.state.tasks = [];
-      return;
-    }
-    this.state.tasks = getEventsForDate(
-      this.config.events,
-      this.state.selectedDate
-    );
-  }
-  /**
-   * Update events configuration
-   */
-  updateEvents(events) {
-    this.config.events = events;
-    this.updateTasks();
-    this.notify();
-  }
-  /**
-   * Handle date cell click
-   */
-  handleDateClick(date, dayIndex) {
-    this.selectDate(date, dayIndex);
-  }
-  /**
-   * Check if date has events
-   */
-  hasEventsForDate(date) {
-    return getEventsForDate(this.config.events, date).length > 0;
-  }
-  /**
-   * Get events for a specific date
-   */
-  getEventsForDate(date) {
-    return getEventsForDate(this.config.events, date);
-  }
-  /**
-   * Clear selected date
-   */
-  clearSelection() {
-    this.state.selectedDate = null;
-    this.state.selectedDayIndex = null;
-    this.state.tasks = [];
-    this.notify();
-  }
-  /**
-   * Get category color (with custom colors support)
-   */
-  getCategoryColor(category) {
-    if (!category) return "#fc8917";
-    return getCategoryColor(category, this.categoryColors);
-  }
-  /**
-   * Update category colors dynamically
-   */
-  updateCategoryColors(colors) {
-    this.categoryColors = mergeCategoryColors(colors);
-    this.notify();
-  }
-  /**
-   * Get all category colors
-   */
-  getCategoryColors() {
-    return { ...this.categoryColors };
-  }
-  /**
-   * Register a new category with color
-   */
-  registerCategory(name, color) {
-    this.categoryColors[name] = color;
-    this.notify();
-  }
-  /**
-   * Destroy the engine and cleanup listeners
-   */
-  destroy() {
-    this.listeners.clear();
-  }
-};
-
-// src/vanilla/Calendar.ts
-var VanillaCalendar = class {
-  constructor(props) {
-    this.unsubscribe = null;
-    this.pickerOpen = false;
-    this.yearInput = "";
-    this.yearInputValid = true;
-    this.clickOutsideHandler = null;
-    this.delegatedClickHandler = null;
-    this.delegatedInputHandler = null;
-    this.delegatedBlurHandler = null;
-    this.delegatedKeydownHandler = null;
-    this.listenersAttached = false;
-    this.props = props;
-    if (typeof props.container === "string") {
-      const element = document.querySelector(props.container);
-      if (!element) {
-        throw new Error(`Container element "${props.container}" not found`);
-      }
-      this.container = element;
-    } else {
-      this.container = props.container;
-    }
-    this.engine = new CalendarEngine({
-      events: props.events,
-      initialDate: props.initialDate,
-      minYear: props.minYear,
-      maxYear: props.maxYear,
-      weekStartsOn: props.weekStartsOn
-    });
-    this.actions = this.engine.getActions();
-    this.applyTheme();
-    this.init();
-  }
-  applyTheme() {
-    if (this.props.theme) {
-      const root = document.documentElement;
-      const theme = this.props.theme;
-      if (theme.primary)
-        root.style.setProperty("--calendar-primary-color", theme.primary);
-      if (theme.secondary)
-        root.style.setProperty("--calendar-secondary-color", theme.secondary);
-      if (theme.tertiary)
-        root.style.setProperty("--calendar-tertiary-color", theme.tertiary);
-      if (theme.textColor)
-        root.style.setProperty("--calendar-text-color", theme.textColor);
-      if (theme.textLight)
-        root.style.setProperty("--calendar-text-light", theme.textLight);
-      if (theme.background)
-        root.style.setProperty("--calendar-background", theme.background);
-      if (theme.cellHover)
-        root.style.setProperty("--calendar-cell-hover", theme.cellHover);
-      if (theme.borderColor)
-        root.style.setProperty("--calendar-border-color", theme.borderColor);
-      if (theme.todayOutline)
-        root.style.setProperty("--calendar-today-outline", theme.todayOutline);
-      if (theme.selectedBg)
-        root.style.setProperty("--calendar-selected-bg", theme.selectedBg);
-      if (theme.eventIndicator)
-        root.style.setProperty(
-          "--calendar-event-indicator",
-          theme.eventIndicator
-        );
-    }
-  }
-  init() {
-    this.container.classList.add("kalendly-calendar");
-    if (this.props.className) {
-      this.container.classList.add(this.props.className);
-    }
-    this.unsubscribe = this.engine.subscribe(() => {
-      this.render();
-    });
-    this.render();
-  }
-  render() {
-    const viewModel = this.engine.getViewModel();
-    const defaultRenderEvent = (event) => {
-      const timeRange = formatTimeRange(event);
-      const attendeesList = formatAttendees(event.attendees);
-      let borderColor = event.color || "#3b82f6";
-      if (event.category) {
-        borderColor = this.engine.getCategoryColor(event.category);
-      }
-      const getCategoryLabel = (category) => {
-        const labels = {
-          work: "WORK",
-          personal: "PERSONAL",
-          meeting: "MEETING",
-          deadline: "DEADLINE",
-          appointment: "APPOINTMENT",
-          other: "OTHER"
-        };
-        return category ? labels[category] || category.toUpperCase() : "";
-      };
-      const getPriorityLabel = (priority) => {
-        const labels = {
-          high: "HIGH",
-          medium: "MEDIUM",
-          low: "LOW"
-        };
-        return priority ? labels[priority] || priority.toUpperCase() : "";
-      };
-      const getStatusLabel = (status) => {
-        const labels = {
-          completed: "COMPLETED",
-          cancelled: "CANCELLED",
-          tentative: "TENTATIVE",
-          scheduled: "SCHEDULED"
-        };
-        return status ? labels[status] || status.toUpperCase() : "";
-      };
-      return `
-        <div class="event-card" style="border-left-color: ${borderColor}">
-          <div class="event-header">
-            <div class="event-title">${event.name}</div>
-            <div class="event-badges">
-              ${event.category ? `<span class="badge category-${event.category}">${getCategoryLabel(event.category)}</span>` : ""}
-              ${event.priority ? `<span class="badge priority-${event.priority}">${getPriorityLabel(event.priority)}</span>` : ""}
-              ${event.status && event.status !== "scheduled" ? `<span class="badge status-${event.status}">${getStatusLabel(event.status)}</span>` : ""}
-            </div>
-          </div>
-          
-          ${timeRange ? `
-          <div class="event-time">
-            <span class="event-time-label">Time:</span>
-            <span class="event-time-value">${timeRange}</span>
-          </div>
-          ` : ""}
-          
-          ${event.description ? `
-          <div class="event-description">${event.description}</div>
-          ` : ""}
-          
-          ${event.location ? `
-          <div class="event-time">
-            <span class="event-time-label">Location:</span>
-            <span class="event-time-value">${event.location}</span>
-          </div>
-          ` : ""}
-          
-          ${attendeesList ? `
-          <div class="event-time">
-            <span class="event-time-label">Attendees:</span>
-            <span class="event-time-value">${attendeesList}</span>
-          </div>
-          ` : ""}
-          
-          ${event.organizer ? `
-          <div class="event-time">
-            <span class="event-time-label">Organizer:</span>
-            <span class="event-time-value">${event.organizer}</span>
-          </div>
-          ` : ""}
-          
-          ${event.notes ? `
-          <div class="event-time">
-            <span class="event-time-label">Notes:</span>
-            <span class="event-time-value">${event.notes}</span>
-          </div>
-          ` : ""}
-          
-          ${event.url ? `
-          <div class="event-time">
-            <a href="${event.url}" target="_blank" rel="noopener noreferrer" class="event-link">
-              View Details \u2192
-            </a>
-          </div>
-          ` : ""}
-          
-          ${event.tags && event.tags.length > 0 ? `
-          <div class="event-tags">
-            ${event.tags.map((tag) => `<span class="event-tag">${tag}</span>`).join("")}
-          </div>
-          ` : ""}
-        </div>
-      `;
-    };
-    const defaultRenderNoEvents = () => '<div class="no-events-message">No events scheduled for this day.</div>';
-    const renderEvent = this.props.renderEvent || defaultRenderEvent;
-    const renderNoEvents = this.props.renderNoEvents || defaultRenderNoEvents;
-    const showScrollHint = viewModel.tasks.length > 3;
-    const today = /* @__PURE__ */ new Date();
-    const todayMonth = today.getMonth();
-    const todayYear = today.getFullYear();
-    const minYear = this.props.minYear ?? todayYear - 30;
-    const maxYear = this.props.maxYear ?? todayYear + 10;
-    const isCurrentMonth = viewModel.currentYear === todayYear && viewModel.currentMonth === todayMonth;
-    const html = `
-      ${this.props.title ? `
-        <div class="page--title">
-          <h1>${this.props.title}</h1>
-        </div>
-      ` : ""}
-
-      <div class="calendar--content">
-        <div class="calendar--card">
-          <!-- Navigation Header -->
-          <div class="calendar--nav-header">
-            <button type="button" class="calendar--nav-arrow" data-action="previous" aria-label="Previous month">
-              &#8249;
-            </button>
-
-            <div class="calendar--picker-container" data-picker-container>
-              <button
-                type="button"
-                class="calendar--picker-btn"
-                data-action="toggle-picker"
-                aria-expanded="${this.pickerOpen ? "true" : "false"}"
-                aria-haspopup="true"
-              >
-                ${this.props.useShortMonthNames ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText}
-                <span class="calendar--picker-chevron">&#9662;</span>
-              </button>
-
-              ${this.pickerOpen ? `
-                <div class="calendar--picker-dropdown">
-                  <div class="calendar--picker-year-row">
-                    <button
-                      type="button"
-                      class="calendar--picker-year-arrow"
-                      data-action="year-prev"
-                      ${viewModel.currentYear <= minYear ? "disabled" : ""}
-                      aria-label="Previous year"
-                    >&#8249;</button>
-                    <input
-                      type="text"
-                      class="calendar--picker-year-input${!this.yearInputValid ? " invalid" : ""}"
-                      value="${this.yearInput || viewModel.currentYear}"
-                      data-year-input
-                      aria-label="Year"
-                    />
-                    <button
-                      type="button"
-                      class="calendar--picker-year-arrow"
-                      data-action="year-next"
-                      ${viewModel.currentYear >= maxYear ? "disabled" : ""}
-                      aria-label="Next year"
-                    >&#8250;</button>
-                  </div>
-
-                  <div class="calendar--picker-months">
-                    ${(this.props.useShortMonthNames ? MONTHS : MONTHS_FULL).map((month, index) => {
-      const isSelected = index === viewModel.currentMonth;
-      const isCurrent = index === todayMonth && viewModel.currentYear === todayYear;
-      return `
-                        <button
-                          type="button"
-                          class="calendar--picker-month${isSelected ? " selected" : ""}${isCurrent ? " current-month" : ""}"
-                          data-action="select-month"
-                          data-month="${index}"
-                        >${month}</button>
-                      `;
-    }).join("")}
-                  </div>
-                </div>
-              ` : ""}
-            </div>
-
-            <button
-              type="button"
-              class="calendar--today-btn"
-              data-action="today"
-              ${isCurrentMonth ? "disabled" : ""}
-            >Today</button>
-
-            <button type="button" class="calendar--nav-arrow" data-action="next" aria-label="Next month">
-              &#8250;
-            </button>
-          </div>
-
-          <table class="calendar--table calendar--table--bordered">
-            <thead>
-              <tr>
-                ${viewModel.days.map((day) => `<th>${day.slice(0, 3)}</th>`).join("")}
-              </tr>
-            </thead>
-            <tbody data-calendar-body>
-              ${viewModel.calendarDates.map(
-      (week) => `
-                <tr>
-                  ${week.map((calendarDate, dayIndex) => {
-        const classes = getCellClasses(calendarDate);
-        const dateString = calendarDate.date.toISOString();
-        return `
-                      <td
-                        class="${classes.join(" ")}"
-                        data-date="${dateString}"
-                        data-day-index="${dayIndex}"
-                        data-clickable="true"
-                      >
-                        ${calendarDate.date.getDate()}
-                      </td>
-                    `;
-      }).join("")}
-                </tr>
-              `
-    ).join("")}
-            </tbody>
-          </table>
-
-          ${viewModel.selectedDate ? `
-            <div class="date-popup ${viewModel.popupPositionClass}">
-              <div class="popup-header">
-                <h2>${viewModel.scheduleDay}</h2>
-                <button type="button" class="popup-close" data-action="close-popup" aria-label="Close">\u2715</button>
-              </div>
-
-              ${showScrollHint ? `
-              <div class="scroll-hint">
-                \u2193 Scroll to see more events \u2193
-              </div>
-              ` : ""}
-
-              <div class="events-container">
-                ${viewModel.tasks.length > 0 ? `
-                  ${viewModel.tasks.map((event) => renderEvent(event)).join("")}
-                ` : renderNoEvents()}
-              </div>
-            </div>
-          ` : ""}
-        </div>
-      </div>
-    `;
-    this.container.innerHTML = html;
-    this.attachEventListeners();
-  }
-  attachEventListeners() {
-    if (this.listenersAttached) return;
-    this.listenersAttached = true;
-    const today = /* @__PURE__ */ new Date();
-    const todayYear = today.getFullYear();
-    const todayMonth = today.getMonth();
-    const minYear = this.props.minYear ?? todayYear - 30;
-    const maxYear = this.props.maxYear ?? todayYear + 10;
-    this.delegatedClickHandler = (e) => {
-      const target = e.target;
-      const cell = target.closest('td[data-clickable="true"]');
-      if (cell && cell.dataset.date) {
-        e.stopPropagation();
-        const date = new Date(cell.dataset.date);
-        const dayIndex = parseInt(cell.dataset.dayIndex || "0");
-        this.engine.handleDateClick(date, dayIndex);
-        this.container.dispatchEvent(
-          new CustomEvent("dateSelect", { detail: { date, dayIndex } })
-        );
-        return;
-      }
-      const actionEl = target.closest("[data-action]");
-      if (!actionEl) return;
-      const action = actionEl.dataset.action;
-      e.stopPropagation();
-      switch (action) {
-        case "previous":
-          this.actions.previous();
-          this.dispatchMonthChange();
-          break;
-        case "next":
-          this.actions.next();
-          this.dispatchMonthChange();
-          break;
-        case "today":
-          this.actions.goToToday();
-          this.pickerOpen = false;
-          this.container.dispatchEvent(
-            new CustomEvent("monthChange", {
-              detail: { year: todayYear, month: todayMonth }
-            })
-          );
-          break;
-        case "toggle-picker":
-          this.pickerOpen = !this.pickerOpen;
-          if (this.pickerOpen) {
-            this.yearInput = String(this.engine.getViewModel().currentYear);
-            this.yearInputValid = true;
-          }
-          this.render();
-          break;
-        case "year-prev": {
-          const vm = this.engine.getViewModel();
-          if (vm.currentYear > minYear) {
-            const newYear = vm.currentYear - 1;
-            this.yearInput = String(newYear);
-            this.updatePickerYear(newYear);
-            this.actions.jump(newYear, vm.currentMonth);
-            this.dispatchMonthChange();
-          }
-          break;
-        }
-        case "year-next": {
-          const vm = this.engine.getViewModel();
-          if (vm.currentYear < maxYear) {
-            const newYear = vm.currentYear + 1;
-            this.yearInput = String(newYear);
-            this.updatePickerYear(newYear);
-            this.actions.jump(newYear, vm.currentMonth);
-            this.dispatchMonthChange();
-          }
-          break;
-        }
-        case "select-month": {
-          const month = parseInt(actionEl.dataset.month || "0", 10);
-          this.actions.jump(this.engine.getViewModel().currentYear, month);
-          this.pickerOpen = false;
-          this.dispatchMonthChange();
-          break;
-        }
-        case "close-popup":
-          this.engine.clearSelection();
-          break;
-      }
-    };
-    this.delegatedInputHandler = (e) => {
-      const target = e.target;
-      if (!target.matches("[data-year-input]")) return;
-      const value = target.value;
-      if (value === "" || /^\d+$/.test(value)) {
-        this.yearInput = value;
-        const year = parseInt(value, 10);
-        this.yearInputValid = value === "" || year >= minYear && year <= maxYear;
-        target.classList.toggle("invalid", !this.yearInputValid);
-      }
-    };
-    this.delegatedBlurHandler = (e) => {
-      const target = e.target;
-      if (!target.matches("[data-year-input]")) return;
-      const year = parseInt(this.yearInput, 10);
-      const vm = this.engine.getViewModel();
-      if (isNaN(year) || year < minYear || year > maxYear) {
-        this.yearInput = String(vm.currentYear);
-        this.yearInputValid = true;
-        target.value = this.yearInput;
-        target.classList.remove("invalid");
-      } else if (year !== vm.currentYear) {
-        this.actions.jump(year, vm.currentMonth);
-        this.dispatchMonthChange();
-      }
-    };
-    this.delegatedKeydownHandler = (e) => {
-      const target = e.target;
-      if (!target.matches("[data-year-input]")) return;
-      if (e.key === "Enter") {
-        target.blur();
-      }
-    };
-    this.container.addEventListener("click", this.delegatedClickHandler);
-    this.container.addEventListener("input", this.delegatedInputHandler);
-    this.container.addEventListener("blur", this.delegatedBlurHandler, true);
-    this.container.addEventListener("keydown", this.delegatedKeydownHandler);
-    this.clickOutsideHandler = (e) => {
-      const target = e.target;
-      if (this.container.contains(target)) return;
-      if (this.pickerOpen) {
-        this.pickerOpen = false;
-        this.render();
-        return;
-      }
-      const popup = this.container.querySelector(".date-popup");
-      if (popup) {
-        this.engine.clearSelection();
-      }
-    };
-    document.addEventListener("click", this.clickOutsideHandler);
-  }
-  // Targeted update for picker year - avoids full DOM rebuild
-  updatePickerYear(year) {
-    const input = this.container.querySelector(
-      "[data-year-input]"
-    );
-    if (input) {
-      input.value = String(year);
-    }
-    const today = /* @__PURE__ */ new Date();
-    const todayYear = today.getFullYear();
-    const minYear = this.props.minYear ?? todayYear - 30;
-    const maxYear = this.props.maxYear ?? todayYear + 10;
-    const prevBtn = this.container.querySelector(
-      '[data-action="year-prev"]'
-    );
-    const nextBtn = this.container.querySelector(
-      '[data-action="year-next"]'
-    );
-    if (prevBtn) prevBtn.disabled = year <= minYear;
-    if (nextBtn) nextBtn.disabled = year >= maxYear;
-  }
-  dispatchMonthChange() {
-    const vm = this.engine.getViewModel();
-    this.container.dispatchEvent(
-      new CustomEvent("monthChange", {
-        detail: { year: vm.currentYear, month: vm.currentMonth }
-      })
-    );
-  }
-  updateEvents(events) {
-    this.engine.updateEvents(events);
-  }
-  updateTheme(theme) {
-    this.props.theme = theme;
-    this.applyTheme();
-  }
-  getCurrentDate() {
-    return this.engine.getViewModel().selectedDate;
-  }
-  goToDate(date) {
-    this.actions.jump(date.getFullYear(), date.getMonth());
-  }
-  getEngine() {
-    return this.engine;
-  }
-  destroy() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = null;
-    }
-    if (this.delegatedClickHandler) {
-      this.container.removeEventListener("click", this.delegatedClickHandler);
-      this.delegatedClickHandler = null;
-    }
-    if (this.delegatedInputHandler) {
-      this.container.removeEventListener("input", this.delegatedInputHandler);
-      this.delegatedInputHandler = null;
-    }
-    if (this.delegatedBlurHandler) {
-      this.container.removeEventListener(
-        "blur",
-        this.delegatedBlurHandler,
-        true
-      );
-      this.delegatedBlurHandler = null;
-    }
-    if (this.delegatedKeydownHandler) {
-      this.container.removeEventListener(
-        "keydown",
-        this.delegatedKeydownHandler
-      );
-      this.delegatedKeydownHandler = null;
-    }
-    if (this.clickOutsideHandler) {
-      document.removeEventListener("click", this.clickOutsideHandler);
-      this.clickOutsideHandler = null;
-    }
-    this.listenersAttached = false;
-    this.engine.destroy();
-    this.container.innerHTML = "";
-    this.container.classList.remove("kalendly-calendar");
-    if (this.props.className) {
-      this.container.classList.remove(this.props.className);
-    }
-  }
-};
-function createCalendar(props) {
-  return new VanillaCalendar(props);
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  CalendarEngine,
-  DAYS,
-  DEFAULT_CATEGORY_COLORS,
-  MONTHS,
-  MONTHS_FULL,
-  VanillaCalendar,
-  createCalendar,
-  formatAttendees,
-  formatDateForDisplay,
-  formatTimeRange,
-  generateCalendarDates,
-  generateYears,
-  getCategoryColor,
-  getCellClasses,
-  getDefaultEventColor,
-  getEventsForDate,
-  getMonthYearText,
-  getPopupPositionClass,
-  hasEvents,
-  isSameDay,
-  isToday,
-  isValidHexColor,
-  mergeCategoryColors,
-  normalizeDate,
-  sortEventsByTime
-});
-//# sourceMappingURL=index.js.map