@opensite/ui 2.8.6 → 2.8.8

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",
@@ -587,22 +620,19 @@ function TestimonialsLogoCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold tracking-tight md:text-4xl",
+                    "text-3xl font-semibold tracking-tight md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
+                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              ) : description)
             ]
           }
         ),