@opensite/ui 2.8.5 → 2.8.7

package/dist/testimonials-list-verified.js

@@ -4,7 +4,7 @@ import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
@@ -20,6 +20,23 @@ var DynamicIcon = React.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+function StarRating({
+  rating,
+  size = 18,
+  className
+}) {
+  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,
   ...props
@@ -461,19 +478,6 @@ var Section = React__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 TestimonialsListVerified({
   reviews,
   reviewsSlot,
@@ -486,7 +490,8 @@ function TestimonialsListVerified({
   contentClassName,
   authorClassName,
   background,
-  spacing,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
@@ -505,35 +510,49 @@ function TestimonialsListVerified({
     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__ */ jsxs("div", { className: cn("space-y-3", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(StarRating, { rating: review.rating, size: 16 }),
-            review.title && (typeof review.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-2 font-medium", children: review.title }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: review.title }))
+        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.content && (typeof review.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: review.content }) : review.content),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-            /* @__PURE__ */ jsxs(Avatar, { className: "size-8", children: [
-              /* @__PURE__ */ jsx(AvatarImage, { src: review.avatarSrc, alt: authorName }),
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(authorName) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", 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 text-emerald-600", children: [
-                /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 16 }),
-                verifiedPurchaseLabel && (typeof verifiedPurchaseLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-xs", children: verifiedPurchaseLabel }) : verifiedPurchaseLabel),
-                !verifiedPurchaseLabel && /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Verified Purchase" })
-              ] }),
-              review.date && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\xB7" }),
-                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: review.date })
-              ] })
-            ] })
+          review.content && (typeof review.content === "string" ? /* @__PURE__ */ jsx("p", { className: "text-base md:text-lg leading-relaxed font-light", children: review.content }) : review.content),
+          /* @__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 items-center gap-1 text-base flex-col items-start", 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" })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            review.date && /* @__PURE__ */ 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__ */ jsx(
     Section,
     {
@@ -542,21 +561,21 @@ function TestimonialsListVerified({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-8", headerClassName), children: [
+      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(
             "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__ */ jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           totalReviews > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx(StarRating, { rating: Math.round(averageRating), size: 20 }),
-            /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", 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,

package/dist/testimonials-logo-cards.cjs

@@ -508,18 +508,25 @@ function TestimonialsLogoCards({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
-  const getAuthorName = React.useCallback((testimonial) => {
-    if (typeof testimonial.author === "string") return testimonial.author;
-    return "";
-  }, []);
-  const getAvatarSrc = React.useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAuthorName = React.useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
+  const getAvatarSrc = React.useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = React.useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
@@ -550,7 +557,10 @@ function TestimonialsLogoCards({
                   {
                     src: testimonial.companyLogo,
                     alt: testimonial.companyLogoAlt || "Company logo",
-                    className: "h-6 w-auto object-contain dark:invert",
+                    className: cn(
+                      index === 0 ? "h-10" : "h-5",
+                      "w-auto object-contain"
+                    ),
                     optixFlowConfig
                   }
                 ) }),
@@ -567,20 +577,29 @@ function TestimonialsLogoCards({
                         {
                           className: cn(
                             "leading-relaxed",
-                            index === 0 ? "text-xl font-medium" : "text-sm",
+                            index === 0 ? "text-lg md:text-xl font-light" : "text-sm md:text-base",
                             quoteClassName
                           ),
                           children: testimonial.quote
                         }
-                      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: testimonial.quote })),
+                      ) : testimonial.quote),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn(index === 0 ? "size-12" : "size-10"), children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-                          /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
-                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          Avatar,
+                          {
+                            className: cn(
+                              index === 0 ? "size-12" : "size-10",
+                              "ring-4 ring-primary"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
+                            ]
+                          }
+                        ),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                          testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "text-sm font-medium not-italic", children: testimonial.author }) : testimonial.author),
-                          testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: testimonial.role }) : testimonial.role)
+                          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)
                         ] })
                       ] })
                     ]
@@ -593,7 +612,20 @@ function TestimonialsLogoCards({
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, cardHeaderClassName, optixFlowConfig, cardContentClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    cardHeaderClassName,
+    optixFlowConfig,
+    cardContentClassName,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -602,6 +634,7 @@ function TestimonialsLogoCards({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -617,17 +650,8 @@ function TestimonialsLogoCards({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description)
             ]
           }
         ),

package/dist/testimonials-logo-cards.d.cts

@@ -97,6 +97,10 @@ interface TestimonialsLogoCardsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsLogoCards - A grid of testimonial cards featuring company logos in the
@@ -125,6 +129,6 @@ interface TestimonialsLogoCardsProps {
  * />
  * ```
  */
-declare function TestimonialsLogoCards({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, cardHeaderClassName, cardContentClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsLogoCardsProps): React.JSX.Element;
+declare function TestimonialsLogoCards({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, cardHeaderClassName, cardContentClassName, quoteClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, optixFlowConfig, }: TestimonialsLogoCardsProps): React.JSX.Element;
 
 export { type LogoTestimonialItem, TestimonialsLogoCards, type TestimonialsLogoCardsProps };

package/dist/testimonials-logo-cards.d.ts

@@ -97,6 +97,10 @@ interface TestimonialsLogoCardsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsLogoCards - A grid of testimonial cards featuring company logos in the
@@ -125,6 +129,6 @@ interface TestimonialsLogoCardsProps {
  * />
  * ```
  */
-declare function TestimonialsLogoCards({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, cardHeaderClassName, cardContentClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: TestimonialsLogoCardsProps): React.JSX.Element;
+declare function TestimonialsLogoCards({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, cardHeaderClassName, cardContentClassName, quoteClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, optixFlowConfig, }: TestimonialsLogoCardsProps): React.JSX.Element;
 
 export { type LogoTestimonialItem, TestimonialsLogoCards, type TestimonialsLogoCardsProps };

package/dist/testimonials-logo-cards.js

@@ -483,18 +483,25 @@ function TestimonialsLogoCards({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
-  const getAuthorName = useCallback((testimonial) => {
-    if (typeof testimonial.author === "string") return testimonial.author;
-    return "";
-  }, []);
-  const getAvatarSrc = useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAuthorName = useCallback(
+    (testimonial) => {
+      if (typeof testimonial.author === "string") return testimonial.author;
+      return "";
+    },
+    []
+  );
+  const getAvatarSrc = useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
@@ -525,7 +532,10 @@ function TestimonialsLogoCards({
                   {
                     src: testimonial.companyLogo,
                     alt: testimonial.companyLogoAlt || "Company logo",
-                    className: "h-6 w-auto object-contain dark:invert",
+                    className: cn(
+                      index === 0 ? "h-10" : "h-5",
+                      "w-auto object-contain"
+                    ),
                     optixFlowConfig
                   }
                 ) }),
@@ -542,20 +552,29 @@ function TestimonialsLogoCards({
                         {
                           className: cn(
                             "leading-relaxed",
-                            index === 0 ? "text-xl font-medium" : "text-sm",
+                            index === 0 ? "text-lg md:text-xl font-light" : "text-sm md:text-base",
                             quoteClassName
                           ),
                           children: testimonial.quote
                         }
-                      ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: testimonial.quote })),
+                      ) : testimonial.quote),
                       /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", authorClassName), children: [
-                        /* @__PURE__ */ jsxs(Avatar, { className: cn(index === 0 ? "size-12" : "size-10"), children: [
-                          /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-                          /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
-                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          Avatar,
+                          {
+                            className: cn(
+                              index === 0 ? "size-12" : "size-10",
+                              "ring-4 ring-primary"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                              /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
+                            ]
+                          }
+                        ),
                         /* @__PURE__ */ jsxs("div", { children: [
-                          testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("cite", { className: "text-sm font-medium not-italic", children: testimonial.author }) : testimonial.author),
-                          testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: testimonial.role }) : testimonial.role)
+                          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)
                         ] })
                       ] })
                     ]
@@ -568,7 +587,20 @@ function TestimonialsLogoCards({
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, cardHeaderClassName, optixFlowConfig, cardContentClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    cardHeaderClassName,
+    optixFlowConfig,
+    cardContentClassName,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -577,6 +609,7 @@ function TestimonialsLogoCards({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -592,17 +625,8 @@ function TestimonialsLogoCards({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description)
             ]
           }
         ),