@opensite/ui 2.9.0 → 2.9.2

package/dist/testimonials-images-helpful.cjs

@@ -1000,10 +1000,10 @@ function TestimonialsImagesHelpful({
             review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium", children: review.title }) : review.title)
           ] }),
           review.content && (typeof review.content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base md:text-lg leading-relaxed font-light", children: review.content }) : review.content),
-          review.images && review.images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-3", imagesClassName), children: review.images.map((image, imgIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          review.images && review.images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-4", imagesClassName), children: review.images.map((image, imgIndex) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "size-20 cursor-pointer overflow-hidden rounded-lg sm:size-24 transition-transform duration-300 hover:scale-[1.03] shadow-sm hover:shadow-lg",
+              className: "size-20 cursor-pointer overflow-hidden rounded-lg sm:size-24 transition-transform duration-300 hover:scale-[1.03] shadow-lg hover:shadow-xl ring-4 ring-primary",
               onClick: () => handleImageClick(review.images, imgIndex),
               role: "button",
               tabIndex: 0,
@@ -1026,80 +1026,91 @@ function TestimonialsImagesHelpful({
             },
             imgIndex
           )) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between w-full"), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn("flex items-center gap-5", authorClassName),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12 ring-4 ring-primary shadow-lg", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
-                    /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-md", children: getInitials(authorName) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-0", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                      review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: review.author }) : review.author),
-                      review.verified && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 18 }),
-                        verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
-                        !verifiedPurchaseLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Verified Purchase" })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-                      review.date && /* @__PURE__ */ jsxRuntime.jsx("span", { children: review.date }),
-                      review.variant && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xB7" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: review.variant })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between w-full flex-col md:flex-row gap-4"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-5 w-full",
+                      authorClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12 ring-4 ring-primary shadow-lg", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
+                        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-md", children: getInitials(authorName) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-0", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-col md:flex-row", children: [
+                          review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: review.author }) : review.author),
+                          review.verified && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 18 }),
+                            verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
+                            !verifiedPurchaseLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Verified Purchase" })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+                          review.date && /* @__PURE__ */ jsxRuntime.jsx("span", { children: review.date }),
+                          review.variant && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xB7" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: review.variant })
+                          ] })
+                        ] })
                       ] })
-                    ] })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                Pressable,
-                {
-                  asButton: true,
-                  variant: "ghost",
-                  size: "sm",
-                  className: cn(
-                    "h-8 gap-1.5",
-                    helpfulClicked.has(index) ? "text-foreground" : "text-muted-foreground"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    Pressable,
+                    {
+                      asButton: true,
+                      variant: "ghost",
+                      size: "sm",
+                      className: cn(
+                        "h-8 gap-1.5",
+                        helpfulClicked.has(index) ? "text-foreground" : "text-muted-foreground"
+                      ),
+                      onClick: () => handleHelpful(index),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/thumbs-up",
+                            size: 16,
+                            className: cn(
+                              helpfulClicked.has(index) && "fill-current"
+                            )
+                          }
+                        ),
+                        "Helpful",
+                        review.helpful !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                          "(",
+                          review.helpful + (helpfulClicked.has(index) ? 1 : 0),
+                          ")"
+                        ] })
+                      ]
+                    }
                   ),
-                  onClick: () => handleHelpful(index),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/thumbs-up",
-                        size: 16,
-                        className: cn(
-                          helpfulClicked.has(index) && "fill-current"
-                        )
-                      }
-                    ),
-                    "Helpful",
-                    review.helpful !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                      "(",
-                      review.helpful + (helpfulClicked.has(index) ? 1 : 0),
-                      ")"
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Pressable,
-                {
-                  asButton: true,
-                  variant: "ghost",
-                  size: "sm",
-                  className: "h-8 text-muted-foreground",
-                  children: reportButtonLabel ?? "Report"
-                }
-              )
-            ] })
-          ] })
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Pressable,
+                    {
+                      asButton: true,
+                      variant: "ghost",
+                      size: "sm",
+                      className: "h-8 text-muted-foreground",
+                      children: reportButtonLabel ?? "Report"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         ] })
       ] }, index);
     }) });

package/dist/testimonials-images-helpful.js

@@ -977,10 +977,10 @@ function TestimonialsImagesHelpful({
             review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-medium", children: review.title }) : review.title)
           ] }),
           review.content && (typeof review.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-base md:text-lg leading-relaxed font-light", children: review.content }) : review.content),
-          review.images && review.images.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", imagesClassName), children: review.images.map((image, imgIndex) => /* @__PURE__ */ jsx(
+          review.images && review.images.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-4", imagesClassName), children: review.images.map((image, imgIndex) => /* @__PURE__ */ jsx(
             "div",
             {
-              className: "size-20 cursor-pointer overflow-hidden rounded-lg sm:size-24 transition-transform duration-300 hover:scale-[1.03] shadow-sm hover:shadow-lg",
+              className: "size-20 cursor-pointer overflow-hidden rounded-lg sm:size-24 transition-transform duration-300 hover:scale-[1.03] shadow-lg hover:shadow-xl ring-4 ring-primary",
               onClick: () => handleImageClick(review.images, imgIndex),
               role: "button",
               tabIndex: 0,
@@ -1003,80 +1003,91 @@ function TestimonialsImagesHelpful({
             },
             imgIndex
           )) }),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between w-full"), children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn("flex items-center gap-5", authorClassName),
-                children: [
-                  /* @__PURE__ */ jsxs(Avatar, { className: "size-12 ring-4 ring-primary shadow-lg", children: [
-                    /* @__PURE__ */ jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
-                    /* @__PURE__ */ jsx(AvatarFallback, { className: "text-md", children: getInitials(authorName) })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: review.author }) : review.author),
-                      review.verified && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 18 }),
-                        verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
-                        !verifiedPurchaseLabel && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Verified Purchase" })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-                      review.date && /* @__PURE__ */ jsx("span", { children: review.date }),
-                      review.variant && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { children: "\xB7" }),
-                        /* @__PURE__ */ jsx("span", { children: review.variant })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between w-full flex-col md:flex-row gap-4"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-5 w-full",
+                      authorClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs(Avatar, { className: "size-12 ring-4 ring-primary shadow-lg", children: [
+                        /* @__PURE__ */ jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
+                        /* @__PURE__ */ jsx(AvatarFallback, { className: "text-md", children: getInitials(authorName) })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-col md:flex-row", children: [
+                          review.author && (typeof review.author === "string" ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: review.author }) : review.author),
+                          review.verified && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                            /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 18 }),
+                            verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
+                            !verifiedPurchaseLabel && /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Verified Purchase" })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+                          review.date && /* @__PURE__ */ jsx("span", { children: review.date }),
+                          review.variant && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+                            /* @__PURE__ */ jsx("span", { children: review.variant })
+                          ] })
+                        ] })
                       ] })
-                    ] })
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ jsxs(
-                Pressable,
-                {
-                  asButton: true,
-                  variant: "ghost",
-                  size: "sm",
-                  className: cn(
-                    "h-8 gap-1.5",
-                    helpfulClicked.has(index) ? "text-foreground" : "text-muted-foreground"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      asButton: true,
+                      variant: "ghost",
+                      size: "sm",
+                      className: cn(
+                        "h-8 gap-1.5",
+                        helpfulClicked.has(index) ? "text-foreground" : "text-muted-foreground"
+                      ),
+                      onClick: () => handleHelpful(index),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/thumbs-up",
+                            size: 16,
+                            className: cn(
+                              helpfulClicked.has(index) && "fill-current"
+                            )
+                          }
+                        ),
+                        "Helpful",
+                        review.helpful !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+                          "(",
+                          review.helpful + (helpfulClicked.has(index) ? 1 : 0),
+                          ")"
+                        ] })
+                      ]
+                    }
                   ),
-                  onClick: () => handleHelpful(index),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/thumbs-up",
-                        size: 16,
-                        className: cn(
-                          helpfulClicked.has(index) && "fill-current"
-                        )
-                      }
-                    ),
-                    "Helpful",
-                    review.helpful !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-                      "(",
-                      review.helpful + (helpfulClicked.has(index) ? 1 : 0),
-                      ")"
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Pressable,
-                {
-                  asButton: true,
-                  variant: "ghost",
-                  size: "sm",
-                  className: "h-8 text-muted-foreground",
-                  children: reportButtonLabel ?? "Report"
-                }
-              )
-            ] })
-          ] })
+                  /* @__PURE__ */ jsx(
+                    Pressable,
+                    {
+                      asButton: true,
+                      variant: "ghost",
+                      size: "sm",
+                      className: "h-8 text-muted-foreground",
+                      children: reportButtonLabel ?? "Report"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
         ] })
       ] }, index);
     }) });

package/dist/testimonials-list-verified.cjs

@@ -584,6 +584,7 @@ function TestimonialsListVerified({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-full md:max-w-3xl", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 md:mb-24 space-y-6", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/testimonials-list-verified.js

@@ -561,6 +561,7 @@ function TestimonialsListVerified({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-full md:max-w-3xl", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-12 md:mb-24 space-y-6", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(

package/dist/testimonials-logo-cards.cjs

@@ -558,7 +558,7 @@ function TestimonialsLogoCards({
                     src: testimonial.companyLogo,
                     alt: testimonial.companyLogoAlt || "Company logo",
                     className: cn(
-                      index === 0 ? "h-10" : "h-5",
+                      index === 0 ? "h-10" : "h-10 md:h-5",
                       "w-auto object-contain"
                     ),
                     optixFlowConfig
@@ -576,8 +576,8 @@ function TestimonialsLogoCards({
                         "blockquote",
                         {
                           className: cn(
-                            "leading-relaxed",
-                            index === 0 ? "text-lg md:text-xl font-light" : "text-sm md:text-base",
+                            "leading-relaxed font-light",
+                            index === 0 ? "text-base md:text-xl" : "text-base md:text-base",
                             quoteClassName
                           ),
                           children: testimonial.quote
@@ -599,7 +599,7 @@ function TestimonialsLogoCards({
                         ),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                           testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "text-sm md:text-base font-medium", children: testimonial.author }) : testimonial.author),
-                          testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs md:text-sm", children: testimonial.role }) : testimonial.role)
+                          testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm opacity-75 font-semibold", children: testimonial.role }) : testimonial.role)
                         ] })
                       ] })
                     ]
@@ -639,7 +639,10 @@ function TestimonialsLogoCards({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName),
+            className: cn(
+              "mx-auto mb-12 max-w-full md:max-w-2xl text-center",
+              headerClassName
+            ),
             children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",

package/dist/testimonials-logo-cards.js

@@ -533,7 +533,7 @@ function TestimonialsLogoCards({
                     src: testimonial.companyLogo,
                     alt: testimonial.companyLogoAlt || "Company logo",
                     className: cn(
-                      index === 0 ? "h-10" : "h-5",
+                      index === 0 ? "h-10" : "h-10 md:h-5",
                       "w-auto object-contain"
                     ),
                     optixFlowConfig
@@ -551,8 +551,8 @@ function TestimonialsLogoCards({
                         "blockquote",
                         {
                           className: cn(
-                            "leading-relaxed",
-                            index === 0 ? "text-lg md:text-xl font-light" : "text-sm md:text-base",
+                            "leading-relaxed font-light",
+                            index === 0 ? "text-base md:text-xl" : "text-base md:text-base",
                             quoteClassName
                           ),
                           children: testimonial.quote
@@ -574,7 +574,7 @@ function TestimonialsLogoCards({
                         ),
                         /* @__PURE__ */ jsxs("div", { children: [
                           testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("cite", { className: "text-sm md:text-base font-medium", children: testimonial.author }) : testimonial.author),
-                          testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs md:text-sm", children: testimonial.role }) : testimonial.role)
+                          testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm opacity-75 font-semibold", children: testimonial.role }) : testimonial.role)
                         ] })
                       ] })
                     ]
@@ -614,7 +614,10 @@ function TestimonialsLogoCards({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName),
+            className: cn(
+              "mx-auto mb-12 max-w-full md:max-w-2xl text-center",
+              headerClassName
+            ),
             children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h2",

package/dist/testimonials-masonry-grid.cjs

@@ -872,6 +872,70 @@ var Pressable = React3__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function TestimonialsMasonryGrid({
   testimonials,
   testimonialsSlot,
@@ -887,9 +951,12 @@ function TestimonialsMasonryGrid({
   authorClassName,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
+  spacing = "lg",
   pattern,
-  patternOpacity
+  patternOpacity,
+  actions,
+  actionsSlot,
+  actionsClassName
 }) {
   const columns = testimonials ? [
     testimonials.filter((_, i) => i % 3 === 0),
@@ -930,29 +997,29 @@ function TestimonialsMasonryGrid({
                 "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between p-6 gap-8", children: [
-                testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "text-sm leading-relaxed line-clamp-3", children: [
+                testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "text-lg leading-relaxed line-clamp-6 md:line-clamp-3 font-thin", children: [
                   "\u201C",
                   testimonial.quote,
                   "\u201D"
-                ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line-clamp-3", children: testimonial.quote })),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-12 ring-4 ring-primary shadow-lg", children: [
+                ] }) : testimonial.quote),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-14 ring-4 ring-primary shadow-lg", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
                     /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0 leading-tight", children: [
                     testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: testimonial.role }) : testimonial.role),
+                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-thin opacity-75", children: testimonial.role }) : testimonial.role),
                     testimonial.linkConfig?.href && /* @__PURE__ */ jsxRuntime.jsx(
                       Pressable,
                       {
                         href: testimonial.linkConfig.href,
                         className: cn(
-                          "text-sm  transition-all duration-300",
-                          "underline underline-offset-4",
+                          "text-sm transition-all duration-500",
+                          "hover:underline hover:underline-offset-4",
                           testimonial.linkConfig.className
                         ),
-                        children: testimonial.linkConfig.label
+                        children: testimonial.linkConfig.label || "Full Review"
                       }
                     )
                   ] })
@@ -1014,7 +1081,16 @@ function TestimonialsMasonryGrid({
             ]
           }
         ),
-        renderedTestimonials
+        renderedTestimonials,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BlockActions,
+          {
+            actions,
+            actionsSlot,
+            actionsClassName: cn("mt-8 md:mt-12 justify-center", actionsClassName),
+            mobileConfig: { width: "full", position: "center" }
+          }
+        )
       ]
     }
   );

package/dist/testimonials-masonry-grid.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B8KCpwXH.cjs';
+import { ActionConfig } from '@page-speed/maps/components/geo-map';
 import { T as TestimonialItem } from './blocks-BtDAbw8d.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -76,6 +77,18 @@ interface TestimonialsMasonryGridProps {
      * Additional CSS classes for the container
      */
     containerClassName?: string;
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
 }
 /**
  * TestimonialsMasonryGrid - A masonry-style grid layout for testimonials with varying
@@ -102,6 +115,6 @@ interface TestimonialsMasonryGridProps {
  * />
  * ```
  */
-declare function TestimonialsMasonryGrid({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsMasonryGridProps): React.JSX.Element;
+declare function TestimonialsMasonryGrid({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, actions, actionsSlot, actionsClassName, }: TestimonialsMasonryGridProps): React.JSX.Element;
 
 export { TestimonialsMasonryGrid, type TestimonialsMasonryGridProps };