@opensite/ui 2.3.9 → 2.4.1

package/dist/registry.js

@@ -7887,7 +7887,7 @@ function AboutStreamlineTeam({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "pl-0 md:pl-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "pl-0 md:pl-8 lg:pl-16", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsx(
               "h1",
               {
@@ -7938,7 +7938,8 @@ function AboutStreamlineTeam({
                     {
                       actions,
                       actionsSlot,
-                      actionsClassName
+                      actionsClassName,
+                      verticalSpacing: "mt-4 md:mt-0"
                     }
                   )
                 ]
@@ -8780,7 +8781,7 @@ function AboutMissionDualImage({
       if (!primaryHeading || !secondaryContent) {
         return null;
       }
-      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4 md:gap-6", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2 md:gap-4", children: [
         primaryHeading && (typeof primaryHeading === "string" ? /* @__PURE__ */ jsx(
           "h2",
           {
@@ -8791,7 +8792,7 @@ function AboutMissionDualImage({
             children: primaryHeading
           }
         ) : primaryHeading),
-        secondaryContent && (typeof secondaryContent === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", secondaryClassname), children: secondaryContent }) : secondaryContent)
+        secondaryContent && (typeof secondaryContent === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base md:text-lg", secondaryClassname), children: secondaryContent }) : secondaryContent)
       ] });
     },
     []
@@ -26151,6 +26152,11 @@ function FeatureBentoImageGrid({
     }
   );
 }
+var ASPECT_RATIO_CLASSES = {
+  square: "aspect-square",
+  horizontal: "aspect-video",
+  vertical: "aspect-[3/4]"
+};
 function FeatureImageCardsThreeColumn({
   title,
   description,
@@ -26168,7 +26174,8 @@ function FeatureImageCardsThreeColumn({
   background,
   pattern,
   patternOpacity,
-  patternClassName
+  patternClassName,
+  cardAspectRatios = { desktop: "vertical", mobile: "square" }
 }) {
   const renderImage = useCallback(
     (card, imageAlt) => {
@@ -26179,7 +26186,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
         }
@@ -26198,77 +26205,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,
     {
@@ -26280,34 +26359,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",
           {
@@ -41457,6 +41518,40 @@ function FeatureAnimatedCarousel({
     );
   }
   const currentFeature = features[activeIndex];
+  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,
     {
@@ -41468,43 +41563,16 @@ function FeatureAnimatedCarousel({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
-        title || description ? /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
-              "flex flex-col gap-4 md:gap-6 text-left",
+              "flex flex-col gap-2 text-left items-start",
               headerClassName
-            ),
-            children: [
-              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              ) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl 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__ */ jsxs(
           "div",
           {

package/package.json

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