@opensite/ui 0.8.1 → 0.8.2

package/dist/feature-split-image-reverse.js

@@ -4,7 +4,7 @@ import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 
 // components/blocks/features/feature-split-image-reverse.tsx
@@ -831,40 +831,19 @@ function FeatureSplitImageReverse({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant,
-            size: action.size,
-            className: action.className,
-            "aria-label": action["aria-label"],
-            asButton: true,
-            children: action.children
-          },
-          index
-        );
-      }
-      return /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: action.className,
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
-      );
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) }, index);
     });
   }, [actionsSlot, actions]);
   const imageContent = useMemo(() => {
@@ -874,7 +853,7 @@ function FeatureSplitImageReverse({
       Img,
       {
         src: imageSrc,
-        alt: imageAlt || "Feature illustration",
+        alt: imageAlt || "",
         className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
         loading: "lazy",
         optixFlowConfig
@@ -896,7 +875,7 @@ function FeatureSplitImageReverse({
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
         ] })
       ] })
     }

package/dist/feature-split-image.cjs

@@ -852,40 +852,19 @@ function FeatureSplitImage({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant,
-            size: action.size,
-            className: action.className,
-            "aria-label": action["aria-label"],
-            asButton: true,
-            children: action.children
-          },
-          index
-        );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        Pressable,
-        {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: action.className,
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
-      );
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) }, index);
     });
   }, [actionsSlot, actions]);
   const imageContent = React.useMemo(() => {
@@ -895,7 +874,7 @@ function FeatureSplitImage({
       img.Img,
       {
         src: imageSrc,
-        alt: imageAlt || "Feature illustration",
+        alt: imageAlt || "",
         className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
         loading: "lazy",
         optixFlowConfig
@@ -916,7 +895,7 @@ function FeatureSplitImage({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
         ] }),
         imageContent
       ] })

package/dist/feature-split-image.js

@@ -4,7 +4,7 @@ import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 
 // components/blocks/features/feature-split-image.tsx
@@ -831,40 +831,19 @@ function FeatureSplitImage({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant,
-            size: action.size,
-            className: action.className,
-            "aria-label": action["aria-label"],
-            asButton: true,
-            children: action.children
-          },
-          index
-        );
-      }
-      return /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: action.className,
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
-      );
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) }, index);
     });
   }, [actionsSlot, actions]);
   const imageContent = useMemo(() => {
@@ -874,7 +853,7 @@ function FeatureSplitImage({
       Img,
       {
         src: imageSrc,
-        alt: imageAlt || "Feature illustration",
+        alt: imageAlt || "",
         className: cn("max-h-96 w-full rounded-md object-cover", imageClassName),
         loading: "lazy",
         optixFlowConfig
@@ -895,7 +874,7 @@ function FeatureSplitImage({
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center lg:items-start lg:text-left", contentClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("my-6 mt-0 text-4xl font-semibold text-balance lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description })),
-          /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: actionsContent })
         ] }),
         imageContent
       ] })

package/dist/feature-stats-highlight.cjs

@@ -885,37 +885,25 @@ function FeatureStatsHighlight({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant,
-            size: action.size,
-            className: cn("mt-4 w-fit gap-2", action.className),
-            "aria-label": action["aria-label"],
-            asButton: true,
-            children: action.children
-          },
-          index
-        );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: cn("mt-4 w-fit gap-2", action.className),
-          "aria-label": action["aria-label"],
+          className: cn("mt-4 w-fit gap-2", actionClassName),
           asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
         },
         index
       );
@@ -929,8 +917,8 @@ function FeatureStatsHighlight({
       {
         className: cn("flex flex-col gap-2 rounded-xl border bg-muted/30 p-6", statCardClassName, stat.className),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
+          stat.value && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
+          stat.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
         ]
       },
       index
@@ -951,9 +939,9 @@ function FeatureStatsHighlight({
           badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("w-fit", badgeClassName), children: badge }),
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
           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 })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
       ] })
     }
   );

package/dist/feature-stats-highlight.js

@@ -4,7 +4,7 @@ import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/features/feature-stats-highlight.tsx
@@ -864,37 +864,25 @@ function FeatureStatsHighlight({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant,
-            size: action.size,
-            className: cn("mt-4 w-fit gap-2", action.className),
-            "aria-label": action["aria-label"],
-            asButton: true,
-            children: action.children
-          },
-          index
-        );
-      }
-      return /* @__PURE__ */ jsxs(
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
         Pressable,
         {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: cn("mt-4 w-fit gap-2", action.className),
-          "aria-label": action["aria-label"],
+          className: cn("mt-4 w-fit gap-2", actionClassName),
           asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
         },
         index
       );
@@ -908,8 +896,8 @@ function FeatureStatsHighlight({
       {
         className: cn("flex flex-col gap-2 rounded-xl border bg-muted/30 p-6", statCardClassName, stat.className),
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
-          /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
+          stat.value && /* @__PURE__ */ jsx("span", { className: cn("text-4xl font-bold text-primary lg:text-5xl", stat.valueClassName), children: stat.value }),
+          stat.label && /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
         ]
       },
       index
@@ -930,9 +918,9 @@ function FeatureStatsHighlight({
           badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("w-fit", badgeClassName), children: badge }),
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
           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 })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
       ] })
     }
   );

package/dist/feature-tabbed-content-image.cjs

@@ -995,7 +995,7 @@ function FeatureTabbedContentImage({
   description,
   slides,
   slidesSlot,
-  defaultTab = "1",
+  defaultTab,
   className,
   containerClassName,
   headerClassName,
@@ -1014,7 +1014,7 @@ function FeatureTabbedContentImage({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatures = React.useMemo(() => (slide) => {
+  const renderFeatures = React__namespace.useCallback((slide) => {
     if (slide.featuresSlot) return slide.featuresSlot;
     if (!slide.features || slide.features.length === 0) return null;
     return slide.features.map((feature, index) => {
@@ -1028,7 +1028,7 @@ function FeatureTabbedContentImage({
       ] }, index);
     });
   }, []);
-  const renderActions = React.useMemo(() => (slide) => {
+  const renderActions = React__namespace.useCallback((slide) => {
     if (slide.actionsSlot) return slide.actionsSlot;
     if (!slide.actions || slide.actions.length === 0) return null;
     return slide.actions.map((action, index) => {
@@ -1068,7 +1068,7 @@ function FeatureTabbedContentImage({
       );
     });
   }, []);
-  const renderImage = React.useMemo(() => (slide) => {
+  const renderImage = React__namespace.useCallback((slide) => {
     if (slide.imageSlot) return slide.imageSlot;
     if (!slide.image) return null;
     const imageAlt = slide.imageAlt || (typeof slide.title === "string" ? slide.title : "Tab content image");
@@ -1115,6 +1115,11 @@ function FeatureTabbedContentImage({
       ))
     ] });
   }, [slidesSlot, slides, tabsListClassName, tabTriggerClassName, tabContentClassName, contentGridClassName, renderFeatures, renderActions, renderImage]);
+  const effectiveDefaultTab = React.useMemo(() => {
+    if (defaultTab) return defaultTab;
+    if (slides && slides.length > 0) return slides[0].id.toString();
+    return "1";
+  }, [defaultTab, slides]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1130,10 +1135,10 @@ function FeatureTabbedContentImage({
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        (slidesSlot || slides && slides.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
           Tabs,
           {
-            defaultValue: defaultTab,
+            defaultValue: effectiveDefaultTab,
             className: cn("mx-auto flex w-fit flex-col items-center gap-8 md:gap-12", tabsClassName),
             children: slidesContent
           }

package/dist/feature-tabbed-content-image.js

@@ -973,7 +973,7 @@ function FeatureTabbedContentImage({
   description,
   slides,
   slidesSlot,
-  defaultTab = "1",
+  defaultTab,
   className,
   containerClassName,
   headerClassName,
@@ -992,7 +992,7 @@ function FeatureTabbedContentImage({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatures = useMemo(() => (slide) => {
+  const renderFeatures = React.useCallback((slide) => {
     if (slide.featuresSlot) return slide.featuresSlot;
     if (!slide.features || slide.features.length === 0) return null;
     return slide.features.map((feature, index) => {
@@ -1006,7 +1006,7 @@ function FeatureTabbedContentImage({
       ] }, index);
     });
   }, []);
-  const renderActions = useMemo(() => (slide) => {
+  const renderActions = React.useCallback((slide) => {
     if (slide.actionsSlot) return slide.actionsSlot;
     if (!slide.actions || slide.actions.length === 0) return null;
     return slide.actions.map((action, index) => {
@@ -1046,7 +1046,7 @@ function FeatureTabbedContentImage({
       );
     });
   }, []);
-  const renderImage = useMemo(() => (slide) => {
+  const renderImage = React.useCallback((slide) => {
     if (slide.imageSlot) return slide.imageSlot;
     if (!slide.image) return null;
     const imageAlt = slide.imageAlt || (typeof slide.title === "string" ? slide.title : "Tab content image");
@@ -1093,6 +1093,11 @@ function FeatureTabbedContentImage({
       ))
     ] });
   }, [slidesSlot, slides, tabsListClassName, tabTriggerClassName, tabContentClassName, contentGridClassName, renderFeatures, renderActions, renderImage]);
+  const effectiveDefaultTab = useMemo(() => {
+    if (defaultTab) return defaultTab;
+    if (slides && slides.length > 0) return slides[0].id.toString();
+    return "1";
+  }, [defaultTab, slides]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1108,10 +1113,10 @@ function FeatureTabbedContentImage({
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsx(
+        (slidesSlot || slides && slides.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsx(
           Tabs,
           {
-            defaultValue: defaultTab,
+            defaultValue: effectiveDefaultTab,
             className: cn("mx-auto flex w-fit flex-col items-center gap-8 md:gap-12", tabsClassName),
             children: slidesContent
           }

package/dist/feature-three-column-values.cjs

@@ -527,20 +527,20 @@ function FeatureThreeColumnValues({
   patternOpacity,
   patternClassName
 }) {
-  const renderValueIcon = (value) => {
+  const renderValueIcon = React__namespace.useCallback((value) => {
     if (value.icon) return value.icon;
     if (value.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: value.iconName, size: 24 });
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 24 });
-  };
+    return null;
+  }, []);
   const valuesContent = React.useMemo(() => {
     if (valuesSlot) return valuesSlot;
     if (!values || values.length === 0) return null;
     return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg bg-accent p-5", cardClassName, value.className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
+      (value.icon || value.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
       value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title })),
       value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }))
     ] }, index));
-  }, [valuesSlot, values, cardClassName]);
+  }, [valuesSlot, values, cardClassName, renderValueIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -554,7 +554,7 @@ function FeatureThreeColumnValues({
       children: [
         label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label })),
         title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
+        (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
       ]
     }
   );

package/dist/feature-three-column-values.js

@@ -506,20 +506,20 @@ function FeatureThreeColumnValues({
   patternOpacity,
   patternClassName
 }) {
-  const renderValueIcon = (value) => {
+  const renderValueIcon = React.useCallback((value) => {
     if (value.icon) return value.icon;
     if (value.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: value.iconName, size: 24 });
-    return /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 24 });
-  };
+    return null;
+  }, []);
   const valuesContent = useMemo(() => {
     if (valuesSlot) return valuesSlot;
     if (!values || values.length === 0) return null;
     return values.map((value, index) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg bg-accent p-5", cardClassName, value.className), children: [
-      /* @__PURE__ */ jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
+      (value.icon || value.iconName) && /* @__PURE__ */ jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
       value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title })),
       value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }))
     ] }, index));
-  }, [valuesSlot, values, cardClassName]);
+  }, [valuesSlot, values, cardClassName, renderValueIcon]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -533,7 +533,7 @@ function FeatureThreeColumnValues({
       children: [
         label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label })),
         title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
+        (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
       ]
     }
   );