@opensite/ui 2.9.0 → 2.9.2

package/dist/testimonials-quote-carousel.cjs

@@ -1089,34 +1089,24 @@ function TestimonialsQuoteCarousel({
   authorClassName,
   navigationClassName,
   background,
-  spacing,
   pattern,
-  patternOpacity
+  patternOpacity,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const getAuthorName = React4.useCallback((testimonial) => {
     if (typeof testimonial.author === "string") return testimonial.author;
     return "";
   }, []);
-  const getAvatarSrc = React4.useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAvatarSrc = React4.useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = React4.useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
-  const renderedHeading = React4.useMemo(() => {
-    if (typeof heading === "string") {
-      return heading.split(" ").map(
-        (word, i) => i === 1 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-primary", children: [
-          word,
-          " "
-        ] }, i) : /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          word,
-          " "
-        ] }, i)
-      );
-    }
-    return heading;
-  }, [heading]);
   const renderedTestimonials = React4.useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!testimonials || testimonials.length === 0) return null;
@@ -1140,36 +1130,36 @@ function TestimonialsQuoteCarousel({
                   "div",
                   {
                     className: cn(
-                      "flex h-full flex-col rounded-xl border bg-background p-6 shadow-sm transition-all hover:shadow-md",
+                      "bg-card text-card-foreground",
+                      "flex h-full flex-col rounded-xl border p-6 shadow-sm transition-all hover:shadow-md",
                       cardClassName
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 font-serif text-4xl text-primary", children: "\u201C" }),
                       /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "mb-6 flex-1", children: testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                         "p",
                         {
                           className: cn(
-                            "text-sm leading-relaxed",
+                            "text-base leading-relaxed",
                             quoteClassName
                           ),
                           children: testimonial.quote
                         }
-                      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: quoteClassName, children: testimonial.quote })) }),
+                      ) : testimonial.quote) }),
                       /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
                           className: cn(
-                            "mt-auto flex items-center gap-3",
+                            "mt-auto flex items-center gap-4",
                             authorClassName
                           ),
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10", children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "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", { className: "text-left", children: [
-                              testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", 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("p", { 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-sm opacity-75 font-semibold", children: testimonial.role }) : testimonial.role)
                             ] })
                           ]
                         }
@@ -1197,7 +1187,18 @@ function TestimonialsQuoteCarousel({
         ]
       }
     ) });
-  }, [testimonialsSlot, carouselClassName, testimonials, cardClassName, quoteClassName, authorClassName, navigationClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    carouselClassName,
+    testimonials,
+    cardClassName,
+    quoteClassName,
+    authorClassName,
+    navigationClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1206,32 +1207,33 @@ function TestimonialsQuoteCarousel({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName),
+            className: cn(
+              "mx-auto mb-12 max-w-full md:max-w-2xl text-center",
+              headerClassName
+            ),
             children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "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: renderedHeading
+                  children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
+                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              ) : description)
             ]
           }
         ),

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

@@ -76,6 +76,10 @@ interface TestimonialsQuoteCarouselProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsQuoteCarousel - A horizontal carousel of testimonial cards with quote
@@ -102,6 +106,6 @@ interface TestimonialsQuoteCarouselProps {
  * />
  * ```
  */
-declare function TestimonialsQuoteCarousel({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, carouselClassName, cardClassName, quoteClassName, authorClassName, navigationClassName, background, spacing, pattern, patternOpacity, }: TestimonialsQuoteCarouselProps): React.JSX.Element;
+declare function TestimonialsQuoteCarousel({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, carouselClassName, cardClassName, quoteClassName, authorClassName, navigationClassName, background, pattern, patternOpacity, spacing, containerClassName, }: TestimonialsQuoteCarouselProps): React.JSX.Element;
 
 export { TestimonialsQuoteCarousel, type TestimonialsQuoteCarouselProps };

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

@@ -76,6 +76,10 @@ interface TestimonialsQuoteCarouselProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsQuoteCarousel - A horizontal carousel of testimonial cards with quote
@@ -102,6 +106,6 @@ interface TestimonialsQuoteCarouselProps {
  * />
  * ```
  */
-declare function TestimonialsQuoteCarousel({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, carouselClassName, cardClassName, quoteClassName, authorClassName, navigationClassName, background, spacing, pattern, patternOpacity, }: TestimonialsQuoteCarouselProps): React.JSX.Element;
+declare function TestimonialsQuoteCarousel({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, carouselClassName, cardClassName, quoteClassName, authorClassName, navigationClassName, background, pattern, patternOpacity, spacing, containerClassName, }: TestimonialsQuoteCarouselProps): React.JSX.Element;
 
 export { TestimonialsQuoteCarousel, type TestimonialsQuoteCarouselProps };

package/dist/testimonials-quote-carousel.js

@@ -1064,34 +1064,24 @@ function TestimonialsQuoteCarousel({
   authorClassName,
   navigationClassName,
   background,
-  spacing,
   pattern,
-  patternOpacity
+  patternOpacity,
+  spacing = "lg",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
   const getAuthorName = useCallback((testimonial) => {
     if (typeof testimonial.author === "string") return testimonial.author;
     return "";
   }, []);
-  const getAvatarSrc = useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAvatarSrc = useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
-  const renderedHeading = useMemo(() => {
-    if (typeof heading === "string") {
-      return heading.split(" ").map(
-        (word, i) => i === 1 ? /* @__PURE__ */ jsxs("span", { className: "text-primary", children: [
-          word,
-          " "
-        ] }, i) : /* @__PURE__ */ jsxs("span", { children: [
-          word,
-          " "
-        ] }, i)
-      );
-    }
-    return heading;
-  }, [heading]);
   const renderedTestimonials = useMemo(() => {
     if (testimonialsSlot) return testimonialsSlot;
     if (!testimonials || testimonials.length === 0) return null;
@@ -1115,36 +1105,36 @@ function TestimonialsQuoteCarousel({
                   "div",
                   {
                     className: cn(
-                      "flex h-full flex-col rounded-xl border bg-background p-6 shadow-sm transition-all hover:shadow-md",
+                      "bg-card text-card-foreground",
+                      "flex h-full flex-col rounded-xl border p-6 shadow-sm transition-all hover:shadow-md",
                       cardClassName
                     ),
                     children: [
-                      /* @__PURE__ */ jsx("div", { className: "mb-4 font-serif text-4xl text-primary", children: "\u201C" }),
                       /* @__PURE__ */ jsx("blockquote", { className: "mb-6 flex-1", children: testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsx(
                         "p",
                         {
                           className: cn(
-                            "text-sm leading-relaxed",
+                            "text-base leading-relaxed",
                             quoteClassName
                           ),
                           children: testimonial.quote
                         }
-                      ) : /* @__PURE__ */ jsx("div", { className: quoteClassName, children: testimonial.quote })) }),
+                      ) : testimonial.quote) }),
                       /* @__PURE__ */ jsxs(
                         "div",
                         {
                           className: cn(
-                            "mt-auto flex items-center gap-3",
+                            "mt-auto flex items-center gap-4",
                             authorClassName
                           ),
                           children: [
-                            /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
+                            /* @__PURE__ */ jsxs(Avatar, { className: "size-10 ring-4 ring-primary", children: [
                               /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
                               /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
                             ] }),
                             /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
-                              testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", 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("p", { className: "text-sm md:text-base font-medium", children: testimonial.author }) : testimonial.author),
+                              testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm opacity-75 font-semibold", children: testimonial.role }) : testimonial.role)
                             ] })
                           ]
                         }
@@ -1172,7 +1162,18 @@ function TestimonialsQuoteCarousel({
         ]
       }
     ) });
-  }, [testimonialsSlot, carouselClassName, testimonials, cardClassName, quoteClassName, authorClassName, navigationClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    carouselClassName,
+    testimonials,
+    cardClassName,
+    quoteClassName,
+    authorClassName,
+    navigationClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1181,32 +1182,33 @@ function TestimonialsQuoteCarousel({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("mx-auto mb-12 max-w-2xl text-center", headerClassName),
+            className: cn(
+              "mx-auto mb-12 max-w-full md:max-w-2xl text-center",
+              headerClassName
+            ),
             children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "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: renderedHeading
+                  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)
             ]
           }
         ),