@memobit/libs 3.0.0 → 3.1.0

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

@@ -0,0 +1,118 @@
+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 = [
+  "Sun",
+  "Mon",
+  "Tue",
+  "Wed",
+  "Thu",
+  "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));
+  };
+  return /* @__PURE__ */ l("div", {
+    className: "event-calendar__month",
+    children: [
+      /* @__PURE__ */ l("div", {
+        className: "event-calendar__weekdays",
+        children: [y && /* @__PURE__ */ a("div", {
+          className: "event-calendar__week-number event-calendar__week-number--head",
+          children: "Wk"
+        }), K.map((n) => /* @__PURE__ */ a("div", {
+          className: "event-calendar__weekday",
+          children: n
+        }, n))]
+      }),
+      /* @__PURE__ */ a("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);
+                    },
+                    type: "button",
+                    children: [
+                      "+",
+                      E,
+                      " more"
+                    ]
+                  }),
+                  S && _.length > D && /* @__PURE__ */ a("button", {
+                    className: "event-calendar__more",
+                    onClick: (e) => {
+                      e.stopPropagation(), w(null);
+                    },
+                    type: "button",
+                    children: "Show less"
+                  })
+                ]
+              })]
+            }, r);
+          })]
+        }, o))
+      }),
+      !z && k && /* @__PURE__ */ a("div", {
+        className: "event-calendar__empty",
+        children: k
+      })
+    ]
+  });
+}
+export {
+  ae as EventCalendarMonth
+};

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

@@ -0,0 +1,131 @@
+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;
+  }, [
+    n,
+    A,
+    c
+  ]);
+  const C = (e, t) => {
+    const a = G(e);
+    return a.setHours(t, 0, 0, 0), a;
+  }, M = (e, t) => {
+    !h || p === null || (e.preventDefault(), e.dataTransfer.dropEffect = "move", o(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", {
+          className: [
+            "event-calendar__week-day-head",
+            S(e) ? "event-calendar__week-day-head--today" : "",
+            F(e) ? "event-calendar__week-day-head--weekend" : ""
+          ].filter(Boolean).join(" "),
+          children: [/* @__PURE__ */ l("span", {
+            className: "event-calendar__week-day-name",
+            children: e.toLocaleDateString(void 0, { weekday: "short" })
+          }), /* @__PURE__ */ l("span", {
+            className: "event-calendar__week-day-number",
+            children: e.getDate()
+          })]
+        }, e.toDateString()))]
+      }),
+      W && /* @__PURE__ */ s("div", {
+        className: "event-calendar__all-day",
+        children: [/* @__PURE__ */ l("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__week-body",
+        ref: f,
+        children: [/* @__PURE__ */ l("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) })
+          }, e))
+        }), i.map((e) => {
+          const t = E(e.timed, n, m, 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__slot",
+                  T(a, d) ? "" : "event-calendar__slot--inactive",
+                  B === v ? "event-calendar__slot--drop-target" : "",
+                  N ? "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);
+                },
+                style: { height: c }
+              }, v);
+            }), t.map((a) => /* @__PURE__ */ l(R, {
+              className: "event-calendar__chip--positioned",
+              dragEnabled: h,
+              event: a.event,
+              isDragging: p === a.event.id,
+              onClick: L,
+              onDragEnd: k,
+              onDragStart: $,
+              renderEvent: O,
+              showTime: !0,
+              style: {
+                top: `${a.top}%`,
+                height: `${a.height}%`,
+                left: `calc(${a.left}% + var(--spacing-2))`,
+                width: `calc(${a.width}% - var(--spacing-4))`
+              }
+            }, a.event.id))]
+          }, e.date.toDateString());
+        })]
+      })
+    ]
+  });
+}
+export {
+  H as EventCalendarWeek
+};

package/dist/components/EventCalendar/EventCalendar.css

@@ -0,0 +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;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}.event-calendar__month .event-calendar__chip:has(.event-calendar__chip-leading){padding:var(--spacing-2);justify-content:center;align-items:center;gap:0}.event-calendar__month .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

@@ -0,0 +1,72 @@
+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) => {
+  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;
+    }
+    S(e.start, n) && i.push(e);
+  }), i.sort((e, h) => e.start.getTime() - h.start.getTime()), {
+    date: n,
+    allDay: o,
+    timed: i
+  };
+}), O = (t, r, n, 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);
+    return {
+      event: a,
+      start: u,
+      end: Math.max(w(v(a, o)), u + 15)
+    };
+  }), D = [];
+  let l = [], c = -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);
+    });
+    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
+      });
+    }), l = [], c = -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 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")}`;
+export {
+  k as bucketEventsByDay,
+  $ as buildDroppedStart,
+  C as formatEventTime,
+  A as formatHourLabel,
+  v as getEventEnd,
+  T as getWeekDays,
+  b as isActiveHour,
+  O as layoutDayEvents,
+  w as minutesFromMidnight,
+  d as startOfDay,
+  x as startOfWeek
+};

package/dist/components/EventCalendar/EventCalendar2.js

@@ -0,0 +1,157 @@
+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 le } from "../ToggleButtons/ToggleButtons2.js";
+import { EventCalendarMonth as re } from "./EventCalendar.Month.js";
+import { EventCalendarWeek as oe } from "./EventCalendar.Week.js";
+/* empty css              */
+import { useCallback as s, useMemo as ie, useState as f } from "react";
+import { jsx as n, jsxs as F } from "react/jsx-runtime";
+var se = [{
+  key: "month",
+  label: "Month",
+  icon: "calendar-month"
+}, {
+  key: "week",
+  label: "Week",
+  icon: "calendar-week"
+}], ce = (l) => l.toLocaleDateString(void 0, {
+  month: "long",
+  year: "numeric"
+}), g = (l) => l.toLocaleDateString(void 0, { month: "short" }), de = (l, v) => {
+  const r = ae(l, v), t = r[0], a = r[r.length - 1];
+  return t.getFullYear() !== a.getFullYear() ? `${t.getDate()} ${g(t)} ${t.getFullYear()} – ${a.getDate()} ${g(a)} ${a.getFullYear()}` : t.getMonth() !== a.getMonth() ? `${t.getDate()} ${g(t)} – ${a.getDate()} ${g(a)} ${a.getFullYear()}` : `${t.getDate()} – ${a.getDate()} ${g(a)} ${a.getFullYear()}`;
+};
+function Se({ activeHours: l, className: v, date: r, dayAgenda: t = !1, dayEndHour: a = 24, dayStartHour: y = 0, defaultDurationMinutes: C = 30, emptyLabel: Y, events: b, firstDayOfWeek: D = 0, headerExtra: z, hourHeight: V = 44, maxEventsPerDay: W = 3, onDateChange: $, onDayClick: _, onEventClick: c, onEventDrop: h, onViewChange: w, renderEvent: B, showHeader: x = !0, showWeekNumbers: L = !1, swipeNavigation: P = !0, view: u }) {
+  const [A, E] = f(() => T(r ?? /* @__PURE__ */ new Date())), [O, R] = f(u ?? "month"), [d, S] = f(null), [I, m] = f(null), o = r ?? A, i = u ?? O, q = !!h, M = s((e) => {
+    $ && $(e), r || E(e);
+  }, [r, $]), G = s((e) => {
+    w && w(e), u || R(e);
+  }, [w, u]), p = s((e) => {
+    M(i === "month" ? H(o, e) : Z(o, e * 7));
+  }, [
+    o,
+    i,
+    M
+  ]), J = s((e, X) => {
+    !d || !h || (h(d, te(d, e, X)), S(null));
+  }, [d, h]), k = s((e) => m(T(e)), []), K = s((e) => {
+    if (t) {
+      k(e.start);
+      return;
+    }
+    c?.(e);
+  }, [
+    t,
+    c,
+    k
+  ]), Q = ee({
+    enabled: P,
+    onSwipeLeft: () => p(1),
+    onSwipeRight: () => p(-1)
+  }), U = ie(() => i === "month" ? ce(o) : de(o, D), [
+    o,
+    i,
+    D
+  ]), j = {
+    activeHours: l,
+    date: o,
+    dragEnabled: q,
+    draggingId: d?.id ?? null,
+    events: b,
+    firstDayOfWeek: D,
+    onDayClick: _,
+    onDragEnd: () => S(null),
+    onDragStart: (e) => S(e),
+    onDrop: J,
+    onEventClick: t || c ? K : void 0,
+    renderEvent: B,
+    showWeekNumbers: L
+  };
+  return /* @__PURE__ */ F("div", {
+    className: ["event-calendar", v ?? ""].filter(Boolean).join(" "),
+    children: [
+      x && /* @__PURE__ */ F("div", {
+        className: "event-calendar__header",
+        children: [
+          /* @__PURE__ */ F("div", {
+            className: "event-calendar__nav",
+            children: [
+              /* @__PURE__ */ n(N, {
+                icon: "arrow-left",
+                onClick: () => p(-1),
+                size: "small",
+                title: "Previous",
+                variant: "plain"
+              }),
+              /* @__PURE__ */ n(N, {
+                onClick: () => M(T(/* @__PURE__ */ new Date())),
+                size: "small",
+                children: "Today"
+              }),
+              /* @__PURE__ */ n(N, {
+                icon: "arrow-right",
+                onClick: () => p(1),
+                size: "small",
+                title: "Next",
+                variant: "plain"
+              })
+            ]
+          }),
+          /* @__PURE__ */ n("h2", {
+            className: "event-calendar__title",
+            children: U
+          }),
+          z && /* @__PURE__ */ n("div", {
+            className: "event-calendar__header-extra",
+            children: z
+          }),
+          /* @__PURE__ */ n(le, {
+            onToggleChange: (e) => G(e),
+            size: "small",
+            state: i,
+            states: se
+          })
+        ]
+      }),
+      /* @__PURE__ */ n("div", {
+        className: "event-calendar__viewport",
+        ...Q,
+        children: i === "month" ? /* @__PURE__ */ n(re, {
+          ...j,
+          emptyLabel: Y,
+          maxEventsPerDay: W,
+          onOpenDay: t ? k : void 0
+        }) : /* @__PURE__ */ n(oe, {
+          ...j,
+          dayEndHour: a,
+          dayStartHour: y,
+          defaultDurationMinutes: C,
+          hourHeight: V
+        })
+      }),
+      I && /* @__PURE__ */ n(ne, {
+        activeHours: l,
+        date: I,
+        onDateChange: m,
+        emptyLabel: Y,
+        events: b,
+        isOpen: !0,
+        onAdd: _ ? (e) => {
+          m(null), _(e);
+        } : void 0,
+        onClose: () => m(null),
+        onEventClick: c ? (e) => {
+          m(null), c(e);
+        } : void 0,
+        renderEvent: B
+      })
+    ]
+  });
+}
+export {
+  Se as EventCalendar
+};

package/dist/components/FileDropzone/FileDropzone.css

@@ -0,0 +1 @@
+.file-dropzone{gap:var(--spacing-12);flex-direction:column;display:flex}.file-dropzone__label{color:var(--form-control-label-color,inherit);font-size:var(--form-control-label-font-size,inherit);font-weight:var(--form-control-label-font-weight,600);letter-spacing:var(--form-control-label-letter-spacing,normal);text-transform:var(--form-control-label-text-transform,none)}.file-dropzone__area{border:2px dashed var(--delimiter-color);border-radius:var(--radius);padding:var(--spacing-24);text-align:center;background:var(--card-background-color);-webkit-backdrop-filter:var(--card-backdrop-filter,none);cursor:pointer;transition:border-color .2s;position:relative}.file-dropzone__area input{display:none}.file-dropzone__area.is-dragging{border-color:var(--card-hover-border-color);background:var(--card-background-accent-color)}.file-dropzone__content{color:var(--body-color);flex-direction:column;gap:6px;display:flex}.file-dropzone__files{background:var(--card-background-accent-color);border-radius:var(--radius);padding:var(--spacing-12);border:1px solid var(--delimiter-color)}.file-dropzone__files ul{margin:0;padding-left:16px}.file-dropzone__previews{gap:var(--spacing-12);flex-wrap:wrap;display:flex}.file-dropzone__previews img{object-fit:cover;border-radius:var(--radius);border:1px solid var(--delimiter-color);width:96px;height:96px}

package/dist/components/FileDropzone/FileDropzone2.js

@@ -0,0 +1,71 @@
+import './FileDropzone.css';
+/* empty css             */
+import { useCallback as D, useEffect as _, useRef as z, useState as o } from "react";
+import { jsx as n, jsxs as a } from "react/jsx-runtime";
+var j = ({ label: c, accept: h, multiple: l = !1, showPreview: s = !0, onFiles: f }) => {
+  const [u, i] = o(!1), [t, m] = o([]), d = z(null), [p, v] = o([]);
+  _(() => {
+    if (!s) return;
+    const e = t.filter((r) => r.type.startsWith("image/")).map((r) => URL.createObjectURL(r));
+    return v(e), () => {
+      e.forEach((r) => URL.revokeObjectURL(r));
+    };
+  }, [t, s]);
+  const g = D((e) => {
+    if (!e) return;
+    const r = l ? Array.from(e) : [e[0]].filter(Boolean);
+    m(r), f?.(r);
+  }, [l, f]);
+  return /* @__PURE__ */ a("div", {
+    className: "file-dropzone",
+    children: [
+      c && /* @__PURE__ */ n("label", {
+        className: "file-dropzone__label",
+        children: c
+      }),
+      /* @__PURE__ */ a("div", {
+        className: `file-dropzone__area ${u ? "is-dragging" : ""}`,
+        onDragEnter: (e) => {
+          e.preventDefault(), i(!0);
+        },
+        onDragOver: (e) => e.preventDefault(),
+        onDragLeave: (e) => {
+          e.preventDefault(), i(!1);
+        },
+        onDrop: (e) => {
+          e.preventDefault(), i(!1), g(e.dataTransfer.files);
+        },
+        onClick: () => d.current?.click(),
+        children: [/* @__PURE__ */ n("input", {
+          ref: d,
+          type: "file",
+          accept: h,
+          multiple: l,
+          onChange: (e) => g(e.target.files)
+        }), /* @__PURE__ */ a("div", {
+          className: "file-dropzone__content",
+          children: [/* @__PURE__ */ n("strong", { children: "Drop files here" }), /* @__PURE__ */ n("span", { children: "or click to browse" })]
+        })]
+      }),
+      t.length > 0 && /* @__PURE__ */ a("div", {
+        className: "file-dropzone__files",
+        children: [/* @__PURE__ */ n("h4", { children: "Selected files" }), /* @__PURE__ */ n("ul", { children: t.map((e) => /* @__PURE__ */ a("li", { children: [
+          e.name,
+          " (",
+          Math.round(e.size / 1024),
+          " KB)"
+        ] }, e.name)) })]
+      }),
+      s && p.length > 0 && /* @__PURE__ */ n("div", {
+        className: "file-dropzone__previews",
+        children: p.map((e, r) => /* @__PURE__ */ n("img", {
+          src: e,
+          alt: `Preview ${r + 1}`
+        }, e))
+      })
+    ]
+  });
+};
+export {
+  j as FileDropzone
+};

package/dist/components/Flag/Flag.css

@@ -0,0 +1 @@
+.flag{-webkit-user-select:none;user-select:none;line-height:1;display:inline-block}.flag img{border-radius:var(--spacing-2);object-fit:cover;transition:transform .2s ease-in-out;display:block}@media (prefers-color-scheme:dark){.flag img{border:var(--spacing-1) solid #ffffff1a}}@media (prefers-color-scheme:light){.flag img{border:var(--spacing-1) solid #0000001a}}@media (width<=768px){.flag img{transform:scale(1.05)}}.flag:hover img{box-shadow:0 var(--spacing-2) var(--spacing-8) #0003;transform:scale(1.1)}.flag--fallback{color:#fff;border-radius:var(--spacing-2);opacity:.7;background:#666;justify-content:center;align-items:center;font-weight:700;display:inline-flex}@media (prefers-color-scheme:dark){.flag--fallback{color:#ccc;background:#444}}.flag--fallback:hover{opacity:.9;transform:scale(1.1)}.flag--fallback.flags--xxs{width:var(--spacing-12);height:9px;font-size:6px}.flag--fallback.flags--xs{width:var(--spacing-16);height:var(--spacing-12);font-size:8px}.flag--fallback.flags--sm{width:20px;height:15px;font-size:var(--font-size-xxs)}.flag--fallback.flags--md{width:var(--spacing-24);height:18px;font-size:var(--font-size-xs)}.flag--fallback.flags--lg{width:var(--spacing-32);height:var(--spacing-24);font-size:var(--font-size-md)}.flag--fallback.flags--xl{width:var(--spacing-48);height:36px;font-size:var(--font-size-xl)}.flag--fallback.flags--xxl{width:var(--spacing-64);height:var(--spacing-48);font-size:var(--font-size-xxl)}.flag--xxs img{width:var(--spacing-12);height:9px}.flag--xs img{width:var(--spacing-16);height:var(--spacing-12)}.flag--sm img{width:20px;height:15px}.flag--md img{width:var(--spacing-24);height:18px}.flag--lg img{width:var(--spacing-32);height:var(--spacing-24)}.flag--xl img{width:var(--spacing-48);height:36px}.flag--xxl img{width:var(--spacing-64);height:var(--spacing-48)}

package/dist/components/Flag/Flag2.js

@@ -0,0 +1,36 @@
+import './Flag.css';
+import { Tooltip as p } from "../Tooltip/Tooltip2.js";
+/* empty css     */
+import "react";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+var u = ({ code: r, size: a = "md", className: e = "" }) => {
+  if (!r) return /* @__PURE__ */ t(p, {
+    title: `Unsupported country code: ${r}`,
+    children: /* @__PURE__ */ t("div", {
+      className: `flags flags--fallback flags--${a} ${e}`,
+      children: "?"
+    })
+  });
+  const l = `https://flagcdn.com/w80/${r}.png`, s = `https://flagcdn.com/w80/${r}.webp`;
+  return /* @__PURE__ */ g("picture", {
+    className: `flag flag--${a} ${e}`,
+    children: [/* @__PURE__ */ t("source", {
+      srcSet: s,
+      type: "image/webp"
+    }), /* @__PURE__ */ t(p, {
+      title: `Country: ${r.toUpperCase()}`,
+      children: /* @__PURE__ */ t("img", {
+        src: l,
+        alt: `${r.toUpperCase()} flag`,
+        loading: "lazy",
+        onError: (c) => {
+          const o = c.target;
+          o.src !== l && (o.src = l);
+        }
+      })
+    })]
+  });
+};
+export {
+  u as Flag
+};

package/dist/components/FloatButton/FloatButton.css

@@ -0,0 +1 @@
+.float-button-container{bottom:var(--spacing-24);right:var(--spacing-24);z-index:1000;position:fixed}.float-button{width:56px;height:56px;color:var(--button-default-color);border-radius:var(--spacing-16);background-color:var(--button-default-background-color);border:var(--spacing-1) solid var(--button-default-border-color);cursor:pointer;box-shadow:0 var(--spacing-4) var(--spacing-12) var(--box-shadow);z-index:1001;justify-content:center;align-items:center;transition:all .3s;display:flex;position:relative}.float-button:hover{background-color:var(--button-default-hover-background-color);box-shadow:0 6px var(--spacing-16) var(--box-shadow);transform:scale(1.1)}.float-button:active{transform:scale(.95)}.float-button--active{background-color:var(--button-info-background-color)}.float-button--active:hover{background-color:var(--button-info-hover-background-color)}.float-button__icon{line-height:1}.float-button-overlay{background-color:var(--backdrop-color);z-index:999;animation:.2s fadeIn;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.float-button-menu{background-color:var(--card-background-color);border-radius:var(--radius);box-shadow:0 var(--spacing-4) var(--spacing-12) var(--box-shadow);min-width:var(--spacing-200);z-index:1000;flex-direction:column;animation:.2s slideUp;display:flex;position:absolute;bottom:70px;right:0;overflow:hidden}.float-button-menu__item{padding:var(--spacing-12) var(--spacing-16);align-self:stretch;align-items:center;gap:var(--spacing-12);cursor:pointer;color:var(--card-color);text-align:left;background-color:#0000;border:none;transition:background-color .15s ease-out;display:flex}.float-button-menu__item:hover,.float-button-menu__item:active{background-color:var(--list-hover-background-color)}.float-button-menu__item:not(:last-child){border-bottom:var(--spacing-1) solid var(--delimiter-color)}.float-button-menu__icon{line-height:1}.float-button-menu__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.float-button-container{bottom:var(--spacing-16);right:var(--spacing-16)}.float-button{width:var(--spacing-48);height:var(--spacing-48)}}