silver-ui 0.1.0

package/dist/chunk-DJW7T3WJ.js

@@ -0,0 +1,2019 @@
+import { DropdownMenu, DropdownMenuItem } from './chunk-YRXGCYT2.js';
+import { ButtonGroup } from './chunk-T55MB2CA.js';
+import { plainDateToInstant, plainDateFromInstant, plainDateIsEqual, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, plainDateSetStartOfWeek, DATE_FORMAT_MONTH_YEAR, plainDateIsBefore, plainDateIsAfter, plainDateDayOfWeek } from './chunk-QSEDH7T2.js';
+import { getBrowserTimezoneID, nowEpochMilliseconds } from './chunk-OX4ZMUF4.js';
+import { Button } from './chunk-VLIQPSPM.js';
+import { Spinner } from './chunk-RGPL6EDK.js';
+import { Heading, Text } from './chunk-PZO5MZ46.js';
+import { Tooltip } from './chunk-EB5EHX6I.js';
+import { cx as cx$1 } from './chunk-OKKL652L.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { Temporal } from '@js-temporal/polyfill';
+import { createContext, use, useMemo, useState, useCallback, Suspense, useSyncExternalStore } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { ChevronLeft, ChevronRight, Check } from 'lucide-react';
+
+var DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
+function createEventFromISO({
+  category,
+  end,
+  id,
+  start,
+  title
+}) {
+  if (DATE_ONLY_RE.test(start) && DATE_ONLY_RE.test(end)) {
+    return {
+      category,
+      end: Temporal.PlainDate.from(end),
+      id,
+      start: Temporal.PlainDate.from(start),
+      title
+    };
+  }
+  return {
+    category,
+    end: Temporal.Instant.from(end).epochMilliseconds,
+    id,
+    start: Temporal.Instant.from(start).epochMilliseconds,
+    title
+  };
+}
+var ScheduleContext = createContext(null);
+ScheduleContext.displayName = "ScheduleContext";
+function useScheduleContext() {
+  const context = use(ScheduleContext);
+  if (context == null) {
+    throw new Error("Schedule views must be rendered inside Schedule.");
+  }
+  return context;
+}
+
+// src/components/Schedule/dateMath.ts
+function isDayEvent(event) {
+  return typeof event.start !== "number";
+}
+function getScheduleRangeFromDates({
+  endDate,
+  startDate,
+  timezoneID
+}) {
+  return {
+    end: plainDateToInstant(endDate, timezoneID),
+    endDate,
+    start: plainDateToInstant(startDate, timezoneID),
+    startDate
+  };
+}
+function enumerateDates(start, endExclusive) {
+  const dates = [];
+  let current = start;
+  while (plainDateIsBefore(current, endExclusive)) {
+    dates.push(current);
+    current = current.add({ days: 1 });
+  }
+  return dates;
+}
+function eventOverlapsRange(event, range, timezoneID) {
+  if (isDayEvent(event)) {
+    const eventStart = plainDateToInstant(event.start, timezoneID);
+    const eventEnd = plainDateToInstant(event.end.add({ days: 1 }), timezoneID);
+    return eventStart < range.end && eventEnd > range.start;
+  }
+  return event.start < range.end && event.end > range.start;
+}
+function eventOccursOnDate(event, date, timezoneID) {
+  if (isDayEvent(event)) {
+    return !plainDateIsAfter(event.start, date) && !plainDateIsBefore(event.end, date);
+  }
+  const startDate = plainDateFromInstant(event.start, timezoneID);
+  const endDate = plainDateFromInstant(
+    Math.max(event.end - 1, event.start),
+    timezoneID
+  );
+  return !plainDateIsAfter(startDate, date) && !plainDateIsBefore(endDate, date);
+}
+function sortEvents(events, timezoneID) {
+  return [...events].sort((a, b) => {
+    const aStart = getEventSortStart(a, timezoneID);
+    const bStart = getEventSortStart(b, timezoneID);
+    return aStart < bStart ? -1 : aStart > bStart ? 1 : a.title.localeCompare(b.title);
+  });
+}
+function getEventSortStart(event, timezoneID) {
+  return isDayEvent(event) ? plainDateToInstant(event.start, timezoneID) : event.start;
+}
+var styles = {
+  root: css({
+    color: "fg",
+    fontFamily: "body",
+    w: "full"
+  }),
+  frame: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "3",
+    w: "full"
+  }),
+  header: css({
+    display: "grid",
+    gridTemplateColumns: "1fr auto 1fr",
+    alignItems: "center",
+    gap: "3"
+  }),
+  headerSlotStart: css({
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    gap: "2"
+  }),
+  headerSlotCenter: css({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "2",
+    textAlign: "center"
+  }),
+  headerSlotEnd: css({
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: "2"
+  }),
+  headerTitleContent: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "2"
+  }),
+  surface: css({
+    borderWidth: "default",
+    borderStyle: "solid",
+    borderColor: "border",
+    borderRadius: "md",
+    overflow: "hidden",
+    bg: "bg"
+  }),
+  event: css({
+    display: "inline-flex",
+    alignItems: "baseline",
+    gap: "1",
+    maxW: "full",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    borderWidth: "default",
+    borderStyle: "solid",
+    borderColor: "var(--schedule-event-border)",
+    borderRadius: "sm",
+    px: "1",
+    py: "0.5",
+    fontSize: "xs",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    bg: "var(--schedule-event-bg)",
+    color: "var(--schedule-event-fg)",
+    _hover: {
+      bg: "var(--schedule-event-bg-hover)"
+    }
+  }),
+  eventPast: css({
+    "--schedule-event-bg": "color-mix(in srgb, var(--schedule-event-dot) 10%, token(colors.bg))",
+    "--schedule-event-bg-hover": "color-mix(in srgb, var(--schedule-event-dot) 14%, token(colors.bg))",
+    "--schedule-event-border": "color-mix(in srgb, var(--schedule-event-dot) 48%, token(colors.border))",
+    "--schedule-event-fg": "color-mix(in srgb, var(--schedule-event-fg-base) 52%, token(colors.fg.muted))"
+  }),
+  eventDot: css({
+    display: "inline-block",
+    w: "2",
+    h: "2",
+    borderRadius: "full",
+    bg: "var(--schedule-event-dot)",
+    flexShrink: 0
+  }),
+  eventTime: css({
+    flexShrink: 0,
+    fontWeight: "normal"
+  }),
+  eventTitle: css({
+    fontWeight: "bold",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  })
+};
+var categoryFallback = { label: "Event", color: "blue" };
+var colorStyles = {
+  blue: css({
+    "--schedule-event-bg": "token(colors.surface.blue)",
+    "--schedule-event-bg-hover": "token(colors.surface.blue.hover)",
+    "--schedule-event-border": "token(colors.surface.blue.accent)",
+    "--schedule-event-fg": "token(colors.surface.blue.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.blue.fg)",
+    "--schedule-event-dot": "token(colors.surface.blue.accent)"
+  }),
+  cyan: css({
+    "--schedule-event-bg": "token(colors.surface.cyan)",
+    "--schedule-event-bg-hover": "token(colors.surface.cyan.hover)",
+    "--schedule-event-border": "token(colors.surface.cyan.accent)",
+    "--schedule-event-fg": "token(colors.surface.cyan.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.cyan.fg)",
+    "--schedule-event-dot": "token(colors.surface.cyan.accent)"
+  }),
+  gray: css({
+    "--schedule-event-bg": "token(colors.surface.gray)",
+    "--schedule-event-bg-hover": "token(colors.surface.gray.hover)",
+    "--schedule-event-border": "token(colors.surface.gray.accent)",
+    "--schedule-event-fg": "token(colors.surface.gray.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.gray.fg)",
+    "--schedule-event-dot": "token(colors.surface.gray.accent)"
+  }),
+  green: css({
+    "--schedule-event-bg": "token(colors.surface.green)",
+    "--schedule-event-bg-hover": "token(colors.surface.green.hover)",
+    "--schedule-event-border": "token(colors.surface.green.accent)",
+    "--schedule-event-fg": "token(colors.surface.green.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.green.fg)",
+    "--schedule-event-dot": "token(colors.surface.green.accent)"
+  }),
+  orange: css({
+    "--schedule-event-bg": "token(colors.surface.orange)",
+    "--schedule-event-bg-hover": "token(colors.surface.orange.hover)",
+    "--schedule-event-border": "token(colors.surface.orange.accent)",
+    "--schedule-event-fg": "token(colors.surface.orange.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.orange.fg)",
+    "--schedule-event-dot": "token(colors.surface.orange.accent)"
+  }),
+  pink: css({
+    "--schedule-event-bg": "token(colors.surface.pink)",
+    "--schedule-event-bg-hover": "token(colors.surface.pink.hover)",
+    "--schedule-event-border": "token(colors.surface.pink.accent)",
+    "--schedule-event-fg": "token(colors.surface.pink.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.pink.fg)",
+    "--schedule-event-dot": "token(colors.surface.pink.accent)"
+  }),
+  purple: css({
+    "--schedule-event-bg": "token(colors.surface.purple)",
+    "--schedule-event-bg-hover": "token(colors.surface.purple.hover)",
+    "--schedule-event-border": "token(colors.surface.purple.accent)",
+    "--schedule-event-fg": "token(colors.surface.purple.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.purple.fg)",
+    "--schedule-event-dot": "token(colors.surface.purple.accent)"
+  }),
+  red: css({
+    "--schedule-event-bg": "token(colors.surface.red)",
+    "--schedule-event-bg-hover": "token(colors.surface.red.hover)",
+    "--schedule-event-border": "token(colors.surface.red.accent)",
+    "--schedule-event-fg": "token(colors.surface.red.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.red.fg)",
+    "--schedule-event-dot": "token(colors.surface.red.accent)"
+  }),
+  teal: css({
+    "--schedule-event-bg": "token(colors.surface.teal)",
+    "--schedule-event-bg-hover": "token(colors.surface.teal.hover)",
+    "--schedule-event-border": "token(colors.surface.teal.accent)",
+    "--schedule-event-fg": "token(colors.surface.teal.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.teal.fg)",
+    "--schedule-event-dot": "token(colors.surface.teal.accent)"
+  }),
+  yellow: css({
+    "--schedule-event-bg": "token(colors.surface.yellow)",
+    "--schedule-event-bg-hover": "token(colors.surface.yellow.hover)",
+    "--schedule-event-border": "token(colors.surface.yellow.accent)",
+    "--schedule-event-fg": "token(colors.surface.yellow.fg)",
+    "--schedule-event-fg-base": "token(colors.surface.yellow.fg)",
+    "--schedule-event-dot": "token(colors.surface.yellow.accent)"
+  })
+};
+function getCategory(categories, event) {
+  return categories.find((category) => category.label === event.category) ?? (event.category != null ? { label: event.category, color: categoryFallback.color } : categoryFallback);
+}
+function eventColorClassName(color) {
+  return colorStyles[color ?? categoryFallback.color];
+}
+function formatDate(date) {
+  return plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
+}
+function formatMonthTitle(date) {
+  return plainDateFormat(date, DATE_FORMAT_MONTH_YEAR);
+}
+function formatWeekTitle(start, end) {
+  if (start.year === end.year && start.month === end.month) {
+    return formatMonthTitle(start);
+  }
+  const startMonth = plainDateFormat(start, { month: "long" });
+  const endMonth = plainDateFormat(end, { month: "long" });
+  return start.year === end.year ? `${startMonth} - ${endMonth} ${end.year}` : `${startMonth} ${start.year} - ${endMonth} ${end.year}`;
+}
+function formatListRangeTitle(start, end) {
+  return plainDateIsEqual(start, end) ? formatDate(start) : formatWeekTitle(start, end);
+}
+function formatTime(instant, timezoneID) {
+  return Temporal.Instant.fromEpochMilliseconds(instant).toZonedDateTimeISO(timezoneID).toLocaleString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function formatTimezoneAbbreviation(date, timezoneID) {
+  const formatter = new Intl.DateTimeFormat(void 0, {
+    timeZone: timezoneID,
+    timeZoneName: "short"
+  });
+  const parts = formatter.formatToParts(
+    date.toZonedDateTime(timezoneID).epochMilliseconds
+  );
+  return parts.find((part) => part.type === "timeZoneName")?.value ?? timezoneID;
+}
+function formatHour(hour, _timezoneID) {
+  return Temporal.PlainTime.from({ hour }).toLocaleString(void 0, {
+    hour: "numeric"
+  });
+}
+function getEventTimeLabel(event, timezoneID) {
+  if (isDayEvent(event)) {
+    return "all day";
+  }
+  return `${formatTime(event.start, timezoneID)} - ${formatTime(event.end, timezoneID)}`;
+}
+function getEventStartTimeLabel(event, timezoneID) {
+  return isDayEvent(event) ? null : formatTime(event.start, timezoneID);
+}
+function getEventAccessibleLabel(event, categories, timezoneID) {
+  const category = getCategory(categories, event);
+  return `${event.title}, ${category.label}, ${getEventTimeLabel(event, timezoneID)}`;
+}
+function getMinutesSinceStartOfDay(instant, timezoneID) {
+  const zonedTime = Temporal.Instant.fromEpochMilliseconds(instant).toZonedDateTimeISO(timezoneID).toPlainTime();
+  return zonedTime.hour * 60 + zonedTime.minute;
+}
+function isEventInPast(event, currentTime2, timezoneID) {
+  if (isDayEvent(event)) {
+    return plainDateIsBefore(
+      event.end,
+      plainDateFromInstant(currentTime2, timezoneID)
+    );
+  }
+  return event.end <= currentTime2;
+}
+function CalendarEventPill({
+  event,
+  isPast = false
+}) {
+  const { categories, timezoneID } = useScheduleContext();
+  const category = getCategory(categories, event);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx$1(
+        styles.event,
+        eventColorClassName(category.color),
+        isPast && styles.eventPast
+      ),
+      "data-state": isPast ? "past" : void 0,
+      "data-testid": `schedule-event-${event.id}`,
+      children: /* @__PURE__ */ jsx("span", { className: styles.eventTitle, children: isDayEvent(event) ? event.title : getEventAccessibleLabel(event, categories, timezoneID) })
+    }
+  );
+}
+function CalendarMonthEventPill({
+  event,
+  isPast = false
+}) {
+  const { categories, timezoneID } = useScheduleContext();
+  const category = getCategory(categories, event);
+  const startTimeLabel = getEventStartTimeLabel(event, timezoneID);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx$1(
+        styles.event,
+        css({ w: "full" }),
+        eventColorClassName(category.color),
+        isPast && styles.eventPast
+      ),
+      "data-state": isPast ? "past" : void 0,
+      "data-testid": `schedule-event-${event.id}`,
+      children: [
+        startTimeLabel != null ? /* @__PURE__ */ jsx("span", { className: styles.eventTime, children: startTimeLabel }) : null,
+        /* @__PURE__ */ jsx("span", { className: styles.eventTitle, children: event.title })
+      ]
+    }
+  );
+}
+function ScheduleFrame({
+  children,
+  title,
+  titleLabel
+}) {
+  const { isLoading, plugins } = useScheduleContext();
+  const initialHeader = {
+    startContent: null,
+    centerContent: /* @__PURE__ */ jsxs("span", { className: styles.headerTitleContent, children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, children: title }),
+      isLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading events", size: "sm" }) : null
+    ] }),
+    endContent: null
+  };
+  const header = plugins.reduce(
+    (content, plugin) => plugin.renderHeader?.(
+      content.startContent,
+      content.centerContent,
+      content.endContent
+    ) ?? content,
+    initialHeader
+  );
+  return /* @__PURE__ */ jsxs("section", { "aria-label": titleLabel, className: styles.frame, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.headerSlotStart, children: header.startContent }),
+      /* @__PURE__ */ jsx("div", { className: styles.headerSlotCenter, children: header.centerContent }),
+      /* @__PURE__ */ jsx("div", { className: styles.headerSlotEnd, children: header.endContent })
+    ] }),
+    children
+  ] });
+}
+var UPDATE_INTERVAL_MS = 60 * 1e3;
+var listeners = /* @__PURE__ */ new Set();
+var interval = null;
+var currentTime = getCurrentTime();
+function getCurrentTime() {
+  return Temporal.Now.instant().epochMilliseconds;
+}
+function getSnapshot() {
+  return currentTime;
+}
+function getServerSnapshot() {
+  return 0;
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  currentTime = getCurrentTime();
+  listener();
+  interval ?? (interval = setInterval(() => {
+    currentTime = getCurrentTime();
+    listeners.forEach((activeListener) => activeListener());
+  }, UPDATE_INTERVAL_MS));
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && interval != null) {
+      clearInterval(interval);
+      interval = null;
+    }
+  };
+}
+function useCurrentTime() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+var styles2 = {
+  grid: css({
+    display: "grid",
+    gridTemplateColumns: "72px 1fr",
+    overflow: "auto"
+  }),
+  header: css({
+    display: "grid",
+    gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))",
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  corner: css({
+    borderInlineEndWidth: "default",
+    borderInlineEndStyle: "solid",
+    borderInlineEndColor: "border",
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  dayHeader: css({
+    p: "2",
+    textAlign: "center",
+    borderInlineEndWidth: "default",
+    borderInlineEndStyle: "solid",
+    borderInlineEndColor: "border"
+  }),
+  lastColumn: css({
+    borderInlineEndWidth: 0
+  }),
+  dayHeaderContent: css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "1"
+  }),
+  dayHeaderDayNumber: css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minW: "30px",
+    h: "30px",
+    lineHeight: "30px",
+    borderRadius: "full"
+  }),
+  dayHeaderCurrent: css({
+    bg: "primary",
+    color: "fg.onPrimary"
+  }),
+  allDayLabel: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    py: "1",
+    px: "2",
+    borderInlineEndWidth: "default",
+    borderInlineEndStyle: "solid",
+    borderInlineEndColor: "border",
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  allDayRow: css({
+    display: "grid",
+    gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))",
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  dayCell: css({
+    minH: 0,
+    p: "0.5",
+    borderInlineEndWidth: "default",
+    borderInlineEndStyle: "solid",
+    borderInlineEndColor: "border"
+  }),
+  timeLabel: css({
+    p: "2",
+    color: "fg.muted",
+    textAlign: "end",
+    borderInlineEndWidth: "default",
+    borderInlineEndStyle: "solid",
+    borderInlineEndColor: "border",
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  timeRow: css({
+    display: "grid",
+    gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))"
+  }),
+  hourCell: css({
+    position: "relative",
+    minH: "14",
+    p: "1",
+    borderInlineEndWidth: "default",
+    borderInlineEndStyle: "solid",
+    borderInlineEndColor: "border",
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  lastRow: css({
+    borderBlockEndWidth: 0
+  }),
+  timedEvent: css({
+    position: "absolute",
+    display: "flex",
+    flexDirection: "column",
+    gap: 0,
+    minH: "9",
+    minW: 0,
+    overflow: "hidden",
+    borderWidth: "default",
+    borderStyle: "solid",
+    borderColor: "var(--schedule-event-border)",
+    borderRadius: "sm",
+    px: "1",
+    py: "0.5",
+    fontSize: "xs",
+    lineHeight: "tight",
+    bg: "var(--schedule-event-bg)",
+    color: "var(--schedule-event-fg)",
+    _hover: {
+      bg: "var(--schedule-event-bg-hover)"
+    }
+  }),
+  timedEventTitle: css({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontWeight: "bold"
+  }),
+  timedEventTime: css({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flexShrink: 0,
+    fontWeight: "normal"
+  }),
+  events: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "1"
+  }),
+  currentTimeLine: css({
+    position: "absolute",
+    insetInline: "0",
+    borderBlockStartWidth: "2px",
+    borderBlockStartStyle: "solid",
+    borderBlockStartColor: "surface.orange.accent",
+    transform: "translateY(2px)",
+    zIndex: "20",
+    pointerEvents: "none",
+    _before: {
+      content: '""',
+      position: "absolute",
+      insetInlineStart: "-6px",
+      top: "-6px",
+      w: "2.5",
+      h: "2.5",
+      borderRadius: "full",
+      bg: "surface.orange.accent"
+    }
+  }),
+  rowContents: css({
+    display: "contents"
+  })
+};
+function eventOverlapsHour(event, day, hour, timezoneID) {
+  if (isDayEvent(event)) {
+    return false;
+  }
+  if (!eventOccursOnDate(event, day, timezoneID)) {
+    return false;
+  }
+  const hourStart = day.toPlainDateTime(Temporal.PlainTime.from({ hour })).toZonedDateTime(timezoneID).epochMilliseconds;
+  const hourEnd = hour === 23 ? day.add({ days: 1 }).toZonedDateTime(timezoneID).epochMilliseconds : day.toPlainDateTime(Temporal.PlainTime.from({ hour: hour + 1 })).toZonedDateTime(timezoneID).epochMilliseconds;
+  return event.start < hourEnd && event.end > hourStart;
+}
+function eventSpansPastDay(event, day, timezoneID) {
+  return !plainDateIsEqual(
+    plainDateFromInstant(Math.max(event.end - 1, event.start), timezoneID),
+    day
+  );
+}
+function getAvailableTimedEventLevel(levelEndMinutes, visibleStart) {
+  const level = levelEndMinutes.findIndex(
+    (endMinute) => visibleStart >= endMinute
+  );
+  return level >= 0 ? level : levelEndMinutes.length;
+}
+function getTimedEventLayouts({
+  day,
+  events,
+  hourHeight,
+  maxHour,
+  minHour,
+  timezoneID
+}) {
+  const levelEndMinutes = [];
+  const minMinute = minHour * 60;
+  const maxMinute = maxHour * 60;
+  return events.map((event) => {
+    const startDate = plainDateFromInstant(event.start, timezoneID);
+    const rawStart = plainDateIsBefore(startDate, day) ? 0 : getMinutesSinceStartOfDay(event.start, timezoneID);
+    const rawEnd = eventSpansPastDay(event, day, timezoneID) ? 24 * 60 : getMinutesSinceStartOfDay(event.end, timezoneID);
+    if (rawEnd <= minMinute || rawStart >= maxMinute) {
+      return null;
+    }
+    const visibleStart = Math.max(rawStart, minMinute);
+    const visibleEnd = Math.min(
+      maxMinute,
+      Math.max(visibleStart + 15, rawEnd)
+    );
+    return { event, visibleEnd, visibleStart };
+  }).filter(
+    (layout) => layout != null && layout.visibleEnd > layout.visibleStart
+  ).sort((a, b) => {
+    if (a.visibleStart !== b.visibleStart) {
+      return a.visibleStart - b.visibleStart;
+    }
+    return a.visibleEnd - b.visibleEnd || a.event.title.localeCompare(b.event.title);
+  }).map(({ event, visibleEnd, visibleStart }) => {
+    const level = getAvailableTimedEventLevel(levelEndMinutes, visibleStart);
+    levelEndMinutes[level] = visibleEnd;
+    const startHour = Math.floor(visibleStart / 60);
+    return {
+      event,
+      height: (visibleEnd - visibleStart) / 60 * hourHeight,
+      level,
+      startHour,
+      top: (visibleStart - startHour * 60) / 60 * hourHeight
+    };
+  });
+}
+function getTimedEventStyle({
+  height,
+  level,
+  top
+}) {
+  return {
+    height: `${Math.max(36, height - 5)}px`,
+    insetInlineEnd: "2px",
+    insetInlineStart: level === 0 ? "2px" : `calc(2px + ${level * 8}%)`,
+    top: `${top + 2}px`,
+    zIndex: level + 1
+  };
+}
+function getCellName({
+  categories,
+  date,
+  events,
+  hourLabel,
+  timezoneID
+}) {
+  const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
+  const eventLabels = events.map(
+    (event) => getEventAccessibleLabel(event, categories, timezoneID)
+  );
+  return eventLabels.length > 0 ? `${dateLabel} ${hourLabel}. ${eventLabels.join(". ")}` : `${dateLabel} ${hourLabel}`;
+}
+function TimeGridView({
+  days,
+  hourHeight = 100,
+  maxHour = 24,
+  minHour = 0
+}) {
+  const { categories, events, highlightDate, timezoneID } = useScheduleContext();
+  const normalizedMinHour = Math.max(0, Math.min(23, Math.floor(minHour)));
+  const normalizedMaxHour = Math.max(
+    normalizedMinHour + 1,
+    Math.min(24, Math.floor(maxHour))
+  );
+  const hours = Array.from(
+    { length: normalizedMaxHour - normalizedMinHour },
+    (_, index) => normalizedMinHour + index
+  );
+  const currentTime2 = useCurrentTime();
+  const highlightPlainDate = highlightDate.toPlainDate();
+  const timezoneLabel = formatTimezoneAbbreviation(
+    days[0] ?? highlightPlainDate,
+    timezoneID
+  );
+  const gridStyle = {
+    "--schedule-day-count": String(days.length)
+  };
+  const normalizedHourHeight = Math.max(1, Math.floor(hourHeight));
+  const hourStyle = {
+    height: normalizedHourHeight,
+    minHeight: normalizedHourHeight
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Schedule time grid",
+      "aria-readonly": "true",
+      className: cx$1(styles.surface, styles2.grid),
+      role: "grid",
+      style: gridStyle,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles2.rowContents, role: "row", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-colindex": 1,
+              "aria-label": "Time",
+              className: styles2.corner,
+              role: "columnheader"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles2.header, children: days.map((day, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-colindex": index + 2,
+              "aria-current": plainDateIsEqual(day, highlightPlainDate) ? "date" : void 0,
+              "aria-label": plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY),
+              className: cx$1(
+                styles2.dayHeader,
+                index === days.length - 1 && styles2.lastColumn
+              ),
+              role: "columnheader",
+              children: /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  "aria-hidden": "true",
+                  color: "secondary",
+                  level: 4,
+                  textWrap: "nowrap",
+                  children: /* @__PURE__ */ jsxs("span", { className: styles2.dayHeaderContent, children: [
+                    plainDateFormat(day, { weekday: "short" }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cx$1(
+                          styles2.dayHeaderDayNumber,
+                          plainDateIsEqual(day, highlightPlainDate) && styles2.dayHeaderCurrent
+                        ),
+                        children: day.day
+                      }
+                    )
+                  ] })
+                }
+              )
+            },
+            day.toString()
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles2.rowContents, role: "row", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-colindex": 1,
+              "aria-label": `${timezoneLabel} all day`,
+              className: styles2.allDayLabel,
+              role: "rowheader",
+              children: /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", weight: "bold", children: timezoneLabel })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles2.allDayRow, children: days.map((day, index) => {
+            const dayEvents = events.filter(
+              (event) => isDayEvent(event) && eventOccursOnDate(event, day, timezoneID)
+            );
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-colindex": index + 2,
+                "aria-label": getCellName({
+                  categories,
+                  date: day,
+                  events: dayEvents,
+                  hourLabel: "all day",
+                  timezoneID
+                }),
+                className: cx$1(
+                  styles2.dayCell,
+                  index === days.length - 1 && styles2.lastColumn
+                ),
+                role: "gridcell",
+                children: /* @__PURE__ */ jsx("div", { className: styles2.events, children: dayEvents.map((event) => /* @__PURE__ */ jsx(
+                  CalendarEventPill,
+                  {
+                    event,
+                    isPast: isEventInPast(event, currentTime2, timezoneID)
+                  },
+                  event.id
+                )) })
+              },
+              `${day.toString()}-all-day`
+            );
+          }) })
+        ] }),
+        hours.map((hour) => {
+          const hourLabel = formatHour(hour);
+          const isLastHour = hour === hours[hours.length - 1];
+          return /* @__PURE__ */ jsxs("div", { className: styles2.rowContents, role: "row", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-colindex": 1,
+                className: cx$1(styles2.timeLabel, isLastHour && styles2.lastRow),
+                role: "rowheader",
+                style: hourStyle,
+                children: hourLabel
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles2.timeRow, children: days.map((day, index) => {
+              const hourEvents = events.filter(
+                (event) => eventOverlapsHour(event, day, hour, timezoneID)
+              );
+              const visibleTimedEventLayouts = getTimedEventLayouts({
+                day,
+                events: events.filter(
+                  (event) => !isDayEvent(event) && eventOccursOnDate(event, day, timezoneID)
+                ),
+                hourHeight: normalizedHourHeight,
+                maxHour: normalizedMaxHour,
+                minHour: normalizedMinHour,
+                timezoneID
+              }).filter((layout) => layout.startHour === hour);
+              const currentTimeTop = getCurrentTimeTopForHour({
+                currentTime: currentTime2,
+                day,
+                hour,
+                maxHour: normalizedMaxHour,
+                minHour: normalizedMinHour,
+                timezoneID
+              });
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-colindex": index + 2,
+                  "aria-label": getCellName({
+                    categories,
+                    date: day,
+                    events: hourEvents,
+                    hourLabel,
+                    timezoneID
+                  }),
+                  className: cx$1(
+                    styles2.hourCell,
+                    index === days.length - 1 && styles2.lastColumn,
+                    isLastHour && styles2.lastRow
+                  ),
+                  role: "gridcell",
+                  style: hourStyle,
+                  children: [
+                    currentTimeTop != null ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: styles2.currentTimeLine,
+                        "data-testid": "schedule-current-time-line",
+                        style: { top: `${currentTimeTop}%` }
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx("div", { className: styles2.events, children: visibleTimedEventLayouts.map((layout) => {
+                      const { event } = layout;
+                      const category = getCategory(categories, event);
+                      return /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: cx$1(
+                            styles2.timedEvent,
+                            eventColorClassName(category.color),
+                            isEventInPast(event, currentTime2, timezoneID) && styles.eventPast
+                          ),
+                          "data-state": isEventInPast(event, currentTime2, timezoneID) ? "past" : void 0,
+                          "data-testid": `schedule-event-${event.id}`,
+                          style: getTimedEventStyle(layout),
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: styles2.timedEventTitle, children: event.title }),
+                            /* @__PURE__ */ jsx("span", { className: styles2.timedEventTime, children: getEventTimeLabel(event, timezoneID) })
+                          ]
+                        },
+                        event.id
+                      );
+                    }) })
+                  ]
+                },
+                `${day.toString()}-${hour}`
+              );
+            }) })
+          ] }, hour);
+        })
+      ]
+    }
+  );
+}
+function getCurrentTimeTopForHour({
+  currentTime: currentTime2,
+  day,
+  hour,
+  maxHour,
+  minHour,
+  timezoneID
+}) {
+  if (!plainDateIsEqual(day, plainDateFromInstant(currentTime2, timezoneID))) {
+    return null;
+  }
+  const currentMinute = getMinutesSinceStartOfDay(currentTime2, timezoneID);
+  const minMinute = minHour * 60;
+  const maxMinute = maxHour * 60;
+  if (currentMinute < minMinute || currentMinute > maxMinute) {
+    return null;
+  }
+  if (currentMinute === maxMinute) {
+    return hour === maxHour - 1 ? 100 : null;
+  }
+  if (Math.floor(currentMinute / 60) !== hour) {
+    return null;
+  }
+  return currentMinute % 60 / 60 * 100;
+}
+
+// src/components/Schedule/zonedDateTime.ts
+function createZonedDateTime(date, timezoneID) {
+  return zonedDateTimeFromInstant(date, timezoneID);
+}
+function zonedDateTimeFromInstant(instant, timezoneID) {
+  return {
+    addDays: (days) => {
+      const date = plainDateFromInstant(instant, timezoneID).add({ days });
+      return zonedDateTimeFromInstant(
+        plainDateToInstant(date, timezoneID),
+        timezoneID
+      );
+    },
+    instant,
+    startOfDay: () => {
+      const date = plainDateFromInstant(instant, timezoneID);
+      return zonedDateTimeFromInstant(
+        plainDateToInstant(date, timezoneID),
+        timezoneID
+      );
+    },
+    timezoneID,
+    toPlainDate: () => plainDateFromInstant(instant, timezoneID)
+  };
+}
+function scheduleRangeToZonedDateTimeRange(range, timezoneID) {
+  return [
+    zonedDateTimeFromInstant(range.start, timezoneID),
+    zonedDateTimeFromInstant(range.end, timezoneID)
+  ];
+}
+function ScheduleDayView({
+  options
+}) {
+  const { viewDate } = useScheduleContext();
+  const day = viewDate.toPlainDate();
+  return /* @__PURE__ */ jsx(ScheduleFrame, { title: formatMonthTitle(day), titleLabel: formatDate(day), children: /* @__PURE__ */ jsx(
+    TimeGridView,
+    {
+      days: [day],
+      hourHeight: options.hourHeight,
+      maxHour: options.maxHour,
+      minHour: options.minHour
+    }
+  ) });
+}
+function createScheduleDayView({
+  hourHeight = 100,
+  maxHour = 24,
+  minHour = 0
+} = {}) {
+  return {
+    component: ScheduleDayView,
+    getDateRange: (date) => scheduleRangeToZonedDateTimeRange(
+      getScheduleRangeFromDates({
+        endDate: date.toPlainDate().add({ days: 1 }),
+        startDate: date.toPlainDate(),
+        timezoneID: date.timezoneID
+      }),
+      date.timezoneID
+    ),
+    getNextDateRange: (date) => ({
+      label: "Next day",
+      range: [date.startOfDay().addDays(1), date.startOfDay().addDays(2)]
+    }),
+    getPreviousDateRange: (date) => ({
+      label: "Previous day",
+      range: [date.startOfDay().addDays(-1), date.startOfDay()]
+    }),
+    options: { hourHeight, maxHour, minHour }
+  };
+}
+var styles3 = {
+  list: css({
+    display: "flex",
+    flexDirection: "column"
+  }),
+  day: css({
+    display: "grid",
+    gridTemplateColumns: "112px minmax(0, 1fr)",
+    alignItems: "start",
+    columnGap: "3",
+    p: "3",
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  dayLast: css({
+    borderBlockEndWidth: 0
+  }),
+  dayHeading: css({
+    m: 0,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    gap: "2",
+    color: "fg.muted",
+    fontFamily: "body",
+    fontSize: "lg",
+    fontWeight: "semibold",
+    lineHeight: "tight",
+    whiteSpace: "nowrap"
+  }),
+  dayWeekday: css({
+    display: "inline-block",
+    fontSize: "lg"
+  }),
+  dayNumber: css({
+    display: "inline-flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    w: "30px",
+    h: "30px",
+    borderRadius: "full",
+    fontWeight: "bold"
+  }),
+  dayNumberCurrent: css({
+    bg: "primary",
+    color: "fg.onPrimary"
+  }),
+  events: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "2"
+  }),
+  eventRow: css({
+    display: "grid",
+    gridTemplateColumns: "160px minmax(0, 1fr)",
+    alignItems: "center",
+    gap: "3"
+  }),
+  eventPast: css({
+    opacity: 0.64
+  }),
+  eventContent: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    minW: 0
+  }),
+  eventTime: css({
+    whiteSpace: "nowrap"
+  }),
+  nowRow: css({
+    h: "0.5",
+    bg: "fg.danger",
+    borderRadius: "full"
+  })
+};
+function ListEvent({
+  event,
+  isPast
+}) {
+  const { categories, timezoneID } = useScheduleContext();
+  const category = getCategory(categories, event);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx$1(styles3.eventRow, isPast && styles3.eventPast),
+      "data-state": isPast ? "past" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(Text, { className: styles3.eventTime, color: "secondary", type: "supporting", children: isDayEvent(event) ? "All day" : getEventTimeLabel(event, timezoneID) }),
+        /* @__PURE__ */ jsxs("div", { className: styles3.eventContent, children: [
+          /* @__PURE__ */ jsx(Tooltip, { content: category.label, hasHoverIndication: false, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-label": category.label,
+              className: cx$1(
+                styles.eventDot,
+                eventColorClassName(category.color)
+              ),
+              role: "img"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Text, { children: event.title })
+        ] })
+      ]
+    }
+  );
+}
+function ScheduleListView(_props) {
+  const { events, highlightDate, isLoading, range, timezoneID } = useScheduleContext();
+  const days = enumerateDates(range.startDate, range.endDate);
+  const currentTime2 = useCurrentTime();
+  const currentPlainDate = plainDateFromInstant(currentTime2, timezoneID);
+  const highlightPlainDate = highlightDate.toPlainDate();
+  const endDate = range.endDate.add({ days: -1 });
+  const title = formatListRangeTitle(range.startDate, endDate);
+  const visibleDays = days.map((day) => {
+    const dayEvents = events.filter(
+      (event) => eventOccursOnDate(event, day, timezoneID)
+    );
+    const isCurrentDay = plainDateIsEqual(day, currentPlainDate);
+    const isHighlightedDay = plainDateIsEqual(day, highlightPlainDate);
+    const isBaseDay = plainDateIsEqual(day, range.startDate);
+    return {
+      day,
+      dayEvents,
+      isCurrentDay,
+      isHighlightedDay,
+      isVisible: dayEvents.length > 0 || isCurrentDay || isBaseDay
+    };
+  }).filter((dayRecord) => dayRecord.isVisible);
+  return /* @__PURE__ */ jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsx("div", { className: cx$1(styles.surface, styles3.list), children: visibleDays.map(
+    ({ day, dayEvents, isCurrentDay, isHighlightedDay }, index) => {
+      const fullDate = plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY);
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: cx$1(
+            styles3.day,
+            index === visibleDays.length - 1 && styles3.dayLast
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "h4",
+              {
+                "aria-current": isHighlightedDay ? "date" : void 0,
+                "aria-label": fullDate,
+                className: styles3.dayHeading,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cx$1(
+                        styles3.dayNumber,
+                        isHighlightedDay && styles3.dayNumberCurrent
+                      ),
+                      children: day.day
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: styles3.dayWeekday, children: plainDateFormat(day, { weekday: "short" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles3.events, children: renderListRows({
+              currentTime: currentTime2,
+              events: dayEvents,
+              isShowingCurrentTime: isCurrentDay && !isLoading,
+              timezoneID
+            }) })
+          ]
+        },
+        day.toString()
+      );
+    }
+  ) }) });
+}
+function renderListRows({
+  currentTime: currentTime2,
+  events,
+  isShowingCurrentTime,
+  timezoneID
+}) {
+  const rows = events.map((event) => /* @__PURE__ */ jsx(
+    ListEvent,
+    {
+      event,
+      isPast: isEventInPast(event, currentTime2, timezoneID)
+    },
+    event.id
+  ));
+  if (!isShowingCurrentTime) {
+    return rows;
+  }
+  const marker = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: styles3.nowRow,
+      "data-testid": "schedule-list-current-time"
+    },
+    "current-time"
+  );
+  const insertIndex = events.findIndex(
+    (event) => !isDayEvent(event) && event.start > currentTime2
+  );
+  if (insertIndex < 0) {
+    return [...rows, marker];
+  }
+  return [...rows.slice(0, insertIndex), marker, ...rows.slice(insertIndex)];
+}
+function createScheduleListView({
+  days = 7
+} = {}) {
+  return {
+    component: ScheduleListView,
+    getDateRange: (date) => [
+      date.startOfDay(),
+      date.startOfDay().addDays(days)
+    ],
+    getNextDateRange: (date) => ({
+      label: "Next range",
+      range: [
+        date.startOfDay().addDays(days),
+        date.startOfDay().addDays(days * 2)
+      ]
+    }),
+    getPreviousDateRange: (date) => ({
+      label: "Previous range",
+      range: [date.startOfDay().addDays(-days), date.startOfDay()]
+    }),
+    options: { days }
+  };
+}
+var styles4 = {
+  grid: css({
+    display: "grid",
+    gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+  }),
+  weekday: css({
+    p: "2",
+    textAlign: "center",
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  cell: css({
+    minH: "24",
+    p: "0.5",
+    borderInlineEndWidth: "default",
+    borderInlineEndStyle: "solid",
+    borderInlineEndColor: "border",
+    borderBlockEndWidth: "default",
+    borderBlockEndStyle: "solid",
+    borderBlockEndColor: "border"
+  }),
+  lastColumn: css({
+    borderInlineEndWidth: 0
+  }),
+  lastRow: css({
+    borderBlockEndWidth: 0
+  }),
+  otherMonth: css({
+    bg: "bg.subtle",
+    color: "fg.muted"
+  }),
+  dayNumber: css({
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "6",
+    h: "6",
+    m: "0.5",
+    borderRadius: "full"
+  }),
+  today: css({
+    bg: "primary",
+    color: "fg.onPrimary"
+  }),
+  events: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "1",
+    m: 0,
+    p: 0,
+    listStyleType: "none"
+  }),
+  eventItem: css({
+    display: "flex"
+  }),
+  monthSurface: css({
+    position: "relative",
+    gridColumn: "1 / -1"
+  }),
+  monthCellGrid: css({
+    display: "grid",
+    gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+    gridAutoRows: "128px"
+  }),
+  monthEventOverlay: css({
+    position: "absolute",
+    inset: 0,
+    display: "grid",
+    gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+    gridAutoRows: "128px",
+    pointerEvents: "none"
+  }),
+  monthEventSpan: css({
+    alignSelf: "start",
+    minW: 0,
+    mx: "0.5",
+    pointerEvents: "auto",
+    zIndex: 1
+  })
+};
+var weekdays = [
+  { label: "Sunday", shortLabel: "Sun" },
+  { label: "Monday", shortLabel: "Mon" },
+  { label: "Tuesday", shortLabel: "Tue" },
+  { label: "Wednesday", shortLabel: "Wed" },
+  { label: "Thursday", shortLabel: "Thu" },
+  { label: "Friday", shortLabel: "Fri" },
+  { label: "Saturday", shortLabel: "Sat" }
+];
+function getMonthDays(date, weekCount) {
+  const firstOfMonth = date.with({ day: 1 });
+  const firstVisibleDay = plainDateSetStartOfWeek(firstOfMonth);
+  return Array.from(
+    { length: weekCount * 7 },
+    (_, index) => firstVisibleDay.add({ days: index })
+  );
+}
+function getVisibleMonthRange(date, month, weekCount) {
+  const firstVisible = plainDateSetStartOfWeek(month.with({ day: 1 }));
+  const end = firstVisible.add({ days: weekCount * 7 });
+  const currentDate = date.toPlainDate();
+  return [
+    date.startOfDay().addDays(currentDate.until(firstVisible).days),
+    date.startOfDay().addDays(currentDate.until(end).days)
+  ];
+}
+var MAX_MONTH_EVENT_LEVELS = 4;
+function getEventDateSpan(event, timezoneID) {
+  if (isDayEvent(event)) {
+    return [event.start, event.end];
+  }
+  return [
+    plainDateFromInstant(event.start, timezoneID),
+    plainDateFromInstant(Math.max(event.end - 1, event.start), timezoneID)
+  ];
+}
+function getAvailableLevel(levels, columnStart) {
+  const level = levels.findIndex((columnEnd) => columnStart > columnEnd);
+  return level >= 0 ? level : levels.length;
+}
+function getMonthEventSegments(events, days, timezoneID) {
+  const segments = [];
+  const levelsByWeek = [];
+  const firstDay = days[0];
+  const lastDay = days[days.length - 1];
+  const monthEvents = events.map((event) => {
+    const [eventStart, eventEnd] = getEventDateSpan(event, timezoneID);
+    const startIndex = days.findIndex(
+      (day) => !plainDateIsBefore(day, eventStart)
+    );
+    const endIndexFromRight = [...days].reverse().findIndex((day) => !plainDateIsAfter(day, eventEnd));
+    if (startIndex < 0 || endIndexFromRight < 0) {
+      return null;
+    }
+    const endIndex = days.length - 1 - endIndexFromRight;
+    return {
+      endIndex,
+      event,
+      isPriority: isDayEvent(event) || endIndex > startIndex,
+      startIndex
+    };
+  }).filter(
+    (record) => record != null
+  ).sort((a, b) => {
+    if (a.startIndex !== b.startIndex) {
+      return a.startIndex - b.startIndex;
+    }
+    if (a.isPriority !== b.isPriority) {
+      return a.isPriority ? -1 : 1;
+    }
+    const aDuration = a.endIndex - a.startIndex;
+    const bDuration = b.endIndex - b.startIndex;
+    if (aDuration !== bDuration) {
+      return bDuration - aDuration;
+    }
+    return a.event.title.localeCompare(b.event.title);
+  });
+  monthEvents.forEach(({ endIndex, event, startIndex }) => {
+    const [eventStart, eventEnd] = getEventDateSpan(event, timezoneID);
+    if (plainDateIsBefore(eventEnd, firstDay) || plainDateIsAfter(eventStart, lastDay)) {
+      return;
+    }
+    for (let week = Math.floor(startIndex / 7); week <= Math.floor(endIndex / 7); week += 1) {
+      const columnStart = week === Math.floor(startIndex / 7) ? startIndex % 7 : 0;
+      const columnEnd = week === Math.floor(endIndex / 7) ? endIndex % 7 : 6;
+      const weekLevels = levelsByWeek[week] ?? (levelsByWeek[week] = []);
+      const level = getAvailableLevel(weekLevels, columnStart);
+      if (level < MAX_MONTH_EVENT_LEVELS) {
+        weekLevels[level] = columnEnd;
+        segments.push({ columnEnd, columnStart, event, level, week });
+      }
+    }
+  });
+  return segments;
+}
+function getMonthEventSegmentStyle({
+  columnEnd,
+  columnStart,
+  level,
+  week
+}) {
+  return {
+    gridColumn: `${columnStart + 1} / ${columnEnd + 2}`,
+    gridRow: `${week + 1}`,
+    marginBlockStart: `${30 + level * 29}px`
+  };
+}
+function getGridCellName({
+  date,
+  events,
+  timezoneID
+}) {
+  const eventLabels = events.map(
+    (event) => getEventAccessibleLabel(event, [], timezoneID)
+  );
+  const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
+  return eventLabels.length > 0 ? `${dateLabel}. ${eventLabels.join(". ")}` : dateLabel;
+}
+function ScheduleMonthlyView({
+  options
+}) {
+  const { events, highlightDate, timezoneID, viewDate } = useScheduleContext();
+  const currentTime2 = useCurrentTime();
+  const month = viewDate.toPlainDate();
+  const title = formatMonthTitle(month);
+  const days = getMonthDays(month, options.weekCount ?? 6);
+  const eventSegments = getMonthEventSegments(events, days, timezoneID);
+  const today = highlightDate.toPlainDate();
+  return /* @__PURE__ */ jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": title,
+      className: cx$1(styles.surface, styles4.grid),
+      role: "grid",
+      children: [
+        weekdays.map((weekday, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-colindex": index + 1,
+            "aria-label": weekday.label,
+            className: styles4.weekday,
+            role: "columnheader",
+            children: /* @__PURE__ */ jsx(Heading, { color: "secondary", level: 4, children: weekday.shortLabel })
+          },
+          weekday.label
+        )),
+        /* @__PURE__ */ jsxs("div", { className: styles4.monthSurface, children: [
+          /* @__PURE__ */ jsx("div", { className: styles4.monthCellGrid, children: days.map((day, index) => {
+            const dayEvents = events.filter(
+              (event) => eventOccursOnDate(event, day, timezoneID)
+            );
+            const isCurrentMonth = day.month === month.month && day.year === month.year;
+            const isLastColumn = index % 7 === 6;
+            const isLastRow = index >= days.length - 7;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-current": plainDateIsEqual(day, today) ? "date" : void 0,
+                "aria-label": getGridCellName({
+                  date: day,
+                  events: dayEvents,
+                  timezoneID
+                }),
+                className: cx$1(
+                  styles4.cell,
+                  isLastColumn ? styles4.lastColumn : void 0,
+                  isLastRow ? styles4.lastRow : void 0,
+                  !isCurrentMonth ? styles4.otherMonth : void 0
+                ),
+                role: "gridcell",
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx$1(
+                      styles4.dayNumber,
+                      plainDateIsEqual(day, today) ? styles4.today : void 0
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        as: "span",
+                        color: "inherit",
+                        hasTabularNumbers: true,
+                        type: "supporting",
+                        weight: "medium",
+                        children: day.day
+                      }
+                    )
+                  }
+                )
+              },
+              day.toString()
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: styles4.monthEventOverlay, children: eventSegments.map((segment) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles4.monthEventSpan,
+              "data-testid": `schedule-event-span-${segment.event.id}`,
+              style: getMonthEventSegmentStyle(segment),
+              children: /* @__PURE__ */ jsx(
+                CalendarMonthEventPill,
+                {
+                  event: segment.event,
+                  isPast: isEventInPast(segment.event, currentTime2, timezoneID)
+                }
+              )
+            },
+            `${segment.event.id}:${segment.week}:${segment.columnStart}`
+          )) })
+        ] })
+      ]
+    }
+  ) });
+}
+function createScheduleMonthlyView({
+  weekCount = 6
+} = {}) {
+  return {
+    component: ScheduleMonthlyView,
+    getDateRange: (date) => {
+      const month = date.toPlainDate();
+      return getVisibleMonthRange(date, month, weekCount);
+    },
+    getNextDateRange: (date) => {
+      const nextMonth = date.toPlainDate().with({ day: 1 }).add({ months: 1 });
+      return {
+        label: "Next month",
+        range: getVisibleMonthRange(date, nextMonth, weekCount)
+      };
+    },
+    getPreviousDateRange: (date) => {
+      const previousMonth = date.toPlainDate().with({ day: 1 }).subtract({ months: 1 });
+      return {
+        label: "Previous month",
+        range: getVisibleMonthRange(date, previousMonth, weekCount)
+      };
+    },
+    options: { weekCount }
+  };
+}
+function SchedulePaginationControls() {
+  const {
+    nextDateLabel,
+    onNextDate,
+    onPreviousDate,
+    onToday,
+    previousDateLabel
+  } = useScheduleContext();
+  return /* @__PURE__ */ jsxs(ButtonGroup, { label: "Schedule pagination", size: "sm", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: ChevronLeft,
+        isIconOnly: true,
+        label: previousDateLabel,
+        onClick: onPreviousDate
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { label: "Today", onClick: onToday, size: "sm" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: ChevronRight,
+        isIconOnly: true,
+        label: nextDateLabel,
+        onClick: onNextDate
+      }
+    )
+  ] });
+}
+function createSchedulePaginationPlugin({
+  position = "start"
+} = {}) {
+  return {
+    renderHeader(startContent, centerContent, endContent) {
+      const controls = /* @__PURE__ */ jsx(SchedulePaginationControls, {});
+      return position === "start" ? {
+        centerContent,
+        endContent,
+        startContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          controls,
+          startContent
+        ] })
+      } : {
+        centerContent,
+        endContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          endContent,
+          controls
+        ] }),
+        startContent
+      };
+    }
+  };
+}
+var defaultSchedulePaginationPlugin = createSchedulePaginationPlugin();
+function useSchedulePaginationPlugin({
+  position = "start"
+} = {}) {
+  return useMemo(() => createSchedulePaginationPlugin({ position }), [position]);
+}
+function ScheduleViewSelectorControl({
+  onChangeView,
+  options
+}) {
+  const { view } = useScheduleContext();
+  const currentOption = options.find((option) => option.view === view);
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      button: {
+        isDisabled: onChangeView == null,
+        label: currentOption?.label ?? "View",
+        size: "sm"
+      },
+      menuWidth: 160,
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          endContent: option.view === view ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              color: "primary",
+              "data-testid": "schedule-view-selector-selected-icon",
+              icon: Check,
+              size: "sm"
+            }
+          ) : null,
+          label: option.label,
+          onClick: () => onChangeView?.(option.view)
+        },
+        option.label
+      ))
+    }
+  );
+}
+function createScheduleViewSelectorPlugin(options, {
+  onChangeView,
+  position = "end"
+} = {}) {
+  return {
+    renderHeader(startContent, centerContent, endContent) {
+      const selector = /* @__PURE__ */ jsx(
+        ScheduleViewSelectorControl,
+        {
+          onChangeView,
+          options
+        }
+      );
+      return position === "start" ? {
+        centerContent,
+        endContent,
+        startContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          startContent,
+          selector
+        ] })
+      } : {
+        centerContent,
+        endContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          endContent,
+          selector
+        ] }),
+        startContent
+      };
+    }
+  };
+}
+function useScheduleViewSelectorPlugin(options, pluginOptions = {}) {
+  const { onChangeView, position = "end" } = pluginOptions;
+  return useMemo(
+    () => createScheduleViewSelectorPlugin(options, { onChangeView, position }),
+    [onChangeView, options, position]
+  );
+}
+
+// src/components/Schedule/plugins/index.tsx
+var defaultSchedulePlugins = [
+  defaultSchedulePaginationPlugin
+];
+var EMPTY_CATEGORIES = [];
+function readAsyncEvents(loader, start, end, cache) {
+  const key = `${start}:${end}`;
+  let record = cache.get(key);
+  if (record == null) {
+    record = {
+      error: null,
+      promise: Promise.resolve().then(async () => loader(start, end)).then(
+        (value) => {
+          if (record != null) {
+            record.status = "fulfilled";
+            record.value = value;
+          }
+        },
+        (error) => {
+          if (record != null) {
+            record.status = "rejected";
+            record.error = error;
+          }
+        }
+      ),
+      status: "pending",
+      value: []
+    };
+    cache.set(key, record);
+  }
+  if (record.status === "pending") {
+    throw record.promise;
+  }
+  if (record.status === "rejected") {
+    throw record.error instanceof Error ? record.error : new Error(String(record.error));
+  }
+  return record.value;
+}
+function resolveEvents(eventSource, range, timezoneID, eventCache) {
+  const events = typeof eventSource === "function" ? readAsyncEvents(eventSource, range.start, range.end, eventCache) : eventSource;
+  return sortEvents(
+    events.filter((event) => eventOverlapsRange(event, range, timezoneID)),
+    timezoneID
+  );
+}
+function getRange(view, date) {
+  const [start, end] = view.getDateRange(date);
+  return {
+    end: end.instant,
+    endDate: plainDateFromInstant(end.instant, end.timezoneID),
+    start: start.instant,
+    startDate: plainDateFromInstant(start.instant, start.timezoneID)
+  };
+}
+function ScheduleViewContent({
+  categories,
+  eventCache,
+  eventSource,
+  highlightDate,
+  isLoading,
+  nextDateLabel,
+  onNextDate,
+  onPreviousDate,
+  onToday,
+  plugins,
+  previousDateLabel,
+  view,
+  viewDate
+}) {
+  const Component = view.component;
+  const range = getRange(view, viewDate);
+  const contextValue = useMemo(() => {
+    const events = isLoading ? [] : resolveEvents(eventSource, range, viewDate.timezoneID, eventCache);
+    return {
+      categories,
+      events,
+      highlightDate,
+      isLoading,
+      nextDateLabel,
+      onNextDate,
+      onPreviousDate,
+      onToday,
+      plugins,
+      previousDateLabel,
+      range,
+      timezoneID: viewDate.timezoneID,
+      view,
+      viewDate
+    };
+  }, [
+    categories,
+    eventCache,
+    eventSource,
+    highlightDate,
+    isLoading,
+    nextDateLabel,
+    onNextDate,
+    onPreviousDate,
+    onToday,
+    plugins,
+    previousDateLabel,
+    range,
+    view,
+    viewDate
+  ]);
+  return /* @__PURE__ */ jsx(ScheduleContext, { value: contextValue, children: /* @__PURE__ */ jsx(Component, { options: view.options }) });
+}
+function Schedule({
+  categories = EMPTY_CATEGORIES,
+  className,
+  "data-testid": dataTestId,
+  events,
+  highlightDate: highlightDateFromProps,
+  onViewDateChange,
+  plugins = defaultSchedulePlugins,
+  ref,
+  style,
+  timezoneID: timezoneIDFromProps,
+  view,
+  viewDate
+}) {
+  const timezoneID = timezoneIDFromProps ?? getBrowserTimezoneID();
+  const [eventCache] = useState(() => /* @__PURE__ */ new Map());
+  const [internalHighlightDate] = useState(
+    () => nowEpochMilliseconds()
+  );
+  const highlightDate = highlightDateFromProps ?? internalHighlightDate;
+  const zonedDateTime = useMemo(
+    () => createZonedDateTime(viewDate, timezoneID),
+    [viewDate, timezoneID]
+  );
+  const highlightZonedDateTime = useMemo(
+    () => createZonedDateTime(highlightDate, timezoneID),
+    [highlightDate, timezoneID]
+  );
+  const updateViewDate = useCallback(
+    (nextViewDate) => {
+      onViewDateChange?.(nextViewDate);
+    },
+    [onViewDateChange]
+  );
+  const shiftToRange = useCallback(
+    (nextRange) => {
+      const currentRange = view.getDateRange(zonedDateTime);
+      updateViewDate(
+        zonedDateTime.instant + nextRange[0].instant - currentRange[0].instant
+      );
+    },
+    [updateViewDate, view, zonedDateTime]
+  );
+  const previousDateRange = useMemo(
+    () => view.getPreviousDateRange(zonedDateTime),
+    [view, zonedDateTime]
+  );
+  const nextDateRange = useMemo(
+    () => view.getNextDateRange(zonedDateTime),
+    [view, zonedDateTime]
+  );
+  const onPreviousDate = useCallback(() => {
+    shiftToRange(previousDateRange.range);
+  }, [previousDateRange, shiftToRange]);
+  const onToday = useCallback(() => {
+    updateViewDate(nowEpochMilliseconds());
+  }, [updateViewDate]);
+  const onNextDate = useCallback(() => {
+    shiftToRange(nextDateRange.range);
+  }, [nextDateRange, shiftToRange]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(styles.root, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: /* @__PURE__ */ jsx(
+        Suspense,
+        {
+          fallback: /* @__PURE__ */ jsx(
+            ScheduleViewContent,
+            {
+              categories,
+              eventCache,
+              eventSource: [],
+              highlightDate: highlightZonedDateTime,
+              isLoading: true,
+              nextDateLabel: nextDateRange.label,
+              onNextDate,
+              onPreviousDate,
+              onToday,
+              plugins,
+              previousDateLabel: previousDateRange.label,
+              view,
+              viewDate: zonedDateTime
+            }
+          ),
+          children: /* @__PURE__ */ jsx(
+            ScheduleViewContent,
+            {
+              categories,
+              eventCache,
+              eventSource: events,
+              highlightDate: highlightZonedDateTime,
+              isLoading: false,
+              nextDateLabel: nextDateRange.label,
+              onNextDate,
+              onPreviousDate,
+              onToday,
+              plugins,
+              previousDateLabel: previousDateRange.label,
+              view,
+              viewDate: zonedDateTime
+            }
+          )
+        }
+      )
+    }
+  );
+}
+Schedule.displayName = "Schedule";
+function ScheduleWeeklyView({
+  options
+}) {
+  const { range } = useScheduleContext();
+  const days = enumerateDates(range.startDate, range.endDate);
+  const title = formatWeekTitle(days[0], days[days.length - 1]);
+  return /* @__PURE__ */ jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsx(
+    TimeGridView,
+    {
+      days,
+      hourHeight: options.hourHeight,
+      maxHour: options.maxHour,
+      minHour: options.minHour
+    }
+  ) });
+}
+function createScheduleWeeklyView({
+  hourHeight = 100,
+  maxHour = 24,
+  minHour = 0,
+  weekStartsOn = 0
+} = {}) {
+  const getWeekStart = (date) => setStartOfWeek(date.toPlainDate(), weekStartsOn);
+  const getWeekRange = (date) => {
+    const startDate = getWeekStart(date);
+    return scheduleRangeToZonedDateTimeRange(
+      getScheduleRangeFromDates({
+        endDate: startDate.add({ days: 7 }),
+        startDate,
+        timezoneID: date.timezoneID
+      }),
+      date.timezoneID
+    );
+  };
+  return {
+    component: ScheduleWeeklyView,
+    getDateRange: getWeekRange,
+    getNextDateRange: (date) => ({
+      label: "Next week",
+      range: getWeekRange(date.addDays(7))
+    }),
+    getPreviousDateRange: (date) => ({
+      label: "Previous week",
+      range: getWeekRange(date.addDays(-7))
+    }),
+    options: { hourHeight, maxHour, minHour, weekStartsOn }
+  };
+}
+function setStartOfWeek(date, weekStartsOn) {
+  const daysSinceWeekStart = (plainDateDayOfWeek(date) - weekStartsOn + 7) % 7;
+  return date.add({ days: -daysSinceWeekStart });
+}
+
+export { Schedule, ScheduleContext, createEventFromISO, createScheduleDayView, createScheduleListView, createScheduleMonthlyView, createScheduleWeeklyView, defaultSchedulePlugins, useScheduleContext, useSchedulePaginationPlugin, useScheduleViewSelectorPlugin };
+//# sourceMappingURL=chunk-DJW7T3WJ.js.map
+//# sourceMappingURL=chunk-DJW7T3WJ.js.map