@uptrademedia/site-kit 1.0.28 → 1.0.30

package/dist/{chunk-RM4XFDE6.js → chunk-WNCM4GNY.js}

@@ -3356,6 +3356,12 @@ var ListIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www
   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
 ] });
+var GridIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "3", width: "7", height: "7" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "14", width: "7", height: "7" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "14", width: "7", height: "7" })
+] });
 var ClockIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
   /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
@@ -3364,9 +3370,11 @@ var LocationIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http:/
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "3" })
 ] });
+var DEFAULT_VIEWS = ["list", "grid", "calendar"];
 function EventsWidget({
   events: propEvents,
   defaultView = "list",
+  availableViews = DEFAULT_VIEWS,
   showViewToggle = true,
   title,
   subtitle,
@@ -3390,7 +3398,10 @@ function EventsWidget({
   eventCardClassName = "",
   modalClassName = ""
 }) {
-  const [viewMode, setViewMode] = React5.useState(defaultView);
+  const views = availableViews.length > 0 ? availableViews : DEFAULT_VIEWS;
+  const resolvedDefault = views.includes(defaultView) ? defaultView : views[0];
+  const [viewMode, setViewMode] = React5.useState(resolvedDefault);
+  const effectiveView = views.includes(viewMode) ? viewMode : views[0];
   const [events, setEvents] = React5.useState(propEvents || []);
   const [loading, setLoading] = React5.useState(!propEvents);
   const [error, setError] = React5.useState(null);
@@ -3510,7 +3521,7 @@ function EventsWidget({
       ] })
     ] });
   }
-  const displayEvents = viewMode === "list" ? events.slice(0, limit) : events;
+  const displayEvents = effectiveView === "list" || effectiveView === "grid" ? events.slice(0, limit) : events;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-widget ${className}`, children: [
     (title || subtitle || showViewToggle) && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -3541,7 +3552,7 @@ function EventsWidget({
                 borderRadius: "0.5rem"
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
+                views.includes("list") && /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
                   {
                     onClick: () => setViewMode("list"),
@@ -3566,7 +3577,32 @@ function EventsWidget({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(
+                views.includes("grid") && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => setViewMode("grid"),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "0.5rem",
+                      padding: "0.5rem 1rem",
+                      border: "none",
+                      borderRadius: "0.375rem",
+                      background: viewMode === "grid" ? "#fff" : "transparent",
+                      color: viewMode === "grid" ? "#1f2937" : "#6b7280",
+                      fontWeight: 500,
+                      fontSize: "0.875rem",
+                      cursor: "pointer",
+                      boxShadow: viewMode === "grid" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+                      transition: "all 150ms"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(GridIcon, {}),
+                      "Grid"
+                    ]
+                  }
+                ),
+                views.includes("calendar") && /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
                   {
                     onClick: () => setViewMode("calendar"),
@@ -3597,10 +3633,11 @@ function EventsWidget({
         ]
       }
     ),
-    viewMode === "list" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-list ${listClassName}`, children: [
+    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) => {
         const nextSchedule = eventItem.next_schedule || eventItem.schedules?.[0];
         const isFree = !eventItem.price || eventItem.price === 0;
+        const imageUrl = eventItem.featured_image_url;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -3608,14 +3645,15 @@ function EventsWidget({
             onClick: () => nextSchedule && handleEventClick(eventItem, nextSchedule),
             style: {
               display: "flex",
-              flexDirection: "column",
-              gap: "0.75rem",
-              padding: "1.25rem",
+              flexDirection: "row",
+              gap: 0,
+              padding: 0,
               background: "#fff",
               border: "1px solid #e5e7eb",
               borderRadius: "0.75rem",
               cursor: nextSchedule ? "pointer" : "default",
-              transition: "all 150ms"
+              transition: "all 150ms",
+              overflow: "hidden"
             },
             onMouseEnter: (e) => {
               if (nextSchedule) {
@@ -3628,38 +3666,160 @@ function EventsWidget({
               e.currentTarget.style.boxShadow = "none";
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "1rem" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "#1f2937" }, children: eventItem.name }),
-                  eventItem.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "#6b7280", fontSize: "0.875rem", lineHeight: 1.5 }, children: eventItem.short_description })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                width: "160px",
+                minWidth: "160px",
+                flexShrink: 0,
+                background: "#f3f4f6"
+              }, children: imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: imageUrl,
+                  alt: eventItem.name,
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    minHeight: "120px",
+                    objectFit: "cover",
+                    display: "block"
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                width: "100%",
+                minHeight: "120px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "#9ca3af"
+              }, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}) }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.75rem", padding: "1.25rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "1rem" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "#1f2937" }, children: eventItem.name }),
+                    eventItem.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.5rem 0 0", color: "#6b7280", fontSize: "0.875rem", lineHeight: 1.5 }, children: eventItem.short_description })
+                  ] }),
+                  eventItem.price_is_public && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                    padding: "0.375rem 0.75rem",
+                    background: isFree ? "#dcfce7" : "#dbeafe",
+                    color: isFree ? "#166534" : "#1e40af",
+                    borderRadius: "9999px",
+                    fontSize: "0.875rem",
+                    fontWeight: 600,
+                    whiteSpace: "nowrap"
+                  }, children: isFree ? "Free" : formatPrice(eventItem.price ?? 0, eventItem.currency) })
+                ] }),
+                nextSchedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", fontSize: "0.875rem", color: "#6b7280" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
+                    formatDate(nextSchedule.starts_at)
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, {}),
+                    formatTime(nextSchedule.starts_at)
+                  ] }),
+                  eventItem.location && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, {}),
+                    eventItem.location
+                  ] }),
+                  nextSchedule.spots_remaining !== null && nextSchedule.spots_remaining !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                    color: nextSchedule.spots_remaining < 5 ? "#dc2626" : "#6b7280",
+                    fontWeight: nextSchedule.spots_remaining < 5 ? 500 : 400
+                  }, children: nextSchedule.spots_remaining === 0 ? "Sold Out" : `${nextSchedule.spots_remaining} spots left` })
+                ] })
+              ] })
+            ]
+          },
+          eventItem.id
+        );
+      }) }),
+      showViewAll && events.length > limit && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", marginTop: "1.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: viewAllUrl,
+          style: {
+            display: "inline-block",
+            padding: "0.75rem 1.5rem",
+            background: "#f3f4f6",
+            color: "#1f2937",
+            borderRadius: "0.5rem",
+            textDecoration: "none",
+            fontWeight: 500,
+            fontSize: "0.875rem",
+            transition: "all 150ms"
+          },
+          children: viewAllText
+        }
+      ) })
+    ] }) : effectiveView === "grid" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `site-kit-events-grid ${listClassName}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+        gap: "1.25rem"
+      }, children: displayEvents.map((eventItem) => {
+        const nextSchedule = eventItem.next_schedule || eventItem.schedules?.[0];
+        const isFree = !eventItem.price || eventItem.price === 0;
+        const imageUrl = eventItem.featured_image_url;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `site-kit-event-card site-kit-event-card--grid ${eventCardClassName}`,
+            onClick: () => nextSchedule && handleEventClick(eventItem, nextSchedule),
+            style: {
+              position: "relative",
+              minHeight: "220px",
+              borderRadius: "0.75rem",
+              overflow: "hidden",
+              cursor: nextSchedule ? "pointer" : "default",
+              transition: "all 150ms",
+              border: "1px solid #e5e7eb"
+            },
+            onMouseEnter: (e) => {
+              if (nextSchedule) {
+                e.currentTarget.style.boxShadow = "0 10px 25px -5px rgba(0, 0, 0, 0.15)";
+                e.currentTarget.style.transform = "translateY(-2px)";
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.boxShadow = "none";
+              e.currentTarget.style.transform = "none";
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                position: "absolute",
+                inset: 0,
+                background: imageUrl ? `linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.15) 70%), url(${imageUrl}) center/cover` : "linear-gradient(135deg, #4b5563 0%, #6b7280 100%)"
+              } }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+                position: "relative",
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "flex-end",
+                padding: "1.25rem",
+                color: "#fff"
+              }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "#fff", textShadow: "0 1px 2px rgba(0,0,0,0.5)" }, children: eventItem.name }),
+                eventItem.short_description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0.25rem 0 0", fontSize: "0.8125rem", opacity: 0.95, lineHeight: 1.4, overflow: "hidden", textOverflow: "ellipsis", maxHeight: "2.8em" }, children: eventItem.short_description }),
+                nextSchedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem", marginTop: "0.75rem", fontSize: "0.8125rem", opacity: 0.95 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
+                    formatDate(nextSchedule.starts_at)
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, {}),
+                    formatTime(nextSchedule.starts_at)
+                  ] }),
+                  nextSchedule.spots_remaining !== null && nextSchedule.spots_remaining !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: nextSchedule.spots_remaining === 0 ? "Sold Out" : `${nextSchedule.spots_remaining} spots left` })
                 ] }),
                 eventItem.price_is_public && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-                  padding: "0.375rem 0.75rem",
-                  background: isFree ? "#dcfce7" : "#dbeafe",
-                  color: isFree ? "#166534" : "#1e40af",
+                  marginTop: "0.5rem",
+                  display: "inline-block",
+                  padding: "0.25rem 0.5rem",
+                  background: "rgba(255,255,255,0.2)",
                   borderRadius: "9999px",
                   fontSize: "0.875rem",
-                  fontWeight: 600,
-                  whiteSpace: "nowrap"
+                  fontWeight: 600
                 }, children: isFree ? "Free" : formatPrice(eventItem.price ?? 0, eventItem.currency) })
-              ] }),
-              nextSchedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: "1rem", fontSize: "0.875rem", color: "#6b7280" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}),
-                  formatDate(nextSchedule.starts_at)
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, {}),
-                  formatTime(nextSchedule.starts_at)
-                ] }),
-                eventItem.location && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.375rem" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LocationIcon, {}),
-                  eventItem.location
-                ] }),
-                nextSchedule.spots_remaining !== null && nextSchedule.spots_remaining !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
-                  color: nextSchedule.spots_remaining < 5 ? "#dc2626" : "#6b7280",
-                  fontWeight: nextSchedule.spots_remaining < 5 ? 500 : 400
-                }, children: nextSchedule.spots_remaining === 0 ? "Sold Out" : `${nextSchedule.spots_remaining} spots left` })
               ] })
             ]
           },
@@ -3760,5 +3920,5 @@ exports.getSpotsRemaining = getSpotsRemaining;
 exports.isEventSoldOut = isEventSoldOut;
 exports.registerForEvent = registerForEvent;
 exports.useEventModal = useEventModal;
-//# sourceMappingURL=chunk-RM4XFDE6.js.map
-//# sourceMappingURL=chunk-RM4XFDE6.js.map
+//# sourceMappingURL=chunk-WNCM4GNY.js.map
+//# sourceMappingURL=chunk-WNCM4GNY.js.map