@opensite/ui 2.3.9 → 2.4.1

package/dist/feature-image-cards-three-column.js

@@ -872,6 +872,43 @@ function Badge({
     }
   );
 }
+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 ASPECT_RATIO_CLASSES = {
+  square: "aspect-square",
+  horizontal: "aspect-video",
+  vertical: "aspect-[3/4]"
+};
 function FeatureImageCardsThreeColumn({
   title,
   description,
@@ -889,7 +926,8 @@ function FeatureImageCardsThreeColumn({
   background,
   pattern,
   patternOpacity,
-  patternClassName
+  patternClassName,
+  cardAspectRatios = { desktop: "vertical", mobile: "square" }
 }) {
   const renderImage = useCallback(
     (card, imageAlt) => {
@@ -900,7 +938,7 @@ function FeatureImageCardsThreeColumn({
         {
           src: card.imageSrc,
           alt: imageAlt,
-          className: "h-full max-h-[450px] min-h-80 w-full rounded-xl object-cover object-center",
+          className: "absolute inset-0 h-full w-full rounded-xl object-cover object-center",
           loading: "lazy",
           optixFlowConfig
         }
@@ -919,77 +957,149 @@ function FeatureImageCardsThreeColumn({
     },
     []
   );
+  const renderCardBadge = useCallback(
+    (card) => {
+      return card.badgeText || card.avatarSrc || card.icon || card.iconName ? /* @__PURE__ */ jsxs(
+        Badge,
+        {
+          variant: "default",
+          className: cn("py-1 px-3 gap-2", card.badgeClassName),
+          children: [
+            renderBadgeIcon(card),
+            card.badgeText
+          ]
+        }
+      ) : null;
+    },
+    [renderBadgeIcon]
+  );
+  const cardHasTextContent = useCallback(
+    (card) => {
+      const hasBadge = !!(card.badgeText || card.avatarSrc || card.icon || card.iconName);
+      return hasBadge || !!card.title || !!card.subtitle || !!card.linkText;
+    },
+    []
+  );
+  const renderCardText = useCallback(
+    (card) => {
+      if (!cardHasTextContent(card)) {
+        return null;
+      }
+      const cardBadge = renderCardBadge(card);
+      return /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
+        cardBadge || /* @__PURE__ */ jsx("div", {}),
+        card.title || card.subtitle || card.linkText ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4 md:gap-6 text-white", children: [
+          card.title || card.subtitle ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2 md:gap-4", children: [
+            card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: cn(
+                  "text-lg md:text-xl font-semibold",
+                  card.titleClassName
+                ),
+                children: card.title
+              }
+            ) : card.title),
+            card.subtitle && (typeof card.subtitle === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-base font-normal",
+                  card.subtitleClassName
+                ),
+                children: card.subtitle
+              }
+            ) : card.subtitle)
+          ] }) : null,
+          card.linkText && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "font-bold text-xs uppercase flex items-center gap-2",
+                card.linkClassName
+              ),
+              children: [
+                card.linkText,
+                /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 18 })
+              ]
+            }
+          )
+        ] }) : null
+      ] });
+    },
+    [cardHasTextContent, renderCardBadge]
+  );
   const cardsContent = useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
     return cards.map((card, index) => {
       const imageAlt = card.imageAlt || (typeof card.title === "string" ? card.title : "Card image");
+      const mobileAspectClass = ASPECT_RATIO_CLASSES[cardAspectRatios.mobile];
+      const desktopAspectClass = `md:${ASPECT_RATIO_CLASSES[cardAspectRatios.desktop]}`;
       return /* @__PURE__ */ jsxs(
         Pressable,
         {
           href: card.link,
           onClick: card.onClick,
           className: cn(
-            "group relative overflow-hidden rounded-xl",
+            "group relative overflow-hidden rounded-2xl shadow-xl",
+            mobileAspectClass,
+            desktopAspectClass,
             cardClassName,
             card.className
           ),
           children: [
             renderImage(card, imageAlt),
-            /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
-            /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
-              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxs(
-                Badge,
-                {
-                  variant: "default",
-                  className: cn("py-1 px-4", card.badgeClassName),
-                  children: [
-                    renderBadgeIcon(card),
-                    card.badgeText
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:gap-4", children: [
-                card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx(
-                  "h3",
-                  {
-                    className: cn(
-                      "text-lg md:text-xl font-semibold",
-                      card.titleClassName
-                    ),
-                    children: card.title
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "text-lg md:text-xl font-semibold",
-                      card.titleClassName
-                    ),
-                    children: card.title
-                  }
-                )),
-                card.linkText && card.link && /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "font-bold text-xs uppercase flex items-center gap-2",
-                      card.linkClassName
-                    ),
-                    children: [
-                      card.linkText,
-                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 18 })
-                    ]
-                  }
-                )
-              ] })
-            ] })
+            cardHasTextContent(card) && /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+            renderCardText(card)
           ]
         },
         index
       );
     });
-  }, [cardsSlot, cards, cardClassName, renderImage, renderBadgeIcon]);
+  }, [
+    cardsSlot,
+    cards,
+    cardClassName,
+    cardAspectRatios,
+    renderImage,
+    cardHasTextContent,
+    renderCardText
+  ]);
+  const contentItems = useMemo(() => {
+    const items = [];
+    if (title) {
+      if (typeof title === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-3xl font-semibold text-balance md:text-4xl lg:text-5xl max-w-full md:max-w-md",
+            title
+          ),
+          children: title
+        });
+      } else {
+        items.push(title);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "text-xl max-w-full md:max-w-md text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [title, titleClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1001,34 +1111,16 @@ function FeatureImageCardsThreeColumn({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
-            "h2",
-            {
-              className: cn(
-                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn("max-w-lg md:max-w-md", descriptionClassName),
-              children: description
-            }
-          ))
-        ] }) : null,
+        /* @__PURE__ */ jsx(
+          ContentGroup,
+          {
+            items: contentItems,
+            className: cn(
+              "flex flex-col gap-2 text-left items-start",
+              headerClassName
+            )
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {