@opensite/ui 0.8.1 → 0.8.2

package/dist/feature-icon-tabs-content.d.ts

@@ -21,7 +21,7 @@ interface FeatureIconTabsContentTabContent {
      */
     description?: React.ReactNode;
     /**
-     * Array of action configurations for CTA buttons
+     * Array of action configurations for buttons
      */
     actions?: ActionConfig[];
     /**
@@ -183,29 +183,29 @@ interface FeatureIconTabsContentProps {
 }
 /**
  * Feature Icon Tabs Content - Tabbed interface with icon triggers and
- * content panels featuring images and CTAs.
+ * content panels featuring images and actions.
  *
  * Layout: Centered header with icon tabs, muted background content area.
- * Key features: Icon tab triggers, badge labels, CTA buttons, responsive images.
- * Best for: Feature categories, product tours, service breakdowns.
+ * Key features: Icon tab triggers, badge labels, action buttons, responsive images.
+ * Best for: Content categories, product tours, service breakdowns, multi-section showcases.
  *
  * @example
  * ```tsx
  * <FeatureIconTabsContent
- *   badge="Features"
- *   heading="A Collection of Components"
+ *   badge="Overview"
+ *   heading="Explore Our Offerings"
  *   tabs={[
  *     {
  *       value: "tab-1",
  *       iconName: "lucide/zap",
- *       label: "Boost Revenue",
+ *       label: "Performance",
  *       content: {
- *         badge: "Modern Tactics",
- *         title: "Make your site stand out",
- *         description: "Discover new web trends.",
- *         actions: [{ label: "See Plans", href: "#", variant: "default" }],
- *         imageSrc: "/feature.jpg",
- *         imageAlt: "Feature"
+ *         badge: "Speed",
+ *         title: "Lightning Fast",
+ *         description: "Optimized for performance.",
+ *         actions: [{ label: "Learn More", href: "#", variant: "default" }],
+ *         imageSrc: "/image.jpg",
+ *         imageAlt: "Performance"
  *       }
  *     },
  *   ]}

package/dist/feature-icon-tabs-content.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -1025,12 +1025,12 @@ function FeatureIconTabsContent({
   patternOpacity,
   patternClassName
 }) {
-  const renderTabIcon = useMemo(() => (tab) => {
+  const renderTabIcon = useCallback((tab) => {
     if (tab.icon) return tab.icon;
     if (tab.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: tab.iconName, size: 16 });
-    return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 16 });
+    return null;
   }, []);
-  const renderTabContentActions = useMemo(() => (content) => {
+  const renderTabContentActions = useCallback((content) => {
     if (content.actionsSlot) return content.actionsSlot;
     if (!content.actions || content.actions.length === 0) return null;
     return content.actions.map((action, index) => {
@@ -1070,7 +1070,7 @@ function FeatureIconTabsContent({
       );
     });
   }, []);
-  const renderTabContentImage = useMemo(() => (content) => {
+  const renderTabContentImage = useCallback((content) => {
     if (content.imageSlot) return content.imageSlot;
     if (content.imageSrc) {
       return /* @__PURE__ */ jsx(
@@ -1097,7 +1097,7 @@ function FeatureIconTabsContent({
           value: tab.value,
           className: cn("flex items-center gap-2 rounded-xl px-4 py-3 text-sm font-semibold text-muted-foreground data-[state=active]:bg-muted data-[state=active]:text-primary", tabTriggerClassName, tab.className),
           children: [
-            renderTabIcon(tab),
+            (tab.icon || tab.iconName) && renderTabIcon(tab),
             tab.label
           ]
         },
@@ -1119,9 +1119,9 @@ function FeatureIconTabsContent({
                 content.badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("w-fit bg-background", content.badgeClassName), children: content.badge }),
                 content.title && (typeof content.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-semibold lg:text-5xl", content.titleClassName), children: content.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", content.titleClassName), children: content.title })),
                 content.description && (typeof content.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground lg:text-lg", content.descriptionClassName), children: content.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground lg:text-lg", content.descriptionClassName), children: content.description })),
-                renderTabContentActions(content)
+                (content.actionsSlot || content.actions && content.actions.length > 0) && renderTabContentActions(content)
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
+              (content.imageSlot || content.imageSrc) && /* @__PURE__ */ jsx("div", { className: "relative h-[300px] w-full lg:h-[400px]", children: renderTabContentImage(content) })
             ]
           },
           tab.value
@@ -1140,7 +1140,7 @@ function FeatureIconTabsContent({
       className,
       containerClassName: cn("mx-auto", containerClassName),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 text-center", headerClassName), children: [
+        (badge || heading || description) && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 text-center", headerClassName), children: [
           badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-2xl text-3xl font-semibold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl text-3xl font-semibold md:text-4xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))

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

@@ -979,34 +979,33 @@ function FeatureImageCardsThreeColumn({
   patternOpacity,
   patternClassName
 }) {
+  const renderImage = React.useCallback((card, imageAlt) => {
+    if (card.imageSlot) return card.imageSlot;
+    if (!card.imageSrc) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      img.Img,
+      {
+        src: card.imageSrc,
+        alt: imageAlt,
+        className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
+        loading: "lazy",
+        optixFlowConfig
+      }
+    );
+  }, [optixFlowConfig]);
+  const renderBadgeIcon = React.useCallback((card) => {
+    if (card.avatarSrc) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
+    }
+    if (card.icon) return card.icon;
+    if (!card.iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.iconName, size: 24 });
+  }, []);
   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 renderImage = () => {
-        if (card.imageSlot) return card.imageSlot;
-        if (card.imageSrc) {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: card.imageSrc,
-              alt: imageAlt,
-              className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
-              loading: "lazy",
-              optixFlowConfig
-            }
-          );
-        }
-        return null;
-      };
-      const renderBadgeIcon = () => {
-        if (card.avatarSrc) {
-          return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
-        }
-        if (card.icon) return card.icon;
-        return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.iconName || "lucide/zap", size: 24 });
-      };
       return /* @__PURE__ */ jsxRuntime.jsxs(
         Pressable,
         {
@@ -1014,10 +1013,10 @@ function FeatureImageCardsThreeColumn({
           onClick: card.onClick,
           className: cn("group relative overflow-hidden rounded-xl", cardClassName, card.className),
           children: [
-            renderImage(),
+            renderImage(card, imageAlt),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-primary 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-7", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxRuntime.jsxs(
                 "span",
                 {
                   className: cn(
@@ -1026,7 +1025,7 @@ function FeatureImageCardsThreeColumn({
                     card.badgeClassName
                   ),
                   children: [
-                    renderBadgeIcon(),
+                    renderBadgeIcon(card),
                     card.badgeText
                   ]
                 }
@@ -1044,7 +1043,7 @@ function FeatureImageCardsThreeColumn({
         index
       );
     });
-  }, [cardsSlot, cards, cardClassName, optixFlowConfig]);
+  }, [cardsSlot, cards, cardClassName, renderImage, renderBadgeIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

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

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -957,34 +957,33 @@ function FeatureImageCardsThreeColumn({
   patternOpacity,
   patternClassName
 }) {
+  const renderImage = useCallback((card, imageAlt) => {
+    if (card.imageSlot) return card.imageSlot;
+    if (!card.imageSrc) return null;
+    return /* @__PURE__ */ jsx(
+      Img,
+      {
+        src: card.imageSrc,
+        alt: imageAlt,
+        className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
+        loading: "lazy",
+        optixFlowConfig
+      }
+    );
+  }, [optixFlowConfig]);
+  const renderBadgeIcon = useCallback((card) => {
+    if (card.avatarSrc) {
+      return /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
+    }
+    if (card.icon) return card.icon;
+    if (!card.iconName) return null;
+    return /* @__PURE__ */ jsx(DynamicIcon, { name: card.iconName, size: 24 });
+  }, []);
   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 renderImage = () => {
-        if (card.imageSlot) return card.imageSlot;
-        if (card.imageSrc) {
-          return /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: card.imageSrc,
-              alt: imageAlt,
-              className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
-              loading: "lazy",
-              optixFlowConfig
-            }
-          );
-        }
-        return null;
-      };
-      const renderBadgeIcon = () => {
-        if (card.avatarSrc) {
-          return /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
-        }
-        if (card.icon) return card.icon;
-        return /* @__PURE__ */ jsx(DynamicIcon, { name: card.iconName || "lucide/zap", size: 24 });
-      };
       return /* @__PURE__ */ jsxs(
         Pressable,
         {
@@ -992,10 +991,10 @@ function FeatureImageCardsThreeColumn({
           onClick: card.onClick,
           className: cn("group relative overflow-hidden rounded-xl", cardClassName, card.className),
           children: [
-            renderImage(),
+            renderImage(card, imageAlt),
             /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-primary 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-7", children: [
-              /* @__PURE__ */ jsxs(
+              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxs(
                 "span",
                 {
                   className: cn(
@@ -1004,7 +1003,7 @@ function FeatureImageCardsThreeColumn({
                     card.badgeClassName
                   ),
                   children: [
-                    renderBadgeIcon(),
+                    renderBadgeIcon(card),
                     card.badgeText
                   ]
                 }
@@ -1022,7 +1021,7 @@ function FeatureImageCardsThreeColumn({
         index
       );
     });
-  }, [cardsSlot, cards, cardClassName, optixFlowConfig]);
+  }, [cardsSlot, cards, cardClassName, renderImage, renderBadgeIcon]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/feature-image-overlay-badge.cjs

@@ -1102,28 +1102,30 @@ function FeatureImageOverlayBadge({
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-xl", imageWrapperClassName), children: [
+        imageContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-xl", imageWrapperClassName), children: [
           imageContent,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute top-0 right-0 bottom-0 left-0 rounded-xl bg-linear-to-t from-primary via-transparent to-transparent", overlayClassName) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm", avatarBadgeClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
-              avatarBadgeText
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
-              overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle })),
-              overlayLinkText && /* @__PURE__ */ jsxRuntime.jsxs(
-                Pressable,
-                {
-                  href: overlayLinkUrl,
-                  onClick: overlayLinkOnClick,
-                  className: "flex items-center gap-1 font-medium",
-                  children: [
-                    overlayLinkText,
-                    /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                  ]
-                }
-              )
+          (avatarSrc || avatarBadgeText || overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute top-0 right-0 bottom-0 left-0 rounded-xl bg-linear-to-t from-primary via-transparent to-transparent", overlayClassName) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
+              (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm", avatarBadgeClassName), children: [
+                avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
+                avatarBadgeText
+              ] }),
+              (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
+                overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle })),
+                overlayLinkText && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Pressable,
+                  {
+                    href: overlayLinkUrl,
+                    onClick: overlayLinkOnClick,
+                    className: "flex items-center gap-1 font-medium",
+                    children: [
+                      overlayLinkText,
+                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+                    ]
+                  }
+                )
+              ] })
             ] })
           ] })
         ] })

package/dist/feature-image-overlay-badge.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { Slot } from '@radix-ui/react-slot';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -1080,28 +1080,30 @@ function FeatureImageOverlayBadge({
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
           /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("relative rounded-xl", imageWrapperClassName), children: [
+        imageContent && /* @__PURE__ */ jsxs("div", { className: cn("relative rounded-xl", imageWrapperClassName), children: [
           imageContent,
-          /* @__PURE__ */ jsx("div", { className: cn("absolute top-0 right-0 bottom-0 left-0 rounded-xl bg-linear-to-t from-primary via-transparent to-transparent", overlayClassName) }),
-          /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-            /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm", avatarBadgeClassName), children: [
-              /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
-              avatarBadgeText
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
-              overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsx("h4", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle })),
-              overlayLinkText && /* @__PURE__ */ jsxs(
-                Pressable,
-                {
-                  href: overlayLinkUrl,
-                  onClick: overlayLinkOnClick,
-                  className: "flex items-center gap-1 font-medium",
-                  children: [
-                    overlayLinkText,
-                    /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                  ]
-                }
-              )
+          (avatarSrc || avatarBadgeText || overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: cn("absolute top-0 right-0 bottom-0 left-0 rounded-xl bg-linear-to-t from-primary via-transparent to-transparent", overlayClassName) }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
+              (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm", avatarBadgeClassName), children: [
+                avatarSrc && /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
+                avatarBadgeText
+              ] }),
+              (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
+                overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsx("h4", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold lg:text-3xl", overlayTitleClassName), children: overlayTitle })),
+                overlayLinkText && /* @__PURE__ */ jsxs(
+                  Pressable,
+                  {
+                    href: overlayLinkUrl,
+                    onClick: overlayLinkOnClick,
+                    className: "flex items-center gap-1 font-medium",
+                    children: [
+                      overlayLinkText,
+                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+                    ]
+                  }
+                )
+              ] })
             ] })
           ] })
         ] })

package/dist/feature-integration-cards.cjs

@@ -949,26 +949,25 @@ function FeatureIntegrationCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderIntegrationIcon = React.useMemo(() => (integration) => {
+  const renderIntegrationIcon = React.useCallback((integration) => {
     if (integration.iconSlot) return integration.iconSlot;
-    if (integration.icon) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: integration.icon,
-          alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
-          className: cn("h-auto w-7", integration.iconClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
+    if (!integration.icon) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      img.Img,
+      {
+        src: integration.icon,
+        alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
+        className: cn("h-auto w-7", integration.iconClassName),
+        loading: "lazy",
+        optixFlowConfig
+      }
+    );
   }, [optixFlowConfig]);
-  const renderLinkLabel = React.useMemo(() => (integration) => {
+  const renderLinkLabel = React.useCallback((integration) => {
     if (integration.linkLabelSlot) return integration.linkLabelSlot;
+    if (!integration.linkLabel) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("flex items-center gap-1 rounded-full border px-3 py-2.5 text-sm", integration.linkLabelClassName), children: [
-      integration.linkLabel || "Visit Website",
+      integration.linkLabel,
       /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
     ] });
   }, []);
@@ -976,10 +975,12 @@ function FeatureIntegrationCards({
     if (integrationsSlot) return integrationsSlot;
     if (!integrations || integrations.length === 0) return null;
     return integrations.map((integration, index) => {
+      const iconContent = renderIntegrationIcon(integration);
+      const linkLabelContent = renderLinkLabel(integration);
       const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: renderIntegrationIcon(integration) }),
-          renderLinkLabel(integration)
+          iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: iconContent }),
+          linkLabelContent
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title })),

package/dist/feature-integration-cards.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -928,26 +928,25 @@ function FeatureIntegrationCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderIntegrationIcon = useMemo(() => (integration) => {
+  const renderIntegrationIcon = useCallback((integration) => {
     if (integration.iconSlot) return integration.iconSlot;
-    if (integration.icon) {
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: integration.icon,
-          alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
-          className: cn("h-auto w-7", integration.iconClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
+    if (!integration.icon) return null;
+    return /* @__PURE__ */ jsx(
+      Img,
+      {
+        src: integration.icon,
+        alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
+        className: cn("h-auto w-7", integration.iconClassName),
+        loading: "lazy",
+        optixFlowConfig
+      }
+    );
   }, [optixFlowConfig]);
-  const renderLinkLabel = useMemo(() => (integration) => {
+  const renderLinkLabel = useCallback((integration) => {
     if (integration.linkLabelSlot) return integration.linkLabelSlot;
+    if (!integration.linkLabel) return null;
     return /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-1 rounded-full border px-3 py-2.5 text-sm", integration.linkLabelClassName), children: [
-      integration.linkLabel || "Visit Website",
+      integration.linkLabel,
       /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
     ] });
   }, []);
@@ -955,10 +954,12 @@ function FeatureIntegrationCards({
     if (integrationsSlot) return integrationsSlot;
     if (!integrations || integrations.length === 0) return null;
     return integrations.map((integration, index) => {
+      const iconContent = renderIntegrationIcon(integration);
+      const linkLabelContent = renderLinkLabel(integration);
       const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: renderIntegrationIcon(integration) }),
-          renderLinkLabel(integration)
+          iconContent && /* @__PURE__ */ jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: iconContent }),
+          linkLabelContent
         ] }),
         /* @__PURE__ */ jsxs("div", { children: [
           integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title })),

package/dist/feature-numbered-cards.cjs

@@ -529,7 +529,7 @@ function FeatureNumberedCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderChecklistItems = (feature) => {
+  const renderChecklistItems = React.useCallback((feature) => {
     if (feature.checklistSlot) return feature.checklistSlot;
     if (!feature.checklistItems || feature.checklistItems.length === 0) return null;
     return feature.checklistItems.map((item, itemIndex) => {
@@ -549,7 +549,7 @@ function FeatureNumberedCards({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-base", children: content })
       ] }, itemIndex);
     });
-  };
+  }, []);
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;

package/dist/feature-numbered-cards.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -508,7 +508,7 @@ function FeatureNumberedCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderChecklistItems = (feature) => {
+  const renderChecklistItems = useCallback((feature) => {
     if (feature.checklistSlot) return feature.checklistSlot;
     if (!feature.checklistItems || feature.checklistItems.length === 0) return null;
     return feature.checklistItems.map((item, itemIndex) => {
@@ -528,7 +528,7 @@ function FeatureNumberedCards({
         /* @__PURE__ */ jsx("p", { className: "text-sm md:text-base", children: content })
       ] }, itemIndex);
     });
-  };
+  }, []);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;