@uptrademedia/site-kit 1.1.0 → 1.1.1

package/dist/{chunk-MVNUEXP3.js → chunk-YZRNC2Z6.js}

@@ -2548,6 +2548,132 @@ var MONTHS = [
   "November",
   "December"
 ];
+function formatDateForTooltip(dateStr) {
+  const d = new Date(dateStr);
+  return d.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", year: "numeric" });
+}
+function CalendarEventCell({
+  item,
+  eventDisplay,
+  eventClassName,
+  onEventClick,
+  formatTime: formatTime2
+}) {
+  const [hover, setHover] = React5__default.default.useState(false);
+  const { event, schedule } = item;
+  const imageUrl = event.featured_image_url;
+  if (eventDisplay === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `site-kit-calendar-event-image-wrapper ${eventClassName}`,
+        style: { position: "relative" },
+        onMouseEnter: () => setHover(true),
+        onMouseLeave: () => setHover(false),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onEventClick,
+              className: `site-kit-calendar-event site-kit-calendar-event-image ${eventClassName}`,
+              style: {
+                display: "block",
+                width: "100%",
+                height: "28px",
+                padding: 0,
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                overflow: "hidden",
+                background: imageUrl ? "transparent" : "#dbeafe"
+              },
+              children: imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: imageUrl,
+                  alt: event.name,
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover"
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                fontSize: "0.65rem",
+                color: "#1d4ed8",
+                fontWeight: 500,
+                padding: "2px 4px",
+                display: "block",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }, children: event.name })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "site-kit-calendar-event-tooltip",
+              style: {
+                position: "absolute",
+                bottom: "100%",
+                left: "50%",
+                transform: "translateX(-50%) translateY(-4px)",
+                padding: "8px 12px",
+                background: "#1f2937",
+                color: "white",
+                borderRadius: "8px",
+                fontSize: "0.75rem",
+                minWidth: "180px",
+                maxWidth: "220px",
+                boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
+                pointerEvents: "none",
+                opacity: hover ? 1 : 0,
+                visibility: hover ? "visible" : "hidden",
+                transition: "opacity 0.15s, visibility 0.15s",
+                zIndex: 50
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: "4px" }, children: event.name }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { opacity: 0.9, fontSize: "0.7rem" }, children: [
+                  formatDateForTooltip(schedule.starts_at),
+                  " \u2022 ",
+                  formatTime2(schedule.starts_at)
+                ] }),
+                event.location && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { opacity: 0.8, fontSize: "0.65rem", marginTop: "2px" }, children: event.location })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: onEventClick,
+      className: `site-kit-calendar-event ${eventClassName}`,
+      style: {
+        display: "block",
+        width: "100%",
+        padding: "2px 4px",
+        fontSize: "0.7rem",
+        fontWeight: 500,
+        textAlign: "left",
+        border: "none",
+        borderRadius: "3px",
+        background: "#dbeafe",
+        color: "#1d4ed8",
+        cursor: "pointer",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis"
+      },
+      title: `${event.name} - ${formatTime2(schedule.starts_at)}`,
+      children: event.name
+    }
+  );
+}
 function CalendarView({
   events: propEvents,
   initialDate,
@@ -2559,6 +2685,7 @@ function CalendarView({
   weekStartsOn = 0,
   minDate,
   maxDate,
+  eventDisplay = "image",
   className = "",
   headerClassName = "",
   dayClassName = "",
@@ -2789,29 +2916,14 @@ function CalendarView({
             background: day.isToday ? "#2563eb" : "transparent"
           }, children: day.date.getDate() }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
-            day.events.slice(0, 3).map((item, eventIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+            day.events.slice(0, 3).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              CalendarEventCell,
               {
-                onClick: (e) => handleEventClick(e, item.event, item.schedule),
-                className: `site-kit-calendar-event ${eventClassName}`,
-                style: {
-                  display: "block",
-                  width: "100%",
-                  padding: "2px 4px",
-                  fontSize: "0.7rem",
-                  fontWeight: 500,
-                  textAlign: "left",
-                  border: "none",
-                  borderRadius: "3px",
-                  background: "#dbeafe",
-                  color: "#1d4ed8",
-                  cursor: "pointer",
-                  overflow: "hidden",
-                  whiteSpace: "nowrap",
-                  textOverflow: "ellipsis"
-                },
-                title: `${item.event.name} - ${formatTime(item.schedule.starts_at)}`,
-                children: item.event.name
+                item,
+                eventDisplay,
+                eventClassName,
+                onEventClick: (e) => handleEventClick(e, item.event, item.schedule),
+                formatTime
               },
               `${item.event.id}-${item.schedule.id}`
             )),
@@ -3770,10 +3882,11 @@ function EventsWidget({
       }
     ),
     effectiveView === "list" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-list ${listClassName}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: displayEvents.map((eventItem) => {
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: displayEvents.map((eventItem, index) => {
         const nextSchedule = eventItem.next_schedule || eventItem.schedules?.[0];
         const isFree = !eventItem.price || eventItem.price === 0;
         const imageUrl = eventItem.featured_image_url;
+        const uniqueKey = nextSchedule ? `${eventItem.id}-${nextSchedule.id}` : `${eventItem.id}-${index}`;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -3883,7 +3996,7 @@ function EventsWidget({
               ] })
             ]
           },
-          eventItem.id
+          uniqueKey
         );
       }) }),
       showViewAll && events.length > limit && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "1.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3909,10 +4022,11 @@ function EventsWidget({
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
         gap: "1.25rem"
-      }, children: displayEvents.map((eventItem) => {
+      }, children: displayEvents.map((eventItem, index) => {
         const nextSchedule = eventItem.next_schedule || eventItem.schedules?.[0];
         const isFree = !eventItem.price || eventItem.price === 0;
         const imageUrl = eventItem.featured_image_url;
+        const uniqueKey = nextSchedule ? `${eventItem.id}-${nextSchedule.id}` : `${eventItem.id}-${index}`;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -3977,7 +4091,7 @@ function EventsWidget({
               ] })
             ]
           },
-          eventItem.id
+          uniqueKey
         );
       }) }),
       showViewAll && events.length > limit && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "1.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4075,5 +4189,5 @@ exports.getSpotsRemaining = getSpotsRemaining;
 exports.isEventSoldOut = isEventSoldOut;
 exports.registerForEvent = registerForEvent;
 exports.useEventModal = useEventModal;
-//# sourceMappingURL=chunk-MVNUEXP3.js.map
-//# sourceMappingURL=chunk-MVNUEXP3.js.map
+//# sourceMappingURL=chunk-YZRNC2Z6.js.map
+//# sourceMappingURL=chunk-YZRNC2Z6.js.map