@vesture/react 0.3.0 → 0.3.2

package/dist/index.js

@@ -1,11 +1,12 @@
-// src/components/Button/Button.tsx
-import { forwardRef } from "react";
-
-// src/components/Button/Button.css.ts
-var button = "Button_button__w1yuq20";
-var variant = { primary: "Button_variant_primary__w1yuq21", secondary: "Button_variant_secondary__w1yuq22", ghost: "Button_variant_ghost__w1yuq23" };
+import {
+  button,
+  card,
+  elevation,
+  variant
+} from "./chunk-QKEAWZP5.js";
 
 // src/components/Button/Button.tsx
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var Button = forwardRef(
   function Button2({ variant: variantProp = "primary", className, ...rest }, ref) {
@@ -152,12 +153,6 @@ var Switch = forwardRef8(function Switch2({ label: label4, className, ...rest },
 
 // src/components/Card/Card.tsx
 import { forwardRef as forwardRef9 } from "react";
-
-// src/components/Card/Card.css.ts
-var card = "Card_card__mv7u2g0";
-var elevation = { flat: "Card_elevation_flat__mv7u2g1", raised: "Card_elevation_raised__mv7u2g2", overlay: "Card_elevation_overlay__mv7u2g3" };
-
-// src/components/Card/Card.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
 var Card = forwardRef9(function Card2({ elevation: elevationProp = "flat", className, ...rest }, ref) {
   const classes = [card, elevation[elevationProp], className].filter(Boolean).join(" ");
@@ -2001,8 +1996,7 @@ var root2 = "Calendar_root__1uy43my0";
 var weekRow = "Calendar_weekRow__1uy43my5";
 var weekdayCell = "Calendar_weekdayCell__1uy43my6";
 
-// src/components/Calendar/Calendar.tsx
-import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+// src/utils/date.ts
 function startOfMonth(date) {
   return new Date(date.getFullYear(), date.getMonth(), 1);
 }
@@ -2038,6 +2032,9 @@ function endOfWeek(date, weekStartsOn) {
 function dateKey(date) {
   return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
 }
+
+// src/components/Calendar/Calendar.tsx
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 function getCalendarWeeks(month, weekStartsOn) {
   const gridStart = startOfWeek(startOfMonth(month), weekStartsOn);
   const gridEnd = endOfWeek(endOfMonth(month), weekStartsOn);
@@ -5585,8 +5582,639 @@ function InteractivePieChart({
   ] });
 }
 
+// src/components/Scheduler/Scheduler.tsx
+import { useMemo as useMemo10, useRef as useRef12, useState as useState21 } from "react";
+
+// src/components/Scheduler/Scheduler.css.ts
+var allDayCell = "Scheduler_allDayCell__1to95h2c";
+var allDayEventBlock = "Scheduler_allDayEventBlock__1to95h2o";
+var allDayGutter = "Scheduler_allDayGutter__1to95h2b";
+var allDayRow = "Scheduler_allDayRow__1to95h2a";
+var dayColumn = "Scheduler_dayColumn__1to95h2g";
+var dayHeaderCell = "Scheduler_dayHeaderCell__1to95h28";
+var dayHeaderDateNumber = "Scheduler_dayHeaderDateNumber__1to95h29";
+var dayHeaderGutter = "Scheduler_dayHeaderGutter__1to95h27";
+var dayHeaderRow = "Scheduler_dayHeaderRow__1to95h26";
+var dragPreview = "Scheduler_dragPreview__1to95h2l";
+var dragPreviewLabel = "Scheduler_dragPreviewLabel__1to95h2m";
+var eventBlock = "Scheduler_eventBlock__1to95h2j";
+var eventTime = "Scheduler_eventTime__1to95h2q";
+var eventTitle = "Scheduler_eventTitle__1to95h2p";
+var header2 = "Scheduler_header__1to95h21";
+var headerNav = "Scheduler_headerNav__1to95h22";
+var hourLabel = "Scheduler_hourLabel__1to95h2f";
+var navButton2 = "Scheduler_navButton__1to95h23";
+var nowLine = "Scheduler_nowLine__1to95h2h";
+var nowLineDot = "Scheduler_nowLineDot__1to95h2i";
+var rangeLabel = "Scheduler_rangeLabel__1to95h25";
+var resizeHandle2 = "Scheduler_resizeHandle__1to95h2k";
+var root9 = "Scheduler_root__1to95h20";
+var scrollArea = "Scheduler_scrollArea__1to95h2d";
+var timeGutter = "Scheduler_timeGutter__1to95h2e";
+var todayButton = "Scheduler_todayButton__1to95h24";
+var visuallyHidden = "Scheduler_visuallyHidden__1to95h2n";
+
+// src/components/Scheduler/scheduler-layout.ts
+import { vars as vars12 } from "@vesture/tokens";
+var SLOT_HEIGHT_PX = 24;
+function layoutOverlappingEvents(events) {
+  if (events.length === 0) return [];
+  const sorted = [...events].sort((a, b) => {
+    const startDiff = a.start.getTime() - b.start.getTime();
+    if (startDiff !== 0) return startDiff;
+    return a.end.getTime() - b.end.getTime();
+  });
+  const results = /* @__PURE__ */ new Map();
+  let cluster = [];
+  let clusterEnd = -Infinity;
+  const flushCluster = () => {
+    if (cluster.length === 0) return;
+    const columnEndTimes = [];
+    for (const event of cluster) {
+      const startTime = event.start.getTime();
+      let columnIndex = columnEndTimes.findIndex((end) => end <= startTime);
+      if (columnIndex === -1) {
+        columnIndex = columnEndTimes.length;
+        columnEndTimes.push(event.end.getTime());
+      } else {
+        columnEndTimes[columnIndex] = event.end.getTime();
+      }
+      results.set(event.id, { id: event.id, columnIndex, columnCount: 0 });
+    }
+    const columnCount = columnEndTimes.length;
+    for (const event of cluster) {
+      results.get(event.id).columnCount = columnCount;
+    }
+    cluster = [];
+  };
+  for (const event of sorted) {
+    const startTime = event.start.getTime();
+    const endTime = event.end.getTime();
+    if (cluster.length === 0 || startTime < clusterEnd) {
+      cluster.push(event);
+      clusterEnd = Math.max(clusterEnd, endTime);
+    } else {
+      flushCluster();
+      cluster.push(event);
+      clusterEnd = endTime;
+    }
+  }
+  flushCluster();
+  return events.map((event) => results.get(event.id));
+}
+function getVerticalMetrics(start, end, startHour, endHour) {
+  const rangeStartMinutes = startHour * 60;
+  const rangeEndMinutes = endHour * 60;
+  const totalMinutes = rangeEndMinutes - rangeStartMinutes;
+  if (totalMinutes <= 0) return null;
+  const startMinutes = start.getHours() * 60 + start.getMinutes();
+  const endMinutes = end.getHours() * 60 + end.getMinutes();
+  const clippedStart = Math.max(startMinutes, rangeStartMinutes);
+  const clippedEnd = Math.min(endMinutes, rangeEndMinutes);
+  if (clippedEnd <= clippedStart) return null;
+  return {
+    top: (clippedStart - rangeStartMinutes) / totalMinutes * 100,
+    height: (clippedEnd - clippedStart) / totalMinutes * 100
+  };
+}
+function pixelDeltaToSnappedMinutes(deltaPx, slotDuration) {
+  const rawSlots = deltaPx / SLOT_HEIGHT_PX;
+  return Math.round(rawSlots) * slotDuration;
+}
+function minutesOfDay(date) {
+  return date.getHours() * 60 + date.getMinutes();
+}
+function combineDayAndMinutes(day, minutesOfDayValue) {
+  const result = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+  result.setMinutes(minutesOfDayValue);
+  return result;
+}
+function computeMoveResult(params) {
+  const { originalStart, originalEnd, targetDay, deltaYPx, slotDuration, startHour, endHour } = params;
+  const durationMinutes = (originalEnd.getTime() - originalStart.getTime()) / 6e4;
+  const deltaMinutes = pixelDeltaToSnappedMinutes(deltaYPx, slotDuration);
+  const rawStartMinutes = minutesOfDay(originalStart) + deltaMinutes;
+  const rangeStart = startHour * 60;
+  const rangeEnd = endHour * 60;
+  const maxStart = Math.max(rangeStart, rangeEnd - durationMinutes);
+  const clampedStartMinutes = Math.min(Math.max(rawStartMinutes, rangeStart), maxStart);
+  const start = combineDayAndMinutes(targetDay, clampedStartMinutes);
+  const end = new Date(start.getTime() + durationMinutes * 6e4);
+  return { start, end };
+}
+function computeResizeResult(params) {
+  const { originalStart, originalEnd, deltaYPx, slotDuration, minEventDuration, endHour } = params;
+  const deltaMinutes = pixelDeltaToSnappedMinutes(deltaYPx, slotDuration);
+  const rawEndMinutes = minutesOfDay(originalEnd) + deltaMinutes;
+  const startMinutes = minutesOfDay(originalStart);
+  const rangeEnd = endHour * 60;
+  const clampedEndMinutes = Math.min(
+    Math.max(rawEndMinutes, startMinutes + minEventDuration),
+    rangeEnd
+  );
+  const end = combineDayAndMinutes(originalStart, clampedEndMinutes);
+  return { end };
+}
+var SERIES_COLOR_CYCLE4 = [
+  vars12.chart.series1,
+  vars12.chart.series2,
+  vars12.chart.series3,
+  vars12.chart.series4,
+  vars12.chart.series5,
+  vars12.chart.series6,
+  vars12.chart.series7,
+  vars12.chart.series8
+];
+function hashStringToIndex(value, bucketCount) {
+  let hash = 5381;
+  for (let i = 0; i < value.length; i++) {
+    hash = hash * 33 ^ value.charCodeAt(i);
+  }
+  return Math.abs(hash) % bucketCount;
+}
+function getEventColor(id, override) {
+  if (override) return override;
+  return SERIES_COLOR_CYCLE4[hashStringToIndex(id, SERIES_COLOR_CYCLE4.length)];
+}
+
+// src/components/Scheduler/Scheduler.tsx
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+function formatEventTime(date, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(date);
+}
+function Scheduler({
+  events,
+  date,
+  onDateChange,
+  weekStartsOn = 1,
+  startHour = 0,
+  endHour = 24,
+  slotDuration = 30,
+  onEventClick,
+  onEventChange,
+  editable = false,
+  minEventDuration,
+  selectedEventId,
+  locale = "en-US",
+  className
+}) {
+  const weekStart = useMemo10(
+    () => startOfWeek(clampToMidnight(date), weekStartsOn),
+    [date, weekStartsOn]
+  );
+  const days = useMemo10(
+    () => Array.from({ length: 7 }, (_, i) => addDays(weekStart, i)),
+    [weekStart]
+  );
+  const today = useMemo10(() => clampToMidnight(/* @__PURE__ */ new Date()), []);
+  const now = useMemo10(() => /* @__PURE__ */ new Date(), []);
+  const weekdayFormatter = useMemo10(
+    () => new Intl.DateTimeFormat(locale, { weekday: "short" }),
+    [locale]
+  );
+  const dayNumberFormatter = useMemo10(
+    () => new Intl.DateTimeFormat(locale, { day: "numeric" }),
+    [locale]
+  );
+  const monthDayFormatter = useMemo10(
+    () => new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }),
+    [locale]
+  );
+  const yearFormatter = useMemo10(
+    () => new Intl.DateTimeFormat(locale, { year: "numeric" }),
+    [locale]
+  );
+  const hourFormatter = useMemo10(
+    () => new Intl.DateTimeFormat(locale, { hour: "numeric" }),
+    [locale]
+  );
+  const weekdayLongFormatter = useMemo10(
+    () => new Intl.DateTimeFormat(locale, { weekday: "long" }),
+    [locale]
+  );
+  const weekEnd = days[6];
+  const rangeLabelText = `${monthDayFormatter.format(weekStart)} \u2013 ${monthDayFormatter.format(weekEnd)}, ${yearFormatter.format(weekEnd)}`;
+  const totalMinutes = (endHour - startHour) * 60;
+  const slotsCount = Math.max(1, Math.ceil(totalMinutes / slotDuration));
+  const totalHeightPx = slotsCount * SLOT_HEIGHT_PX;
+  const resolvedMinEventDuration = minEventDuration ?? slotDuration;
+  const hourMarks = useMemo10(() => {
+    const marks = [];
+    for (let hour = startHour; hour <= endHour; hour++) {
+      const labelDate = new Date(2e3, 0, 1, hour === 24 ? 0 : hour, 0);
+      marks.push({
+        hour,
+        label: hourFormatter.format(labelDate),
+        top: (hour - startHour) * 60 / totalMinutes * 100
+      });
+    }
+    return marks;
+  }, [startHour, endHour, totalMinutes, hourFormatter]);
+  const nowMinutes = now.getHours() * 60 + now.getMinutes();
+  const showNowLine = nowMinutes >= startHour * 60 && nowMinutes < endHour * 60;
+  const nowTop = (nowMinutes - startHour * 60) / totalMinutes * 100;
+  const allDayEventsByDay = useMemo10(
+    () => days.map(
+      (day) => events.filter((event) => event.allDay && isSameDay(event.start, day))
+    ),
+    [days, events]
+  );
+  const timedEventsByDay = useMemo10(
+    () => days.map((day) => {
+      const dayEvents = events.filter(
+        (event) => !event.allDay && isSameDay(event.start, day)
+      );
+      const layout = layoutOverlappingEvents(
+        dayEvents.map((event) => ({
+          id: event.id,
+          start: event.start,
+          end: event.end
+        }))
+      );
+      const layoutById = new Map(layout.map((l) => [l.id, l]));
+      return dayEvents.map((event) => {
+        const metrics = getVerticalMetrics(
+          event.start,
+          event.end,
+          startHour,
+          endHour
+        );
+        if (!metrics) return null;
+        const placement = layoutById.get(event.id);
+        return { event, metrics, placement };
+      }).filter(
+        (entry) => entry !== null
+      );
+    }),
+    [days, events, startHour, endHour]
+  );
+  const [drag, setDrag] = useState21(null);
+  const [announcement, setAnnouncement] = useState21("");
+  const suppressClickRef = useRef12(false);
+  const dayColumnRefs = useRef12([]);
+  const announceMove = (event, start, end) => {
+    setAnnouncement(
+      `${event.title} moved to ${weekdayLongFormatter.format(start)}, ${formatEventTime(start, locale)} to ${formatEventTime(end, locale)}.`
+    );
+  };
+  const announceResize = (event, end) => {
+    setAnnouncement(
+      `${event.title} resized to end at ${formatEventTime(end, locale)}.`
+    );
+  };
+  const handleEventActivate = (event) => {
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      return;
+    }
+    onEventClick?.(event);
+  };
+  const handleMovePointerDown = (event, dayIndex) => (pointerEvent) => {
+    if (!editable) return;
+    pointerEvent.preventDefault();
+    const target = pointerEvent.currentTarget;
+    try {
+      target.setPointerCapture(pointerEvent.pointerId);
+    } catch {
+    }
+    target.focus();
+    setDrag({
+      kind: "move",
+      event,
+      pointerId: pointerEvent.pointerId,
+      startClientX: pointerEvent.clientX,
+      startClientY: pointerEvent.clientY,
+      startDayIndex: dayIndex,
+      currentDayIndex: dayIndex,
+      currentStart: event.start,
+      currentEnd: event.end,
+      moved: false
+    });
+  };
+  const handleResizePointerDown = (event, dayIndex) => (pointerEvent) => {
+    if (!editable) return;
+    pointerEvent.preventDefault();
+    pointerEvent.stopPropagation();
+    const target = pointerEvent.currentTarget;
+    try {
+      target.setPointerCapture(pointerEvent.pointerId);
+    } catch {
+    }
+    setDrag({
+      kind: "resize",
+      event,
+      pointerId: pointerEvent.pointerId,
+      startClientX: pointerEvent.clientX,
+      startClientY: pointerEvent.clientY,
+      startDayIndex: dayIndex,
+      currentDayIndex: dayIndex,
+      currentStart: event.start,
+      currentEnd: event.end,
+      moved: false
+    });
+  };
+  const handleDragPointerMove = (pointerEvent) => {
+    if (!drag || pointerEvent.pointerId !== drag.pointerId) return;
+    pointerEvent.stopPropagation();
+    const deltaY = pointerEvent.clientY - drag.startClientY;
+    if (drag.kind === "move") {
+      const deltaX = pointerEvent.clientX - drag.startClientX;
+      const columnWidth = dayColumnRefs.current[drag.startDayIndex]?.getBoundingClientRect().width ?? 0;
+      const dayDelta = columnWidth > 0 ? Math.round(deltaX / columnWidth) : 0;
+      const targetDayIndex = Math.min(6, Math.max(0, drag.startDayIndex + dayDelta));
+      const targetDay = days[targetDayIndex];
+      const { start, end } = computeMoveResult({
+        originalStart: drag.event.start,
+        originalEnd: drag.event.end,
+        targetDay,
+        deltaYPx: deltaY,
+        slotDuration,
+        startHour,
+        endHour
+      });
+      const moved = targetDayIndex !== drag.startDayIndex || start.getTime() !== drag.event.start.getTime();
+      setDrag({ ...drag, currentDayIndex: targetDayIndex, currentStart: start, currentEnd: end, moved });
+    } else {
+      const { end } = computeResizeResult({
+        originalStart: drag.event.start,
+        originalEnd: drag.event.end,
+        deltaYPx: deltaY,
+        slotDuration,
+        minEventDuration: resolvedMinEventDuration,
+        endHour
+      });
+      const moved = end.getTime() !== drag.event.end.getTime();
+      setDrag({ ...drag, currentEnd: end, moved });
+    }
+  };
+  const handleDragPointerUp = (pointerEvent) => {
+    if (!drag || pointerEvent.pointerId !== drag.pointerId) return;
+    pointerEvent.stopPropagation();
+    const finished = drag;
+    setDrag(null);
+    if (finished.kind === "move") {
+      if (!finished.moved) {
+        suppressClickRef.current = true;
+        onEventClick?.(finished.event);
+        return;
+      }
+      onEventChange?.(finished.event, finished.currentStart, finished.currentEnd);
+      announceMove(finished.event, finished.currentStart, finished.currentEnd);
+      return;
+    }
+    if (!finished.moved) return;
+    onEventChange?.(finished.event, finished.currentStart, finished.currentEnd);
+    announceResize(finished.event, finished.currentEnd);
+  };
+  const handleDragPointerCancel = (pointerEvent) => {
+    if (!drag || pointerEvent.pointerId !== drag.pointerId) return;
+    pointerEvent.stopPropagation();
+    setDrag(null);
+  };
+  const handleEventKeyDown = (keyboardEvent, event, dayIndex) => {
+    if (!editable) return;
+    if (keyboardEvent.shiftKey && (keyboardEvent.key === "ArrowDown" || keyboardEvent.key === "ArrowUp")) {
+      keyboardEvent.preventDefault();
+      const direction2 = keyboardEvent.key === "ArrowDown" ? 1 : -1;
+      const { end } = computeResizeResult({
+        originalStart: event.start,
+        originalEnd: event.end,
+        deltaYPx: direction2 * SLOT_HEIGHT_PX,
+        slotDuration,
+        minEventDuration: resolvedMinEventDuration,
+        endHour
+      });
+      if (end.getTime() === event.end.getTime()) return;
+      onEventChange?.(event, event.start, end);
+      announceResize(event, end);
+      return;
+    }
+    switch (keyboardEvent.key) {
+      case "ArrowUp":
+      case "ArrowDown": {
+        keyboardEvent.preventDefault();
+        const direction2 = keyboardEvent.key === "ArrowDown" ? 1 : -1;
+        const { start, end } = computeMoveResult({
+          originalStart: event.start,
+          originalEnd: event.end,
+          targetDay: days[dayIndex],
+          deltaYPx: direction2 * SLOT_HEIGHT_PX,
+          slotDuration,
+          startHour,
+          endHour
+        });
+        if (start.getTime() === event.start.getTime()) return;
+        onEventChange?.(event, start, end);
+        announceMove(event, start, end);
+        break;
+      }
+      case "ArrowLeft":
+      case "ArrowRight": {
+        keyboardEvent.preventDefault();
+        const direction2 = keyboardEvent.key === "ArrowRight" ? 1 : -1;
+        const targetDayIndex = Math.min(6, Math.max(0, dayIndex + direction2));
+        if (targetDayIndex === dayIndex) return;
+        const { start, end } = computeMoveResult({
+          originalStart: event.start,
+          originalEnd: event.end,
+          targetDay: days[targetDayIndex],
+          deltaYPx: 0,
+          slotDuration,
+          startHour,
+          endHour
+        });
+        onEventChange?.(event, start, end);
+        announceMove(event, start, end);
+        break;
+      }
+      default:
+        return;
+    }
+  };
+  const dragPreviewMetrics = drag && drag.kind === "move" ? getVerticalMetrics(drag.currentStart, drag.currentEnd, startHour, endHour) : null;
+  return /* @__PURE__ */ jsxs34("div", { className: [root9, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx51(
+      "div",
+      {
+        "aria-live": "polite",
+        className: visuallyHidden,
+        children: announcement
+      }
+    ),
+    /* @__PURE__ */ jsxs34("div", { className: header2, children: [
+      /* @__PURE__ */ jsx51("span", { className: rangeLabel, children: rangeLabelText }),
+      /* @__PURE__ */ jsxs34("div", { className: headerNav, children: [
+        /* @__PURE__ */ jsx51(
+          "button",
+          {
+            type: "button",
+            className: navButton2,
+            "aria-label": "Previous week",
+            onClick: () => onDateChange?.(addDays(date, -7)),
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsx51(
+          "button",
+          {
+            type: "button",
+            className: todayButton,
+            onClick: () => onDateChange?.(/* @__PURE__ */ new Date()),
+            children: "Today"
+          }
+        ),
+        /* @__PURE__ */ jsx51(
+          "button",
+          {
+            type: "button",
+            className: navButton2,
+            "aria-label": "Next week",
+            onClick: () => onDateChange?.(addDays(date, 7)),
+            children: "\u203A"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs34("div", { className: dayHeaderRow, children: [
+      /* @__PURE__ */ jsx51("div", { className: dayHeaderGutter }),
+      days.map((day) => {
+        const isToday = isSameDay(day, today);
+        return /* @__PURE__ */ jsxs34("div", { className: dayHeaderCell, "data-today": isToday || void 0, children: [
+          /* @__PURE__ */ jsx51("span", { children: weekdayFormatter.format(day) }),
+          /* @__PURE__ */ jsx51("span", { className: dayHeaderDateNumber, "data-today": isToday || void 0, children: dayNumberFormatter.format(day) })
+        ] }, day.toISOString());
+      })
+    ] }),
+    /* @__PURE__ */ jsxs34("div", { className: allDayRow, children: [
+      /* @__PURE__ */ jsx51("div", { className: allDayGutter, children: "All day" }),
+      days.map((day, dayIndex) => /* @__PURE__ */ jsx51("div", { className: allDayCell, children: allDayEventsByDay[dayIndex].map((event) => {
+        const color = getEventColor(event.id, event.color);
+        const selected = event.id === selectedEventId;
+        return /* @__PURE__ */ jsx51(
+          "button",
+          {
+            type: "button",
+            className: allDayEventBlock,
+            style: { background: color },
+            "data-selected": selected || void 0,
+            onClick: () => handleEventActivate(event),
+            children: event.title
+          },
+          event.id
+        );
+      }) }, day.toISOString()))
+    ] }),
+    /* @__PURE__ */ jsxs34("div", { className: scrollArea, children: [
+      /* @__PURE__ */ jsx51("div", { className: timeGutter, style: { height: totalHeightPx }, children: hourMarks.map((mark) => /* @__PURE__ */ jsx51(
+        "span",
+        {
+          className: hourLabel,
+          style: { top: `${mark.top}%` },
+          children: mark.label
+        },
+        mark.hour
+      )) }),
+      days.map((day, dayIndex) => {
+        const isToday = isSameDay(day, today);
+        return /* @__PURE__ */ jsxs34(
+          "div",
+          {
+            ref: (el) => {
+              dayColumnRefs.current[dayIndex] = el;
+            },
+            className: dayColumn,
+            style: { height: totalHeightPx },
+            children: [
+              isToday && showNowLine ? /* @__PURE__ */ jsx51("div", { className: nowLine, style: { top: `${nowTop}%` }, children: /* @__PURE__ */ jsx51("span", { className: nowLineDot }) }) : null,
+              timedEventsByDay[dayIndex].map(({ event, metrics, placement }) => {
+                const color = getEventColor(event.id, event.color);
+                const selected = event.id === selectedEventId;
+                const isResizingThis = drag?.kind === "resize" && drag.event.id === event.id;
+                const isDraggingThis = drag?.event.id === event.id;
+                const displayMetrics = isResizingThis ? getVerticalMetrics(event.start, drag.currentEnd, startHour, endHour) ?? metrics : metrics;
+                const displayEnd = isResizingThis ? drag.currentEnd : event.end;
+                const width = 100 / placement.columnCount;
+                const left = placement.columnIndex * width;
+                const showTime = displayMetrics.height > 6;
+                return /* @__PURE__ */ jsxs34(
+                  "button",
+                  {
+                    type: "button",
+                    className: eventBlock,
+                    "data-selected": selected || void 0,
+                    "data-editable": editable || void 0,
+                    "data-dragging": isDraggingThis || void 0,
+                    style: {
+                      top: `${displayMetrics.top}%`,
+                      height: `${displayMetrics.height}%`,
+                      left: `${left}%`,
+                      width: `${width}%`,
+                      background: color
+                    },
+                    onClick: () => handleEventActivate(event),
+                    onPointerDown: editable ? handleMovePointerDown(event, dayIndex) : void 0,
+                    onPointerMove: editable ? handleDragPointerMove : void 0,
+                    onPointerUp: editable ? handleDragPointerUp : void 0,
+                    onPointerCancel: editable ? handleDragPointerCancel : void 0,
+                    onKeyDown: editable ? (e) => handleEventKeyDown(e, event, dayIndex) : void 0,
+                    children: [
+                      /* @__PURE__ */ jsx51("span", { className: eventTitle, children: event.title }),
+                      showTime ? /* @__PURE__ */ jsxs34("span", { className: eventTime, children: [
+                        formatEventTime(event.start, locale),
+                        " \u2013",
+                        " ",
+                        formatEventTime(displayEnd, locale)
+                      ] }) : null,
+                      editable ? /* @__PURE__ */ jsx51(
+                        "span",
+                        {
+                          className: resizeHandle2,
+                          onPointerDown: handleResizePointerDown(event, dayIndex),
+                          onPointerMove: handleDragPointerMove,
+                          onPointerUp: handleDragPointerUp,
+                          onPointerCancel: handleDragPointerCancel
+                        }
+                      ) : null
+                    ]
+                  },
+                  event.id
+                );
+              }),
+              drag && drag.kind === "move" && drag.currentDayIndex === dayIndex && dragPreviewMetrics ? /* @__PURE__ */ jsxs34(
+                "div",
+                {
+                  className: dragPreview,
+                  style: {
+                    top: `${dragPreviewMetrics.top}%`,
+                    height: `${dragPreviewMetrics.height}%`,
+                    left: 0,
+                    width: "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx51("span", { className: dragPreviewLabel, children: drag.event.title }),
+                    /* @__PURE__ */ jsxs34("span", { className: dragPreviewLabel, children: [
+                      formatEventTime(drag.currentStart, locale),
+                      " \u2013",
+                      " ",
+                      formatEventTime(drag.currentEnd, locale)
+                    ] })
+                  ]
+                }
+              ) : null
+            ]
+          },
+          day.toISOString()
+        );
+      })
+    ] })
+  ] });
+}
+
 // src/index.ts
-import { vars as vars12, defaultThemeClass, defaultThemeVars } from "@vesture/tokens";
+import { vars as vars13, defaultThemeClass, defaultThemeVars } from "@vesture/tokens";
 export {
   Accordion2 as Accordion,
   AccordionContent,
@@ -5625,6 +6253,7 @@ export {
   Popover,
   Progress,
   Radio,
+  Scheduler,
   Select,
   Slider,
   Spinner,
@@ -5642,6 +6271,6 @@ export {
   defaultThemeVars,
   useCommandPaletteShortcut,
   useToast,
-  vars12 as vars
+  vars13 as vars
 };
 //# sourceMappingURL=index.js.map