@opensite/ui 0.8.9 → 0.9.1

package/dist/feature-bento-utilities.cjs

@@ -35,6 +35,58 @@ var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -642,13 +694,13 @@ function FeatureBentoUtilities({
         renderImage(),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
           renderTitle(),
-          card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: card.description })
+          card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: card.description })
         ] })
       ] }, index);
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClasses, children: [
       renderTitle(),
-      card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: card.description })
+      card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: card.description })
     ] }, index);
   }, [optixFlowConfig]);
   const renderColumn = React__namespace.useCallback((cards, slot) => {
@@ -669,10 +721,10 @@ function FeatureBentoUtilities({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-muted/60", className),
+      className: cn(getNestedCardBg(background, "muted"), className),
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [
+        (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", getTextColor(background, "muted"), labelClassName), children: [
           labelIconElement,
           label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: label }))
         ] }),

package/dist/feature-bento-utilities.js

@@ -13,6 +13,58 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -620,13 +672,13 @@ function FeatureBentoUtilities({
         renderImage(),
         /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
           renderTitle(),
-          card.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: card.description })
+          card.description && /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: card.description })
         ] })
       ] }, index);
     }
     return /* @__PURE__ */ jsxs(Card, { className: cardClasses, children: [
       renderTitle(),
-      card.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: card.description })
+      card.description && /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: card.description })
     ] }, index);
   }, [optixFlowConfig]);
   const renderColumn = React.useCallback((cards, slot) => {
@@ -647,10 +699,10 @@ function FeatureBentoUtilities({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-muted/60", className),
+      className: cn(getNestedCardBg(background, "muted"), className),
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        (labelIconElement || label) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-muted-foreground", labelClassName), children: [
+        (labelIconElement || label) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", getTextColor(background, "muted"), labelClassName), children: [
           labelIconElement,
           label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: label }))
         ] }),

package/dist/feature-capabilities-grid.cjs

@@ -31,6 +31,32 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -601,10 +627,10 @@ function FeatureCapabilitiesGrid({
               iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-border/15 bg-background/5", item.iconClassName), children: iconContent }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                 item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-medium", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-medium", item.titleClassName), children: item.title })),
-                item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none text-muted-foreground", item.badgeClassName), children: item.badge })
+                item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none", getTextColor(background, "muted"), item.badgeClassName), children: item.badge })
               ] }) })
             ] }),
-            item.description && /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-muted-foreground", item.descriptionClassName), children: item.description }),
+            item.description && /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm", getTextColor(background, "muted"), item.descriptionClassName), children: item.description }),
             /* @__PURE__ */ jsxRuntime.jsx(
               framerMotion.motion.div,
               {
@@ -631,7 +657,7 @@ function FeatureCapabilitiesGrid({
       className,
       containerClassName,
       children: [
-        eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow })),
+        eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs tracking-widest", getTextColor(background, "muted"), eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs tracking-widest", getTextColor(background, "muted"), eyebrowClassName), children: eyebrow })),
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mt-3 text-4xl font-semibold tracking-tight sm:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3 text-4xl font-semibold tracking-tight sm:text-5xl", headingClassName), children: heading })),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", gridClassName), children: itemsContent })
       ]

package/dist/feature-capabilities-grid.js

@@ -10,6 +10,32 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -580,10 +606,10 @@ function FeatureCapabilitiesGrid({
               iconContent && /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-xl border border-border/15 bg-background/5", item.iconClassName), children: iconContent }),
               /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(CardTitle, { className: cn("text-lg font-medium", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-medium", item.titleClassName), children: item.title })),
-                item.badge && /* @__PURE__ */ jsx("span", { className: cn("rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none text-muted-foreground", item.badgeClassName), children: item.badge })
+                item.badge && /* @__PURE__ */ jsx("span", { className: cn("rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none", getTextColor(background, "muted"), item.badgeClassName), children: item.badge })
               ] }) })
             ] }),
-            item.description && /* @__PURE__ */ jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm text-muted-foreground", item.descriptionClassName), children: item.description }),
+            item.description && /* @__PURE__ */ jsx(CardContent, { className: cn("relative z-10 px-6 pb-6 text-sm", getTextColor(background, "muted"), item.descriptionClassName), children: item.description }),
             /* @__PURE__ */ jsx(
               motion.div,
               {
@@ -610,7 +636,7 @@ function FeatureCapabilitiesGrid({
       className,
       containerClassName,
       children: [
-        eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx("div", { className: cn("text-xs tracking-widest text-muted-foreground", eyebrowClassName), children: eyebrow })),
+        eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs tracking-widest", getTextColor(background, "muted"), eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx("div", { className: cn("text-xs tracking-widest", getTextColor(background, "muted"), eyebrowClassName), children: eyebrow })),
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mt-3 text-4xl font-semibold tracking-tight sm:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-3 text-4xl font-semibold tracking-tight sm:text-5xl", headingClassName), children: heading })),
         /* @__PURE__ */ jsx("div", { className: cn("mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", gridClassName), children: itemsContent })
       ]

package/dist/feature-card-grid-linked.cjs

@@ -62,6 +62,32 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -946,7 +972,8 @@ function FeatureCardGridLinked({
               "p",
               {
                 className: cn(
-                  "p-4 text-muted-foreground md:p-8",
+                  "p-4 md:p-8",
+                  getTextColor(background, "muted"),
                   feature.descriptionClassName
                 ),
                 children: feature.description
@@ -957,7 +984,7 @@ function FeatureCardGridLinked({
         featureKey
       );
     });
-  }, [featuresSlot, features, cardClassName, renderImage]);
+  }, [featuresSlot, features, cardClassName, renderImage, background]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/feature-card-grid-linked.js

@@ -41,6 +41,32 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -925,7 +951,8 @@ function FeatureCardGridLinked({
               "p",
               {
                 className: cn(
-                  "p-4 text-muted-foreground md:p-8",
+                  "p-4 md:p-8",
+                  getTextColor(background, "muted"),
                   feature.descriptionClassName
                 ),
                 children: feature.description
@@ -936,7 +963,7 @@ function FeatureCardGridLinked({
         featureKey
       );
     });
-  }, [featuresSlot, features, cardClassName, renderImage]);
+  }, [featuresSlot, features, cardClassName, renderImage, background]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/feature-carousel-progress.cjs

@@ -38,6 +38,32 @@ var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimit
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1252,7 +1278,7 @@ function FeatureCarouselProgress({
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(cardClassName, slide.className), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "flex flex-col justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           (slide.icon || slide.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
           slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title })),
-          slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }))
+          slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("pt-2", getTextColor(background, "muted"), slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-2", getTextColor(background, "muted"), slide.descriptionClassName), children: slide.description }))
         ] }) }) }) })
       },
       index
@@ -1277,7 +1303,7 @@ function FeatureCarouselProgress({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-4 flex justify-between px-1 md:mb-5", controlsClassName), children: [
             carouselLabel && (typeof carouselLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: carouselLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: carouselLabel })),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-2 hidden items-center gap-3 text-xs text-muted-foreground md:flex", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mr-2 hidden items-center gap-3 text-xs md:flex", getTextColor(background, "muted")), children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "01" }),
                 /* @__PURE__ */ jsxRuntime.jsx(Progress, { value: progress, className: cn("h-0.5 w-52", progressClassName) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [

package/dist/feature-carousel-progress.js

@@ -13,6 +13,32 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1227,7 +1253,7 @@ function FeatureCarouselProgress({
         children: /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsx(Card, { className: cn(cardClassName, slide.className), children: /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col justify-center p-6", children: /* @__PURE__ */ jsxs("div", { children: [
           (slide.icon || slide.iconName) && /* @__PURE__ */ jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
           slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title })),
-          slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsx("div", { className: cn("pt-2 text-muted-foreground", slide.descriptionClassName), children: slide.description }))
+          slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("pt-2", getTextColor(background, "muted"), slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsx("div", { className: cn("pt-2", getTextColor(background, "muted"), slide.descriptionClassName), children: slide.description }))
         ] }) }) }) })
       },
       index
@@ -1252,7 +1278,7 @@ function FeatureCarouselProgress({
           /* @__PURE__ */ jsxs("div", { className: cn("mb-4 flex justify-between px-1 md:mb-5", controlsClassName), children: [
             carouselLabel && (typeof carouselLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "font-medium", children: carouselLabel }) : /* @__PURE__ */ jsx("div", { className: "font-medium", children: carouselLabel })),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "mr-2 hidden items-center gap-3 text-xs text-muted-foreground md:flex", children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("mr-2 hidden items-center gap-3 text-xs md:flex", getTextColor(background, "muted")), children: [
                 /* @__PURE__ */ jsx("span", { children: "01" }),
                 /* @__PURE__ */ jsx(Progress, { value: progress, className: cn("h-0.5 w-52", progressClassName) }),
                 /* @__PURE__ */ jsxs("span", { children: [

package/dist/feature-category-image-cards.cjs

@@ -47,6 +47,32 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -559,7 +585,7 @@ function FeatureCategoryImageCards({
     ), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "text-center", children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title })),
-        feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { className: cn("text-muted-foreground md:text-lg", feature.categoryClassName), children: feature.category }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground md:text-lg", feature.categoryClassName), children: feature.category }))
+        feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }))
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
     ] }, index));
@@ -578,7 +604,7 @@ function FeatureCategoryImageCards({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 text-center", headerClassName), children: [
           badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl text-muted-foreground md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl text-muted-foreground md:text-lg", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
       ]

package/dist/feature-category-image-cards.js

@@ -41,6 +41,32 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -553,7 +579,7 @@ function FeatureCategoryImageCards({
     ), children: [
       /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx(CardTitle, { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold md:text-2xl", feature.titleClassName), children: feature.title })),
-        feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsx(CardDescription, { className: cn("text-muted-foreground md:text-lg", feature.categoryClassName), children: feature.category }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground md:text-lg", feature.categoryClassName), children: feature.category }))
+        feature.category && (typeof feature.category === "string" ? /* @__PURE__ */ jsx(CardDescription, { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }) : /* @__PURE__ */ jsx("div", { className: cn("md:text-lg", getTextColor(background, "muted"), feature.categoryClassName), children: feature.category }))
       ] }),
       /* @__PURE__ */ jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
     ] }, index));
@@ -572,7 +598,7 @@ function FeatureCategoryImageCards({
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 text-center", headerClassName), children: [
           badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl text-muted-foreground md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl text-muted-foreground md:text-lg", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }))
         ] }),
         /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-20 grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
       ]