@opensite/ui 2.8.6 → 2.8.8

package/dist/testimonials-images-helpful.cjs

@@ -6,11 +6,11 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
-var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var classVarianceAuthority = require('class-variance-authority');
 var img = require('@page-speed/img');
+var lightbox = require('@page-speed/lightbox');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -31,7 +31,6 @@ function _interopNamespace(e) {
 }
 
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
-var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 
@@ -47,10 +46,22 @@ var DynamicIcon = React2__namespace.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
-function AspectRatio({
-  ...props
+function StarRating({
+  rating,
+  size = 18,
+  className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, { "data-slot": "aspect-ratio", ...props });
+  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,
@@ -97,29 +108,6 @@ function AvatarFallback({
     }
   );
 }
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
 function Separator({
   className,
   orientation = "horizontal",
@@ -934,23 +922,11 @@ var Section = React2__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 TestimonialsImagesHelpful({
   reviews,
   reviewsSlot,
   heading,
+  verifiedPurchaseLabel,
   writeReviewLabel,
   reportButtonLabel,
   className,
@@ -962,12 +938,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] = React2.useState(/* @__PURE__ */ new Set());
+  const [lightboxOpen, setLightboxOpen] = React2.useState(false);
+  const [lightboxItems, setLightboxItems] = React2.useState([]);
+  const [lightboxIndex, setLightboxIndex] = React2.useState(0);
   const totalReviews = reviews?.length ?? 0;
   const averageRating = totalReviews > 0 ? (reviews?.reduce((sum, review) => sum + review.rating, 0) ?? 0) / totalReviews : 0;
   const handleHelpful = React2.useCallback((reviewIndex) => {
@@ -981,6 +961,25 @@ function TestimonialsImagesHelpful({
       return newSet;
     });
   }, []);
+  const handleImageClick = React2.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 = React2.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const getAuthorName = React2.useCallback((review) => {
     if (typeof review.author === "string") return review.author;
     return "";
@@ -994,54 +993,28 @@ function TestimonialsImagesHelpful({
     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.jsx(Card, { className: "border-0 p-0 shadow-none", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: cn("space-y-4 p-0", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex items-start justify-between gap-4",
-                authorClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
-                    /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { 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.jsx("span", { className: "flex items-center gap-1 text-emerald-600", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        DynamicIcon,
-                        {
-                          name: "lucide/badge-check",
-                          size: 16
-                        }
-                      ) })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", 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.jsx(StarRating, { rating: review.rating, size: 16 })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            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: "mt-2 text-sm leading-relaxed text-muted-foreground", children: review.content }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: review.content }))
+        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.images && review.images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2", imagesClassName), children: review.images.map((image, imgIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          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(
             "div",
             {
-              className: "size-20 overflow-hidden rounded-lg sm:size-24",
-              children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                 img.Img,
                 {
                   src: image,
@@ -1049,54 +1022,85 @@ function TestimonialsImagesHelpful({
                   className: "size-full object-cover",
                   optixFlowConfig
                 }
-              ) })
+              )
             },
             imgIndex
           )) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between w-full"), children: [
             /* @__PURE__ */ jsxRuntime.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__ */ 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.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.jsx(
-              Pressable,
-              {
-                asButton: true,
-                variant: "ghost",
-                size: "sm",
-                className: "h-8 text-muted-foreground",
-                children: reportButtonLabel ?? "Report"
-              }
-            )
+            /* @__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),
+                      ")"
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
+                {
+                  asButton: true,
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-8 text-muted-foreground",
+                  children: reportButtonLabel ?? "Report"
+                }
+              )
+            ] })
           ] })
-        ] }) })
+        ] })
       ] }, index);
     }) });
   }, [
@@ -1109,11 +1113,13 @@ function TestimonialsImagesHelpful({
     helpfulClicked,
     optixFlowConfig,
     reportButtonLabel,
+    verifiedPurchaseLabel,
     getAuthorName,
     getInitials,
-    handleHelpful
+    handleHelpful,
+    handleImageClick
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
@@ -1121,42 +1127,57 @@ function TestimonialsImagesHelpful({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
-              headerClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "h2",
-                  {
-                    className: cn(
-                      "text-2xl font-semibold tracking-tight md:text-3xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-                totalReviews > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(StarRating, { rating: Math.round(averageRating), size: 20 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: averageRating.toFixed(1) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
-                    "(",
-                    totalReviews,
-                    " reviews)"
-                  ] })
-                ] })
-              ] }),
+      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: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between", children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-2xl font-semibold tracking-tight md:text-3xl lg:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
               (writeReviewLabel || onWriteReview) && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, variant: "outline", onClick: onWriteReview, children: writeReviewLabel })
-            ]
+            ] }),
+            totalReviews > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-3", 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,
+                " reviews"
+              ] })
+            ] })
+          ] }),
+          renderedReviews
+        ] }),
+        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          lightbox.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-images-helpful.d.cts

@@ -65,6 +65,10 @@ interface TestimonialsImagesHelpfulProps {
      * Main heading content
      */
     heading?: React.ReactNode;
+    /**
+     * Label for the verified purchase badge
+     */
+    verifiedPurchaseLabel?: React.ReactNode;
     /**
      * Write review button text
      */
@@ -125,6 +129,10 @@ interface TestimonialsImagesHelpfulProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsImagesHelpful - An enhanced customer reviews section featuring image attachments,
@@ -156,6 +164,6 @@ interface TestimonialsImagesHelpfulProps {
  * />
  * ```
  */
-declare function TestimonialsImagesHelpful({ reviews, reviewsSlot, heading, writeReviewLabel, reportButtonLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, imagesClassName, onWriteReview, background, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsImagesHelpfulProps): React.JSX.Element;
+declare function TestimonialsImagesHelpful({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, writeReviewLabel, reportButtonLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, imagesClassName, onWriteReview, background, spacing, containerClassName, pattern, patternOpacity, optixFlowConfig, }: TestimonialsImagesHelpfulProps): React.JSX.Element;
 
 export { type ReviewWithImages, TestimonialsImagesHelpful, type TestimonialsImagesHelpfulProps };

package/dist/testimonials-images-helpful.d.ts

@@ -65,6 +65,10 @@ interface TestimonialsImagesHelpfulProps {
      * Main heading content
      */
     heading?: React.ReactNode;
+    /**
+     * Label for the verified purchase badge
+     */
+    verifiedPurchaseLabel?: React.ReactNode;
     /**
      * Write review button text
      */
@@ -125,6 +129,10 @@ interface TestimonialsImagesHelpfulProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsImagesHelpful - An enhanced customer reviews section featuring image attachments,
@@ -156,6 +164,6 @@ interface TestimonialsImagesHelpfulProps {
  * />
  * ```
  */
-declare function TestimonialsImagesHelpful({ reviews, reviewsSlot, heading, writeReviewLabel, reportButtonLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, imagesClassName, onWriteReview, background, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsImagesHelpfulProps): React.JSX.Element;
+declare function TestimonialsImagesHelpful({ reviews, reviewsSlot, heading, verifiedPurchaseLabel, writeReviewLabel, reportButtonLabel, className, headerClassName, headingClassName, reviewClassName, contentClassName, authorClassName, imagesClassName, onWriteReview, background, spacing, containerClassName, pattern, patternOpacity, optixFlowConfig, }: TestimonialsImagesHelpfulProps): React.JSX.Element;
 
 export { type ReviewWithImages, TestimonialsImagesHelpful, type TestimonialsImagesHelpfulProps };