@wow-two-beta/ui 0.0.69 → 0.0.70

package/dist/{chunk-X3JVVEUJ.js → chunk-UFTKE5U7.js}

@@ -1,4 +1,4 @@
-import { Kbd, MONTHS_LONG, WEEKDAYS_SHORT } from './chunk-EKGOQL75.js';
+import { Kbd, zonedAtHour, formatZonedTime, minutesBetween, nowZoned, today, daysBetween, isWeekend, addDays, MONTHS_LONG, WEEKDAYS_SHORT, isToday, maxZoned, minZoned, isZonedDayInRange, isZonedOnDay } from './chunk-SIAFOCT4.js';
 import { Inline } from './chunk-WKVWOAQV.js';
 import { useClipboard, useControlled, useReducedMotion } from './chunk-RNHY33US.js';
 import { Icon } from './chunk-D7ZFCHX5.js';
@@ -8,6 +8,7 @@ import { cn } from './chunk-D4ZT36AZ.js';
 import { forwardRef, useState, useEffect, Children, isValidElement, Fragment as Fragment$1, createContext, useId, useMemo, useCallback, useContext, useRef, useImperativeHandle, useLayoutEffect } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { TrendingUp, TrendingDown, Check, Copy, ChevronDown, ChevronLeft, ChevronRight, Plus, Minus, Maximize, Pause, Play, VolumeX, Volume2, Captions, CaptionsOff, PictureInPicture2, Minimize, ZoomOut, ZoomIn, Download, SmilePlus, X, AlertTriangle, CheckCheck, Clock, ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
+import { Temporal } from '@js-temporal/polyfill';
 
 // src/display/heading/Heading.variants.ts
 var headingVariants = tv({
@@ -1747,6 +1748,14 @@ function defaultCompare(a, b) {
   if (a === null || a === void 0) return 1;
   if (b === null || b === void 0) return -1;
   if (typeof a === "number" && typeof b === "number") return a - b;
+  if (a instanceof Temporal.PlainDate && b instanceof Temporal.PlainDate)
+    return Temporal.PlainDate.compare(a, b);
+  if (a instanceof Temporal.PlainTime && b instanceof Temporal.PlainTime)
+    return Temporal.PlainTime.compare(a, b);
+  if (a instanceof Temporal.PlainDateTime && b instanceof Temporal.PlainDateTime)
+    return Temporal.PlainDateTime.compare(a, b);
+  if (a instanceof Temporal.ZonedDateTime && b instanceof Temporal.ZonedDateTime)
+    return Temporal.ZonedDateTime.compare(a, b);
   if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
   return String(a).localeCompare(String(b));
 }
@@ -2438,16 +2447,10 @@ var TONE_CLASSES = {
 };
 var DEFAULT_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var DEFAULT_WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-function formatDate(d) {
-  const y = d.getFullYear();
-  const m = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  return `${y}-${m}-${day}`;
-}
 var HeatmapCalendar = forwardRef(
   function HeatmapCalendar2({
     values,
-    year = (/* @__PURE__ */ new Date()).getFullYear(),
+    year = Temporal.Now.plainDateISO().year,
     weekStart = 0,
     cellSize = 12,
     gap = 2,
@@ -2461,37 +2464,37 @@ var HeatmapCalendar = forwardRef(
     ...rest
   }, ref) {
     const valueMap = useMemo(() => {
-      if (values instanceof Map) return values;
-      return new Map(Object.entries(values));
+      const map = /* @__PURE__ */ new Map();
+      for (const [date, value] of values) map.set(date.toString(), value);
+      return map;
     }, [values]);
     const { columns, monthMarkers, maxValue } = useMemo(() => {
-      const start = new Date(year, 0, 1);
-      const end = new Date(year, 11, 31);
-      const cur = new Date(start);
-      const wd = cur.getDay();
-      const offset = (wd - weekStart + 7) % 7;
-      cur.setDate(cur.getDate() - offset);
+      const start = Temporal.PlainDate.from({ year, month: 1, day: 1 });
+      const end = Temporal.PlainDate.from({ year, month: 12, day: 31 });
+      const sundayIdx = start.dayOfWeek % 7;
+      const offset = (sundayIdx - weekStart + 7) % 7;
+      let cur = start.subtract({ days: offset });
       const cols = [];
       let column = [];
       const months = [];
       let lastSeenMonth = -1;
       let max = 0;
-      while (cur <= end || column.length > 0) {
-        const inYear = cur.getFullYear() === year;
-        const key = formatDate(cur);
+      while (Temporal.PlainDate.compare(cur, end) <= 0 || column.length > 0) {
+        const inYear = cur.year === year;
+        const key = cur.toString();
         const v = valueMap.get(key) ?? 0;
         if (v > max) max = v;
-        column.push({ date: new Date(cur), inYear, value: v });
-        if (inYear && cur.getMonth() !== lastSeenMonth) {
-          lastSeenMonth = cur.getMonth();
-          months.push({ month: cur.getMonth(), col: cols.length });
+        column.push({ date: cur, key, inYear, value: v });
+        if (inYear && cur.month - 1 !== lastSeenMonth) {
+          lastSeenMonth = cur.month - 1;
+          months.push({ month: cur.month - 1, col: cols.length });
         }
         if (column.length === 7) {
           cols.push(column);
           column = [];
         }
-        cur.setDate(cur.getDate() + 1);
-        if (cur > end && column.length === 0) break;
+        cur = cur.add({ days: 1 });
+        if (Temporal.PlainDate.compare(cur, end) > 0 && column.length === 0) break;
       }
       if (column.length > 0) cols.push(column);
       return { columns: cols, monthMarkers: months, maxValue: max };
@@ -2539,7 +2542,6 @@ var HeatmapCalendar = forwardRef(
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "flex", style: { gap }, children: columns.map((col, colIdx) => /* @__PURE__ */ jsx("div", { className: "flex flex-col", style: { gap }, children: col.map((cell, rowIdx) => {
-          const dateStr = formatDate(cell.date);
           const level = bucket(cell.value);
           const interactive = cell.inYear && onCellClick != null;
           const Tag = interactive ? "button" : "div";
@@ -2547,11 +2549,11 @@ var HeatmapCalendar = forwardRef(
             Tag,
             {
               type: interactive ? "button" : void 0,
-              "aria-label": `${dateStr}: ${cell.value}`,
+              "aria-label": `${cell.key}: ${cell.value}`,
               "aria-valuenow": level,
               "aria-valuemin": 0,
               "aria-valuemax": levelCount - 1,
-              onClick: interactive ? () => onCellClick?.(dateStr, cell.value) : void 0,
+              onClick: interactive ? () => onCellClick?.(cell.date, cell.value) : void 0,
               style: { width: cellSize, height: cellSize },
               className: cn(
                 "rounded-[2px] transition-colors",
@@ -3840,18 +3842,10 @@ var PDFViewer = forwardRef(function PDFViewer2({
     }
   );
 });
-function dateAtHour(base, hour, minute = 0) {
-  const c = new Date(base);
-  c.setHours(hour, minute, 0, 0);
-  return c;
-}
-function diffMinutes(a, b) {
-  return (b.getTime() - a.getTime()) / 6e4;
-}
 var ScheduleView = forwardRef(function ScheduleView2({
   resources,
   bookings,
-  date = /* @__PURE__ */ new Date(),
+  date = nowZoned(),
   hourRange = [8, 20],
   slotMinutes = 30,
   onBookingClick,
@@ -3863,7 +3857,10 @@ var ScheduleView = forwardRef(function ScheduleView2({
   const [startHour, endHour] = hourRange;
   const totalMinutes = (endHour - startHour) * 60;
   const slotCount = Math.ceil(totalMinutes / slotMinutes);
-  const dayStart = useMemo(() => dateAtHour(date, startHour), [date, startHour]);
+  const dayStart = useMemo(
+    () => zonedAtHour(date.toPlainDate(), startHour, date.timeZoneId),
+    [date, startHour]
+  );
   const bookingsByResource = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const b of bookings) {
@@ -3886,7 +3883,7 @@ var ScheduleView = forwardRef(function ScheduleView2({
       ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-raised flex border-b border-border bg-muted/40", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-32 shrink-0 border-r border-border px-3 py-2 text-xs font-medium text-muted-foreground", children: date.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-32 shrink-0 border-r border-border px-3 py-2 text-xs font-medium text-muted-foreground", children: date.toLocaleString(void 0, { weekday: "short", month: "short", day: "numeric" }) }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 grid", style: { gridTemplateColumns: `repeat(${endHour - startHour}, 1fr)` }, children: Array.from({ length: endHour - startHour }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "border-l border-border px-2 py-1 text-xs text-muted-foreground tabular-nums", children: [
             String((startHour + i) % 24).padStart(2, "0"),
             ":00"
@@ -3912,13 +3909,12 @@ var ScheduleView = forwardRef(function ScheduleView2({
                   className: "absolute inset-0 grid",
                   style: { gridTemplateColumns: `repeat(${slotCount}, 1fr)` },
                   children: Array.from({ length: slotCount }, (_, i) => {
-                    const slotTime = new Date(dayStart);
-                    slotTime.setMinutes(slotTime.getMinutes() + i * slotMinutes);
+                    const slotTime = dayStart.add({ minutes: i * slotMinutes });
                     return /* @__PURE__ */ jsx(
                       "button",
                       {
                         type: "button",
-                        "aria-label": `Empty slot at ${slotTime.toLocaleTimeString()}`,
+                        "aria-label": `Empty slot at ${formatZonedTime(slotTime)}`,
                         onClick: () => onSlotClick(resource.id, slotTime),
                         className: "hover:bg-primary-soft/30"
                       },
@@ -3928,8 +3924,8 @@ var ScheduleView = forwardRef(function ScheduleView2({
                 }
               ),
               items.map((booking) => {
-                const offsetMin = Math.max(0, diffMinutes(dayStart, booking.start));
-                const durMin = Math.max(15, diffMinutes(booking.start, booking.end));
+                const offsetMin = Math.max(0, minutesBetween(dayStart, booking.start));
+                const durMin = Math.max(15, minutesBetween(booking.start, booking.end));
                 const left = offsetMin / totalMinutes * 100;
                 const width = durMin / totalMinutes * 100;
                 const color = booking.color ?? resource.color;
@@ -3938,7 +3934,7 @@ var ScheduleView = forwardRef(function ScheduleView2({
                   {
                     type: "button",
                     role: "button",
-                    "aria-label": `${resource.label} ${booking.start.toLocaleTimeString()} \u2013 ${booking.end.toLocaleTimeString()}: ${booking.label ?? ""}`,
+                    "aria-label": `${resource.label} ${formatZonedTime(booking.start)} \u2013 ${formatZonedTime(booking.end)}: ${booking.label ?? ""}`,
                     onClick: (e) => {
                       e.stopPropagation();
                       onBookingClick?.(booking);
@@ -3957,9 +3953,9 @@ var ScheduleView = forwardRef(function ScheduleView2({
                     children: renderBooking ? renderBooking(booking) : /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx("div", { className: "truncate", children: booking.label ?? booking.id }),
                       /* @__PURE__ */ jsxs("div", { className: "text-[10px] opacity-70 tabular-nums", children: [
-                        booking.start.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+                        formatZonedTime(booking.start),
                         " \u2013 ",
-                        booking.end.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+                        formatZonedTime(booking.end)
                       ] })
                     ] })
                   },
@@ -3973,21 +3969,17 @@ var ScheduleView = forwardRef(function ScheduleView2({
     }
   );
 });
-var MS_PER_DAY = 24 * 60 * 60 * 1e3;
-function startOfDayLocal(d) {
-  const c = new Date(d);
-  c.setHours(0, 0, 0, 0);
-  return c;
+function minDate(a, b) {
+  return Temporal.PlainDate.compare(a, b) <= 0 ? a : b;
 }
-function dayDiff(a, b) {
-  return Math.round((startOfDayLocal(b).getTime() - startOfDayLocal(a).getTime()) / MS_PER_DAY);
+function maxDate(a, b) {
+  return Temporal.PlainDate.compare(a, b) >= 0 ? a : b;
 }
 function* eachDay(from, to) {
-  const cur = startOfDayLocal(from);
-  const end = startOfDayLocal(to);
-  while (cur <= end) {
-    yield new Date(cur);
-    cur.setDate(cur.getDate() + 1);
+  let cur = from;
+  while (Temporal.PlainDate.compare(cur, to) <= 0) {
+    yield cur;
+    cur = addDays(cur, 1);
   }
 }
 var Gantt = forwardRef(function Gantt2({
@@ -4006,20 +3998,19 @@ var Gantt = forwardRef(function Gantt2({
 }, ref) {
   const { from, to, totalDays } = useMemo(() => {
     if (tasks.length === 0) {
-      const now = /* @__PURE__ */ new Date();
+      const now = today();
       return { from: now, to: now, totalDays: 1 };
     }
-    const minStart = fromProp ?? new Date(Math.min(...tasks.map((t) => t.start.getTime())));
-    const maxEnd = toProp ?? new Date(Math.max(...tasks.map((t) => t.end.getTime())));
+    const minStart = fromProp ?? tasks.map((t) => t.start).reduce(minDate);
+    const maxEnd = toProp ?? tasks.map((t) => t.end).reduce(maxDate);
     return {
-      from: startOfDayLocal(minStart),
-      to: startOfDayLocal(maxEnd),
-      totalDays: dayDiff(minStart, maxEnd) + 1
+      from: minStart,
+      to: maxEnd,
+      totalDays: daysBetween(minStart, maxEnd) + 1
     };
   }, [tasks, fromProp, toProp]);
   const headerDates = useMemo(() => Array.from(eachDay(from, to)), [from, to]);
-  const today = startOfDayLocal(/* @__PURE__ */ new Date());
-  const todayOffset = dayDiff(from, today);
+  const todayOffset = daysBetween(from, today());
   const todayInRange = todayOffset >= 0 && todayOffset < totalDays;
   const taskIndex = useMemo(() => new Map(tasks.map((t, i) => [t.id, i])), [tasks]);
   const timelineWidth = totalDays * cellWidth;
@@ -4047,28 +4038,28 @@ var Gantt = forwardRef(function Gantt2({
         /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-x-auto", style: { minWidth: 0 }, children: [
           /* @__PURE__ */ jsxs("div", { style: { width: timelineWidth }, children: [
             /* @__PURE__ */ jsx("div", { className: "flex border-b border-border", style: { height: rowHeight }, children: headerDates.map((d, i) => {
-              const isWeekend = d.getDay() === 0 || d.getDay() === 6;
-              const isFirstOfMonth = d.getDate() === 1;
+              const weekend = isWeekend(d);
+              const isFirstOfMonth = d.day === 1;
               return /* @__PURE__ */ jsxs(
                 "div",
                 {
                   className: cn(
                     "border-r border-border text-[10px] tabular-nums",
-                    isWeekend && hasWeekends && "bg-muted/40",
+                    weekend && hasWeekends && "bg-muted/40",
                     isFirstOfMonth && "border-l-2 border-l-border-strong"
                   ),
                   style: { width: cellWidth },
                   children: [
-                    isFirstOfMonth && /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-muted px-1 py-0.5 text-center font-medium text-muted-foreground", children: d.toLocaleDateString(void 0, { month: "short", year: "2-digit" }) }),
-                    /* @__PURE__ */ jsx("div", { className: "px-1 py-0.5 text-center text-muted-foreground", children: d.getDate() })
+                    isFirstOfMonth && /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-muted px-1 py-0.5 text-center font-medium text-muted-foreground", children: d.toLocaleString(void 0, { month: "short", year: "2-digit" }) }),
+                    /* @__PURE__ */ jsx("div", { className: "px-1 py-0.5 text-center text-muted-foreground", children: d.day })
                   ]
                 },
                 i
               );
             }) }),
             tasks.map((task) => {
-              const offset = dayDiff(from, task.start);
-              const length = Math.max(1, dayDiff(task.start, task.end) + 1);
+              const offset = daysBetween(from, task.start);
+              const length = Math.max(1, daysBetween(task.start, task.end) + 1);
               const left = offset * cellWidth;
               const width = length * cellWidth;
               const progress = task.progress ?? 0;
@@ -4079,14 +4070,14 @@ var Gantt = forwardRef(function Gantt2({
                   style: { height: rowHeight },
                   children: [
                     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex pointer-events-none", children: headerDates.map((d, i) => {
-                      const isWeekend = d.getDay() === 0 || d.getDay() === 6;
+                      const weekend = isWeekend(d);
                       return /* @__PURE__ */ jsx(
                         "div",
                         {
                           style: { width: cellWidth },
                           className: cn(
                             "border-r border-border/60",
-                            isWeekend && hasWeekends && "bg-muted/30"
+                            weekend && hasWeekends && "bg-muted/30"
                           )
                         },
                         i
@@ -4097,7 +4088,7 @@ var Gantt = forwardRef(function Gantt2({
                       {
                         type: "button",
                         role: "button",
-                        "aria-label": `${typeof task.label === "string" ? task.label : task.id}: ${task.start.toLocaleDateString()} \u2013 ${task.end.toLocaleDateString()}`,
+                        "aria-label": `${typeof task.label === "string" ? task.label : task.id}: ${task.start.toLocaleString()} \u2013 ${task.end.toLocaleString()}`,
                         onClick: () => onTaskClick?.(task),
                         style: {
                           left: left + 4,
@@ -4146,9 +4137,9 @@ var Gantt = forwardRef(function Gantt2({
                   if (fromIdx == null || toIdx == null) return null;
                   const fromTask = tasks[fromIdx];
                   const toTask = tasks[toIdx];
-                  const fromX = (dayDiff(from, fromTask.end) + 1) * cellWidth;
+                  const fromX = (daysBetween(from, fromTask.end) + 1) * cellWidth;
                   const fromY = fromIdx * rowHeight + rowHeight / 2;
-                  const toX = dayDiff(from, toTask.start) * cellWidth;
+                  const toX = daysBetween(from, toTask.start) * cellWidth;
                   const toY = toIdx * rowHeight + rowHeight / 2;
                   const midX = Math.max(fromX + 8, (fromX + toX) / 2);
                   const path = `M ${fromX} ${fromY} L ${midX} ${fromY} L ${midX} ${toY} L ${toX - 4} ${toY}`;
@@ -4164,7 +4155,7 @@ var Gantt = forwardRef(function Gantt2({
                   ] }, i);
                 }),
                 milestones.map((m) => {
-                  const x = dayDiff(from, m.date) * cellWidth + cellWidth / 2;
+                  const x = daysBetween(from, m.date) * cellWidth + cellWidth / 2;
                   return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
                     "polygon",
                     {
@@ -4194,38 +4185,10 @@ var Gantt = forwardRef(function Gantt2({
     }
   );
 });
-function startOfDay(d) {
-  const c = new Date(d);
-  c.setHours(0, 0, 0, 0);
-  return c;
-}
-function isSameDay(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function isToday(d) {
-  return isSameDay(d, /* @__PURE__ */ new Date());
-}
-function addDays(d, n) {
-  const c = new Date(d);
-  c.setDate(c.getDate() + n);
-  return c;
-}
-function addMonths(d, n) {
-  const c = new Date(d);
-  c.setMonth(d.getMonth() + n, d.getDate());
-  return c;
-}
 function startOfWeek(d, weekStart) {
-  const c = startOfDay(d);
-  const diff = (c.getDay() - weekStart + 7) % 7;
-  c.setDate(c.getDate() - diff);
-  return c;
-}
-function isInRange(d, start, end) {
-  return d >= startOfDay(start) && d <= startOfDay(end);
-}
-function minutesSince(reference, target) {
-  return (target.getTime() - reference.getTime()) / 6e4;
+  const sundayIdx = d.dayOfWeek % 7;
+  const diff = (sundayIdx - weekStart + 7) % 7;
+  return d.subtract({ days: diff });
 }
 var EventCalendar = forwardRef(
   function EventCalendar2({
@@ -4250,57 +4213,60 @@ var EventCalendar = forwardRef(
     });
     const [date, setDate] = useControlled({
       controlled: dateProp,
-      default: defaultDate ?? /* @__PURE__ */ new Date(),
+      default: defaultDate ?? nowZoned(),
       onChange: onDateChange
     });
+    const focusDay = useMemo(() => date.toPlainDate(), [date]);
     const sortedEvents = useMemo(
-      () => [...events].sort((a, b) => a.start.getTime() - b.start.getTime()),
+      () => [...events].sort(
+        (a, b) => Temporal.ZonedDateTime.compare(a.start, b.start)
+      ),
       [events]
     );
     const goPrev = () => {
       switch (view) {
         case "month":
-          setDate(addMonths(date, -1));
+          setDate(date.add({ months: -1 }));
           break;
         case "week":
-          setDate(addDays(date, -7));
+          setDate(date.add({ days: -7 }));
           break;
         case "day":
         case "agenda":
-          setDate(addDays(date, -1));
+          setDate(date.add({ days: -1 }));
           break;
       }
     };
     const goNext = () => {
       switch (view) {
         case "month":
-          setDate(addMonths(date, 1));
+          setDate(date.add({ months: 1 }));
           break;
         case "week":
-          setDate(addDays(date, 7));
+          setDate(date.add({ days: 7 }));
           break;
         case "day":
         case "agenda":
-          setDate(addDays(date, 1));
+          setDate(date.add({ days: 1 }));
           break;
       }
     };
-    const goToday = () => setDate(/* @__PURE__ */ new Date());
+    const goToday = () => setDate(nowZoned());
     const title = useMemo(() => {
       switch (view) {
         case "month":
-          return `${MONTHS_LONG[date.getMonth()]} ${date.getFullYear()}`;
+          return `${MONTHS_LONG[focusDay.month - 1]} ${focusDay.year}`;
         case "week": {
-          const ws = startOfWeek(date, weekStart);
+          const ws = startOfWeek(focusDay, weekStart);
           const we = addDays(ws, 6);
-          return `${ws.toLocaleDateString(void 0, { month: "short", day: "numeric" })} \u2013 ${we.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" })}`;
+          return `${ws.toLocaleString(void 0, { month: "short", day: "numeric" })} \u2013 ${we.toLocaleString(void 0, { month: "short", day: "numeric", year: "numeric" })}`;
         }
         case "day":
-          return date.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
+          return focusDay.toLocaleString(void 0, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
         case "agenda":
-          return `Upcoming from ${date.toLocaleDateString(void 0, { month: "short", day: "numeric" })}`;
+          return `Upcoming from ${focusDay.toLocaleString(void 0, { month: "short", day: "numeric" })}`;
       }
-    }, [view, date, weekStart]);
+    }, [view, focusDay, weekStart]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -4359,7 +4325,8 @@ var EventCalendar = forwardRef(
             view === "month" && /* @__PURE__ */ jsx(
               MonthView,
               {
-                date,
+                focusDay,
+                timeZone: date.timeZoneId,
                 events: sortedEvents,
                 weekStart,
                 onEventClick,
@@ -4369,10 +4336,10 @@ var EventCalendar = forwardRef(
             view === "week" && /* @__PURE__ */ jsx(
               TimeGridView,
               {
-                date,
+                timeZone: date.timeZoneId,
                 events: sortedEvents,
                 days: 7,
-                firstDay: startOfWeek(date, weekStart),
+                firstDay: startOfWeek(focusDay, weekStart),
                 hourRange,
                 onEventClick,
                 onSlotClick
@@ -4381,33 +4348,32 @@ var EventCalendar = forwardRef(
             view === "day" && /* @__PURE__ */ jsx(
               TimeGridView,
               {
-                date,
+                timeZone: date.timeZoneId,
                 events: sortedEvents,
                 days: 1,
-                firstDay: startOfDay(date),
+                firstDay: focusDay,
                 hourRange,
                 onEventClick,
                 onSlotClick
               }
             ),
-            view === "agenda" && /* @__PURE__ */ jsx(AgendaView, { date, events: sortedEvents, onEventClick })
+            view === "agenda" && /* @__PURE__ */ jsx(AgendaView, { focusDay, events: sortedEvents, onEventClick })
           ] })
         ]
       }
     );
   }
 );
-function MonthView({ date, events, weekStart, onEventClick, onSlotClick }) {
+function MonthView({ focusDay, timeZone, events, weekStart, onEventClick, onSlotClick }) {
   const weekdayHeaders = Array.from({ length: 7 }, (_, i) => WEEKDAYS_SHORT[(i + weekStart) % 7]);
-  const month = date.getMonth();
-  const first = new Date(date.getFullYear(), month, 1);
-  const lead = (first.getDay() - weekStart + 7) % 7;
-  const gridStart = addDays(first, -lead);
+  const month = focusDay.month;
+  const first = focusDay.with({ day: 1 });
+  const gridStart = startOfWeek(first, weekStart);
   const cells = Array.from({ length: 42 }, (_, i) => {
-    const d = addDays(gridStart, i);
-    return { date: d, outOfMonth: d.getMonth() !== month };
+    const day = gridStart.add({ days: i });
+    return { day, outOfMonth: day.month !== month };
   });
-  const eventsForDay = (d) => events.filter((e) => isInRange(d, e.start, e.end));
+  const eventsForDay = (day) => events.filter((e) => isZonedDayInRange(startOfCellInstant(day, timeZone), e.start, e.end));
   return /* @__PURE__ */ jsxs("div", { className: "grid h-full grid-cols-7 border-l border-t border-border", children: [
     weekdayHeaders.map((wd) => /* @__PURE__ */ jsx(
       "div",
@@ -4418,14 +4384,14 @@ function MonthView({ date, events, weekStart, onEventClick, onSlotClick }) {
       wd
     )),
     cells.map((cell, i) => {
-      const cellEvents = eventsForDay(cell.date);
+      const cellEvents = eventsForDay(cell.day);
       return /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
             "flex flex-col border-b border-r border-border p-1 text-xs",
             cell.outOfMonth && "bg-muted/20",
-            isToday(cell.date) && "bg-primary-soft/20"
+            isToday(cell.day) && "bg-primary-soft/20"
           ),
           style: { minHeight: 96 },
           children: [
@@ -4433,14 +4399,14 @@ function MonthView({ date, events, weekStart, onEventClick, onSlotClick }) {
               "button",
               {
                 type: "button",
-                onClick: () => onSlotClick?.(cell.date),
+                onClick: () => onSlotClick?.(cell.day),
                 className: cn(
                   "mb-1 self-start rounded-sm px-1 text-xs tabular-nums transition-colors",
                   cell.outOfMonth ? "text-muted-foreground" : "text-foreground",
-                  isToday(cell.date) && "bg-primary text-primary-foreground",
+                  isToday(cell.day) && "bg-primary text-primary-foreground",
                   "hover:bg-muted"
                 ),
-                children: cell.date.getDate()
+                children: cell.day.day
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
@@ -4457,7 +4423,7 @@ function MonthView({ date, events, weekStart, onEventClick, onSlotClick }) {
                     "truncate rounded-sm px-1.5 py-0.5 text-left text-[11px] font-medium transition-colors hover:brightness-95",
                     !e.color && "bg-primary-soft text-primary-soft-foreground"
                   ),
-                  "aria-label": `${typeof e.title === "string" ? e.title : e.id} at ${e.start.toLocaleTimeString()}`,
+                  "aria-label": `${typeof e.title === "string" ? e.title : e.id} at ${formatZonedTime(e.start)}`,
                   children: [
                     e.isAllDay ? "\u2022 " : "",
                     e.title ?? "(no title)"
@@ -4478,13 +4444,17 @@ function MonthView({ date, events, weekStart, onEventClick, onSlotClick }) {
     })
   ] });
 }
-function TimeGridView({ events, days, firstDay, hourRange, onEventClick, onSlotClick }) {
+function startOfCellInstant(day, timeZone) {
+  return zonedAtHour(day, 0, timeZone);
+}
+function TimeGridView({ timeZone, events, days, firstDay, hourRange, onEventClick, onSlotClick }) {
   const [startHour, endHour] = hourRange;
   const visibleHours = endHour - startHour;
   const HOUR_PX = 48;
-  const dayDates = Array.from({ length: days }, (_, i) => addDays(firstDay, i));
-  const eventsForDay = (d) => events.filter((e) => !e.isAllDay && isSameDay(d, e.start));
-  const allDayForDay = (d) => events.filter((e) => e.isAllDay && isInRange(d, e.start, e.end));
+  const dayDates = Array.from({ length: days }, (_, i) => firstDay.add({ days: i }));
+  const eventsForDay = (day) => events.filter((e) => !e.isAllDay && isZonedOnDay(e.start, day));
+  const allDayForDay = (day) => events.filter((e) => e.isAllDay && isZonedDayInRange(startOfCellInstant(day, timeZone), e.start, e.end));
+  const now = nowZoned();
   return /* @__PURE__ */ jsxs("div", { className: "flex", children: [
     /* @__PURE__ */ jsxs("div", { className: "w-14 shrink-0 border-r border-border", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 border-b border-border bg-muted/40" }),
@@ -4510,7 +4480,7 @@ function TimeGridView({ events, days, firstDay, hourRange, onEventClick, onSlotC
             "h-6 border-b border-r border-border bg-muted/40 px-2 text-xs font-medium",
             isToday(d) && "bg-primary-soft/30"
           ),
-          children: d.toLocaleDateString(void 0, { weekday: "short", day: "numeric" })
+          children: d.toLocaleString(void 0, { weekday: "short", day: "numeric" })
         },
         `h-${i}`
       )),
@@ -4543,8 +4513,8 @@ function TimeGridView({ events, days, firstDay, hourRange, onEventClick, onSlotC
       }),
       dayDates.map((d, di) => {
         const list = eventsForDay(d);
-        const dayStart = new Date(d);
-        dayStart.setHours(startHour, 0, 0, 0);
+        const dayStart = zonedAtHour(d, startHour, timeZone);
+        const dayEnd = zonedAtHour(d, endHour, timeZone);
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -4561,8 +4531,7 @@ function TimeGridView({ events, days, firstDay, hourRange, onEventClick, onSlotC
                 i
               )),
               isToday(d) && (() => {
-                const now = /* @__PURE__ */ new Date();
-                const minutes = now.getHours() * 60 + now.getMinutes() - startHour * 60;
+                const minutes = minutesBetween(dayStart, now);
                 if (minutes < 0 || minutes > visibleHours * 60) return null;
                 const top = minutes / 60 * HOUR_PX;
                 return /* @__PURE__ */ jsx(
@@ -4575,12 +4544,10 @@ function TimeGridView({ events, days, firstDay, hourRange, onEventClick, onSlotC
                 );
               })(),
               list.map((e) => {
-                const start = e.start < dayStart ? dayStart : e.start;
-                const dayEnd = new Date(d);
-                dayEnd.setHours(endHour, 0, 0, 0);
-                const end = e.end > dayEnd ? dayEnd : e.end;
-                const topMin = minutesSince(dayStart, start);
-                const durMin = Math.max(15, minutesSince(start, end));
+                const start = maxZoned(e.start, dayStart);
+                const end = minZoned(e.end, dayEnd);
+                const topMin = minutesBetween(dayStart, start);
+                const durMin = Math.max(15, minutesBetween(start, end));
                 const top = topMin / 60 * HOUR_PX;
                 const height = durMin / 60 * HOUR_PX;
                 return /* @__PURE__ */ jsxs(
@@ -4604,7 +4571,7 @@ function TimeGridView({ events, days, firstDay, hourRange, onEventClick, onSlotC
                     ),
                     children: [
                       /* @__PURE__ */ jsx("div", { className: "truncate", children: e.title ?? "(no title)" }),
-                      /* @__PURE__ */ jsx("div", { className: "text-[10px] opacity-80 tabular-nums", children: start.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+                      /* @__PURE__ */ jsx("div", { className: "text-[10px] opacity-80 tabular-nums", children: formatZonedTime(start) })
                     ]
                   },
                   e.id
@@ -4618,12 +4585,16 @@ function TimeGridView({ events, days, firstDay, hourRange, onEventClick, onSlotC
     ] }) })
   ] });
 }
-function AgendaView({ date, events, onEventClick }) {
-  const horizon = addDays(date, 30);
-  const upcoming = events.filter((e) => e.end >= date && e.start <= horizon);
+function AgendaView({ focusDay, events, onEventClick }) {
+  const horizon = focusDay.add({ days: 30 });
+  const upcoming = events.filter((e) => {
+    const startDay = e.start.toPlainDate();
+    const endDay = e.end.toPlainDate();
+    return Temporal.PlainDate.compare(endDay, focusDay) >= 0 && Temporal.PlainDate.compare(startDay, horizon) <= 0;
+  });
   const groups = /* @__PURE__ */ new Map();
   for (const e of upcoming) {
-    const key = e.start.toDateString();
+    const key = e.start.toPlainDate().toString();
     const list = groups.get(key);
     if (list) list.push(e);
     else groups.set(key, [e]);
@@ -4632,16 +4603,16 @@ function AgendaView({ date, events, onEventClick }) {
     return /* @__PURE__ */ jsx("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "No upcoming events." });
   }
   return /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border", children: Array.from(groups.entries()).map(([key, list]) => {
-    const groupDate = list[0].start;
+    const groupDay = list[0].start.toPlainDate();
     return /* @__PURE__ */ jsxs("li", { className: "px-4 py-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
             "mb-2 text-xs font-semibold uppercase text-muted-foreground",
-            isToday(groupDate) && "text-primary"
+            isToday(groupDay) && "text-primary"
           ),
-          children: groupDate.toLocaleDateString(void 0, {
+          children: groupDay.toLocaleString(void 0, {
             weekday: "long",
             month: "short",
             day: "numeric"
@@ -4665,7 +4636,7 @@ function AgendaView({ date, events, onEventClick }) {
             ),
             /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
               /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium", children: e.title ?? "(no title)" }),
-              /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground tabular-nums", children: e.isAllDay ? "All day" : `${e.start.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} \u2013 ${e.end.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}` })
+              /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground tabular-nums", children: e.isAllDay ? "All day" : `${formatZonedTime(e.start)} \u2013 ${formatZonedTime(e.end)}` })
             ] })
           ]
         }
@@ -5966,5 +5937,5 @@ var Sortable = Object.assign(SortableRoot, {
 });
 
 export { Accordion2 as Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, ActivityItem, AnimatedNumber, AnnotationMarker, AudioPlayer, AudioWaveform, Avatar, AvatarGroup, Badge, BadgeOverlay, Card, Carousel2 as Carousel, CarouselDot, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, CarouselSlides, CarouselViewport, ChatBubble, Code, Collapsible2 as Collapsible, CollapsibleContent, CollapsibleTrigger, Comment, CommentThread, Confetti, CountBadge, CountUp, DataGrid, DataTable, DaySeparator, DescriptionList, DiffViewer, EmptyState, EventCalendar, Eyebrow, FeatureCard, Gantt, GradientText, Heading, HeatmapCalendar, Highlight, Image, InfoRow, KeyboardShortcut, List2 as List, ListItem, Mark, Marquee, MessageList, MetaInline, MetricChip, NodeEditor, NotificationDot, PDFViewer, PricingCard, Quote, ReactionBar, ScheduleView, ScrollReveal, SectionHeader, Separator, Snippet, Sortable, Sparkline, Stat, Status, StepCard, SwipeActions, Table2 as Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeaderCell, TableRow, Tabs2 as Tabs, TabsList, TabsPanel, TabsTab, Text, ThreadView, Tilt, Timeline2 as Timeline, TimelineDescription, TimelineItem, TimelineTitle, Tree2 as Tree, TreeGroup, TreeItem, Typewriter, VideoPlayer, avatarVariants, badgeVariants, codeVariants, headingVariants, textVariants };
-//# sourceMappingURL=chunk-X3JVVEUJ.js.map
-//# sourceMappingURL=chunk-X3JVVEUJ.js.map
+//# sourceMappingURL=chunk-UFTKE5U7.js.map
+//# sourceMappingURL=chunk-UFTKE5U7.js.map