kalendly 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1403 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+
+// src/core/utils.ts
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+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();
+  let firstDayOfWeek = firstDay.getDay();
+  if (weekStartsOn === 1) {
+    firstDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
+  }
+  const dates = [];
+  let day = 1;
+  for (let week = 0; week < 6; week++) {
+    const weekDates = [];
+    for (let dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {
+      if (week === 0 && dayOfWeek < firstDayOfWeek) {
+        weekDates.push(null);
+      } else if (day > daysInMonth) {
+        weekDates.push(null);
+      } 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);
+    if (day > daysInMonth && weekDates.every((date) => date === null)) {
+      break;
+    }
+  }
+  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) {
+  if (!calendarDate) return [];
+  const classes = [];
+  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[month]} ${year}`;
+}
+
+// src/core/calendar-engine.ts
+var CalendarEngine = class {
+  constructor(config) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.config = config;
+    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),
+      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();
+  }
+  /**
+   * 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();
+  }
+  /**
+   * Destroy the engine and cleanup listeners
+   */
+  destroy() {
+    this.listeners.clear();
+  }
+};
+
+// src/react/index.tsx
+var react_exports = {};
+__export(react_exports, {
+  Calendar: () => Calendar,
+  CalendarEngine: () => CalendarEngine,
+  DAYS: () => DAYS,
+  DatePopup: () => DatePopup,
+  MONTHS: () => MONTHS,
+  formatDateForDisplay: () => formatDateForDisplay,
+  generateCalendarDates: () => generateCalendarDates,
+  generateYears: () => generateYears,
+  getCellClasses: () => getCellClasses,
+  getEventsForDate: () => getEventsForDate,
+  getMonthYearText: () => getMonthYearText,
+  getPopupPositionClass: () => getPopupPositionClass,
+  hasEvents: () => hasEvents,
+  isSameDay: () => isSameDay,
+  isToday: () => isToday,
+  normalizeDate: () => normalizeDate
+});
+
+// src/react/components/Calendar.tsx
+import { useEffect, useState, useCallback, useMemo } from "react";
+
+// src/react/components/DatePopup.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DatePopup = ({
+  isVisible,
+  selectedDate,
+  events,
+  scheduleDay,
+  popupPositionClass,
+  onEventClick,
+  onClose,
+  renderEvent,
+  renderNoEvents
+}) => {
+  if (!isVisible || !selectedDate) return null;
+  const handleEventClick = (event) => {
+    onEventClick?.(event);
+  };
+  const defaultRenderEvent = (event) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: `event--item${onEventClick ? " clickable" : ""}`,
+      onClick: () => handleEventClick(event),
+      children: event.name
+    },
+    event.id || event.name
+  );
+  const defaultRenderNoEvents = () => /* @__PURE__ */ jsx("div", { className: "no-events-message", children: "No events scheduled for this day." });
+  return /* @__PURE__ */ jsxs("div", { className: `date-popup ${popupPositionClass}`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "popup-close",
+        onClick: onClose,
+        "aria-label": "Close",
+        children: "\u2715"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "schedule--wrapper", children: [
+      /* @__PURE__ */ jsx("div", { className: "schedule--block", children: /* @__PURE__ */ jsx("h2", { className: "schedule--day", children: scheduleDay }) }),
+      events.length > 0 ? /* @__PURE__ */ jsx("div", { className: "event--wrapper", children: /* @__PURE__ */ jsx("ul", { children: events.map(
+        (event) => renderEvent ? /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: `event--item${onEventClick ? " clickable" : ""}`,
+            onClick: () => handleEventClick(event),
+            children: renderEvent(event)
+          },
+          event.id || event.name
+        ) : defaultRenderEvent(event)
+      ) }) }) : renderNoEvents ? renderNoEvents() : defaultRenderNoEvents()
+    ] })
+  ] });
+};
+
+// src/react/components/Calendar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Calendar = ({
+  events,
+  initialDate,
+  minYear,
+  maxYear,
+  weekStartsOn = 0,
+  onDateSelect,
+  onEventClick,
+  onMonthChange,
+  className = "",
+  style,
+  renderEvent,
+  renderNoEvents,
+  title = "Event Schedule"
+}) => {
+  const engine = useMemo(
+    () => new CalendarEngine({
+      events,
+      initialDate,
+      minYear,
+      maxYear,
+      weekStartsOn
+    }),
+    []
+  );
+  const [, forceUpdate] = useState({});
+  const rerender = useCallback(() => forceUpdate({}), []);
+  useEffect(() => {
+    const unsubscribe = engine.subscribe(rerender);
+    return unsubscribe;
+  }, [engine, rerender]);
+  useEffect(() => {
+    engine.updateEvents(events);
+  }, [engine, events]);
+  useEffect(() => {
+    return () => {
+      engine.destroy();
+    };
+  }, [engine]);
+  const viewModel = engine.getViewModel();
+  const actions = engine.getActions();
+  const { selectedDate, tasks, selectedDayIndex } = viewModel;
+  const handleDateClick = (event) => {
+    const td = event.target.closest("td");
+    if (!td) return;
+    const cellContent = td.textContent?.trim();
+    if (!cellContent) return;
+    const clickedDate = new Date(
+      viewModel.currentYear,
+      viewModel.currentMonth,
+      parseInt(cellContent)
+    );
+    const dayIndex = td.parentNode ? Array.from(td.parentNode.children).indexOf(td) : 0;
+    engine.handleDateClick(clickedDate, dayIndex);
+    onDateSelect?.(clickedDate);
+  };
+  const handleMonthChange = () => {
+    onMonthChange?.(viewModel.currentYear, viewModel.currentMonth);
+  };
+  const handleYearChange = (event) => {
+    const year = parseInt(event.target.value);
+    actions.jump(year, viewModel.currentMonth);
+    handleMonthChange();
+  };
+  const handleMonthSelectChange = (event) => {
+    const month = parseInt(event.target.value);
+    actions.jump(viewModel.currentYear, month);
+    handleMonthChange();
+  };
+  const handleNext = () => {
+    actions.next();
+    handleMonthChange();
+  };
+  const handlePrevious = () => {
+    actions.previous();
+    handleMonthChange();
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: `kalendly-calendar ${className}`, style, children: [
+    title && /* @__PURE__ */ jsx2("div", { className: "page--title", children: /* @__PURE__ */ jsx2("h1", { children: title }) }),
+    /* @__PURE__ */ jsx2("div", { className: "calendar--content", children: /* @__PURE__ */ jsxs2("div", { className: "calendar--card", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "calendar--card--header", children: viewModel.monthAndYearText }),
+      /* @__PURE__ */ jsxs2("table", { className: "calendar--table calendar--table--bordered", children: [
+        /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: viewModel.days.map((day) => /* @__PURE__ */ jsx2("th", { children: day.slice(0, 3) }, day)) }) }),
+        /* @__PURE__ */ jsx2("tbody", { onClick: handleDateClick, children: viewModel.calendarDates.map((week, weekIndex) => /* @__PURE__ */ jsx2("tr", { children: week.map((calendarDate, dayIndex) => {
+          const cellClasses = getCellClasses(calendarDate);
+          return /* @__PURE__ */ jsx2(
+            "td",
+            {
+              className: cellClasses.join(" "),
+              children: calendarDate?.date.getDate() || ""
+            },
+            `${weekIndex}-${dayIndex}`
+          );
+        }) }, weekIndex)) })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "calendar--navigation--buttons", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            className: "calendar--navigation--btn",
+            onClick: handlePrevious,
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx2("button", { className: "calendar--navigation--btn", onClick: handleNext, children: "Next" })
+      ] }),
+      /* @__PURE__ */ jsxs2("form", { className: "calendar--form--jump", children: [
+        /* @__PURE__ */ jsx2("div", { className: "calendar--lead", children: "Jump To:" }),
+        /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2("label", { className: "calendar--form--jump--item", children: /* @__PURE__ */ jsx2(
+          "select",
+          {
+            value: viewModel.currentMonth,
+            onChange: handleMonthSelectChange,
+            "aria-label": "Select month",
+            children: viewModel.months.map((month, index) => /* @__PURE__ */ jsx2("option", { value: index, children: month }, index))
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2("label", { className: "calendar--form--jump--item", children: /* @__PURE__ */ jsx2(
+          "select",
+          {
+            value: viewModel.currentYear,
+            onChange: handleYearChange,
+            "aria-label": "Select year",
+            children: viewModel.years.map((year) => /* @__PURE__ */ jsx2("option", { value: year, children: year }, year))
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        DatePopup,
+        {
+          isVisible: !!selectedDate,
+          selectedDate,
+          events: tasks,
+          scheduleDay: viewModel.scheduleDay,
+          popupPositionClass: viewModel.popupPositionClass,
+          onClose: () => engine.clearSelection(),
+          onEventClick,
+          renderEvent,
+          renderNoEvents
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/react-native/index.tsx
+var react_native_exports = {};
+__export(react_native_exports, {
+  Calendar: () => Calendar2,
+  CalendarEngine: () => CalendarEngine,
+  DAYS: () => DAYS,
+  DatePopup: () => DatePopup2,
+  MONTHS: () => MONTHS,
+  calendarStyles: () => calendarStyles,
+  formatDateForDisplay: () => formatDateForDisplay,
+  generateCalendarDates: () => generateCalendarDates,
+  generateYears: () => generateYears,
+  getCellClasses: () => getCellClasses,
+  getEventsForDate: () => getEventsForDate,
+  getMonthYearText: () => getMonthYearText,
+  getPopupPositionClass: () => getPopupPositionClass,
+  hasEvents: () => hasEvents,
+  isSameDay: () => isSameDay,
+  isToday: () => isToday,
+  normalizeDate: () => normalizeDate
+});
+
+// src/react-native/components/Calendar.tsx
+import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { View as View2, Text as Text2, TouchableOpacity as TouchableOpacity2, ScrollView as ScrollView2, Alert } from "react-native";
+
+// src/react-native/components/DatePopup.tsx
+import { Modal, View, Text, TouchableOpacity, ScrollView } from "react-native";
+
+// src/styles/react-native-styles.ts
+import { StyleSheet, Dimensions } from "react-native";
+var { width } = Dimensions.get("window");
+var cellSize = (width - 60) / 7;
+var colors = {
+  primary: "#fc8917",
+  secondary: "#fca045",
+  tertiary: "#fdb873",
+  text: "#2c3e50",
+  border: "#dee2e6",
+  todayOutline: "#f7db04",
+  eventIndicator: "#1890ff",
+  background: "#fff",
+  white: "#ffffff"
+};
+var calendarStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background
+  },
+  titleContainer: {
+    paddingVertical: 20,
+    alignItems: "center"
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "600",
+    color: colors.text
+  },
+  contentContainer: {
+    marginHorizontal: 20,
+    marginTop: 20
+  },
+  card: {
+    backgroundColor: colors.background,
+    borderRadius: 8,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+    overflow: "hidden"
+  },
+  cardHeader: {
+    backgroundColor: colors.tertiary,
+    paddingVertical: 15,
+    paddingHorizontal: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border
+  },
+  cardHeaderText: {
+    fontSize: 18,
+    fontWeight: "500",
+    color: colors.text,
+    textAlign: "center"
+  },
+  // Calendar Table Styles
+  table: {
+    backgroundColor: colors.background
+  },
+  tableHeader: {
+    flexDirection: "row",
+    backgroundColor: "rgba(252, 137, 23, 0.1)",
+    borderBottomWidth: 2,
+    borderBottomColor: colors.border
+  },
+  tableHeaderCell: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRightWidth: 1,
+    borderRightColor: colors.border,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tableHeaderText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: colors.text
+  },
+  tableRow: {
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border
+  },
+  tableCell: {
+    flex: 1,
+    height: cellSize,
+    borderRightWidth: 1,
+    borderRightColor: colors.border,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative"
+  },
+  tableCellText: {
+    fontSize: 16,
+    color: colors.text
+  },
+  // Calendar Cell States
+  cellToday: {
+    borderWidth: 2,
+    borderColor: colors.todayOutline
+  },
+  cellTodayText: {
+    fontWeight: "bold"
+  },
+  cellWithEvents: {
+    backgroundColor: "rgba(252, 160, 69, 0.3)"
+  },
+  eventIndicator: {
+    position: "absolute",
+    bottom: 2,
+    width: 4,
+    height: 4,
+    backgroundColor: colors.eventIndicator,
+    borderRadius: 2
+  },
+  // Navigation Buttons
+  navigationContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    gap: 15
+  },
+  navigationButton: {
+    flex: 1,
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: colors.primary,
+    borderRadius: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  navigationButtonText: {
+    color: colors.primary,
+    fontSize: 16,
+    fontWeight: "500"
+  },
+  navigationButtonPressed: {
+    backgroundColor: colors.primary
+  },
+  navigationButtonTextPressed: {
+    color: colors.white
+  },
+  // Jump Form
+  jumpForm: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+    gap: 10
+  },
+  jumpLabel: {
+    fontSize: 18,
+    fontWeight: "300",
+    color: colors.text
+  },
+  jumpSelect: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: colors.background,
+    minWidth: 80
+  },
+  jumpSelectText: {
+    fontSize: 16,
+    color: colors.text,
+    textAlign: "center"
+  },
+  // Popup Styles
+  popupOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1e3
+  },
+  popup: {
+    backgroundColor: colors.background,
+    borderRadius: 12,
+    padding: 0,
+    width: width * 0.8,
+    maxWidth: 300,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    elevation: 8
+  },
+  popupWrapper: {
+    backgroundColor: colors.secondary,
+    borderRadius: 12,
+    padding: 12
+  },
+  popupBlock: {
+    backgroundColor: colors.primary,
+    borderRadius: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    marginBottom: 10
+  },
+  popupDay: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: colors.white,
+    textAlign: "center"
+  },
+  eventsList: {
+    gap: 6
+  },
+  eventItem: {
+    backgroundColor: colors.tertiary,
+    borderRadius: 6,
+    padding: 12
+  },
+  eventItemText: {
+    fontSize: 14,
+    color: colors.text
+  },
+  noEventsMessage: {
+    backgroundColor: colors.tertiary,
+    borderRadius: 6,
+    padding: 12,
+    alignItems: "center"
+  },
+  noEventsText: {
+    fontSize: 14,
+    color: colors.text,
+    textAlign: "center"
+  },
+  popupCloseButton: {
+    position: "absolute",
+    top: -10,
+    right: -10,
+    backgroundColor: colors.primary,
+    borderRadius: 15,
+    width: 30,
+    height: 30,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  popupCloseText: {
+    color: colors.white,
+    fontSize: 16,
+    fontWeight: "bold"
+  }
+});
+
+// src/react-native/components/DatePopup.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DatePopup2 = ({
+  visible,
+  selectedDate,
+  events,
+  scheduleDay,
+  onClose,
+  renderEvent,
+  renderNoEvents,
+  showCloseButton = true
+}) => {
+  if (!selectedDate) return null;
+  const defaultRenderEvent = (event) => /* @__PURE__ */ jsx3(View, { style: calendarStyles.eventItem, children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles.eventItemText, children: event.name }) }, event.id || event.name);
+  const defaultRenderNoEvents = () => /* @__PURE__ */ jsx3(View, { style: calendarStyles.noEventsMessage, children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles.noEventsText, children: "No events scheduled for this day." }) });
+  return /* @__PURE__ */ jsx3(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsx3(
+        TouchableOpacity,
+        {
+          style: calendarStyles.popupOverlay,
+          activeOpacity: 1,
+          onPress: onClose,
+          children: /* @__PURE__ */ jsxs3(
+            TouchableOpacity,
+            {
+              style: calendarStyles.popup,
+              activeOpacity: 1,
+              onPress: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxs3(View, { style: calendarStyles.popupWrapper, children: [
+                  showCloseButton && /* @__PURE__ */ jsx3(
+                    TouchableOpacity,
+                    {
+                      style: calendarStyles.popupCloseButton,
+                      onPress: onClose,
+                      accessibilityLabel: "Close",
+                      children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles.popupCloseText, children: "\u2715" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(View, { style: calendarStyles.popupBlock, children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles.popupDay, children: scheduleDay }) }),
+                  /* @__PURE__ */ jsx3(ScrollView, { showsVerticalScrollIndicator: false, children: events.length > 0 ? /* @__PURE__ */ jsx3(View, { style: calendarStyles.eventsList, children: events.map(
+                    (event) => renderEvent ? renderEvent(event) : defaultRenderEvent(event)
+                  ) }) : renderNoEvents ? renderNoEvents() : defaultRenderNoEvents() })
+                ] }),
+                showCloseButton && /* @__PURE__ */ jsx3(
+                  TouchableOpacity,
+                  {
+                    style: calendarStyles.popupCloseButton,
+                    onPress: onClose,
+                    children: /* @__PURE__ */ jsx3(Text, { style: calendarStyles.popupCloseText, children: "\xD7" })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+// src/react-native/components/Calendar.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Select = ({
+  options,
+  selectedValue,
+  onValueChange,
+  style,
+  textStyle
+}) => {
+  const selectedOption = options.find((opt) => opt.value === selectedValue);
+  const showPicker = () => {
+    Alert.alert(
+      "Select Option",
+      "",
+      options.map((option) => ({
+        text: option.label,
+        onPress: () => onValueChange(option.value)
+      }))
+    );
+  };
+  return /* @__PURE__ */ jsx4(
+    TouchableOpacity2,
+    {
+      style: [calendarStyles.jumpSelect, style],
+      onPress: showPicker,
+      children: /* @__PURE__ */ jsx4(Text2, { style: [calendarStyles.jumpSelectText, textStyle], children: selectedOption?.label })
+    }
+  );
+};
+var Calendar2 = ({
+  events,
+  initialDate,
+  minYear,
+  maxYear,
+  weekStartsOn = 0,
+  onDateSelect,
+  onEventClick,
+  onMonthChange,
+  style,
+  containerStyle,
+  headerStyle,
+  headerTextStyle,
+  cellStyle,
+  cellTextStyle,
+  renderEvent,
+  renderNoEvents,
+  title = "Event Schedule",
+  showCloseButton = true
+}) => {
+  const engine = useMemo2(
+    () => new CalendarEngine({
+      events,
+      initialDate,
+      minYear,
+      maxYear,
+      weekStartsOn
+    }),
+    []
+  );
+  const [, forceUpdate] = useState2({});
+  const rerender = useCallback2(() => forceUpdate({}), []);
+  useEffect2(() => {
+    const unsubscribe = engine.subscribe(rerender);
+    return unsubscribe;
+  }, [engine, rerender]);
+  useEffect2(() => {
+    engine.updateEvents(events);
+  }, [engine, events]);
+  const viewModel = engine.getViewModel();
+  const actions = engine.getActions();
+  const { selectedDate, tasks } = viewModel;
+  const handleDatePress = (date, dayIndex) => {
+    engine.handleDateClick(date, dayIndex);
+    onDateSelect?.(date);
+  };
+  const handleNext = () => {
+    actions.next();
+    onMonthChange?.(viewModel.currentYear, viewModel.currentMonth);
+  };
+  const handlePrevious = () => {
+    actions.previous();
+    onMonthChange?.(viewModel.currentYear, viewModel.currentMonth);
+  };
+  const handleMonthChange = (month) => {
+    actions.jump(viewModel.currentYear, month);
+    onMonthChange?.(viewModel.currentYear, month);
+  };
+  const handleYearChange = (year) => {
+    actions.jump(year, viewModel.currentMonth);
+    onMonthChange?.(year, viewModel.currentMonth);
+  };
+  const closePopup = () => {
+    engine.clearSelection();
+  };
+  const monthOptions = viewModel.months.map((month, index) => ({
+    label: month,
+    value: index
+  }));
+  const yearOptions = viewModel.years.map((year) => ({
+    label: year.toString(),
+    value: year
+  }));
+  return /* @__PURE__ */ jsxs4(ScrollView2, { style: [calendarStyles.container, containerStyle], children: [
+    title && /* @__PURE__ */ jsx4(View2, { style: calendarStyles.titleContainer, children: /* @__PURE__ */ jsx4(Text2, { style: calendarStyles.title, children: title }) }),
+    /* @__PURE__ */ jsx4(View2, { style: [calendarStyles.contentContainer, style], children: /* @__PURE__ */ jsxs4(View2, { style: calendarStyles.card, children: [
+      /* @__PURE__ */ jsx4(View2, { style: [calendarStyles.cardHeader, headerStyle], children: /* @__PURE__ */ jsx4(Text2, { style: [calendarStyles.cardHeaderText, headerTextStyle], children: viewModel.monthAndYearText }) }),
+      /* @__PURE__ */ jsxs4(View2, { style: calendarStyles.table, children: [
+        /* @__PURE__ */ jsx4(View2, { style: calendarStyles.tableHeader, children: viewModel.days.map((day) => /* @__PURE__ */ jsx4(View2, { style: calendarStyles.tableHeaderCell, children: /* @__PURE__ */ jsx4(Text2, { style: calendarStyles.tableHeaderText, children: day.slice(0, 3) }) }, day)) }),
+        viewModel.calendarDates.map((week, weekIndex) => /* @__PURE__ */ jsx4(View2, { style: calendarStyles.tableRow, children: week.map((calendarDate, dayIndex) => {
+          const cellClasses = getCellClasses(calendarDate);
+          const isToday2 = cellClasses.includes(
+            "schedule--current--exam"
+          );
+          const hasEvents2 = cellClasses.includes("has--event");
+          return /* @__PURE__ */ jsx4(
+            TouchableOpacity2,
+            {
+              style: [
+                calendarStyles.tableCell,
+                cellStyle,
+                isToday2 && calendarStyles.cellToday,
+                hasEvents2 && calendarStyles.cellWithEvents
+              ],
+              onPress: () => {
+                if (calendarDate) {
+                  handleDatePress(calendarDate.date, dayIndex);
+                }
+              },
+              disabled: !calendarDate,
+              children: calendarDate && /* @__PURE__ */ jsxs4(Fragment, { children: [
+                /* @__PURE__ */ jsx4(
+                  Text2,
+                  {
+                    style: [
+                      calendarStyles.tableCellText,
+                      cellTextStyle,
+                      isToday2 && calendarStyles.cellTodayText
+                    ],
+                    children: calendarDate.date.getDate()
+                  }
+                ),
+                hasEvents2 && /* @__PURE__ */ jsx4(View2, { style: calendarStyles.eventIndicator })
+              ] })
+            },
+            `${weekIndex}-${dayIndex}`
+          );
+        }) }, weekIndex))
+      ] }),
+      /* @__PURE__ */ jsxs4(View2, { style: calendarStyles.navigationContainer, children: [
+        /* @__PURE__ */ jsx4(
+          TouchableOpacity2,
+          {
+            style: calendarStyles.navigationButton,
+            onPress: handlePrevious,
+            children: /* @__PURE__ */ jsx4(Text2, { style: calendarStyles.navigationButtonText, children: "Previous" })
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          TouchableOpacity2,
+          {
+            style: calendarStyles.navigationButton,
+            onPress: handleNext,
+            children: /* @__PURE__ */ jsx4(Text2, { style: calendarStyles.navigationButtonText, children: "Next" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs4(View2, { style: calendarStyles.jumpForm, children: [
+        /* @__PURE__ */ jsx4(Text2, { style: calendarStyles.jumpLabel, children: "Jump To:" }),
+        /* @__PURE__ */ jsx4(
+          Select,
+          {
+            options: monthOptions,
+            selectedValue: viewModel.currentMonth,
+            onValueChange: handleMonthChange
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          Select,
+          {
+            options: yearOptions,
+            selectedValue: viewModel.currentYear,
+            onValueChange: handleYearChange
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx4(
+      DatePopup2,
+      {
+        visible: !!selectedDate,
+        selectedDate,
+        events: tasks,
+        scheduleDay: viewModel.scheduleDay,
+        onClose: closePopup,
+        renderEvent,
+        renderNoEvents,
+        showCloseButton
+      }
+    )
+  ] });
+};
+
+// src/vanilla/index.ts
+var vanilla_exports = {};
+__export(vanilla_exports, {
+  CalendarEngine: () => CalendarEngine,
+  DAYS: () => DAYS,
+  MONTHS: () => MONTHS,
+  VanillaCalendar: () => VanillaCalendar,
+  createCalendar: () => createCalendar,
+  formatDateForDisplay: () => formatDateForDisplay,
+  generateCalendarDates: () => generateCalendarDates,
+  generateYears: () => generateYears,
+  getCellClasses: () => getCellClasses,
+  getEventsForDate: () => getEventsForDate,
+  getMonthYearText: () => getMonthYearText,
+  getPopupPositionClass: () => getPopupPositionClass,
+  hasEvents: () => hasEvents,
+  isSameDay: () => isSameDay,
+  isToday: () => isToday,
+  normalizeDate: () => normalizeDate
+});
+
+// src/vanilla/Calendar.ts
+var VanillaCalendar = class {
+  constructor(props) {
+    this.unsubscribe = null;
+    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.init();
+  }
+  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) => `<li class="event--item">${event.name}</li>`;
+    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 html = `
+      ${this.props.title ? `
+        <div class="page--title">
+          <h1>${this.props.title}</h1>
+        </div>
+      ` : ""}
+      
+      <div class="calendar--content">
+        <div class="calendar--card">
+          <h3 class="calendar--card--header">${viewModel.monthAndYearText}</h3>
+          
+          <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, weekIndex) => `
+                <tr>
+                  ${week.map((calendarDate, dayIndex) => {
+        const classes = getCellClasses(calendarDate);
+        const dateString = calendarDate ? calendarDate.date.toISOString() : "";
+        return `
+                      <td 
+                        class="${classes.join(" ")}" 
+                        data-date="${dateString}"
+                        data-day-index="${dayIndex}"
+                        ${calendarDate ? 'data-clickable="true"' : ""}
+                      >
+                        ${calendarDate?.date.getDate() || ""}
+                      </td>
+                    `;
+      }).join("")}
+                </tr>
+              `
+    ).join("")}
+            </tbody>
+          </table>
+
+          ${viewModel.selectedDate ? `
+            <div class="date-popup ${viewModel.popupPositionClass}">
+              <button type="button" class="popup-close" data-action="close-popup" aria-label="Close">\u2715</button>
+              <div class="schedule--wrapper">
+                <div class="schedule--block">
+                  <h2 class="schedule--day">${viewModel.scheduleDay}</h2>
+                </div>
+                ${viewModel.tasks.length > 0 ? `
+                  <div class="event--wrapper">
+                    <ul>
+                      ${viewModel.tasks.map((event) => renderEvent(event)).join("")}
+                    </ul>
+                  </div>
+                ` : renderNoEvents()}
+              </div>
+            </div>
+          ` : ""}
+
+          <div class="calendar--navigation--buttons">
+            <button class="calendar--navigation--btn" data-action="previous">
+              Previous
+            </button>
+            <button class="calendar--navigation--btn" data-action="next">
+              Next
+            </button>
+          </div>
+
+          <form class="calendar--form--jump">
+            <div class="calendar--lead">Jump To:</div>
+            <div>
+              <label class="calendar--form--jump--item">
+                <select data-month-select>
+                  ${viewModel.months.map(
+      (month, index) => `
+                    <option value="${index}" ${index === viewModel.currentMonth ? "selected" : ""}>
+                      ${month}
+                    </option>
+                  `
+    ).join("")}
+                </select>
+              </label>
+            </div>
+            <div>
+              <label class="calendar--form--jump--item">
+                <select data-year-select>
+                  ${viewModel.years.map(
+      (year) => `
+                    <option value="${year}" ${year === viewModel.currentYear ? "selected" : ""}>
+                      ${year}
+                    </option>
+                  `
+    ).join("")}
+                </select>
+              </label>
+            </div>
+          </form>
+        </div>
+      </div>
+    `;
+    this.container.innerHTML = html;
+    this.attachEventListeners();
+  }
+  attachEventListeners() {
+    const tableBody = this.container.querySelector("[data-calendar-body]");
+    if (tableBody) {
+      tableBody.addEventListener("click", (e) => {
+        const target = e.target;
+        const cell = target.closest('td[data-clickable="true"]');
+        if (cell && cell.dataset.date) {
+          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 }
+            })
+          );
+        }
+      });
+    }
+    const prevBtn = this.container.querySelector('[data-action="previous"]');
+    const nextBtn = this.container.querySelector('[data-action="next"]');
+    if (prevBtn) {
+      prevBtn.addEventListener("click", () => {
+        this.actions.previous();
+        this.container.dispatchEvent(
+          new CustomEvent("monthChange", {
+            detail: {
+              year: this.engine.getViewModel().currentYear,
+              month: this.engine.getViewModel().currentMonth
+            }
+          })
+        );
+      });
+    }
+    if (nextBtn) {
+      nextBtn.addEventListener("click", () => {
+        this.actions.next();
+        this.container.dispatchEvent(
+          new CustomEvent("monthChange", {
+            detail: {
+              year: this.engine.getViewModel().currentYear,
+              month: this.engine.getViewModel().currentMonth
+            }
+          })
+        );
+      });
+    }
+    const monthSelect = this.container.querySelector(
+      "[data-month-select]"
+    );
+    const yearSelect = this.container.querySelector(
+      "[data-year-select]"
+    );
+    if (monthSelect) {
+      monthSelect.addEventListener("change", (e) => {
+        const target = e.target;
+        const month = parseInt(target.value);
+        const year = this.engine.getViewModel().currentYear;
+        this.actions.jump(year, month);
+        this.container.dispatchEvent(
+          new CustomEvent("monthChange", {
+            detail: { year, month }
+          })
+        );
+      });
+    }
+    if (yearSelect) {
+      yearSelect.addEventListener("change", (e) => {
+        const target = e.target;
+        const year = parseInt(target.value);
+        const month = this.engine.getViewModel().currentMonth;
+        this.actions.jump(year, month);
+        this.container.dispatchEvent(
+          new CustomEvent("monthChange", {
+            detail: { year, month }
+          })
+        );
+      });
+    }
+    const closeBtn = this.container.querySelector(
+      '[data-action="close-popup"]'
+    );
+    if (closeBtn) {
+      closeBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.engine.clearSelection();
+      });
+    }
+    document.addEventListener("click", (e) => {
+      const target = e.target;
+      const popup = this.container.querySelector(".date-popup");
+      if (popup && !popup.contains(target) && !target.closest("[data-calendar-body]")) {
+        this.engine.clearSelection();
+      }
+    });
+  }
+  // Public API methods
+  updateEvents(events) {
+    this.engine.updateEvents(events);
+  }
+  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;
+    }
+    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);
+}
+
+// src/index.ts
+var version = "1.0.0";
+var name = "kalendly";
+export {
+  CalendarEngine,
+  DAYS,
+  MONTHS,
+  react_exports as React,
+  Calendar as ReactCalendar,
+  react_native_exports as ReactNative,
+  Calendar2 as ReactNativeCalendar,
+  vanilla_exports as Vanilla,
+  createCalendar as createVanillaCalendar,
+  formatDateForDisplay,
+  generateCalendarDates,
+  generateYears,
+  getCellClasses,
+  getEventsForDate,
+  getMonthYearText,
+  getPopupPositionClass,
+  hasEvents,
+  isSameDay,
+  isToday,
+  name,
+  normalizeDate,
+  version
+};
+//# sourceMappingURL=index.mjs.map