@opensite/ui 2.9.0 → 2.9.2

package/dist/testimonials-simple-grid.js

@@ -4,7 +4,7 @@ import React3__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 
 // components/blocks/testimonials/testimonials-simple-grid.tsx
@@ -860,6 +860,70 @@ var Pressable = React3.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function TestimonialsSimpleGrid({
   testimonials,
   testimonialsSlot,
@@ -879,7 +943,10 @@ function TestimonialsSimpleGrid({
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "xl",
   pattern,
-  patternOpacity
+  patternOpacity,
+  actions,
+  actionsSlot,
+  actionsClassName
 }) {
   const getAuthorName = useCallback((testimonial) => {
     if (typeof testimonial.author === "string") return testimonial.author;
@@ -901,7 +968,7 @@ function TestimonialsSimpleGrid({
       "div",
       {
         className: cn(
-          "grid gap-4 md:gap-6 lg:gap-8 md:grid-cols-2 lg:grid-cols-3",
+          "grid gap-8 md:gap-6 lg:gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
           gridClassName
         ),
         children: testimonials.map((testimonial, index) => {
@@ -913,8 +980,8 @@ function TestimonialsSimpleGrid({
               className: cn(
                 "bg-card text-card-foreground",
                 "flex flex-col gap-6",
-                testimonial.linkConfig?.href ? "cursor-pointer hover:bg-black hover:text-white transition-all duration-500" : "",
-                "rounded-2xl py-0 shadow-xl group",
+                testimonial.linkConfig?.href ? "cursor-pointer hover:opacity-75 transition-all duration-500" : "opacity-100",
+                "rounded-2xl py-0 shadow-xl group overflow-hidden",
                 "ring-4 ring-ring",
                 cardClassName
               ),
@@ -965,7 +1032,7 @@ function TestimonialsSimpleGrid({
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ jsx("div", { className: "pt-6 md: pt-8 px-6 md:px-8", children: testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed", children: testimonial.quote }) : testimonial.quote) })
+                    /* @__PURE__ */ jsx("div", { className: "pt-6 md:pt-8 px-6 md:px-8", children: testimonial.quote && (typeof testimonial.quote === "string" ? /* @__PURE__ */ jsx("p", { className: "text-base leading-relaxed", children: testimonial.quote }) : testimonial.quote) })
                   ]
                 }
               )
@@ -1024,7 +1091,16 @@ function TestimonialsSimpleGrid({
             ]
           }
         ),
-        renderedTestimonials
+        renderedTestimonials,
+        /* @__PURE__ */ jsx(
+          BlockActions,
+          {
+            actions,
+            actionsSlot,
+            actionsClassName: cn("mt-8 md:mt-12 justify-center", actionsClassName),
+            mobileConfig: { width: "full", position: "center" }
+          }
+        )
       ]
     }
   );

package/dist/testimonials-stats-header.cjs

@@ -921,6 +921,70 @@ var Pressable = React4__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function TestimonialsStatsHeader({
   stats,
   statsSlot,
@@ -943,7 +1007,10 @@ function TestimonialsStatsHeader({
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "xl",
   pattern,
-  patternOpacity
+  patternOpacity,
+  actions,
+  actionsSlot,
+  actionsClassName
 }) {
   const getAuthorName = React4.useCallback((testimonial) => {
     if (typeof testimonial.author === "string") return testimonial.author;
@@ -978,6 +1045,7 @@ function TestimonialsStatsHeader({
           {
             className: cn(
               "overflow-hidden border p-0",
+              "rounded-2xl shadow-xl",
               stat.className,
               statCardClassName
             ),
@@ -1003,7 +1071,10 @@ function TestimonialsStatsHeader({
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn("grid gap-6 md:grid-cols-3", testimonialsGridClassName),
+        className: cn(
+          "grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+          testimonialsGridClassName
+        ),
         children: testimonials.map((testimonial, index) => {
           const authorName = getAuthorName(testimonial);
           const avatarSrc = getAvatarSrc(testimonial);
@@ -1035,14 +1106,14 @@ function TestimonialsStatsHeader({
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: cn("flex items-center gap-3", authorClassName),
+                    className: cn("flex items-center gap-4", authorClassName),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-14 ring-4 ring-primary shadow-lg", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
                         /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: getInitials(authorName) })
                       ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0", children: [
                           testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium", children: testimonial.author }) : testimonial.author),
                           testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm opacity-75", children: testimonial.role }) : testimonial.role)
                         ] }),
@@ -1051,7 +1122,7 @@ function TestimonialsStatsHeader({
                           {
                             href: testimonial.linkConfig.href,
                             className: cn(
-                              "text-sm  transition-all duration-300",
+                              "text-sm transition-all duration-500",
                               "hover:underline hover:underline-offset-4",
                               testimonial.linkConfig.className
                             ),
@@ -1119,7 +1190,16 @@ function TestimonialsStatsHeader({
           }
         ),
         renderedStats,
-        renderedTestimonials
+        renderedTestimonials,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BlockActions,
+          {
+            actions,
+            actionsSlot,
+            actionsClassName: cn("mt-8 md:mt-12 justify-center", actionsClassName),
+            mobileConfig: { width: "full", position: "center" }
+          }
+        )
       ]
     }
   );

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B8KCpwXH.cjs';
+import { ActionConfig } from '@page-speed/maps/components/geo-map';
 import { T as TestimonialItem } from './blocks-BtDAbw8d.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -141,6 +142,18 @@ interface TestimonialsStatsHeaderProps {
      * Additional CSS classes for stat cards
      */
     statCardClassName?: string;
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
 }
 /**
  * TestimonialsStatsHeader - A testimonial section featuring a prominent statistics
@@ -171,6 +184,6 @@ interface TestimonialsStatsHeaderProps {
  * />
  * ```
  */
-declare function TestimonialsStatsHeader({ stats, statsSlot, testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, statsGridClassName, statItemClassName, testimonialsGridClassName, cardClassName, statCardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsStatsHeaderProps): React.JSX.Element;
+declare function TestimonialsStatsHeader({ stats, statsSlot, testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, statsGridClassName, statItemClassName, testimonialsGridClassName, cardClassName, statCardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, actions, actionsSlot, actionsClassName, }: TestimonialsStatsHeaderProps): React.JSX.Element;
 
 export { type StatItem, TestimonialsStatsHeader, type TestimonialsStatsHeaderProps };

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-rTRuDt0r.js';
+import { ActionConfig } from '@page-speed/maps/components/geo-map';
 import { T as TestimonialItem } from './blocks-BlWXj9GI.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -141,6 +142,18 @@ interface TestimonialsStatsHeaderProps {
      * Additional CSS classes for stat cards
      */
     statCardClassName?: string;
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
 }
 /**
  * TestimonialsStatsHeader - A testimonial section featuring a prominent statistics
@@ -171,6 +184,6 @@ interface TestimonialsStatsHeaderProps {
  * />
  * ```
  */
-declare function TestimonialsStatsHeader({ stats, statsSlot, testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, statsGridClassName, statItemClassName, testimonialsGridClassName, cardClassName, statCardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, }: TestimonialsStatsHeaderProps): React.JSX.Element;
+declare function TestimonialsStatsHeader({ stats, statsSlot, testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, statsGridClassName, statItemClassName, testimonialsGridClassName, cardClassName, statCardClassName, quoteClassName, authorClassName, background, containerClassName, spacing, pattern, patternOpacity, actions, actionsSlot, actionsClassName, }: TestimonialsStatsHeaderProps): React.JSX.Element;
 
 export { type StatItem, TestimonialsStatsHeader, type TestimonialsStatsHeaderProps };

package/dist/testimonials-stats-header.js

@@ -4,7 +4,7 @@ import React4__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon } from '@page-speed/icon';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cva } from 'class-variance-authority';
 
@@ -899,6 +899,70 @@ var Pressable = React4.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function TestimonialsStatsHeader({
   stats,
   statsSlot,
@@ -921,7 +985,10 @@ function TestimonialsStatsHeader({
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "xl",
   pattern,
-  patternOpacity
+  patternOpacity,
+  actions,
+  actionsSlot,
+  actionsClassName
 }) {
   const getAuthorName = useCallback((testimonial) => {
     if (typeof testimonial.author === "string") return testimonial.author;
@@ -956,6 +1023,7 @@ function TestimonialsStatsHeader({
           {
             className: cn(
               "overflow-hidden border p-0",
+              "rounded-2xl shadow-xl",
               stat.className,
               statCardClassName
             ),
@@ -981,7 +1049,10 @@ function TestimonialsStatsHeader({
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn("grid gap-6 md:grid-cols-3", testimonialsGridClassName),
+        className: cn(
+          "grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+          testimonialsGridClassName
+        ),
         children: testimonials.map((testimonial, index) => {
           const authorName = getAuthorName(testimonial);
           const avatarSrc = getAvatarSrc(testimonial);
@@ -1013,14 +1084,14 @@ function TestimonialsStatsHeader({
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: cn("flex items-center gap-3", authorClassName),
+                    className: cn("flex items-center gap-4", authorClassName),
                     children: [
-                      /* @__PURE__ */ jsxs(Avatar, { className: "size-10", children: [
+                      /* @__PURE__ */ jsxs(Avatar, { className: "size-14 ring-4 ring-primary shadow-lg", children: [
                         /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: authorName }),
                         /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(authorName) })
                       ] }),
-                      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                        /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-1", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
                           testimonial.author && (typeof testimonial.author === "string" ? /* @__PURE__ */ jsx("p", { className: "text-base font-medium", children: testimonial.author }) : testimonial.author),
                           testimonial.role && (typeof testimonial.role === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm opacity-75", children: testimonial.role }) : testimonial.role)
                         ] }),
@@ -1029,7 +1100,7 @@ function TestimonialsStatsHeader({
                           {
                             href: testimonial.linkConfig.href,
                             className: cn(
-                              "text-sm  transition-all duration-300",
+                              "text-sm transition-all duration-500",
                               "hover:underline hover:underline-offset-4",
                               testimonial.linkConfig.className
                             ),
@@ -1097,7 +1168,16 @@ function TestimonialsStatsHeader({
           }
         ),
         renderedStats,
-        renderedTestimonials
+        renderedTestimonials,
+        /* @__PURE__ */ jsx(
+          BlockActions,
+          {
+            actions,
+            actionsSlot,
+            actionsClassName: cn("mt-8 md:mt-12 justify-center", actionsClassName),
+            mobileConfig: { width: "full", position: "center" }
+          }
+        )
       ]
     }
   );