@opensite/ui 2.3.9 → 2.4.1

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

@@ -894,6 +894,43 @@ function Badge({
     }
   );
 }
+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 ASPECT_RATIO_CLASSES = {
+  square: "aspect-square",
+  horizontal: "aspect-video",
+  vertical: "aspect-[3/4]"
+};
 function FeatureImageCardsThreeColumn({
   title,
   description,
@@ -911,7 +948,8 @@ function FeatureImageCardsThreeColumn({
   background,
   pattern,
   patternOpacity,
-  patternClassName
+  patternClassName,
+  cardAspectRatios = { desktop: "vertical", mobile: "square" }
 }) {
   const renderImage = React.useCallback(
     (card, imageAlt) => {
@@ -922,7 +960,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
         }
@@ -941,77 +979,149 @@ function FeatureImageCardsThreeColumn({
     },
     []
   );
+  const renderCardBadge = React.useCallback(
+    (card) => {
+      return card.badgeText || card.avatarSrc || card.icon || card.iconName ? /* @__PURE__ */ jsxRuntime.jsxs(
+        Badge,
+        {
+          variant: "default",
+          className: cn("py-1 px-3 gap-2", card.badgeClassName),
+          children: [
+            renderBadgeIcon(card),
+            card.badgeText
+          ]
+        }
+      ) : null;
+    },
+    [renderBadgeIcon]
+  );
+  const cardHasTextContent = React.useCallback(
+    (card) => {
+      const hasBadge = !!(card.badgeText || card.avatarSrc || card.icon || card.iconName);
+      return hasBadge || !!card.title || !!card.subtitle || !!card.linkText;
+    },
+    []
+  );
+  const renderCardText = React.useCallback(
+    (card) => {
+      if (!cardHasTextContent(card)) {
+        return null;
+      }
+      const cardBadge = renderCardBadge(card);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
+        cardBadge || /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+        card.title || card.subtitle || card.linkText ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-4 md:gap-6 text-white", children: [
+          card.title || card.subtitle ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-2 md:gap-4", children: [
+            card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-base font-normal",
+                  card.subtitleClassName
+                ),
+                children: card.subtitle
+              }
+            ) : card.subtitle)
+          ] }) : null,
+          card.linkText && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "font-bold text-xs uppercase flex items-center gap-2",
+                card.linkClassName
+              ),
+              children: [
+                card.linkText,
+                /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 18 })
+              ]
+            }
+          )
+        ] }) : null
+      ] });
+    },
+    [cardHasTextContent, renderCardBadge]
+  );
   const cardsContent = React.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-                Badge,
-                {
-                  variant: "default",
-                  className: cn("py-1 px-4", card.badgeClassName),
-                  children: [
-                    renderBadgeIcon(card),
-                    card.badgeText
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:gap-4", children: [
-                card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "h3",
-                  {
-                    className: cn(
-                      "text-lg md:text-xl font-semibold",
-                      card.titleClassName
-                    ),
-                    children: card.title
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "text-lg md:text-xl font-semibold",
-                      card.titleClassName
-                    ),
-                    children: card.title
-                  }
-                )),
-                card.linkText && card.link && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "font-bold text-xs uppercase flex items-center gap-2",
-                      card.linkClassName
-                    ),
-                    children: [
-                      card.linkText,
-                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 18 })
-                    ]
-                  }
-                )
-              ] })
-            ] })
+            cardHasTextContent(card) && /* @__PURE__ */ jsxRuntime.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 = React.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__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1023,34 +1133,16 @@ function FeatureImageCardsThreeColumn({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("max-w-lg md:max-w-md", descriptionClassName),
-              children: description
-            }
-          ))
-        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
+          {
+            items: contentItems,
+            className: cn(
+              "flex flex-col gap-2 text-left items-start",
+              headerClassName
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {

package/dist/feature-image-cards-three-column.d.cts

@@ -27,6 +27,10 @@ interface FeatureImageCardsThreeColumnItem {
      * Card title content
      */
     title?: React.ReactNode;
+    /**
+     * Card subtitle content
+     */
+    subtitle?: React.ReactNode;
     /**
      * Link text content
      */
@@ -63,6 +67,10 @@ interface FeatureImageCardsThreeColumnItem {
      * Additional CSS classes for the title
      */
     titleClassName?: string;
+    /**
+     * Additional CSS classes for the subtitle
+     */
+    subtitleClassName?: string;
     /**
      * Additional CSS classes for the link text
      */
@@ -137,34 +145,15 @@ interface FeatureImageCardsThreeColumnProps {
      * Additional CSS classes for the pattern overlay
      */
     patternClassName?: string;
+    /**
+     * Media card aspect ratios
+     * @default { desktop: "vertical", mobile: "square" }
+     */
+    cardAspectRatios?: {
+        desktop: "square" | "horizontal" | "vertical";
+        mobile: "square" | "horizontal" | "vertical";
+    };
 }
-/**
- * Feature Image Cards Three Column - Three-column grid of image cards with
- * gradient overlays, badges, and CTAs.
- *
- * Layout: Three equal-width cards with full-height images and overlays.
- * Key features: Gradient overlays, icon/avatar badges, hover animations, CTAs.
- * Best for: Portfolio showcases, product categories, feature highlights.
- *
- * @example
- * ```tsx
- * <FeatureImageCardsThreeColumn
- *   title="Versatile Designs"
- *   description="Personalize the box to fit your requirements"
- *   cards={[
- *     {
- *       iconName: "lucide/zap",
- *       badgeText: "Advanced tools",
- *       title: "Transform your website",
- *       linkText: "Explore all features",
- *       link: "/features",
- *       imageSrc: "/feature.jpg",
- *       imageAlt: "Feature"
- *     },
- *   ]}
- * />
- * ```
- */
-declare function FeatureImageCardsThreeColumn({ title, description, headerClassName, cards, cardsSlot, className, containerClassName, spacing, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, pattern, patternOpacity, patternClassName, }: FeatureImageCardsThreeColumnProps): React.JSX.Element;
+declare function FeatureImageCardsThreeColumn({ title, description, headerClassName, cards, cardsSlot, className, containerClassName, spacing, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, pattern, patternOpacity, patternClassName, cardAspectRatios, }: FeatureImageCardsThreeColumnProps): React.JSX.Element;
 
 export { FeatureImageCardsThreeColumn, type FeatureImageCardsThreeColumnProps };

package/dist/feature-image-cards-three-column.d.ts

@@ -27,6 +27,10 @@ interface FeatureImageCardsThreeColumnItem {
      * Card title content
      */
     title?: React.ReactNode;
+    /**
+     * Card subtitle content
+     */
+    subtitle?: React.ReactNode;
     /**
      * Link text content
      */
@@ -63,6 +67,10 @@ interface FeatureImageCardsThreeColumnItem {
      * Additional CSS classes for the title
      */
     titleClassName?: string;
+    /**
+     * Additional CSS classes for the subtitle
+     */
+    subtitleClassName?: string;
     /**
      * Additional CSS classes for the link text
      */
@@ -137,34 +145,15 @@ interface FeatureImageCardsThreeColumnProps {
      * Additional CSS classes for the pattern overlay
      */
     patternClassName?: string;
+    /**
+     * Media card aspect ratios
+     * @default { desktop: "vertical", mobile: "square" }
+     */
+    cardAspectRatios?: {
+        desktop: "square" | "horizontal" | "vertical";
+        mobile: "square" | "horizontal" | "vertical";
+    };
 }
-/**
- * Feature Image Cards Three Column - Three-column grid of image cards with
- * gradient overlays, badges, and CTAs.
- *
- * Layout: Three equal-width cards with full-height images and overlays.
- * Key features: Gradient overlays, icon/avatar badges, hover animations, CTAs.
- * Best for: Portfolio showcases, product categories, feature highlights.
- *
- * @example
- * ```tsx
- * <FeatureImageCardsThreeColumn
- *   title="Versatile Designs"
- *   description="Personalize the box to fit your requirements"
- *   cards={[
- *     {
- *       iconName: "lucide/zap",
- *       badgeText: "Advanced tools",
- *       title: "Transform your website",
- *       linkText: "Explore all features",
- *       link: "/features",
- *       imageSrc: "/feature.jpg",
- *       imageAlt: "Feature"
- *     },
- *   ]}
- * />
- * ```
- */
-declare function FeatureImageCardsThreeColumn({ title, description, headerClassName, cards, cardsSlot, className, containerClassName, spacing, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, pattern, patternOpacity, patternClassName, }: FeatureImageCardsThreeColumnProps): React.JSX.Element;
+declare function FeatureImageCardsThreeColumn({ title, description, headerClassName, cards, cardsSlot, className, containerClassName, spacing, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, pattern, patternOpacity, patternClassName, cardAspectRatios, }: FeatureImageCardsThreeColumnProps): React.JSX.Element;
 
 export { FeatureImageCardsThreeColumn, type FeatureImageCardsThreeColumnProps };