@opensite/ui 2.8.5 → 2.8.7

package/dist/testimonials-images-helpful.js

@@ -5,11 +5,11 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { cva } from 'class-variance-authority';
 import { Img } from '@page-speed/img';
+import { Lightbox } from '@page-speed/lightbox';
 
 // components/blocks/testimonials/testimonials-images-helpful.tsx
 function cn(...inputs) {
@@ -23,10 +23,22 @@ var DynamicIcon = React2.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
-function AspectRatio({
-  ...props
+function StarRating({
+  rating,
+  size = 18,
+  className
 }) {
-  return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
+    DynamicIcon,
+    {
+      name: "icon-park-solid/star",
+      size,
+      className: cn(
+        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
+      )
+    },
+    star
+  )) });
 }
 function Avatar({
   className,
@@ -73,29 +85,6 @@ function AvatarFallback({
     }
   );
 }
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card",
-      className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
 function Separator({
   className,
   orientation = "horizontal",
@@ -910,23 +899,11 @@ var Section = React2__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-function StarRating({ rating, size = 16 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
-    DynamicIcon,
-    {
-      name: "lucide/star",
-      size,
-      className: cn(
-        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
-      )
-    },
-    star
-  )) });
-}
 function TestimonialsImagesHelpful({
   reviews,
   reviewsSlot,
   heading,
+  verifiedPurchaseLabel,
   writeReviewLabel,
   reportButtonLabel,
   className,
@@ -938,12 +915,16 @@ function TestimonialsImagesHelpful({
   imagesClassName,
   onWriteReview,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
   const [helpfulClicked, setHelpfulClicked] = useState(/* @__PURE__ */ new Set());
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxItems, setLightboxItems] = useState([]);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
   const totalReviews = reviews?.length ?? 0;
   const averageRating = totalReviews > 0 ? (reviews?.reduce((sum, review) => sum + review.rating, 0) ?? 0) / totalReviews : 0;
   const handleHelpful = useCallback((reviewIndex) => {
@@ -957,6 +938,25 @@ function TestimonialsImagesHelpful({
       return newSet;
     });
   }, []);
+  const handleImageClick = useCallback(
+    (reviewImages, imageIndex) => {
+      const items = reviewImages.map((src, i) => ({
+        id: `review-image-${i}`,
+        type: "image",
+        src,
+        alt: `Review image ${i + 1}`,
+        download: true,
+        share: true
+      }));
+      setLightboxItems(items);
+      setLightboxIndex(imageIndex);
+      setLightboxOpen(true);
+    },
+    []
+  );
+  const handleLightboxClose = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const getAuthorName = useCallback((review) => {
     if (typeof review.author === "string") return review.author;
     return "";
@@ -970,54 +970,28 @@ function TestimonialsImagesHelpful({
     return /* @__PURE__ */ jsx("div", { className: "space-y-0", children: reviews.map((review, index) => {
       const authorName = getAuthorName(review);
       return /* @__PURE__ */ jsxs("div", { className: reviewClassName, children: [
-        index > 0 && /* @__PURE__ */ jsx(Separator, { className: "my-6" }),
-        /* @__PURE__ */ jsx(Card, { className: "border-0 p-0 shadow-none", children: /* @__PURE__ */ jsxs(CardContent, { className: cn("space-y-4 p-0", contentClassName), children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex items-start justify-between gap-4",
-                authorClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
-                    /* @__PURE__ */ jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
-                    /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { 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__ */ jsx("span", { className: "flex items-center gap-1 text-emerald-600", children: /* @__PURE__ */ jsx(
-                        DynamicIcon,
-                        {
-                          name: "lucide/badge-check",
-                          size: 16
-                        }
-                      ) })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", 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__ */ jsx(StarRating, { rating: review.rating, size: 16 })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { children: [
-            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: "mt-2 text-sm leading-relaxed text-muted-foreground", children: review.content }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: review.content }))
+        index > 0 && /* @__PURE__ */ jsx(Separator, { className: "bg-border/50 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-12 md:my-16" }),
+        /* @__PURE__ */ jsxs("div", { className: cn("space-y-6 md:space-y-12", contentClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx(StarRating, { rating: review.rating, size: 22 }),
+            review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-medium", children: review.title }) : review.title)
           ] }),
-          review.images && review.images.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", imagesClassName), children: review.images.map((image, imgIndex) => /* @__PURE__ */ jsx(
+          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(
             "div",
             {
-              className: "size-20 overflow-hidden rounded-lg sm:size-24",
-              children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, children: /* @__PURE__ */ jsx(
+              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",
+              onClick: () => handleImageClick(review.images, imgIndex),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleImageClick(review.images, imgIndex);
+                }
+              },
+              "aria-label": `View review image ${imgIndex + 1} in lightbox`,
+              children: /* @__PURE__ */ jsx(
                 Img,
                 {
                   src: image,
@@ -1025,54 +999,85 @@ function TestimonialsImagesHelpful({
                   className: "size-full object-cover",
                   optixFlowConfig
                 }
-              ) })
+              )
             },
             imgIndex
           )) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between w-full"), children: [
             /* @__PURE__ */ jsxs(
-              Pressable,
+              "div",
               {
-                asButton: true,
-                variant: "ghost",
-                size: "sm",
-                className: cn(
-                  "h-8 gap-1.5 text-muted-foreground",
-                  helpfulClicked.has(index) && "text-foreground"
-                ),
-                onClick: () => handleHelpful(index),
+                className: cn("flex items-center gap-5", authorClassName),
                 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__ */ 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__ */ jsx(
-              Pressable,
-              {
-                asButton: true,
-                variant: "ghost",
-                size: "sm",
-                className: "h-8 text-muted-foreground",
-                children: reportButtonLabel ?? "Report"
-              }
-            )
+            /* @__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),
+                      ")"
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  asButton: true,
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-8 text-muted-foreground",
+                  children: reportButtonLabel ?? "Report"
+                }
+              )
+            ] })
           ] })
-        ] }) })
+        ] })
       ] }, index);
     }) });
   }, [
@@ -1085,11 +1090,13 @@ function TestimonialsImagesHelpful({
     helpfulClicked,
     optixFlowConfig,
     reportButtonLabel,
+    verifiedPurchaseLabel,
     getAuthorName,
     getInitials,
-    handleHelpful
+    handleHelpful,
+    handleImageClick
   ]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
@@ -1097,42 +1104,57 @@ function TestimonialsImagesHelpful({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
-              headerClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                  "h2",
-                  {
-                    className: cn(
-                      "text-2xl font-semibold tracking-tight md:text-3xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-                totalReviews > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx(StarRating, { rating: Math.round(averageRating), size: 20 }),
-                  /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: averageRating.toFixed(1) }),
-                  /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-                    "(",
-                    totalReviews,
-                    " reviews)"
-                  ] })
-                ] })
-              ] }),
+      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: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-2xl font-semibold tracking-tight md:text-3xl lg:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
               (writeReviewLabel || onWriteReview) && /* @__PURE__ */ jsx(Pressable, { asButton: true, variant: "outline", onClick: onWriteReview, children: writeReviewLabel })
-            ]
+            ] }),
+            totalReviews > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(StarRating, { rating: Math.round(averageRating), size: 22 }),
+              /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+                averageRating.toFixed(1),
+                " out of 5 \xB7 ",
+                totalReviews,
+                " reviews"
+              ] })
+            ] })
+          ] }),
+          renderedReviews
+        ] }),
+        lightboxOpen && /* @__PURE__ */ jsx(
+          Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
           }
-        ),
-        renderedReviews
-      ] })
+        )
+      ]
     }
   );
 }

package/dist/testimonials-list-verified.cjs

@@ -43,6 +43,23 @@ var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+function StarRating({
+  rating,
+  size = 18,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-0.5", className), children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsxRuntime.jsx(
+    DynamicIcon,
+    {
+      name: "icon-park-solid/star",
+      size,
+      className: cn(
+        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
+      )
+    },
+    star
+  )) });
+}
 function Avatar({
   className,
   ...props
@@ -484,19 +501,6 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-function StarRating({ rating, size = 16 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsxRuntime.jsx(
-    DynamicIcon,
-    {
-      name: "lucide/star",
-      size,
-      className: cn(
-        star <= rating ? "fill-primary text-primary" : "fill-muted text-muted"
-      )
-    },
-    star
-  )) });
-}
 function TestimonialsListVerified({
   reviews,
   reviewsSlot,
@@ -509,7 +513,8 @@ function TestimonialsListVerified({
   contentClassName,
   authorClassName,
   background,
-  spacing,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
@@ -528,35 +533,49 @@ function TestimonialsListVerified({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0", children: reviews.map((review, index) => {
       const authorName = getAuthorName(review);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reviewClassName, children: [
-        index > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-6" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: review.rating, size: 16 }),
-            review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-2 font-medium", children: review.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: review.title }))
+        index > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "bg-border/50 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-12 md:my-16" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-6 md:space-y-12", contentClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: review.rating, size: 22 }),
+            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-sm leading-relaxed text-muted-foreground", children: review.content }) : review.content),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-8", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm", 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 text-emerald-600", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 16 }),
-                verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
-                !verifiedPurchaseLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: "Verified Purchase" })
-              ] }),
-              review.date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\xB7" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: review.date })
-              ] })
-            ] })
+          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),
+          /* @__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 items-center gap-1 text-base flex-col items-start", 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" })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            review.date && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative", children: review.date })
           ] })
         ] })
       ] }, index);
     }) });
-  }, [reviewsSlot, reviews, reviewClassName, contentClassName, authorClassName, verifiedPurchaseLabel, getAuthorName, getInitials]);
+  }, [
+    reviewsSlot,
+    reviews,
+    reviewClassName,
+    contentClassName,
+    authorClassName,
+    verifiedPurchaseLabel,
+    getAuthorName,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -565,21 +584,21 @@ function TestimonialsListVerified({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8", headerClassName), children: [
+      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(
             "h2",
             {
               className: cn(
-                "text-2xl font-semibold tracking-tight md:text-3xl",
+                "text-2xl font-semibold tracking-tight md:text-3xl lg:text-4xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           totalReviews > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: Math.round(averageRating), size: 20 }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: Math.round(averageRating), size: 22 }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm", children: [
               averageRating.toFixed(1),
               " out of 5 \xB7 ",
               totalReviews,

package/dist/testimonials-list-verified.d.cts

@@ -97,6 +97,10 @@ interface TestimonialsListVerifiedProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsListVerified - A clean, vertical list of customer reviews with rating summary,
@@ -124,6 +128,6 @@ interface TestimonialsListVerifiedProps {
  * />
  * ```
  */
-declare function TestimonialsListVerified({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsListVerifiedProps): React.JSX.Element;
+declare function TestimonialsListVerified({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsListVerifiedProps): React.JSX.Element;
 
 export { type ReviewItem, TestimonialsListVerified, type TestimonialsListVerifiedProps };

package/dist/testimonials-list-verified.d.ts

@@ -97,6 +97,10 @@ interface TestimonialsListVerifiedProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsListVerified - A clean, vertical list of customer reviews with rating summary,
@@ -124,6 +128,6 @@ interface TestimonialsListVerifiedProps {
  * />
  * ```
  */
-declare function TestimonialsListVerified({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsListVerifiedProps): React.JSX.Element;
+declare function TestimonialsListVerified({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsListVerifiedProps): React.JSX.Element;
 
 export { type ReviewItem, TestimonialsListVerified, type TestimonialsListVerifiedProps };