@opensite/ui 0.8.5 → 0.8.7

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

@@ -1134,7 +1134,7 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex shrink-0 items-center gap-2 rounded-lg border border-border bg-background px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
                 tabTriggerClassName,
                 tab.className
               ),
@@ -1151,7 +1151,7 @@ function FeatureIconTabsContent({
         "div",
         {
           className: cn(
-            "mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16",
+            "mx-auto mt-8 max-w-7xl rounded-2xl p-6 lg:p-16",
             contentWrapperClassName
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: tabs.map((tab) => {
@@ -1184,7 +1184,7 @@ function FeatureIconTabsContent({
                       {
                         variant: "outline",
                         className: cn(
-                          "w-fit bg-background",
+                          "w-fit",
                           content.badgeClassName
                         ),
                         children: content.badge

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

@@ -1112,7 +1112,7 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex shrink-0 items-center gap-2 rounded-lg border border-border bg-background px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
                 tabTriggerClassName,
                 tab.className
               ),
@@ -1129,7 +1129,7 @@ function FeatureIconTabsContent({
         "div",
         {
           className: cn(
-            "mx-auto mt-8 max-w-7xl rounded-2xl bg-muted/70 p-6 lg:p-16",
+            "mx-auto mt-8 max-w-7xl rounded-2xl p-6 lg:p-16",
             contentWrapperClassName
           ),
           children: /* @__PURE__ */ jsx("div", { className: "relative", children: tabs.map((tab) => {
@@ -1162,7 +1162,7 @@ function FeatureIconTabsContent({
                       {
                         variant: "outline",
                         className: cn(
-                          "w-fit bg-background",
+                          "w-fit",
                           content.badgeClassName
                         ),
                         children: content.badge

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

@@ -1021,7 +1021,7 @@ function FeatureImageCardsThreeColumn({
                 {
                   className: cn(
                     "ml-auto flex w-fit items-center gap-2 text-sm font-semibold",
-                    card.avatarSrc ? "rounded-full bg-background/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-background",
+                    card.avatarSrc ? "rounded-full bg-foreground/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-primary-foreground",
                     card.badgeClassName
                   ),
                   children: [
@@ -1030,7 +1030,7 @@ function FeatureImageCardsThreeColumn({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
                 card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title })),
                 card.linkText && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("flex items-center gap-1 font-medium", card.linkClassName), children: [
                   card.linkText,

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

@@ -999,7 +999,7 @@ function FeatureImageCardsThreeColumn({
                 {
                   className: cn(
                     "ml-auto flex w-fit items-center gap-2 text-sm font-semibold",
-                    card.avatarSrc ? "rounded-full bg-background/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-background",
+                    card.avatarSrc ? "rounded-full bg-foreground/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-primary-foreground",
                     card.badgeClassName
                   ),
                   children: [
@@ -1008,7 +1008,7 @@ function FeatureImageCardsThreeColumn({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
                 card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title })),
                 card.linkText && /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-1 font-medium", card.linkClassName), children: [
                   card.linkText,

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

@@ -1146,7 +1146,7 @@ function FeatureImageOverlayBadge({
                   "div",
                   {
                     className: cn(
-                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-black via-black/20 to-transparent",
+                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-foreground via-foreground/20 to-transparent",
                       overlayClassName
                     )
                   }
@@ -1156,7 +1156,7 @@ function FeatureImageOverlayBadge({
                     "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 shadow-xl",
+                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-foreground/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
                         avatarBadgeClassName
                       ),
                       children: [

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

@@ -1124,7 +1124,7 @@ function FeatureImageOverlayBadge({
                   "div",
                   {
                     className: cn(
-                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-black via-black/20 to-transparent",
+                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-foreground via-foreground/20 to-transparent",
                       overlayClassName
                     )
                   }
@@ -1134,7 +1134,7 @@ function FeatureImageOverlayBadge({
                     "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 shadow-xl",
+                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-foreground/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
                         avatarBadgeClassName
                       ),
                       children: [

package/dist/feature-integration-cards.cjs

@@ -992,7 +992,7 @@ function FeatureIntegrationCards({
           Pressable,
           {
             href: integration.link,
-            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60", cardClassName, integration.className),
+            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
             children: cardContent
           },
           index
@@ -1001,7 +1001,7 @@ function FeatureIntegrationCards({
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60", cardClassName, integration.className),
+          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
           children: cardContent
         },
         index

package/dist/feature-integration-cards.js

@@ -971,7 +971,7 @@ function FeatureIntegrationCards({
           Pressable,
           {
             href: integration.link,
-            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60", cardClassName, integration.className),
+            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
             children: cardContent
           },
           index
@@ -980,7 +980,7 @@ function FeatureIntegrationCards({
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60", cardClassName, integration.className),
+          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
           children: cardContent
         },
         index

package/dist/feature-numbered-cards.cjs

@@ -708,7 +708,7 @@ function FeatureNumberedCards({
         "div",
         {
           className: cn(
-            "space-y-4 md:space-y-10 rounded-lg border-none md:border md:bg-background p-0 md:p-10",
+            "space-y-4 md:space-y-10 rounded-lg border-none md:border p-0 md:p-10",
             cardsWrapperClassName
           ),
           children: featuresContent

package/dist/feature-numbered-cards.js

@@ -687,7 +687,7 @@ function FeatureNumberedCards({
         "div",
         {
           className: cn(
-            "space-y-4 md:space-y-10 rounded-lg border-none md:border md:bg-background p-0 md:p-10",
+            "space-y-4 md:space-y-10 rounded-lg border-none md:border p-0 md:p-10",
             cardsWrapperClassName
           ),
           children: featuresContent

package/dist/feature-pattern-grid-links.cjs

@@ -970,7 +970,7 @@ function FeaturePatternGridLinks({
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-10 rounded-lg border bg-background p-8", cardClassName, feature.className),
+        className: cn("flex flex-col gap-10 rounded-lg border p-8", cardClassName, feature.className),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             renderFeatureIcon(feature),

package/dist/feature-pattern-grid-links.js

@@ -949,7 +949,7 @@ function FeaturePatternGridLinks({
     return features.map((feature, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-10 rounded-lg border bg-background p-8", cardClassName, feature.className),
+        className: cn("flex flex-col gap-10 rounded-lg border p-8", cardClassName, feature.className),
         children: [
           /* @__PURE__ */ jsxs("div", { children: [
             renderFeatureIcon(feature),

package/dist/feature-showcase.cjs

@@ -1214,8 +1214,7 @@ function FeatureShowcase({
           onNext: () => api?.scrollNext(),
           canScrollPrevious,
           canScrollNext,
-          className: "absolute bottom-4 right-0 md:bottom-6",
-          buttonClassName: "size-12 rounded-full border border-current bg-transparent text-current shadow-sm hover:bg-current/10"
+          className: "absolute bottom-4 right-0 md:bottom-6"
         }
       )
     ] });

package/dist/feature-showcase.js

@@ -1190,8 +1190,7 @@ function FeatureShowcase({
           onNext: () => api?.scrollNext(),
           canScrollPrevious,
           canScrollNext,
-          className: "absolute bottom-4 right-0 md:bottom-6",
-          buttonClassName: "size-12 rounded-full border border-current bg-transparent text-current shadow-sm hover:bg-current/10"
+          className: "absolute bottom-4 right-0 md:bottom-6"
         }
       )
     ] });

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

@@ -942,19 +942,13 @@ function FeatureSplitImageReverse({
                   description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
-                      className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
-                        descriptionClassName
-                      ),
+                      className: cn("mb-8 max-w-xl lg:text-lg", descriptionClassName),
                       children: description
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
-                        descriptionClassName
-                      ),
+                      className: cn("mb-8 max-w-xl lg:text-lg", descriptionClassName),
                       children: description
                     }
                   )),

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

@@ -921,19 +921,13 @@ function FeatureSplitImageReverse({
                   description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                     "p",
                     {
-                      className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
-                        descriptionClassName
-                      ),
+                      className: cn("mb-8 max-w-xl lg:text-lg", descriptionClassName),
                       children: description
                     }
                   ) : /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
-                        descriptionClassName
-                      ),
+                      className: cn("mb-8 max-w-xl lg:text-lg", descriptionClassName),
                       children: description
                     }
                   )),

package/dist/feature-split-image.cjs

@@ -939,7 +939,7 @@ function FeatureSplitImage({
                     "p",
                     {
                       className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        "mb-8 max-w-xl  lg:text-lg",
                         descriptionClassName
                       ),
                       children: description
@@ -948,7 +948,7 @@ function FeatureSplitImage({
                     "div",
                     {
                       className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        "mb-8 max-w-xl  lg:text-lg",
                         descriptionClassName
                       ),
                       children: description

package/dist/feature-split-image.js

@@ -918,7 +918,7 @@ function FeatureSplitImage({
                     "p",
                     {
                       className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        "mb-8 max-w-xl  lg:text-lg",
                         descriptionClassName
                       ),
                       children: description
@@ -927,7 +927,7 @@ function FeatureSplitImage({
                     "div",
                     {
                       className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-lg",
+                        "mb-8 max-w-xl  lg:text-lg",
                         descriptionClassName
                       ),
                       children: description

package/dist/feature-stats-highlight.cjs

@@ -876,7 +876,7 @@ function FeatureStatsHighlight({
   statsGridClassName,
   statCardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -915,10 +915,23 @@ function FeatureStatsHighlight({
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-2 rounded-xl border bg-card p-6", statCardClassName, stat.className),
+        className: cn(
+          "flex flex-col gap-2 rounded-xl border bg-card p-6",
+          statCardClassName,
+          stat.className
+        ),
         children: [
-          stat.value && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-4xl font-bold lg:text-5xl", stat.valueClassName), children: stat.value }),
-          stat.label && /* @__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 lg:text-5xl",
+                stat.valueClassName
+              ),
+              children: stat.value
+            }
+          ),
+          stat.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("", stat.labelClassName), children: stat.label })
         ]
       },
       index
@@ -934,15 +947,39 @@ function FeatureStatsHighlight({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-20", gridClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
-          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 })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
-        ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn("grid gap-10 lg:grid-cols-2 lg:gap-20", gridClassName),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
+              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(" lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(" lg:text-lg", descriptionClassName), children: description })),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+            ] }),
+            (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

@@ -855,7 +855,7 @@ function FeatureStatsHighlight({
   statsGridClassName,
   statCardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -894,10 +894,23 @@ function FeatureStatsHighlight({
     return stats.map((stat, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-2 rounded-xl border bg-card p-6", statCardClassName, stat.className),
+        className: cn(
+          "flex flex-col gap-2 rounded-xl border bg-card p-6",
+          statCardClassName,
+          stat.className
+        ),
         children: [
-          stat.value && /* @__PURE__ */ jsx("span", { className: cn("text-4xl font-bold lg:text-5xl", stat.valueClassName), children: stat.value }),
-          stat.label && /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
+          stat.value && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-4xl font-bold lg:text-5xl",
+                stat.valueClassName
+              ),
+              children: stat.value
+            }
+          ),
+          stat.label && /* @__PURE__ */ jsx("span", { className: cn("", stat.labelClassName), children: stat.label })
         ]
       },
       index
@@ -913,15 +926,39 @@ function FeatureStatsHighlight({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-20", gridClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
-          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 })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
-        ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("grid gap-10 lg:grid-cols-2 lg:gap-20", gridClassName),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
+              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(" lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn(" lg:text-lg", descriptionClassName), children: description })),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
+            ] }),
+            (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

@@ -1110,10 +1110,7 @@ function FeatureTabbedContentImage({
         TabsTrigger,
         {
           value: slide.id.toString(),
-          className: cn(
-            "text-sm hover:bg-background md:text-base",
-            tabTriggerClassName
-          ),
+          className: cn("text-sm  md:text-base", tabTriggerClassName),
           children: slide.tabName
         },
         slide.id
@@ -1155,19 +1152,13 @@ function FeatureTabbedContentImage({
                   slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn(" lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn("lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   )),
@@ -1249,7 +1240,7 @@ function FeatureTabbedContentImage({
                 "p",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description
@@ -1258,7 +1249,7 @@ function FeatureTabbedContentImage({
                 "div",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description

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

@@ -1088,10 +1088,7 @@ function FeatureTabbedContentImage({
         TabsTrigger,
         {
           value: slide.id.toString(),
-          className: cn(
-            "text-sm hover:bg-background md:text-base",
-            tabTriggerClassName
-          ),
+          className: cn("text-sm  md:text-base", tabTriggerClassName),
           children: slide.tabName
         },
         slide.id
@@ -1133,19 +1130,13 @@ function FeatureTabbedContentImage({
                   slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx(
                     "p",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn(" lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   ) : /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn("lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   )),
@@ -1227,7 +1218,7 @@ function FeatureTabbedContentImage({
                 "p",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description
@@ -1236,7 +1227,7 @@ function FeatureTabbedContentImage({
                 "div",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description