@opensite/ui 2.8.4 → 2.8.5

package/dist/testimonials-stats-header.cjs

@@ -533,7 +533,8 @@ function TestimonialsStatsHeader({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -541,9 +542,12 @@ function TestimonialsStatsHeader({
     if (typeof testimonial.author === "string") return testimonial.author;
     return "";
   }, []);
-  const getAvatarSrc = React.useCallback((testimonial) => {
-    return testimonial.avatarSrc || testimonial.avatar?.src;
-  }, []);
+  const getAvatarSrc = React.useCallback(
+    (testimonial) => {
+      return testimonial.avatarSrc || testimonial.avatar?.src;
+    },
+    []
+  );
   const getInitials = React.useCallback((name) => {
     return name.split(" ").map((n) => n[0]).join("");
   }, []);
@@ -624,7 +628,17 @@ function TestimonialsStatsHeader({
         })
       }
     );
-  }, [testimonialsSlot, testimonialsGridClassName, testimonials, cardClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    testimonialsGridClassName,
+    testimonials,
+    cardClassName,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -633,6 +647,7 @@ function TestimonialsStatsHeader({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",

package/dist/testimonials-stats-header.d.cts

@@ -101,6 +101,10 @@ interface TestimonialsStatsHeaderProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsStatsHeader - A testimonial section featuring a prominent statistics
@@ -131,6 +135,6 @@ interface TestimonialsStatsHeaderProps {
  * />
  * ```
  */
-declare function TestimonialsStatsHeader({ stats, statsSlot, testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, statsGridClassName, statItemClassName, testimonialsGridClassName, cardClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsStatsHeaderProps): React.JSX.Element;
+declare function TestimonialsStatsHeader({ stats, statsSlot, testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, statsGridClassName, statItemClassName, testimonialsGridClassName, cardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsStatsHeaderProps): React.JSX.Element;
 
 export { type StatItem, TestimonialsStatsHeader, type TestimonialsStatsHeaderProps };

package/dist/testimonials-stats-header.d.ts

@@ -101,6 +101,10 @@ interface TestimonialsStatsHeaderProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsStatsHeader - A testimonial section featuring a prominent statistics
@@ -131,6 +135,6 @@ interface TestimonialsStatsHeaderProps {
  * />
  * ```
  */
-declare function TestimonialsStatsHeader({ stats, statsSlot, testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, statsGridClassName, statItemClassName, testimonialsGridClassName, cardClassName, quoteClassName, authorClassName, background, spacing, pattern, patternOpacity, }: TestimonialsStatsHeaderProps): React.JSX.Element;
+declare function TestimonialsStatsHeader({ stats, statsSlot, testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, statsGridClassName, statItemClassName, testimonialsGridClassName, cardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsStatsHeaderProps): React.JSX.Element;
 
 export { type StatItem, TestimonialsStatsHeader, type TestimonialsStatsHeaderProps };

package/dist/testimonials-stats-header.js

@@ -511,7 +511,8 @@ function TestimonialsStatsHeader({
   quoteClassName,
   authorClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -519,9 +520,12 @@ function TestimonialsStatsHeader({
     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("");
   }, []);
@@ -602,7 +606,17 @@ function TestimonialsStatsHeader({
         })
       }
     );
-  }, [testimonialsSlot, testimonialsGridClassName, testimonials, cardClassName, quoteClassName, authorClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    testimonialsGridClassName,
+    testimonials,
+    cardClassName,
+    quoteClassName,
+    authorClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -611,6 +625,7 @@ function TestimonialsStatsHeader({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",

package/dist/testimonials-wall-compact.cjs

@@ -533,17 +533,24 @@ function TestimonialsWallCompact({
   authorClassName,
   quoteClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
-  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("");
   }, []);
@@ -585,7 +592,7 @@ function TestimonialsWallCompact({
                         ] }),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
                           testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                          testimonial.handle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-muted-foreground", children: testimonial.handle })
+                          testimonial.handle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs ", children: testimonial.handle })
                         ] })
                       ] }),
                       testimonial.badge && (typeof testimonial.badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "shrink-0 text-xs", children: testimonial.badge }) : testimonial.badge)
@@ -600,7 +607,17 @@ function TestimonialsWallCompact({
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, authorClassName, quoteClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    authorClassName,
+    quoteClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -609,6 +626,7 @@ function TestimonialsWallCompact({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -625,16 +643,7 @@ function TestimonialsWallCompact({
                   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 }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
             ]
           }
         ),

package/dist/testimonials-wall-compact.d.cts

@@ -85,6 +85,10 @@ interface TestimonialsWallCompactProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsWallCompact - A dense wall of compact testimonial cards arranged in
@@ -112,6 +116,6 @@ interface TestimonialsWallCompactProps {
  * />
  * ```
  */
-declare function TestimonialsWallCompact({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, authorClassName, quoteClassName, background, spacing, pattern, patternOpacity, }: TestimonialsWallCompactProps): React.JSX.Element;
+declare function TestimonialsWallCompact({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, authorClassName, quoteClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsWallCompactProps): React.JSX.Element;
 
 export { TestimonialsWallCompact, type TestimonialsWallCompactProps, type WallTestimonialItem };

package/dist/testimonials-wall-compact.d.ts

@@ -85,6 +85,10 @@ interface TestimonialsWallCompactProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * TestimonialsWallCompact - A dense wall of compact testimonial cards arranged in
@@ -112,6 +116,6 @@ interface TestimonialsWallCompactProps {
  * />
  * ```
  */
-declare function TestimonialsWallCompact({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, authorClassName, quoteClassName, background, spacing, pattern, patternOpacity, }: TestimonialsWallCompactProps): React.JSX.Element;
+declare function TestimonialsWallCompact({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, authorClassName, quoteClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsWallCompactProps): React.JSX.Element;
 
 export { TestimonialsWallCompact, type TestimonialsWallCompactProps, type WallTestimonialItem };

package/dist/testimonials-wall-compact.js

@@ -508,17 +508,24 @@ function TestimonialsWallCompact({
   authorClassName,
   quoteClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
-  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("");
   }, []);
@@ -560,7 +567,7 @@ function TestimonialsWallCompact({
                         ] }),
                         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
                           testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: testimonial.author }) : testimonial.author),
-                          testimonial.handle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: testimonial.handle })
+                          testimonial.handle && /* @__PURE__ */ jsx("p", { className: "truncate text-xs ", children: testimonial.handle })
                         ] })
                       ] }),
                       testimonial.badge && (typeof testimonial.badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink-0 text-xs", children: testimonial.badge }) : testimonial.badge)
@@ -575,7 +582,17 @@ function TestimonialsWallCompact({
         })
       }
     );
-  }, [testimonialsSlot, gridClassName, testimonials, cardClassName, authorClassName, quoteClassName, getAuthorName, getAvatarSrc, getInitials]);
+  }, [
+    testimonialsSlot,
+    gridClassName,
+    testimonials,
+    cardClassName,
+    authorClassName,
+    quoteClassName,
+    getAuthorName,
+    getAvatarSrc,
+    getInitials
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -584,6 +601,7 @@ function TestimonialsWallCompact({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -600,16 +618,7 @@ function TestimonialsWallCompact({
                   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 }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
             ]
           }
         ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "2.8.4",
+  "version": "2.8.5",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",