@opensite/ui 2.8.7 → 2.8.9

package/dist/testimonials-large-quote.cjs

@@ -472,7 +472,8 @@ function TestimonialsLargeQuote({
   authorClassName,
   avatarClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -491,49 +492,78 @@ function TestimonialsLargeQuote({
     if (!testimonial) return null;
     const authorName = getAuthorName();
     const avatarSrc = getAvatarSrc();
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicIcon,
-        {
-          name: "lucide/quote",
-          size: 64,
-          className: cn("mx-auto mb-8 text-primary/20", quoteIconClassName)
-        }
-      ),
-      testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-        "blockquote",
-        {
-          className: cn(
-            "text-2xl font-medium leading-relaxed md:text-3xl lg:text-4xl",
-            quoteClassName
-          ),
-          children: testimonial.quote
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: testimonial.quote })),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "mt-10 flex flex-col items-center gap-4",
-            authorClassName
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "mx-auto max-full md:max-w-lg text-center",
+          contentClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
+            {
+              name: "mdi/comment-quote-outline",
+              size: 48,
+              className: cn("mx-auto mb-8 ", quoteIconClassName)
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn("size-16", avatarClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-              /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-lg", children: getInitials(authorName) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold", children: testimonial.author }) : testimonial.author),
-              (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground", children: [
-                testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role),
-                testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company)
-              ] })
-            ] })
-          ]
-        }
-      )
-    ] });
-  }, [testimonialSlot, contentClassName, quoteIconClassName, testimonial, quoteClassName, authorClassName, avatarClassName, getAuthorName, getAvatarSrc, getInitials]);
+          testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "blockquote",
+            {
+              className: cn(
+                "text-2xl font-light leading-relaxed md:text-3xl lg:text-4xl text-balance",
+                quoteClassName
+              ),
+              children: testimonial.quote
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: testimonial.quote })),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "mt-10 md:mt-16 flex flex-col items-center gap-4 md:gap-8",
+                authorClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  Avatar,
+                  {
+                    className: cn(
+                      "relative flex shrink-0 overflow-hidden rounded-full size-16 ring-4 ring-primary shadow-lg",
+                      avatarClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "text-lg", children: getInitials(authorName) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+                  testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold", children: testimonial.author }) : testimonial.author),
+                  (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-normal opacity-75", children: testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm uppercase font-semibold opacity-75", children: testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company) })
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }, [
+    testimonialSlot,
+    contentClassName,
+    quoteIconClassName,
+    testimonial,
+    quoteClassName,
+    authorClassName,
+    avatarClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -542,6 +572,7 @@ function TestimonialsLargeQuote({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: renderedTestimonial
     }
   );

package/dist/testimonials-large-quote.d.cts

@@ -56,6 +56,10 @@ interface TestimonialsLargeQuoteProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsLargeQuote - A centered, single testimonial section featuring an oversized
@@ -79,6 +83,6 @@ interface TestimonialsLargeQuoteProps {
  * />
  * ```
  */
-declare function TestimonialsLargeQuote({ testimonial, testimonialSlot, className, contentClassName, quoteIconClassName, quoteClassName, authorClassName, avatarClassName, background, spacing, pattern, patternOpacity, }: TestimonialsLargeQuoteProps): React.JSX.Element;
+declare function TestimonialsLargeQuote({ testimonial, testimonialSlot, className, contentClassName, quoteIconClassName, quoteClassName, authorClassName, avatarClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsLargeQuoteProps): React.JSX.Element;
 
 export { TestimonialsLargeQuote, type TestimonialsLargeQuoteProps };

package/dist/testimonials-large-quote.d.ts

@@ -56,6 +56,10 @@ interface TestimonialsLargeQuoteProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsLargeQuote - A centered, single testimonial section featuring an oversized
@@ -79,6 +83,6 @@ interface TestimonialsLargeQuoteProps {
  * />
  * ```
  */
-declare function TestimonialsLargeQuote({ testimonial, testimonialSlot, className, contentClassName, quoteIconClassName, quoteClassName, authorClassName, avatarClassName, background, spacing, pattern, patternOpacity, }: TestimonialsLargeQuoteProps): React.JSX.Element;
+declare function TestimonialsLargeQuote({ testimonial, testimonialSlot, className, contentClassName, quoteIconClassName, quoteClassName, authorClassName, avatarClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsLargeQuoteProps): React.JSX.Element;
 
 export { TestimonialsLargeQuote, type TestimonialsLargeQuoteProps };

package/dist/testimonials-large-quote.js

@@ -450,7 +450,8 @@ function TestimonialsLargeQuote({
   authorClassName,
   avatarClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -469,49 +470,78 @@ function TestimonialsLargeQuote({
     if (!testimonial) return null;
     const authorName = getAuthorName();
     const avatarSrc = getAvatarSrc();
-    return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
-      /* @__PURE__ */ jsx(
-        DynamicIcon,
-        {
-          name: "lucide/quote",
-          size: 64,
-          className: cn("mx-auto mb-8 text-primary/20", quoteIconClassName)
-        }
-      ),
-      testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsx(
-        "blockquote",
-        {
-          className: cn(
-            "text-2xl font-medium leading-relaxed md:text-3xl lg:text-4xl",
-            quoteClassName
-          ),
-          children: testimonial.quote
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: testimonial.quote })),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "mt-10 flex flex-col items-center gap-4",
-            authorClassName
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mx-auto max-full md:max-w-lg text-center",
+          contentClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: "mdi/comment-quote-outline",
+              size: 48,
+              className: cn("mx-auto mb-8 ", quoteIconClassName)
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsxs(Avatar, { className: cn("size-16", avatarClassName), children: [
-              /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
-              /* @__PURE__ */ jsx(AvatarFallback, { className: "text-lg", children: getInitials(authorName) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: testimonial.author }) : testimonial.author),
-              (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
-                testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role),
-                testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company)
-              ] })
-            ] })
-          ]
-        }
-      )
-    ] });
-  }, [testimonialSlot, contentClassName, quoteIconClassName, testimonial, quoteClassName, authorClassName, avatarClassName, getAuthorName, getAvatarSrc, getInitials]);
+          testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsx(
+            "blockquote",
+            {
+              className: cn(
+                "text-2xl font-light leading-relaxed md:text-3xl lg:text-4xl text-balance",
+                quoteClassName
+              ),
+              children: testimonial.quote
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: testimonial.quote })),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "mt-10 md:mt-16 flex flex-col items-center gap-4 md:gap-8",
+                authorClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Avatar,
+                  {
+                    className: cn(
+                      "relative flex shrink-0 overflow-hidden rounded-full size-16 ring-4 ring-primary shadow-lg",
+                      avatarClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
+                      /* @__PURE__ */ jsx(AvatarFallback, { className: "text-lg", children: getInitials(authorName) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+                  testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: testimonial.author }) : testimonial.author),
+                  (testimonial.role || testimonial.company) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-base font-normal opacity-75", children: testimonial.role && (typeof testimonial.role === "string" ? testimonial.role : testimonial.role) }),
+                    /* @__PURE__ */ jsx("div", { className: "text-sm uppercase font-semibold opacity-75", children: testimonial.company && (typeof testimonial.company === "string" ? ` at ${testimonial.company}` : testimonial.company) })
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }, [
+    testimonialSlot,
+    contentClassName,
+    quoteIconClassName,
+    testimonial,
+    quoteClassName,
+    authorClassName,
+    avatarClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -520,6 +550,7 @@ function TestimonialsLargeQuote({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: renderedTestimonial
     }
   );

package/dist/testimonials-logo-cards.cjs

@@ -645,13 +645,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
                 }
               ) : heading),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description)
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
+                  children: description
+                }
+              ) : description)
             ]
           }
         ),

package/dist/testimonials-logo-cards.js

@@ -620,13 +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
                 }
               ) : heading),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description)
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
+                  children: description
+                }
+              ) : description)
             ]
           }
         ),