@opensite/ui 2.9.0 → 2.9.2

package/dist/testimonials-twitter-cards.cjs

@@ -980,6 +980,102 @@ var SocialLinkIcon = React__namespace.forwardRef(
   }
 );
 SocialLinkIcon.displayName = "SocialLinkIcon";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React__namespace.isValidElement(reactNode)) {
+          return React__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
+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 TestimonialsTwitterCards({
   testimonials,
   testimonialsSlot,
@@ -997,7 +1093,10 @@ function TestimonialsTwitterCards({
   spacing = "lg",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity
+  patternOpacity,
+  actions,
+  actionsSlot,
+  actionsClassName
 }) {
   const getAuthorName = React.useCallback(
     (testimonial) => {
@@ -1096,6 +1195,41 @@ function TestimonialsTwitterCards({
     getAuthorName,
     getInitials
   ]);
+  const contentItems = React.useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-pretty text-3xl md:text-4xl lg:text-6xl",
+            "font-semibold tracking-tight",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "max-w-full md:max-w-md text-lg text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1106,36 +1240,27 @@ function TestimonialsTwitterCards({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
+              "flex flex-col items-center",
               "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-pretty text-3xl md:text-4xl lg:text-6xl",
-                    "font-semibold tracking-tight",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : heading),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
-                  children: description
-                }
-              ) : description)
-            ]
+            )
           }
         ),
-        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-twitter-cards.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 './blocks-BtDAbw8d.cjs';
 import 'class-variance-authority';
 import './button-variants-8mtEHxev.cjs';
@@ -104,6 +105,18 @@ interface TestimonialsTwitterCardsProps {
      * Additional CSS classes for the container
      */
     containerClassName?: 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;
 }
 /**
  * TestimonialsTwitterCards - A grid of social testimonial cards featuring
@@ -144,6 +157,6 @@ interface TestimonialsTwitterCardsProps {
  * />
  * ```
  */
-declare function TestimonialsTwitterCards({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, cardContentClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsTwitterCardsProps): React.JSX.Element;
+declare function TestimonialsTwitterCards({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, cardContentClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, actions, actionsSlot, actionsClassName, }: TestimonialsTwitterCardsProps): React.JSX.Element;
 
 export { TestimonialsTwitterCards, type TestimonialsTwitterCardsProps, type TwitterTestimonialItem };

package/dist/testimonials-twitter-cards.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 './blocks-BlWXj9GI.js';
 import 'class-variance-authority';
 import './button-variants-8mtEHxev.js';
@@ -104,6 +105,18 @@ interface TestimonialsTwitterCardsProps {
      * Additional CSS classes for the container
      */
     containerClassName?: 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;
 }
 /**
  * TestimonialsTwitterCards - A grid of social testimonial cards featuring
@@ -144,6 +157,6 @@ interface TestimonialsTwitterCardsProps {
  * />
  * ```
  */
-declare function TestimonialsTwitterCards({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, cardContentClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, }: TestimonialsTwitterCardsProps): React.JSX.Element;
+declare function TestimonialsTwitterCards({ testimonials, testimonialsSlot, heading, description, className, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, cardContentClassName, authorClassName, background, spacing, containerClassName, pattern, patternOpacity, actions, actionsSlot, actionsClassName, }: TestimonialsTwitterCardsProps): React.JSX.Element;
 
 export { TestimonialsTwitterCards, type TestimonialsTwitterCardsProps, type TwitterTestimonialItem };

package/dist/testimonials-twitter-cards.js

@@ -4,7 +4,7 @@ import React__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';
 import { Icon } from '@page-speed/icon';
 import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
@@ -958,6 +958,102 @@ var SocialLinkIcon = React.forwardRef(
   }
 );
 SocialLinkIcon.displayName = "SocialLinkIcon";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React.isValidElement(reactNode)) {
+          return React.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsx(React.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
+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 TestimonialsTwitterCards({
   testimonials,
   testimonialsSlot,
@@ -975,7 +1071,10 @@ function TestimonialsTwitterCards({
   spacing = "lg",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity
+  patternOpacity,
+  actions,
+  actionsSlot,
+  actionsClassName
 }) {
   const getAuthorName = useCallback(
     (testimonial) => {
@@ -1074,6 +1173,41 @@ function TestimonialsTwitterCards({
     getAuthorName,
     getInitials
   ]);
+  const contentItems = useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-pretty text-3xl md:text-4xl lg:text-6xl",
+            "font-semibold tracking-tight",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "max-w-full md:max-w-md text-lg text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1084,36 +1218,27 @@ function TestimonialsTwitterCards({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
+              "flex flex-col items-center",
               "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-pretty text-3xl md:text-4xl lg:text-6xl",
-                    "font-semibold tracking-tight",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : heading),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn("mt-4 text-lg text-balance", descriptionClassName),
-                  children: description
-                }
-              ) : description)
-            ]
+            )
           }
         ),
-        renderedTestimonials
+        renderedTestimonials,
+        /* @__PURE__ */ jsx(
+          BlockActions,
+          {
+            actions,
+            actionsSlot,
+            actionsClassName: cn("mt-8 md:mt-12 justify-center", actionsClassName),
+            mobileConfig: { width: "full", position: "center" }
+          }
+        )
       ]
     }
   );