@veevarts/design-system 1.12.0 → 1.12.1-beta.1

package/dist/index.js

@@ -9098,18 +9098,19 @@ const lr = ({
   location: s,
   description: o,
   showImage: l = !1,
-  showMoreButtonClassName: a,
-  labels: c
+  imageLoading: a = "eager",
+  showMoreButtonClassName: c,
+  labels: d
 }) => {
-  const [d, f] = J(!1), [m, h] = J(!1), v = Dt(null);
+  const [f, m] = J(!1), [h, v] = J(!1), y = Dt(null);
   return We(() => {
-    const y = () => {
-      if (v.current) {
-        const b = v.current.scrollHeight > v.current.clientHeight;
-        h(b);
+    const b = () => {
+      if (y.current) {
+        const x = y.current.scrollHeight > y.current.clientHeight;
+        v(x);
       }
     };
-    return y(), window.addEventListener("resize", y), () => window.removeEventListener("resize", y);
+    return b(), window.addEventListener("resize", b), () => window.removeEventListener("resize", b);
   }, [o]), /* @__PURE__ */ C(Ee, { className: I("border-0 shadow-none", t), "data-testid": "event-details-root", children: [
     /* @__PURE__ */ C($s, { className: "pt-2 pb-0 flex-col items-start space-y-2", "data-testid": "event-details-header", children: [
       l && n && /* @__PURE__ */ u(
@@ -9120,8 +9121,10 @@ const lr = ({
           children: /* @__PURE__ */ u(
             wl,
             {
+              removeWrapper: !0,
+              loading: a,
               alt: `Event image for ${e}`,
-              className: "w-full h-full object-cover",
+              className: "w-full h-full object-cover object-center",
               src: n,
               "data-testid": "event-details-image"
             }
@@ -9131,7 +9134,7 @@ const lr = ({
       /* @__PURE__ */ u("h2", { className: "font-semibold text-xl text-gray-800", "data-testid": "event-details-title", children: e })
     ] }),
     /* @__PURE__ */ C(Fe, { className: "py-3 space-y-3", "data-testid": "event-details-body", children: [
-      /* @__PURE__ */ u("h3", { className: "font-semibold text-base text-gray-700", "data-testid": "event-details-info-label", children: c.eventInformation }),
+      /* @__PURE__ */ u("h3", { className: "font-semibold text-base text-gray-700", "data-testid": "event-details-info-label", children: d.eventInformation }),
       /* @__PURE__ */ C("div", { className: "flex flex-wrap gap-4", "data-testid": "event-details-info", children: [
         r && /* @__PURE__ */ u(lr, { icon: "solar:calendar-minimalistic-linear", testId: "event-details-date", children: r }),
         i && /* @__PURE__ */ u(lr, { icon: "solar:clock-circle-linear", testId: "event-details-time", children: i }),
@@ -9142,16 +9145,16 @@ const lr = ({
           /* @__PURE__ */ u(
             "div",
             {
-              ref: v,
+              ref: y,
               className: I(
                 "text-sm text-gray-700 leading-relaxed transition-all",
-                !d && "line-clamp-3"
+                !f && "line-clamp-3"
               ),
               "data-testid": "event-details-description",
               dangerouslySetInnerHTML: { __html: o }
             }
           ),
-          !d && m && /* @__PURE__ */ u(
+          !f && h && /* @__PURE__ */ u(
             "div",
             {
               className: "absolute inset-x-0 -bottom-1 h-8 bg-gradient-to-t from-white via-white/70 to-transparent pointer-events-none",
@@ -9159,21 +9162,21 @@ const lr = ({
             }
           )
         ] }),
-        (m || d) && /* @__PURE__ */ u("div", { className: "flex justify-end mt-1", children: /* @__PURE__ */ u(
+        (h || f) && /* @__PURE__ */ u("div", { className: "flex justify-end mt-1", children: /* @__PURE__ */ u(
           se,
           {
-            onPress: () => f(!d),
+            onPress: () => m(!f),
             variant: "light",
-            className: I("text-primary", a),
+            className: I("text-primary", c),
             startContent: /* @__PURE__ */ u(
               De,
               {
-                icon: d ? "solar:eye-closed-linear" : "solar:eye-linear",
+                icon: f ? "solar:eye-closed-linear" : "solar:eye-linear",
                 width: 20
               }
             ),
             "data-testid": "event-details-toggle-description",
-            children: d ? c.showLess || "Hide" : c.showMore || "Show"
+            children: f ? d.showLess || "Hide" : d.showMore || "Show"
           }
         ) })
       ] })

package/dist/patterns/EventDetails/EventDetails.d.ts

@@ -20,6 +20,8 @@ export interface EventDetailsProps {
     classes?: string;
     /** @property {boolean} [showImage] - Optional flag to show or hide the event image. Defaults to true. */
     showImage?: boolean;
+    /** @property {'lazy' | 'eager'} [imageLoading] - Optional loading strategy for the event image. Use `'lazy'` for off-screen placements (long lists, below-the-fold). Defaults to `'eager'` since the banner is typically above-the-fold. */
+    imageLoading?: 'lazy' | 'eager';
     /** @property {string} [showMoreButtonClassName] - Optional Tailwind CSS utility classes for the 'Show more/less' button. */
     showMoreButtonClassName?: string;
     /** @property {Object} labels - Labels for the event details, used for localization. */
@@ -33,5 +35,5 @@ export interface EventDetailsProps {
  * @function EventDetails
  * @description Displays a card with event information such as name, image, date, time, location, and description.
  */
-export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
+export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, imageLoading, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
 export default EventDetails;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.12.0",
+    "version": "1.12.1-beta.1",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",