@opensite/ui 2.9.0 → 2.9.2

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-rTRuDt0r.js';
+import { ActionConfig } from '@page-speed/maps/components/geo-map';
 import { T as TestimonialItem } from './blocks-BlWXj9GI.js';
 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 };

package/dist/testimonials-masonry-grid.js

@@ -4,7 +4,7 @@ import React3__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 
 // components/blocks/testimonials/testimonials-masonry-grid.tsx
@@ -850,6 +850,70 @@ var Pressable = React3.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__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function TestimonialsMasonryGrid({
   testimonials,
   testimonialsSlot,
@@ -865,9 +929,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),
@@ -908,29 +975,29 @@ function TestimonialsMasonryGrid({
                 "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm"
               ),
               children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between p-6 gap-8", children: [
-                testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs("blockquote", { className: "text-sm leading-relaxed line-clamp-3", children: [
+                testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxs("blockquote", { className: "text-lg leading-relaxed line-clamp-6 md:line-clamp-3 font-thin", children: [
                   "\u201C",
                   testimonial.quote,
                   "\u201D"
-                ] }) : /* @__PURE__ */ jsx("div", { className: "line-clamp-3", children: testimonial.quote })),
-                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-12 ring-4 ring-primary shadow-lg", children: [
+                ] }) : testimonial.quote),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxs(Avatar, { className: "relative flex shrink-0 overflow-hidden rounded-full size-14 ring-4 ring-primary shadow-lg", children: [
                     /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
                     /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "space-y-0 leading-tight", children: [
                     testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs", children: testimonial.role }) : testimonial.role),
+                    testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-thin opacity-75", children: testimonial.role }) : testimonial.role),
                     testimonial.linkConfig?.href && /* @__PURE__ */ 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"
                       }
                     )
                   ] })
@@ -992,7 +1059,16 @@ function TestimonialsMasonryGrid({
             ]
           }
         ),
-        renderedTestimonials
+        renderedTestimonials,
+        /* @__PURE__ */ jsx(
+          BlockActions,
+          {
+            actions,
+            actionsSlot,
+            actionsClassName: cn("mt-8 md:mt-12 justify-center", actionsClassName),
+            mobileConfig: { width: "full", position: "center" }
+          }
+        )
       ]
     }
   );