@memobit/libs 3.1.5 → 3.2.0

package/dist/components/Chip/Chip.css

@@ -1 +1 @@
-.chip{--chip-color:var(--body-accent-color);justify-content:center;align-items:center;gap:var(--spacing-8);border:var(--spacing-1) solid var(--delimiter-color);max-width:100%;color:var(--body-color);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);background:0 0;border-radius:999px;transition:background .2s,border-color .2s,color .2s;display:inline-flex}.chip:hover:not(:disabled){border-color:var(--chip-hover-border-color,var(--chip-color));background:var(--chip-hover-background-color,var(--card-background-accent-color));color:var(--chip-hover-color,var(--body-color-accent))}.chip:disabled{cursor:not-allowed;opacity:.6}.chip--selected,.chip--selected:hover:not(:disabled){border-color:var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color))}.chip--plain{background:0 0;border-color:#0000}.chip--default{--chip-color:var(--body-accent-color)}.chip--info{--chip-color:var(--button-info-background-color)}.chip--success{--chip-color:var(--button-success-background-color)}.chip--warning{--chip-color:var(--button-warning-background-color)}.chip--danger{--chip-color:var(--button-danger-background-color)}.chip--custom.chip--selected,.chip--info.chip--selected,.chip--success.chip--selected,.chip--warning.chip--selected,.chip--danger.chip--selected,.chip--custom.chip--selected:hover:not(:disabled),.chip--info.chip--selected:hover:not(:disabled),.chip--success.chip--selected:hover:not(:disabled),.chip--warning.chip--selected:hover:not(:disabled),.chip--danger.chip--selected:hover:not(:disabled){border-color:var(--chip-color);background:color-mix(in srgb, var(--chip-color) 18%, transparent);color:var(--chip-color)}.chip--custom{background:color-mix(in srgb, var(--chip-color) 22%, transparent);color:var(--body-color)}.chip--custom:hover:not(:disabled){background:color-mix(in srgb, var(--chip-color) 32%, transparent)}.chip--custom.chip--selected,.chip--custom.chip--selected:hover:not(:disabled){background:var(--chip-color);border-color:var(--chip-color);color:var(--button-default-color,white)}.chip--xsmall{min-height:var(--spacing-20);gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);font-size:var(--font-size-xxs)}.chip--small{min-height:var(--spacing-24);gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-12);font-size:var(--font-size-xs)}.chip--medium{min-height:var(--spacing-32);gap:var(--spacing-8);padding:var(--spacing-8) 14px;font-size:var(--font-size-sm)}.chip--large{min-height:var(--spacing-40);gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-20);font-size:var(--font-size-md)}.chip__swatch{background-color:var(--chip-color);border-radius:999px;flex-shrink:0;width:10px;height:10px}.chip__label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.chip__count{color:var(--body-color-muted);font-size:var(--font-size-xs);flex-shrink:0}.chip>.icon{flex-shrink:0}.chip--selected .chip__count{color:var(--chip-selected-count-color,var(--body-color-muted))}.chip--xsmall .chip__swatch{width:var(--spacing-4);height:var(--spacing-4)}.chip--small .chip__swatch{width:var(--spacing-8);height:var(--spacing-8)}.chip--large .chip__swatch{width:var(--spacing-12);height:var(--spacing-12)}.chip--xsmall .chip__count{font-size:var(--font-size-xxs)}.chip--large .chip__count{font-size:var(--font-size-sm)}
+.chip{--chip-color:var(--body-accent-color);justify-content:center;align-items:center;gap:var(--spacing-8);border:var(--spacing-1) solid var(--delimiter-color);max-width:100%;color:var(--body-color);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);background:0 0;border-radius:999px;transition:background .2s,border-color .2s,color .2s;display:inline-flex}.chip:hover:not(:disabled){border-color:var(--chip-hover-border-color,var(--chip-color));background:var(--chip-hover-background-color,var(--card-background-accent-color));color:var(--chip-hover-color,var(--body-color-accent))}.chip:disabled{cursor:not-allowed;opacity:.6}.chip--selected,.chip--selected:hover:not(:disabled){border-color:var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color))}.chip--plain{background:0 0;border-color:#0000}.chip--default{--chip-color:var(--body-accent-color)}.chip--info{--chip-color:var(--button-info-background-color)}.chip--success{--chip-color:var(--button-success-background-color)}.chip--warning{--chip-color:var(--button-warning-background-color)}.chip--danger{--chip-color:var(--button-danger-background-color)}.chip--custom.chip--selected,.chip--info.chip--selected,.chip--success.chip--selected,.chip--warning.chip--selected,.chip--danger.chip--selected,.chip--custom.chip--selected:hover:not(:disabled),.chip--info.chip--selected:hover:not(:disabled),.chip--success.chip--selected:hover:not(:disabled),.chip--warning.chip--selected:hover:not(:disabled),.chip--danger.chip--selected:hover:not(:disabled){border-color:var(--chip-color);background:color-mix(in srgb, var(--chip-color) 18%, transparent);color:var(--chip-color)}.chip--custom{background:color-mix(in srgb, var(--chip-color) 22%, transparent);color:var(--body-color)}.chip--custom:hover:not(:disabled){background:color-mix(in srgb, var(--chip-color) 32%, transparent)}.chip--custom.chip--selected,.chip--custom.chip--selected:hover:not(:disabled){background:var(--chip-color);border-color:var(--chip-color);color:var(--button-default-color,white)}.chip--xsmall{min-height:var(--spacing-20);gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);font-size:var(--font-size-xxs)}.chip--small{min-height:var(--spacing-24);gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-12);font-size:var(--font-size-xs)}.chip--medium{min-height:var(--spacing-32);gap:var(--spacing-8);padding:var(--spacing-8) 14px;font-size:var(--font-size-sm)}.chip--large{min-height:var(--spacing-40);gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-20);font-size:var(--font-size-md)}.chip__swatch{background-color:var(--chip-color);width:10px;height:10px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--body-color) 30%, transparent);border-radius:999px;flex-shrink:0}.chip__label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.chip__count{color:var(--body-color-muted);font-size:var(--font-size-xs);flex-shrink:0}.chip>.icon{flex-shrink:0}.chip--selected .chip__count{color:var(--chip-selected-count-color,var(--body-color-muted))}.chip--xsmall .chip__swatch{width:var(--spacing-4);height:var(--spacing-4)}.chip--small .chip__swatch{width:var(--spacing-8);height:var(--spacing-8)}.chip--large .chip__swatch{width:var(--spacing-12);height:var(--spacing-12)}.chip--xsmall .chip__count{font-size:var(--font-size-xxs)}.chip--large .chip__count{font-size:var(--font-size-sm)}

package/dist/components/ColorPicker/ColorPicker.css

@@ -1 +1 @@
-.color-picker{gap:var(--spacing-12);border:1px solid var(--delimiter-color);border-radius:var(--radius);padding:var(--spacing-16);background:var(--card-background-color);flex-direction:column;width:320px;display:flex}.color-picker__swatches{gap:var(--spacing-6);flex-direction:column;display:flex}.color-picker__swatches-label{font-size:var(--font-size-xxs);color:var(--body-sub-title-color)}.color-picker__swatches-row{gap:var(--spacing-6);flex-wrap:wrap;display:flex}.color-picker__swatch{width:var(--spacing-20);height:var(--spacing-20);border:1px solid var(--delimiter-color);cursor:pointer;transition:transform var(--transition-fast);border-radius:50%;padding:0}.color-picker__swatch:hover{transform:scale(1.15)}.color-picker__swatch.is-selected{outline:2px solid var(--body-accent-color);outline-offset:2px}.color-picker__preview{border-radius:var(--radius);border:1px solid var(--delimiter-color);width:100%;height:40px}.color-picker__controls{gap:var(--spacing-12);flex-direction:column;display:flex}.color-picker__sv{border-radius:var(--radius);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:180px;position:relative;overflow:hidden}.color-picker__sv-white,.color-picker__sv-black{position:absolute;inset:0}.color-picker__sv-white{background:linear-gradient(90deg,#fff,#fff0)}.color-picker__sv-black{background:linear-gradient(#0000,#000)}.color-picker__sv-handle{border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-6px,-6px);box-shadow:0 0 0 1px #0000004d}.color-picker__slider input[type=range]{width:100%}.color-picker__mode-toggle{gap:var(--spacing-8);display:flex}.color-picker__mode-toggle .button{padding:6px 10px}.color-picker__mode-toggle .button.is-active{border:1px solid var(--body-accent-color);color:var(--body-accent-color)}.color-picker__fields{gap:var(--spacing-8);grid-template-columns:1fr;display:grid}.color-picker__fields .input-text-wrapper,.color-picker__fields .input-number-wrapper{width:100%}.color-picker__fields--rgb,.color-picker__fields--hsl,.color-picker__fields--hex{grid-template-columns:repeat(3,1fr)}.color-picker__fields--hex .input-text-wrapper{grid-column:span 3}
+.color-picker{gap:var(--spacing-12);border:1px solid var(--delimiter-color);border-radius:var(--radius);padding:var(--spacing-16);background:var(--card-background-color);flex-direction:column;width:320px;display:flex}.color-picker__swatches{gap:var(--spacing-6);flex-direction:column;display:flex}.color-picker__swatches-label{font-size:var(--font-size-xxs);color:var(--body-sub-title-color)}.color-picker__swatches-row{gap:var(--spacing-6);flex-wrap:wrap;display:flex}.color-picker__swatch{width:var(--spacing-20);height:var(--spacing-20);border:1px solid color-mix(in srgb, var(--body-color) 30%, transparent);cursor:pointer;transition:transform var(--transition-fast);border-radius:50%;padding:0}.color-picker__swatch:hover{transform:scale(1.15)}.color-picker__swatch.is-selected{outline:2px solid var(--body-accent-color);outline-offset:2px}.color-picker__preview{border-radius:var(--radius);border:1px solid var(--delimiter-color);width:100%;height:40px}.color-picker__controls{gap:var(--spacing-12);flex-direction:column;display:flex}.color-picker__sv{border-radius:var(--radius);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:180px;position:relative;overflow:hidden}.color-picker__sv-white,.color-picker__sv-black{position:absolute;inset:0}.color-picker__sv-white{background:linear-gradient(90deg,#fff,#fff0)}.color-picker__sv-black{background:linear-gradient(#0000,#000)}.color-picker__sv-handle{border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-6px,-6px);box-shadow:0 0 0 1px #0000004d}.color-picker__slider input[type=range]{width:100%}.color-picker__mode-toggle{gap:var(--spacing-8);display:flex}.color-picker__mode-toggle .button{padding:6px 10px}.color-picker__mode-toggle .button.is-active{border:1px solid var(--body-accent-color);color:var(--body-accent-color)}.color-picker__fields{gap:var(--spacing-8);grid-template-columns:1fr;display:grid}.color-picker__fields .input-text-wrapper,.color-picker__fields .input-number-wrapper{width:100%}.color-picker__fields--rgb,.color-picker__fields--hsl,.color-picker__fields--hex{grid-template-columns:repeat(3,1fr)}.color-picker__fields--hex .input-text-wrapper{grid-column:span 3}

package/dist/components/EventCalendar/EventCalendar.Month.js

@@ -1,9 +1,9 @@
-import { getIsoWeek as J, getMonthMatrix as Q, isSameDay as R, isToday as U, isWeekend as V } from "../../helpers/Datetime.js";
-import { bucketEventsByDay as W } from "./EventCalendar.helpers.js";
-import { EventCalendarChip as X } from "./EventCalendar.Chip.js";
-import { useMemo as c, useState as T } from "react";
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
-var p = [
+import { getIsoWeek as ae, getMonthMatrix as re, isSameDay as oe, isToday as ce, isWeekend as le } from "../../helpers/Datetime.js";
+import { bucketEventsByDay as se, isMultiDayEvent as ie, layoutWeekSpans as de, startOfDay as g } from "./EventCalendar.helpers.js";
+import { EventCalendarChip as z } from "./EventCalendar.Chip.js";
+import { useCallback as M, useEffect as ue, useMemo as d, useState as T } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var C = [
   "Sun",
   "Mon",
   "Tue",
@@ -12,107 +12,169 @@ var p = [
   "Fri",
   "Sat"
 ];
-function ae({ date: s, dragEnabled: g, draggingId: b, emptyLabel: k, events: m, firstDayOfWeek: d, maxEventsPerDay: D, onDayClick: N, onDragEnd: j, onDragStart: B, onDrop: $, onEventClick: A, onOpenDay: i, renderEvent: F, showWeekNumbers: y }) {
-  const [L, w] = T(null), [P, v] = T(null), u = c(() => Q(s.getFullYear(), s.getMonth(), d), [s, d]), M = c(() => u.flat(), [u]), f = c(() => W(m, M), [m, M]), Y = c(() => new Map(f.map((n) => [n.date.toDateString(), n])), [f]), K = c(() => d === 1 ? [...p.slice(1), p[0]] : p, [d]), q = s.getMonth(), z = m.length > 0, G = /* @__PURE__ */ new Date(), H = (n, o) => {
-    n.preventDefault(), v(null), $(o, !0);
-  }, I = (n, o) => {
-    !g || b === null || (n.preventDefault(), n.dataTransfer.dropEffect = "move", v(o));
+function ge({ date: u, dragEnabled: f, draggingId: w, emptyLabel: x, events: m, firstDayOfWeek: v, maxEventsPerDay: E, onDayClick: S, onDragEnd: $, onDragStart: L, onDrop: G, onEventClick: P, onOpenDay: _, onRangeSelect: h, renderEvent: j, showWeekNumbers: B }) {
+  const [H, A] = T(null), [J, D] = T(null), [r, b] = T(null);
+  ue(() => {
+    if (!r) return;
+    const e = () => {
+      if (r.anchor.getTime() !== r.focus.getTime()) {
+        const [a, i] = [r.anchor, r.focus].sort((l, N) => l.getTime() - N.getTime());
+        h?.({
+          start: a,
+          end: i
+        });
+      }
+      b(null);
+    };
+    return window.addEventListener("pointerup", e), window.addEventListener("pointercancel", e), () => {
+      window.removeEventListener("pointerup", e), window.removeEventListener("pointercancel", e);
+    };
+  }, [h, r]);
+  const Q = M((e, a) => {
+    !h || e.button !== 0 || e.target.closest(".event-calendar__chip, button") || b({
+      anchor: g(a),
+      focus: g(a)
+    });
+  }, [h]), U = M((e) => {
+    b((a) => a && {
+      ...a,
+      focus: g(e)
+    });
+  }, []), V = M((e) => {
+    if (!r) return !1;
+    const a = g(e).getTime(), i = Math.min(r.anchor.getTime(), r.focus.getTime()), l = Math.max(r.anchor.getTime(), r.focus.getTime());
+    return a >= i && a <= l;
+  }, [r]), y = d(() => re(u.getFullYear(), u.getMonth(), v), [u, v]), F = d(() => y.flat(), [y]), I = d(() => se(m, F), [m, F]), X = d(() => new Map(I.map((e) => [e.date.toDateString(), e])), [I]), Z = d(() => v === 1 ? [...C.slice(1), C[0]] : C, [v]), O = u.getMonth(), R = m.length > 0, ee = /* @__PURE__ */ new Date(), ne = (e, a) => {
+    e.preventDefault(), D(null), G(a, !0);
+  }, te = (e, a) => {
+    !f || w === null || (e.preventDefault(), e.dataTransfer.dropEffect = "move", D(a));
   };
-  return /* @__PURE__ */ l("div", {
+  return /* @__PURE__ */ s("div", {
     className: "event-calendar__month",
     children: [
-      /* @__PURE__ */ l("div", {
+      /* @__PURE__ */ s("div", {
         className: "event-calendar__weekdays",
-        children: [y && /* @__PURE__ */ a("div", {
+        children: [B && /* @__PURE__ */ o("div", {
           className: "event-calendar__week-number event-calendar__week-number--head",
           children: "Wk"
-        }), K.map((n) => /* @__PURE__ */ a("div", {
+        }), Z.map((e) => /* @__PURE__ */ o("div", {
           className: "event-calendar__weekday",
-          children: n
-        }, n))]
+          children: e
+        }, e))]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ o("div", {
         className: "event-calendar__weeks",
-        children: u.map((n, o) => /* @__PURE__ */ l("div", {
-          className: ["event-calendar__week", n.some((t) => R(t, G)) ? "event-calendar__week--current" : ""].filter(Boolean).join(" "),
-          children: [y && /* @__PURE__ */ a("div", {
-            className: "event-calendar__week-number",
-            children: J(n[0])
-          }), n.map((t) => {
-            const r = t.toDateString(), h = Y.get(r), _ = h ? [...h.allDay, ...h.timed] : [], S = L === r, C = t.getDate() === 1 ? `${t.toLocaleDateString(void 0, { month: "short" })} ${t.getDate()}` : String(t.getDate()), x = S ? _ : _.slice(0, D), E = _.length - x.length;
-            return /* @__PURE__ */ l("div", {
-              className: [
-                "event-calendar__day",
-                t.getMonth() === q ? "" : "event-calendar__day--outside",
-                U(t) ? "event-calendar__day--today" : "",
-                V(t) ? "event-calendar__day--weekend" : "",
-                P === r ? "event-calendar__day--drop-target" : "",
-                N ? "event-calendar__day--clickable" : ""
-              ].filter(Boolean).join(" "),
-              onClick: () => N?.(t),
-              onDragLeave: () => v((e) => e === r ? null : e),
-              onDragOver: (e) => I(e, r),
-              onDrop: (e) => H(e, t),
-              children: [i ? /* @__PURE__ */ a("button", {
-                className: "event-calendar__day-number event-calendar__day-number--button",
-                onClick: (e) => {
-                  e.stopPropagation(), i(t);
-                },
-                type: "button",
-                children: C
-              }) : /* @__PURE__ */ a("div", {
-                className: "event-calendar__day-number",
-                children: C
-              }), /* @__PURE__ */ l("div", {
-                className: "event-calendar__day-events",
-                children: [
-                  x.map((e) => /* @__PURE__ */ a(X, {
-                    dragEnabled: g,
-                    event: e,
-                    isDragging: b === e.id,
-                    onClick: A,
-                    onDragEnd: j,
-                    onDragStart: B,
-                    renderEvent: F,
-                    showTime: !0
-                  }, `${e.id}-${r}`)),
-                  E > 0 && /* @__PURE__ */ l("button", {
-                    className: "event-calendar__more",
-                    onClick: (e) => {
-                      if (e.stopPropagation(), i) {
-                        i(t);
-                        return;
-                      }
-                      w(r);
+        children: y.map((e, a) => {
+          const i = e.some((n) => oe(n, ee)), l = de(m, e), N = l.reduce((n, c) => Math.max(n, c.lane + 1), 0);
+          return /* @__PURE__ */ s("div", {
+            className: ["event-calendar__week", i ? "event-calendar__week--current" : ""].filter(Boolean).join(" "),
+            children: [B && /* @__PURE__ */ o("div", {
+              className: "event-calendar__week-number",
+              children: ae(e[0])
+            }), /* @__PURE__ */ s("div", {
+              className: "event-calendar__week-days",
+              style: { "--event-calendar-span-lanes": N },
+              children: [l.length > 0 && /* @__PURE__ */ o("div", {
+                className: "event-calendar__week-spans",
+                children: l.map((n) => /* @__PURE__ */ o(z, {
+                  className: [
+                    "event-calendar__chip--span",
+                    n.isStart ? "" : "event-calendar__chip--span-continues-before",
+                    n.isEnd ? "" : "event-calendar__chip--span-continues-after"
+                  ].filter(Boolean).join(" "),
+                  dragEnabled: f,
+                  event: n.event,
+                  isDragging: w === n.event.id,
+                  onClick: P,
+                  onDragEnd: $,
+                  onDragStart: L,
+                  renderEvent: j,
+                  style: {
+                    left: `${n.startIndex / e.length * 100}%`,
+                    width: `${(n.endIndex - n.startIndex + 1) / e.length * 100}%`,
+                    top: `calc(${n.lane} * var(--event-calendar-span-row))`
+                  }
+                }, `${n.event.id}-span-${a}`))
+              }), e.map((n) => {
+                const c = n.toDateString(), k = X.get(c), p = k ? [...k.allDay.filter((t) => !ie(t)), ...k.timed] : [], W = H === c, Y = n.getDate() === 1 ? `${n.toLocaleDateString(void 0, { month: "short" })} ${n.getDate()}` : String(n.getDate()), K = W ? p : p.slice(0, E), q = p.length - K.length;
+                return /* @__PURE__ */ s("div", {
+                  className: [
+                    "event-calendar__day",
+                    n.getMonth() === O ? "" : "event-calendar__day--outside",
+                    ce(n) ? "event-calendar__day--today" : "",
+                    le(n) ? "event-calendar__day--weekend" : "",
+                    J === c ? "event-calendar__day--drop-target" : "",
+                    V(n) ? "event-calendar__day--selecting" : "",
+                    S ? "event-calendar__day--clickable" : ""
+                  ].filter(Boolean).join(" "),
+                  onClick: () => S?.(n),
+                  onDragLeave: () => D((t) => t === c ? null : t),
+                  onDragOver: (t) => te(t, c),
+                  onDrop: (t) => ne(t, n),
+                  onPointerDown: (t) => Q(t, n),
+                  onPointerEnter: () => U(n),
+                  children: [_ ? /* @__PURE__ */ o("button", {
+                    className: "event-calendar__day-number event-calendar__day-number--button",
+                    onClick: (t) => {
+                      t.stopPropagation(), _(n);
                     },
                     type: "button",
+                    children: Y
+                  }) : /* @__PURE__ */ o("div", {
+                    className: "event-calendar__day-number",
+                    children: Y
+                  }), /* @__PURE__ */ s("div", {
+                    className: "event-calendar__day-events",
                     children: [
-                      "+",
-                      E,
-                      " more"
+                      K.map((t) => /* @__PURE__ */ o(z, {
+                        dragEnabled: f,
+                        event: t,
+                        isDragging: w === t.id,
+                        onClick: P,
+                        onDragEnd: $,
+                        onDragStart: L,
+                        renderEvent: j,
+                        showTime: !0
+                      }, `${t.id}-${c}`)),
+                      q > 0 && /* @__PURE__ */ s("button", {
+                        className: "event-calendar__more",
+                        onClick: (t) => {
+                          if (t.stopPropagation(), _) {
+                            _(n);
+                            return;
+                          }
+                          A(c);
+                        },
+                        type: "button",
+                        children: [
+                          "+",
+                          q,
+                          " more"
+                        ]
+                      }),
+                      W && p.length > E && /* @__PURE__ */ o("button", {
+                        className: "event-calendar__more",
+                        onClick: (t) => {
+                          t.stopPropagation(), A(null);
+                        },
+                        type: "button",
+                        children: "Show less"
+                      })
                     ]
-                  }),
-                  S && _.length > D && /* @__PURE__ */ a("button", {
-                    className: "event-calendar__more",
-                    onClick: (e) => {
-                      e.stopPropagation(), w(null);
-                    },
-                    type: "button",
-                    children: "Show less"
-                  })
-                ]
+                  })]
+                }, c);
               })]
-            }, r);
-          })]
-        }, o))
+            })]
+          }, a);
+        })
       }),
-      !z && k && /* @__PURE__ */ a("div", {
+      !R && x && /* @__PURE__ */ o("div", {
         className: "event-calendar__empty",
-        children: k
+        children: x
       })
     ]
   });
 }
 export {
-  ae as EventCalendarMonth
+  ge as EventCalendarMonth
 };

package/dist/components/EventCalendar/EventCalendar.Week.js

@@ -1,117 +1,142 @@
-import { isToday as S, isWeekend as F } from "../../helpers/Datetime.js";
-import { bucketEventsByDay as b, formatHourLabel as q, getWeekDays as z, isActiveHour as T, layoutDayEvents as E, startOfDay as G } from "./EventCalendar.helpers.js";
-import { EventCalendarChip as R } from "./EventCalendar.Chip.js";
-import { useEffect as J, useMemo as _, useRef as K, useState as P } from "react";
-import { jsx as l, jsxs as s } from "react/jsx-runtime";
-var Q = 8;
-function H({ activeHours: d, date: y, dayEndHour: m, dayStartHour: n, defaultDurationMinutes: U, dragEnabled: h, draggingId: p, events: u, firstDayOfWeek: w, hourHeight: c, onDayClick: N, onDragEnd: k, onDragStart: $, onDrop: j, onEventClick: L, renderEvent: O }) {
-  const [B, o] = P(null), f = K(null), g = _(() => z(y, w), [y, w]), i = _(() => b(u, g), [u, g]), D = _(() => Array.from({ length: Math.max(m - n, 1) }, (e, t) => n + t), [n, m]), W = i.some((e) => e.allDay.length > 0), x = D.length * c, A = _(() => {
-    const e = i.flatMap((t) => t.timed.map((a) => a.start.getHours()));
-    return e.length > 0 ? Math.min(...e) : d?.start ?? Q;
-  }, [d, i]);
-  J(() => {
-    if (!f.current) return;
-    const e = Math.max(A - n - 1, 0);
-    f.current.scrollTop = e * c;
+import { isToday as R, isWeekend as q } from "../../helpers/Datetime.js";
+import { bucketEventsByDay as z, formatHourLabel as G, getWeekDays as I, isActiveHour as W, isMultiDayEvent as J, layoutDayEvents as K, layoutWeekSpans as P, startOfDay as Q } from "./EventCalendar.helpers.js";
+import { EventCalendarChip as x } from "./EventCalendar.Chip.js";
+import { useEffect as V, useMemo as v, useRef as X, useState as Y } from "react";
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+var Z = 8;
+function ne({ activeHours: _, date: j, dayEndHour: g, dayStartHour: r, defaultDurationMinutes: U, dragEnabled: m, draggingId: h, events: p, firstDayOfWeek: L, hourHeight: i, onDayClick: B, onDragEnd: y, onDragStart: u, onDrop: M, onEventClick: D, renderEvent: w }) {
+  const [O, d] = Y(null), N = X(null), l = v(() => I(j, L), [j, L]), o = v(() => z(p, l), [p, l]), k = v(() => Array.from({ length: Math.max(g - r, 1) }, (e, t) => r + t), [r, g]), F = o.some((e) => e.allDay.length > 0), $ = v(() => P(p, l), [p, l]), b = $.reduce((e, t) => Math.max(e, t.lane + 1), 0), S = k.length * i, A = v(() => {
+    const e = o.flatMap((t) => t.timed.map((a) => a.start.getHours()));
+    return e.length > 0 ? Math.min(...e) : _?.start ?? Z;
+  }, [_, o]);
+  V(() => {
+    if (!N.current) return;
+    const e = Math.max(A - r - 1, 0);
+    N.current.scrollTop = e * i;
   }, [
-    n,
+    r,
     A,
-    c
+    i
   ]);
   const C = (e, t) => {
-    const a = G(e);
+    const a = Q(e);
     return a.setHours(t, 0, 0, 0), a;
-  }, M = (e, t) => {
-    !h || p === null || (e.preventDefault(), e.dataTransfer.dropEffect = "move", o(t));
+  }, T = (e, t) => {
+    !m || h === null || (e.preventDefault(), e.dataTransfer.dropEffect = "move", d(t));
   };
   return /* @__PURE__ */ s("div", {
     className: "event-calendar__week-view",
     children: [
       /* @__PURE__ */ s("div", {
         className: "event-calendar__week-head",
-        children: [/* @__PURE__ */ l("div", { className: "event-calendar__gutter-spacer" }), g.map((e) => /* @__PURE__ */ s("div", {
+        children: [/* @__PURE__ */ n("div", { className: "event-calendar__gutter-spacer" }), l.map((e) => /* @__PURE__ */ s("div", {
           className: [
             "event-calendar__week-day-head",
-            S(e) ? "event-calendar__week-day-head--today" : "",
-            F(e) ? "event-calendar__week-day-head--weekend" : ""
+            R(e) ? "event-calendar__week-day-head--today" : "",
+            q(e) ? "event-calendar__week-day-head--weekend" : ""
           ].filter(Boolean).join(" "),
-          children: [/* @__PURE__ */ l("span", {
+          children: [/* @__PURE__ */ n("span", {
             className: "event-calendar__week-day-name",
             children: e.toLocaleDateString(void 0, { weekday: "short" })
-          }), /* @__PURE__ */ l("span", {
+          }), /* @__PURE__ */ n("span", {
             className: "event-calendar__week-day-number",
             children: e.getDate()
           })]
         }, e.toDateString()))]
       }),
-      W && /* @__PURE__ */ s("div", {
+      F && /* @__PURE__ */ s("div", {
         className: "event-calendar__all-day",
-        children: [/* @__PURE__ */ l("div", {
+        children: [/* @__PURE__ */ n("div", {
           className: "event-calendar__gutter-label",
           children: "All day"
-        }), i.map((e) => {
-          const t = `allday-${e.date.toDateString()}`;
-          return /* @__PURE__ */ l("div", {
-            className: ["event-calendar__all-day-cell", B === t ? "event-calendar__all-day-cell--drop-target" : ""].filter(Boolean).join(" "),
-            onDragLeave: () => o((a) => a === t ? null : a),
-            onDragOver: (a) => M(a, t),
-            onDrop: (a) => {
-              a.preventDefault(), o(null), j(e.date, !0);
-            },
-            children: e.allDay.map((a) => /* @__PURE__ */ l(R, {
-              dragEnabled: h,
-              event: a,
-              isDragging: p === a.id,
-              onClick: L,
-              onDragEnd: k,
-              onDragStart: $,
-              renderEvent: O
-            }, `${a.id}-${t}`))
-          }, t);
+        }), /* @__PURE__ */ s("div", {
+          className: "event-calendar__all-day-cells",
+          style: { "--event-calendar-span-lanes": b },
+          children: [$.length > 0 && /* @__PURE__ */ n("div", {
+            className: "event-calendar__week-spans",
+            children: $.map((e) => /* @__PURE__ */ n(x, {
+              className: [
+                "event-calendar__chip--span",
+                e.isStart ? "" : "event-calendar__chip--span-continues-before",
+                e.isEnd ? "" : "event-calendar__chip--span-continues-after"
+              ].filter(Boolean).join(" "),
+              dragEnabled: m,
+              event: e.event,
+              isDragging: h === e.event.id,
+              onClick: D,
+              onDragEnd: y,
+              onDragStart: u,
+              renderEvent: w,
+              style: {
+                left: `${e.startIndex / l.length * 100}%`,
+                width: `${(e.endIndex - e.startIndex + 1) / l.length * 100}%`,
+                top: `calc(${e.lane} * var(--event-calendar-span-row))`
+              }
+            }, `${e.event.id}-span`))
+          }), o.map((e) => {
+            const t = `allday-${e.date.toDateString()}`;
+            return /* @__PURE__ */ n("div", {
+              className: ["event-calendar__all-day-cell", O === t ? "event-calendar__all-day-cell--drop-target" : ""].filter(Boolean).join(" "),
+              onDragLeave: () => d((a) => a === t ? null : a),
+              onDragOver: (a) => T(a, t),
+              onDrop: (a) => {
+                a.preventDefault(), d(null), M(e.date, !0);
+              },
+              children: e.allDay.filter((a) => !J(a)).map((a) => /* @__PURE__ */ n(x, {
+                dragEnabled: m,
+                event: a,
+                isDragging: h === a.id,
+                onClick: D,
+                onDragEnd: y,
+                onDragStart: u,
+                renderEvent: w
+              }, `${a.id}-${t}`))
+            }, t);
+          })]
         })]
       }),
       /* @__PURE__ */ s("div", {
         className: "event-calendar__week-body",
-        ref: f,
-        children: [/* @__PURE__ */ l("div", {
+        ref: N,
+        children: [/* @__PURE__ */ n("div", {
           className: "event-calendar__gutter",
-          style: { height: x },
-          children: D.map((e) => /* @__PURE__ */ l("div", {
-            className: ["event-calendar__gutter-hour", T(e, d) ? "" : "event-calendar__gutter-hour--inactive"].filter(Boolean).join(" "),
-            style: { height: c },
-            children: /* @__PURE__ */ l("span", { children: q(e) })
+          style: { height: S },
+          children: k.map((e) => /* @__PURE__ */ n("div", {
+            className: ["event-calendar__gutter-hour", W(e, _) ? "" : "event-calendar__gutter-hour--inactive"].filter(Boolean).join(" "),
+            style: { height: i },
+            children: /* @__PURE__ */ n("span", { children: G(e) })
           }, e))
-        }), i.map((e) => {
-          const t = E(e.timed, n, m, U);
+        }), o.map((e) => {
+          const t = K(e.timed, r, g, U);
           return /* @__PURE__ */ s("div", {
-            className: ["event-calendar__week-column", S(e.date) ? "event-calendar__week-column--today" : ""].filter(Boolean).join(" "),
-            style: { height: x },
-            children: [D.map((a) => {
-              const v = `${e.date.toDateString()}-${a}`;
-              return /* @__PURE__ */ l("div", {
+            className: ["event-calendar__week-column", R(e.date) ? "event-calendar__week-column--today" : ""].filter(Boolean).join(" "),
+            style: { height: S },
+            children: [k.map((a) => {
+              const f = `${e.date.toDateString()}-${a}`;
+              return /* @__PURE__ */ n("div", {
                 className: [
                   "event-calendar__slot",
-                  T(a, d) ? "" : "event-calendar__slot--inactive",
-                  B === v ? "event-calendar__slot--drop-target" : "",
-                  N ? "event-calendar__slot--clickable" : ""
+                  W(a, _) ? "" : "event-calendar__slot--inactive",
+                  O === f ? "event-calendar__slot--drop-target" : "",
+                  B ? "event-calendar__slot--clickable" : ""
                 ].filter(Boolean).join(" "),
-                onClick: () => N?.(C(e.date, a)),
-                onDragLeave: () => o((r) => r === v ? null : r),
-                onDragOver: (r) => M(r, v),
-                onDrop: (r) => {
-                  r.preventDefault(), o(null), j(C(e.date, a), !1);
+                onClick: () => B?.(C(e.date, a)),
+                onDragLeave: () => d((c) => c === f ? null : c),
+                onDragOver: (c) => T(c, f),
+                onDrop: (c) => {
+                  c.preventDefault(), d(null), M(C(e.date, a), !1);
                 },
-                style: { height: c }
-              }, v);
-            }), t.map((a) => /* @__PURE__ */ l(R, {
+                style: { height: i }
+              }, f);
+            }), t.map((a) => /* @__PURE__ */ n(x, {
               className: "event-calendar__chip--positioned",
-              dragEnabled: h,
+              dragEnabled: m,
               event: a.event,
-              isDragging: p === a.event.id,
-              onClick: L,
-              onDragEnd: k,
-              onDragStart: $,
-              renderEvent: O,
+              isDragging: h === a.event.id,
+              onClick: D,
+              onDragEnd: y,
+              onDragStart: u,
+              renderEvent: w,
               showTime: !0,
               style: {
                 top: `${a.top}%`,
@@ -127,5 +152,5 @@ function H({ activeHours: d, date: y, dayEndHour: m, dayStartHour: n, defaultDur
   });
 }
 export {
-  H as EventCalendarWeek
+  ne as EventCalendarWeek
 };

package/dist/components/EventCalendar/EventCalendar.css

@@ -1 +1 @@
-.event-calendar{gap:var(--spacing-12);width:100%;color:var(--body-color);--event-calendar-chip-color:var(--body-accent-color);flex-direction:column;display:flex}.event-calendar__header{align-items:center;gap:var(--spacing-12);flex-wrap:wrap;display:flex}.event-calendar__header .toggle-buttons{align-self:center;height:auto}.event-calendar__nav{align-items:center;gap:var(--spacing-4);display:flex}.event-calendar__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--body-title-color);flex:auto;margin:0}.event-calendar__header-extra{align-items:center;gap:var(--spacing-8);display:flex}.event-calendar__viewport{touch-action:pan-y}.event-calendar__month{border:1px solid var(--card-border-color);border-radius:var(--radius);background-color:var(--card-background-color);flex-direction:column;display:flex;overflow:hidden}.event-calendar__weekdays,.event-calendar__week{display:flex}.event-calendar__weekdays{background-color:var(--card-background-accent-color);border-bottom:1px solid var(--card-border-color)}.event-calendar__week-number{width:var(--spacing-32);border-right:1px solid var(--card-border-color);background-color:var(--card-background-accent-color);font-size:var(--font-size-xxs);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-semibold);color:var(--body-sub-title-color);opacity:.7;flex:none;justify-content:center;align-items:center;display:flex}.event-calendar__week-number--head{text-transform:uppercase;letter-spacing:.04em}.event-calendar__week--current .event-calendar__week-number{background-color:color-mix(in srgb, var(--body-accent-color) 22%, var(--card-background-accent-color));color:var(--body-color-accent);opacity:1}.event-calendar__weekday{min-width:0;padding:var(--spacing-8);text-align:center;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--body-color-muted);flex:1 1 0}.event-calendar__weeks{flex-direction:column;display:flex}.event-calendar__week{border-bottom:1px solid var(--card-border-color);flex:auto}.event-calendar__week:last-child{border-bottom:none}.event-calendar__week--current{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--body-accent-color) 45%, transparent)}.event-calendar__day{gap:var(--spacing-4);min-width:0;min-height:var(--spacing-100);padding:var(--spacing-6);border-right:1px solid var(--card-border-color);transition:background-color var(--transition-fast);flex-direction:column;flex:1 1 0;display:flex}.event-calendar__day:last-child{border-right:none}.event-calendar__day--weekend{background-color:var(--card-background-accent-color)}.event-calendar__day--outside{background-color:color-mix(in srgb, var(--card-border-color) 22%, var(--card-background-color))}.event-calendar__day--outside .event-calendar__day-number{opacity:.5}.event-calendar__day--outside.event-calendar__day--weekend{background-color:color-mix(in srgb, var(--card-border-color) 30%, var(--card-background-accent-color))}.event-calendar__day--clickable:hover{cursor:pointer;background-color:color-mix(in srgb, var(--body-accent-color) 8%, transparent)}.event-calendar__day--drop-target{background-color:color-mix(in srgb, var(--body-accent-color) 18%, transparent);box-shadow:inset 0 0 0 2px var(--body-accent-color)}.event-calendar__day-number{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--body-color-muted);background:0 0;border:none;align-self:flex-start;padding:0}.event-calendar__day-number--button{min-width:var(--spacing-20);height:var(--spacing-20);border-radius:var(--radius-full);cursor:pointer}.event-calendar__day-number--button:hover{background-color:color-mix(in srgb, var(--body-accent-color) 20%, transparent);color:var(--body-color-accent)}.event-calendar__day--today .event-calendar__day-number{min-width:var(--spacing-20);height:var(--spacing-20);padding:0 var(--spacing-4);border-radius:var(--radius-full);background-color:var(--body-accent-color);color:var(--card-background-color);font-weight:var(--font-weight-bold);justify-content:center;align-self:flex-start;align-items:center;display:inline-flex}.event-calendar__day-events{gap:var(--spacing-2);flex-direction:column;min-width:0;display:flex}.event-calendar__more{padding:var(--spacing-1) var(--spacing-4);border-radius:var(--radius-sm);color:var(--body-color-muted);font-size:var(--font-size-xxs);font-weight:var(--font-weight-medium);cursor:pointer;background:0 0;border:none;align-self:flex-start}.event-calendar__more:hover{color:var(--body-accent-color);background-color:color-mix(in srgb, var(--body-accent-color) 12%, transparent)}.event-calendar__empty{padding:var(--spacing-16);text-align:center;color:var(--body-color-muted);font-size:var(--font-size-sm);border-top:1px solid var(--card-border-color)}.event-calendar__week-view{border:1px solid var(--card-border-color);border-radius:var(--radius);background-color:var(--card-background-color);flex-direction:column;display:flex;overflow:hidden}.event-calendar__week-head{background-color:var(--card-background-accent-color);border-bottom:1px solid var(--card-border-color);display:flex}.event-calendar__gutter-spacer,.event-calendar__gutter-label,.event-calendar__gutter{flex:0 0 var(--spacing-60);width:var(--spacing-60);border-right:1px solid var(--card-border-color)}.event-calendar__gutter-label{padding:var(--spacing-4) var(--spacing-6);font-size:var(--font-size-xxs);color:var(--body-color-muted);justify-content:flex-end;align-items:center;display:flex}.event-calendar__week-day-head{align-items:center;gap:var(--spacing-2);min-width:0;padding:var(--spacing-8) var(--spacing-4);border-right:1px solid var(--card-border-color);flex-direction:column;flex:1 1 0;display:flex}.event-calendar__week-day-head:last-child{border-right:none}.event-calendar__week-day-head--weekend{background-color:color-mix(in srgb, var(--body-color-muted) 8%, transparent)}.event-calendar__week-day-name{font-size:var(--font-size-xxs);text-transform:uppercase;letter-spacing:.04em;color:var(--body-color-muted)}.event-calendar__week-day-number{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--body-color)}.event-calendar__week-day-head--today .event-calendar__week-day-number{min-width:var(--spacing-24);height:var(--spacing-24);border-radius:var(--radius-full);background-color:var(--body-accent-color);color:var(--card-background-color);justify-content:center;align-items:center;display:inline-flex}.event-calendar__all-day{border-bottom:1px solid var(--card-border-color);display:flex}.event-calendar__all-day-cell{gap:var(--spacing-2);min-width:0;padding:var(--spacing-4);border-right:1px solid var(--card-border-color);flex-direction:column;flex:1 1 0;display:flex}.event-calendar__all-day-cell:last-child{border-right:none}.event-calendar__all-day-cell--drop-target{background-color:color-mix(in srgb, var(--body-accent-color) 18%, transparent)}.event-calendar__week-body{max-height:var(--spacing-400);display:flex;overflow-y:auto}.event-calendar__gutter{flex-direction:column;display:flex}.event-calendar__gutter-hour{padding-right:var(--spacing-6);font-size:var(--font-size-xxs);color:var(--body-color-muted);justify-content:flex-end;align-items:flex-start;display:flex}.event-calendar__gutter-hour span{transform:translateY(-50%)}.event-calendar__gutter-hour:first-child span{transform:none}.event-calendar__gutter-hour--inactive{opacity:.5}.event-calendar__week-column{border-right:1px solid var(--card-border-color);flex:1 1 0;min-width:0;position:relative}.event-calendar__week-column:last-child{border-right:none}.event-calendar__week-column--today{background-color:color-mix(in srgb, var(--body-accent-color) 6%, transparent)}.event-calendar__slot{border-bottom:1px solid color-mix(in srgb, var(--card-border-color) 60%, transparent);transition:background-color var(--transition-fast)}.event-calendar__slot--inactive{background-color:color-mix(in srgb, var(--body-background) 60%, transparent)}.event-calendar__slot--clickable:hover{cursor:pointer;background-color:color-mix(in srgb, var(--body-accent-color) 10%, transparent)}.event-calendar__slot--drop-target{background-color:color-mix(in srgb, var(--body-accent-color) 22%, transparent)}.event-calendar__chip{align-items:baseline;gap:var(--spacing-4);min-width:0;padding:var(--spacing-1) var(--spacing-6);border-radius:var(--radius-sm);border-left:3px solid var(--event-calendar-chip-color);background-color:color-mix(in srgb, var(--event-calendar-chip-color) 18%, var(--card-background-color));color:var(--body-color);font-size:var(--font-size-xs);transition:background-color var(--transition-fast), opacity var(--transition-fast);line-height:1.5;display:flex;overflow:hidden}.event-calendar__chip--positioned{flex-direction:column;align-items:flex-start;gap:0;position:absolute}.event-calendar__chip--clickable:hover{cursor:pointer;background-color:color-mix(in srgb, var(--event-calendar-chip-color) 30%, var(--card-background-color))}.event-calendar__chip--draggable{cursor:grab}.event-calendar__chip--dragging{opacity:.4}.event-calendar__chip--accent{--event-calendar-chip-color:var(--body-accent-color)}.event-calendar__chip--success{--event-calendar-chip-color:var(--button-success-background-color)}.event-calendar__chip--warning{--event-calendar-chip-color:var(--button-warning-background-color)}.event-calendar__chip--danger{--event-calendar-chip-color:var(--button-danger-background-color)}.event-calendar__chip--muted{--event-calendar-chip-color:var(--body-color-muted)}.event-calendar__chip--ghost{--event-calendar-chip-color:var(--body-color-muted);border:1px dashed var(--event-calendar-chip-color);color:var(--body-color-muted);background-color:#0000;border-left-style:solid;border-left-width:3px}.event-calendar__chip--done{--event-calendar-chip-color:var(--body-color-muted);opacity:.6}.event-calendar__chip--done .event-calendar__chip-title{text-decoration:line-through}.event-calendar__chip-leading{flex:none;align-self:center;align-items:center;line-height:1;display:inline-flex}.event-calendar__chip-leading .icon{width:var(--spacing-12);height:var(--spacing-12)}.event-calendar__chip-time{font-variant-numeric:tabular-nums;font-size:var(--font-size-xxs);color:var(--body-color-muted);flex:none}.event-calendar__chip-title{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}@media (width<=767px){.event-calendar__header{gap:var(--spacing-8)}.event-calendar__nav{flex:auto}.event-calendar__header .toggle-buttons{flex:none;margin-left:auto}.event-calendar__title{font-size:var(--font-size-md);flex:100%;order:-1}.event-calendar__header-extra{flex:100%;order:1}.event-calendar__week-number{width:var(--spacing-20)}.event-calendar__day{min-height:var(--spacing-64);padding:var(--spacing-4)}.event-calendar__weekday{padding:var(--spacing-4);font-size:var(--font-size-xxs)}.event-calendar__chip{padding:0 var(--spacing-4)}.event-calendar__chip-time{display:none}:is(.event-calendar__month .event-calendar__chip:has(.event-calendar__chip-leading),.event-calendar__week-view .event-calendar__chip:has(.event-calendar__chip-leading)){padding:var(--spacing-2);justify-content:center;align-items:center;gap:0}:is(.event-calendar__month .event-calendar__chip:has(.event-calendar__chip-leading) .event-calendar__chip-title,.event-calendar__week-view .event-calendar__chip:has(.event-calendar__chip-leading) .event-calendar__chip-title){display:none}.event-calendar__gutter-spacer,.event-calendar__gutter-label,.event-calendar__gutter{flex-basis:var(--spacing-40);width:var(--spacing-40)}}
+.event-calendar{--event-calendar-span-row:calc(var(--spacing-20) + var(--spacing-2));gap:var(--spacing-12);width:100%;color:var(--body-color);--event-calendar-chip-color:var(--body-accent-color);flex-direction:column;display:flex}.event-calendar__header{align-items:center;gap:var(--spacing-12);flex-wrap:wrap;display:flex}.event-calendar__header .toggle-buttons{align-self:center;height:auto}.event-calendar__nav{align-items:center;gap:var(--spacing-4);display:flex}.event-calendar__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--body-title-color);flex:auto;margin:0}.event-calendar__header-extra{align-items:center;gap:var(--spacing-8);display:flex}.event-calendar__viewport{touch-action:pan-y}.event-calendar__month{border:1px solid var(--card-border-color);border-radius:var(--radius);background-color:var(--card-background-color);flex-direction:column;display:flex;overflow:hidden}.event-calendar__weekdays,.event-calendar__week{display:flex}.event-calendar__week-days{flex:auto;min-width:0;display:flex;position:relative}.event-calendar__all-day-cells{position:relative}.event-calendar__all-day-cells>.event-calendar__week-spans{top:var(--spacing-4)}.event-calendar__all-day-cells{min-width:0;padding-top:calc(var(--event-calendar-span-lanes,0) * var(--event-calendar-span-row));flex:auto;display:flex}.event-calendar__week-spans{top:var(--spacing-24);pointer-events:none;z-index:1;position:absolute;left:0;right:0}.event-calendar__chip--span{margin:0 var(--spacing-2);pointer-events:auto;width:auto;position:absolute}.event-calendar__chip--span.event-calendar__chip--span-continues-before{border-left-width:0;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}.event-calendar__chip--span.event-calendar__chip--span-continues-after{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}.event-calendar__weekdays{background-color:var(--card-background-accent-color);border-bottom:1px solid var(--card-border-color)}.event-calendar__week-number{width:var(--spacing-32);border-right:1px solid var(--card-border-color);background-color:var(--card-background-accent-color);font-size:var(--font-size-xxs);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-semibold);color:var(--body-sub-title-color);opacity:.7;flex:none;justify-content:center;align-items:center;display:flex}.event-calendar__week-number--head{text-transform:uppercase;letter-spacing:.04em}.event-calendar__week--current .event-calendar__week-number{background-color:color-mix(in srgb, var(--body-accent-color) 22%, var(--card-background-accent-color));color:var(--body-color-accent);opacity:1}.event-calendar__weekday{min-width:0;padding:var(--spacing-8);text-align:center;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--body-color-muted);flex:1 1 0}.event-calendar__weeks{flex-direction:column;display:flex}.event-calendar__week{border-bottom:1px solid var(--card-border-color);flex:auto}.event-calendar__week:last-child{border-bottom:none}.event-calendar__week--current{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--body-accent-color) 45%, transparent)}.event-calendar__day{gap:var(--spacing-4);min-width:0;min-height:var(--spacing-100);padding:var(--spacing-6);border-right:1px solid var(--card-border-color);transition:background-color var(--transition-fast);flex-direction:column;flex:1 1 0;display:flex}.event-calendar__day:last-child{border-right:none}.event-calendar__day--weekend{background-color:var(--card-background-accent-color)}.event-calendar__day--outside{background-color:color-mix(in srgb, var(--card-border-color) 22%, var(--card-background-color))}.event-calendar__day--outside .event-calendar__day-number{opacity:.5}.event-calendar__day--outside.event-calendar__day--weekend{background-color:color-mix(in srgb, var(--card-border-color) 30%, var(--card-background-accent-color))}.event-calendar__day--clickable:hover{cursor:pointer;background-color:color-mix(in srgb, var(--body-accent-color) 8%, transparent)}.event-calendar__day--drop-target{background-color:color-mix(in srgb, var(--body-accent-color) 18%, transparent);box-shadow:inset 0 0 0 2px var(--body-accent-color)}.event-calendar__day--selecting{background-color:color-mix(in srgb, var(--body-accent-color) 14%, transparent)}.event-calendar__week-days{-webkit-user-select:none;user-select:none}.event-calendar__day-number{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--body-color-muted);background:0 0;border:none;align-self:flex-start;padding:0}.event-calendar__day-number--button{min-width:var(--spacing-20);height:var(--spacing-20);border-radius:var(--radius-full);cursor:pointer}.event-calendar__day-number--button:hover{background-color:color-mix(in srgb, var(--body-accent-color) 20%, transparent);color:var(--body-color-accent)}.event-calendar__day--today .event-calendar__day-number{min-width:var(--spacing-20);height:var(--spacing-20);padding:0 var(--spacing-4);border-radius:var(--radius-full);background-color:var(--body-accent-color);color:var(--card-background-color);font-weight:var(--font-weight-bold);justify-content:center;align-self:flex-start;align-items:center;display:inline-flex}.event-calendar__day-events{margin-top:calc(var(--event-calendar-span-lanes,0) * var(--event-calendar-span-row));gap:var(--spacing-2);flex-direction:column;min-width:0;display:flex}.event-calendar__more{padding:var(--spacing-1) var(--spacing-4);border-radius:var(--radius-sm);color:var(--body-color-muted);font-size:var(--font-size-xxs);font-weight:var(--font-weight-medium);cursor:pointer;background:0 0;border:none;align-self:flex-start}.event-calendar__more:hover{color:var(--body-accent-color);background-color:color-mix(in srgb, var(--body-accent-color) 12%, transparent)}.event-calendar__empty{padding:var(--spacing-16);text-align:center;color:var(--body-color-muted);font-size:var(--font-size-sm);border-top:1px solid var(--card-border-color)}.event-calendar__week-view{border:1px solid var(--card-border-color);border-radius:var(--radius);background-color:var(--card-background-color);flex-direction:column;display:flex;overflow:hidden}.event-calendar__week-head{background-color:var(--card-background-accent-color);border-bottom:1px solid var(--card-border-color);display:flex}.event-calendar__gutter-spacer,.event-calendar__gutter-label,.event-calendar__gutter{flex:0 0 var(--spacing-60);width:var(--spacing-60);border-right:1px solid var(--card-border-color)}.event-calendar__gutter-label{padding:var(--spacing-4) var(--spacing-6);font-size:var(--font-size-xxs);color:var(--body-color-muted);justify-content:flex-end;align-items:center;display:flex}.event-calendar__week-day-head{align-items:center;gap:var(--spacing-2);min-width:0;padding:var(--spacing-8) var(--spacing-4);border-right:1px solid var(--card-border-color);flex-direction:column;flex:1 1 0;display:flex}.event-calendar__week-day-head:last-child{border-right:none}.event-calendar__week-day-head--weekend{background-color:color-mix(in srgb, var(--body-color-muted) 8%, transparent)}.event-calendar__week-day-name{font-size:var(--font-size-xxs);text-transform:uppercase;letter-spacing:.04em;color:var(--body-color-muted)}.event-calendar__week-day-number{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--body-color)}.event-calendar__week-day-head--today .event-calendar__week-day-number{min-width:var(--spacing-24);height:var(--spacing-24);border-radius:var(--radius-full);background-color:var(--body-accent-color);color:var(--card-background-color);justify-content:center;align-items:center;display:inline-flex}.event-calendar__all-day{border-bottom:1px solid var(--card-border-color);display:flex}.event-calendar__all-day-cell{gap:var(--spacing-2);min-width:0;padding:var(--spacing-4);border-right:1px solid var(--card-border-color);flex-direction:column;flex:1 1 0;display:flex}.event-calendar__all-day-cell:last-child{border-right:none}.event-calendar__all-day-cell--drop-target{background-color:color-mix(in srgb, var(--body-accent-color) 18%, transparent)}.event-calendar__week-body{max-height:var(--spacing-400);display:flex;overflow-y:auto}.event-calendar__gutter{flex-direction:column;display:flex}.event-calendar__gutter-hour{padding-right:var(--spacing-6);font-size:var(--font-size-xxs);color:var(--body-color-muted);justify-content:flex-end;align-items:flex-start;display:flex}.event-calendar__gutter-hour span{transform:translateY(-50%)}.event-calendar__gutter-hour:first-child span{transform:none}.event-calendar__gutter-hour--inactive{opacity:.5}.event-calendar__week-column{border-right:1px solid var(--card-border-color);flex:1 1 0;min-width:0;position:relative}.event-calendar__week-column:last-child{border-right:none}.event-calendar__week-column--today{background-color:color-mix(in srgb, var(--body-accent-color) 6%, transparent)}.event-calendar__slot{border-bottom:1px solid color-mix(in srgb, var(--card-border-color) 60%, transparent);transition:background-color var(--transition-fast)}.event-calendar__slot--inactive{background-color:color-mix(in srgb, var(--body-background) 60%, transparent)}.event-calendar__slot--clickable:hover{cursor:pointer;background-color:color-mix(in srgb, var(--body-accent-color) 10%, transparent)}.event-calendar__slot--drop-target{background-color:color-mix(in srgb, var(--body-accent-color) 22%, transparent)}.event-calendar__chip{align-items:baseline;gap:var(--spacing-4);min-width:0;padding:var(--spacing-1) var(--spacing-6);border-radius:var(--radius-sm);border-left:3px solid var(--event-calendar-chip-color);background-color:color-mix(in srgb, var(--event-calendar-chip-color) 18%, var(--card-background-color));color:var(--body-color);font-size:var(--font-size-xs);transition:background-color var(--transition-fast), opacity var(--transition-fast);line-height:1.5;display:flex;overflow:hidden}.event-calendar__chip--positioned{flex-direction:column;align-items:flex-start;gap:0;position:absolute}.event-calendar__chip--clickable:hover{cursor:pointer;background-color:color-mix(in srgb, var(--event-calendar-chip-color) 30%, var(--card-background-color))}.event-calendar__chip--draggable{cursor:grab}.event-calendar__chip--dragging{opacity:.4}.event-calendar__chip--accent{--event-calendar-chip-color:var(--body-accent-color)}.event-calendar__chip--success{--event-calendar-chip-color:var(--button-success-background-color)}.event-calendar__chip--warning{--event-calendar-chip-color:var(--button-warning-background-color)}.event-calendar__chip--danger{--event-calendar-chip-color:var(--button-danger-background-color)}.event-calendar__chip--muted{--event-calendar-chip-color:var(--body-color-muted)}.event-calendar__chip--ghost{--event-calendar-chip-color:var(--body-color-muted);border:1px dashed var(--event-calendar-chip-color);color:var(--body-color-muted);background-color:#0000;border-left-style:solid;border-left-width:3px}.event-calendar__chip--done{--event-calendar-chip-color:var(--body-color-muted);opacity:.6}.event-calendar__chip--done .event-calendar__chip-title{text-decoration:line-through}.event-calendar__chip-leading{flex:none;align-self:center;align-items:center;line-height:1;display:inline-flex}.event-calendar__chip-leading .icon{width:var(--spacing-12);height:var(--spacing-12)}.event-calendar__chip-time{font-variant-numeric:tabular-nums;font-size:var(--font-size-xxs);color:var(--body-color-muted);flex:none}.event-calendar__chip-title{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}@media (width<=767px){.event-calendar__header{gap:var(--spacing-8)}.event-calendar__nav{flex:auto}.event-calendar__header .toggle-buttons{flex:none;margin-left:auto}.event-calendar__title{font-size:var(--font-size-md);flex:100%;order:-1}.event-calendar__header-extra{flex:100%;order:1}.event-calendar__week-number{width:var(--spacing-20)}.event-calendar__day{min-height:var(--spacing-64);padding:var(--spacing-4)}.event-calendar__weekday{padding:var(--spacing-4);font-size:var(--font-size-xxs)}.event-calendar__chip{padding:0 var(--spacing-4)}.event-calendar__chip-time{display:none}:is(.event-calendar__month .event-calendar__chip:has(.event-calendar__chip-leading),.event-calendar__week-view .event-calendar__chip:has(.event-calendar__chip-leading)){padding:var(--spacing-2);justify-content:center;align-items:center;gap:0}:is(.event-calendar__month .event-calendar__chip:has(.event-calendar__chip-leading) .event-calendar__chip-title,.event-calendar__week-view .event-calendar__chip:has(.event-calendar__chip-leading) .event-calendar__chip-title){display:none}.event-calendar__gutter-spacer,.event-calendar__gutter-label,.event-calendar__gutter{flex-basis:var(--spacing-40);width:var(--spacing-40)}}

package/dist/components/EventCalendar/EventCalendar.helpers.js

@@ -1,72 +1,93 @@
-import { addDays as y, isSameDay as S } from "../../helpers/Datetime.js";
-var d = (t) => new Date(t.getFullYear(), t.getMonth(), t.getDate()), x = (t, r) => {
-  const n = (t.getDay() - r + 7) % 7;
-  return y(d(t), -n);
-}, T = (t, r) => {
-  const n = x(t, r);
-  return Array.from({ length: 7 }, (o, i) => y(n, i));
-}, w = (t) => t.getHours() * 60 + t.getMinutes(), v = (t, r) => t.end ?? new Date(t.start.getTime() + r * 6e4), k = (t, r) => r.map((n) => {
+import { addDays as D, isSameDay as w } from "../../helpers/Datetime.js";
+var g = (t) => new Date(t.getFullYear(), t.getMonth(), t.getDate()), T = (t, r) => {
+  const a = (t.getDay() - r + 7) % 7;
+  return D(g(t), -a);
+}, B = (t, r) => {
+  const a = T(t, r);
+  return Array.from({ length: 7 }, (o, i) => D(a, i));
+}, S = (t) => t.getHours() * 60 + t.getMinutes(), v = (t, r) => t.end ?? new Date(t.start.getTime() + r * 6e4), O = (t, r) => r.map((a) => {
   const o = [], i = [];
-  return t.forEach((e) => {
-    if (e.allDay) {
-      const h = d(e.start), m = d(e.end ?? e.start);
-      n >= h && n <= m && o.push(e);
+  return t.forEach((s) => {
+    if (s.allDay) {
+      const l = g(s.start), e = g(s.end ?? s.start);
+      a >= l && a <= e && o.push(s);
       return;
     }
-    S(e.start, n) && i.push(e);
-  }), i.sort((e, h) => e.start.getTime() - h.start.getTime()), {
-    date: n,
+    w(s.start, a) && i.push(s);
+  }), i.sort((s, l) => s.start.getTime() - l.start.getTime()), {
+    date: a,
     allDay: o,
     timed: i
   };
-}), O = (t, r, n, o) => {
+}), W = (t, r, a, o) => {
   if (t.length === 0) return [];
-  const i = r * 60, e = n * 60, h = Math.max(e - i, 1), m = t.map((a) => {
-    const u = w(a.start);
+  const i = r * 60, s = a * 60, l = Math.max(s - i, 1), e = t.map((n) => {
+    const d = S(n.start);
     return {
-      event: a,
-      start: u,
-      end: Math.max(w(v(a, o)), u + 15)
+      event: n,
+      start: d,
+      end: Math.max(S(v(n, o)), d + 15)
     };
-  }), D = [];
-  let l = [], c = -1;
+  }), u = [];
+  let h = [], m = -1;
   const p = () => {
-    if (l.length === 0) return;
-    const a = [], u = /* @__PURE__ */ new Map();
-    l.forEach((s) => {
-      let g = a.findIndex((f) => f <= s.start);
-      g === -1 && (g = a.length), a[g] = s.end, u.set(s.event, g);
+    if (h.length === 0) return;
+    const n = [], d = /* @__PURE__ */ new Map();
+    h.forEach((c) => {
+      let f = n.findIndex((M) => M <= c.start);
+      f === -1 && (f = n.length), n[f] = c.end, d.set(c.event, f);
     });
-    const M = a.length;
-    l.forEach((s) => {
-      const g = u.get(s.event) ?? 0, f = (s.start - i) / h * 100, E = (s.end - s.start) / h * 100;
-      D.push({
-        event: s.event,
-        top: Math.max(f, 0),
-        height: Math.min(Math.max(E, 1.5), 100 - Math.max(f, 0)),
-        left: g / M * 100,
-        width: 1 / M * 100
+    const E = n.length;
+    h.forEach((c) => {
+      const f = d.get(c.event) ?? 0, M = (c.start - i) / l * 100, y = (c.end - c.start) / l * 100;
+      u.push({
+        event: c.event,
+        top: Math.max(M, 0),
+        height: Math.min(Math.max(y, 1.5), 100 - Math.max(M, 0)),
+        left: f / E * 100,
+        width: 1 / E * 100
       });
-    }), l = [], c = -1;
+    }), h = [], m = -1;
   };
-  return [...m].sort((a, u) => a.start - u.start || a.end - u.end).forEach((a) => {
-    l.length > 0 && a.start >= c && p(), l.push(a), c = Math.max(c, a.end);
-  }), p(), D;
-}, $ = (t, r, n) => {
-  if (!n) return new Date(r);
-  const o = d(r);
+  return [...e].sort((n, d) => n.start - d.start || n.end - d.end).forEach((n) => {
+    h.length > 0 && n.start >= m && p(), h.push(n), m = Math.max(m, n.end);
+  }), p(), u;
+}, $ = (t, r, a) => {
+  if (!a) return new Date(r);
+  const o = g(r);
   return o.setHours(t.start.getHours(), t.start.getMinutes(), 0, 0), o;
-}, b = (t, r) => !r || t >= r.start && t < r.end, A = (t) => `${t.toString().padStart(2, "0")}:00`, C = (t) => `${t.getHours().toString().padStart(2, "0")}:${t.getMinutes().toString().padStart(2, "0")}`;
+}, k = (t, r) => !r || t >= r.start && t < r.end, C = (t) => `${t.toString().padStart(2, "0")}:00`, F = (t) => `${t.getHours().toString().padStart(2, "0")}:${t.getMinutes().toString().padStart(2, "0")}`, I = (t) => !!(t.allDay && t.end && g(t.end) > g(t.start)), H = 864e5, x = (t, r) => Math.round((r.getTime() - t.getTime()) / H), Y = (t, r) => {
+  if (r.length === 0) return [];
+  const a = g(r[0]), o = g(r[r.length - 1]), i = r.length - 1, s = t.filter(I).map((e) => ({
+    event: e,
+    start: g(e.start),
+    end: g(e.end ?? e.start)
+  })).filter(({ end: e, start: u }) => e >= a && u <= o).sort((e, u) => e.start.getTime() - u.start.getTime() || u.end.getTime() - e.end.getTime()), l = [];
+  return s.map(({ end: e, event: u, start: h }) => {
+    const m = Math.max(x(a, h), 0), p = Math.min(x(a, e), i);
+    let n = l.findIndex((d) => d < m);
+    return n === -1 && (n = l.length), l[n] = p, {
+      event: u,
+      startIndex: m,
+      endIndex: p,
+      lane: n,
+      isStart: h >= a,
+      isEnd: e <= o
+    };
+  });
+};
 export {
-  k as bucketEventsByDay,
+  O as bucketEventsByDay,
   $ as buildDroppedStart,
-  C as formatEventTime,
-  A as formatHourLabel,
+  F as formatEventTime,
+  C as formatHourLabel,
   v as getEventEnd,
-  T as getWeekDays,
-  b as isActiveHour,
-  O as layoutDayEvents,
-  w as minutesFromMidnight,
-  d as startOfDay,
-  x as startOfWeek
+  B as getWeekDays,
+  k as isActiveHour,
+  I as isMultiDayEvent,
+  W as layoutDayEvents,
+  Y as layoutWeekSpans,
+  S as minutesFromMidnight,
+  g as startOfDay,
+  T as startOfWeek
 };

package/dist/components/EventCalendar/EventCalendar2.js

@@ -1,16 +1,16 @@
 import './EventCalendar.css';
 import { Button as N } from "../Button/Button2.js";
-import { addDays as Z, addMonths as H } from "../../helpers/Datetime.js";
-import { useSwipe as ee } from "../../hooks/useSwipe.js";
-import { buildDroppedStart as te, getWeekDays as ae, startOfDay as T } from "./EventCalendar.helpers.js";
-import { DayAgenda as ne } from "../DayAgenda/DayAgenda2.js";
-import { ToggleButtons as re } from "../ToggleButtons/ToggleButtons2.js";
-import { EventCalendarMonth as le } from "./EventCalendar.Month.js";
-import { EventCalendarWeek as oe } from "./EventCalendar.Week.js";
+import { addDays as H, addMonths as ee } from "../../helpers/Datetime.js";
+import { useSwipe as te } from "../../hooks/useSwipe.js";
+import { buildDroppedStart as ae, getWeekDays as ne, startOfDay as T } from "./EventCalendar.helpers.js";
+import { DayAgenda as re } from "../DayAgenda/DayAgenda2.js";
+import { ToggleButtons as le } from "../ToggleButtons/ToggleButtons2.js";
+import { EventCalendarMonth as oe } from "./EventCalendar.Month.js";
+import { EventCalendarWeek as ie } from "./EventCalendar.Week.js";
 /* empty css              */
-import { useCallback as s, useMemo as ie, useState as f } from "react";
+import { useCallback as s, useMemo as se, useState as f } from "react";
 import { jsx as n, jsxs as F } from "react/jsx-runtime";
-var se = [{
+var ce = [{
   key: "month",
   label: "Month",
   icon: "calendar-month"
@@ -18,27 +18,27 @@ var se = [{
   key: "week",
   label: "Week",
   icon: "calendar-week"
-}], ce = (r) => r.toLocaleDateString(void 0, {
+}], de = (r) => r.toLocaleDateString(void 0, {
   month: "long",
   year: "numeric"
-}), d = (r) => r.toLocaleDateString(void 0, { month: "short" }), de = (r, D) => {
-  const l = ae(r, D), t = l[0], a = l[l.length - 1];
+}), d = (r) => r.toLocaleDateString(void 0, { month: "short" }), me = (r, D) => {
+  const l = ne(r, D), t = l[0], a = l[l.length - 1];
   return t.getFullYear() !== a.getFullYear() ? `${t.getDate()} ${d(t)} ${t.getFullYear()} – ${a.getDate()} ${d(a)} ${a.getFullYear()}` : t.getMonth() !== a.getMonth() ? `${t.getDate()} ${d(t)} – ${a.getDate()} ${d(a)} ${a.getFullYear()}` : `${t.getDate()} – ${a.getDate()} ${d(a)} ${a.getFullYear()}`;
 };
-function Se({ activeHours: r, className: D, date: l, dayAgenda: t = !1, dayEndHour: a = 24, dayStartHour: y = 0, defaultDurationMinutes: C = 30, emptyLabel: Y, events: b, firstDayOfWeek: v = 0, headerExtra: z, hourHeight: V = 44, maxEventsPerDay: W = 3, onDateChange: $, onDayClick: _, onEventClick: m, onEventDrop: g, onViewChange: w, renderEvent: B, showHeader: x = !0, showWeekNumbers: L = !1, swipeNavigation: P = !0, view: h }) {
-  const [A, E] = f(() => T(l ?? /* @__PURE__ */ new Date())), [O, R] = f(h ?? "month"), [c, S] = f(null), [I, u] = f(null), o = l ?? A, i = h ?? O, q = !!g, M = s((e) => {
-    $ && $(e), l || E(e);
-  }, [l, $]), G = s((e) => {
-    w && w(e), h || R(e);
+function Me({ activeHours: r, className: D, date: l, dayAgenda: t = !1, dayEndHour: a = 24, dayStartHour: y = 0, defaultDurationMinutes: C = 30, emptyLabel: Y, events: b, firstDayOfWeek: v = 0, headerExtra: z, hourHeight: V = 44, maxEventsPerDay: W = 3, onDateChange: $, onDayClick: _, onEventClick: m, onEventDrop: g, onRangeSelect: x, onViewChange: w, renderEvent: B, showHeader: L = !0, showWeekNumbers: P = !1, swipeNavigation: A = !0, view: h }) {
+  const [E, O] = f(() => T(l ?? /* @__PURE__ */ new Date())), [R, q] = f(h ?? "month"), [c, S] = f(null), [I, u] = f(null), o = l ?? E, i = h ?? R, G = !!g, M = s((e) => {
+    $ && $(e), l || O(e);
+  }, [l, $]), J = s((e) => {
+    w && w(e), h || q(e);
   }, [w, h]), p = s((e) => {
-    M(i === "month" ? H(o, e) : Z(o, e * 7));
+    M(i === "month" ? ee(o, e) : H(o, e * 7));
   }, [
     o,
     i,
     M
-  ]), J = s((e, X) => {
-    !c || !g || (g(c, te(c, e, X)), S(null));
-  }, [c, g]), k = s((e) => u(T(e)), []), K = s((e) => {
+  ]), K = s((e, Z) => {
+    !c || !g || (g(c, ae(c, e, Z)), S(null));
+  }, [c, g]), k = s((e) => u(T(e)), []), Q = s((e) => {
     if (t) {
       k(e.start);
       return;
@@ -48,33 +48,34 @@ function Se({ activeHours: r, className: D, date: l, dayAgenda: t = !1, dayEndHo
     t,
     m,
     k
-  ]), Q = ee({
-    enabled: P,
+  ]), U = te({
+    enabled: A,
     onSwipeLeft: () => p(1),
     onSwipeRight: () => p(-1)
-  }), U = ie(() => i === "month" ? ce(o) : de(o, v), [
+  }), X = se(() => i === "month" ? de(o) : me(o, v), [
     o,
     i,
     v
   ]), j = {
     activeHours: r,
     date: o,
-    dragEnabled: q,
+    dragEnabled: G,
     draggingId: c?.id ?? null,
     events: b,
     firstDayOfWeek: v,
     onDayClick: _,
     onDragEnd: () => S(null),
     onDragStart: (e) => S(e),
-    onDrop: J,
-    onEventClick: t || m ? K : void 0,
+    onDrop: K,
+    onRangeSelect: x,
+    onEventClick: t || m ? Q : void 0,
     renderEvent: B,
-    showWeekNumbers: L
+    showWeekNumbers: P
   };
   return /* @__PURE__ */ F("div", {
     className: ["event-calendar", D ?? ""].filter(Boolean).join(" "),
     children: [
-      x && /* @__PURE__ */ F("div", {
+      L && /* @__PURE__ */ F("div", {
         className: "event-calendar__header",
         children: [
           /* @__PURE__ */ F("div", {
@@ -103,29 +104,29 @@ function Se({ activeHours: r, className: D, date: l, dayAgenda: t = !1, dayEndHo
           }),
           /* @__PURE__ */ n("h2", {
             className: "event-calendar__title",
-            children: U
+            children: X
           }),
           z && /* @__PURE__ */ n("div", {
             className: "event-calendar__header-extra",
             children: z
           }),
-          /* @__PURE__ */ n(re, {
-            onToggleChange: (e) => G(e),
+          /* @__PURE__ */ n(le, {
+            onToggleChange: (e) => J(e),
             size: "small",
             state: i,
-            states: se
+            states: ce
           })
         ]
       }),
       /* @__PURE__ */ n("div", {
         className: "event-calendar__viewport",
-        ...Q,
-        children: i === "month" ? /* @__PURE__ */ n(le, {
+        ...U,
+        children: i === "month" ? /* @__PURE__ */ n(oe, {
           ...j,
           emptyLabel: Y,
           maxEventsPerDay: W,
           onOpenDay: t ? k : void 0
-        }) : /* @__PURE__ */ n(oe, {
+        }) : /* @__PURE__ */ n(ie, {
           ...j,
           dayEndHour: a,
           dayStartHour: y,
@@ -133,7 +134,7 @@ function Se({ activeHours: r, className: D, date: l, dayAgenda: t = !1, dayEndHo
           hourHeight: V
         })
       }),
-      I && /* @__PURE__ */ n(ne, {
+      I && /* @__PURE__ */ n(re, {
         activeHours: r,
         date: I,
         onDateChange: u,
@@ -151,5 +152,5 @@ function Se({ activeHours: r, className: D, date: l, dayAgenda: t = !1, dayEndHo
   });
 }
 export {
-  Se as EventCalendar
+  Me as EventCalendar
 };

package/dist/helpers/VersionInfo.js

@@ -23,7 +23,7 @@ var r = (i) => {
   const o = {
     ...i,
     lib: d,
-    libBuildNumber: 452,
+    libBuildNumber: 461,
     libCommit: n,
     libBuildDate: t
   };

package/dist/index.d.ts

@@ -1430,7 +1430,7 @@ declare interface ErrorBoundaryState {
     error: Error | null;
 }
 
-export declare function EventCalendar<T>({ activeHours, className, date, dayAgenda, dayEndHour, dayStartHour, defaultDurationMinutes, emptyLabel, events, firstDayOfWeek, headerExtra, hourHeight, maxEventsPerDay, onDateChange, onDayClick, onEventClick, onEventDrop, onViewChange, renderEvent, showHeader, showWeekNumbers, swipeNavigation, view, }: EventCalendarProps<T>): JSX.Element;
+export declare function EventCalendar<T>({ activeHours, className, date, dayAgenda, dayEndHour, dayStartHour, defaultDurationMinutes, emptyLabel, events, firstDayOfWeek, headerExtra, hourHeight, maxEventsPerDay, onDateChange, onDayClick, onEventClick, onEventDrop, onRangeSelect, onViewChange, renderEvent, showHeader, showWeekNumbers, swipeNavigation, view, }: EventCalendarProps<T>): JSX.Element;
 
 export declare interface EventCalendarProps<T = unknown> {
     events: CalendarEvent<T>[];
@@ -1452,6 +1452,18 @@ export declare interface EventCalendarProps<T = unknown> {
     onEventClick?: (event: CalendarEvent<T>) => void;
     /** Fires on the empty part of a day cell (month) or an hour slot (week). */
     onDayClick?: (date: Date) => void;
+    /**
+     * Dragging across the month grid selects a run of days and fires this on release, with
+     * `start` always the earlier end whichever way the drag went. It is how a period gets
+     * created by pointing at it rather than typing two dates into a form.
+     *
+     * A press that never leaves its day is a click, not a selection, and goes to
+     * `onDayClick` instead — so the two can both be set without competing.
+     */
+    onRangeSelect?: (range: {
+        start: Date;
+        end: Date;
+    }) => void;
     /**
      * Enables drag-to-reschedule. `nextStart` keeps the original time of day in month
      * view, and snaps to the dropped hour slot in week view.

package/dist/version.js

@@ -1,4 +1,4 @@
-var I = "3.1.5", B = 452, L = "7f7e753", _ = "2026-10-02T12:17:26.091Z", r = "452";
+var I = "3.2.0", B = 461, L = "0282050", _ = "2026-10-02T16:22:52.153Z", r = "461";
 export {
   _ as LIB_BUILD_DATE,
   r as LIB_BUILD_ID,

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.1.5",
-  "buildNumber": 452,
-  "commit": "7f7e753",
-  "buildDate": "2026-10-02T12:17:26.091Z"
+  "version": "3.2.0",
+  "buildNumber": 461,
+  "commit": "0282050",
+  "buildDate": "2026-10-02T16:22:52.153Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memobit/libs",
-  "version": "3.1.5",
+  "version": "3.2.0",
   "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
   "keywords": [
     "react",