@opensite/ui 0.8.9 → 0.9.1

package/dist/hero-pattern-logo-tech-stack.js

@@ -11,6 +11,36 @@ import { Img } from '@page-speed/img';
 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";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -868,7 +898,7 @@ function HeroPatternLogoTechStack({
     if (techLogosSlot) return techLogosSlot;
     if (!techLogos || techLogos.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-20 flex flex-col items-center gap-5", techLogosClassName), children: [
-      techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground lg:text-left", children: techStackLabel }) : techStackLabel),
+      techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-medium lg:text-left", getTextColor(background, "muted")), children: techStackLabel }) : techStackLabel),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: techLogos.map((techLogo, index) => {
         const techLogoSrc = typeof techLogo.src === "string" ? techLogo.src : techLogo.src.light;
         return /* @__PURE__ */ jsx(
@@ -919,9 +949,9 @@ function HeroPatternLogoTechStack({
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxs("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: [
               heading,
               " ",
-              highlightedWord && /* @__PURE__ */ jsx("span", { className: "text-primary", children: highlightedWord })
+              highlightedWord && /* @__PURE__ */ jsx("span", { className: getAccentColor(background), children: highlightedWord })
             ] }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           renderActions,
           renderTechLogos

package/dist/hero-platform-features-grid.cjs

@@ -32,6 +32,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";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -981,7 +1007,7 @@ function HeroPlatformFeaturesGrid({
       feature.icon ?? (feature.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         feature.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
-        feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground md:text-base", children: feature.description })
+        feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted")), children: feature.description })
       ] })
     ] }, index)) });
   }, [featuresSlot, features, featuresClassName]);
@@ -996,7 +1022,7 @@ function HeroPlatformFeaturesGrid({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
           renderLogo,
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 text-sm tracking-widest text-muted-foreground md:text-base", children: subtitle }) : subtitle),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base", getTextColor(background, "muted")), children: subtitle }) : subtitle),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading })),
           renderAction
         ] }),

package/dist/hero-platform-features-grid.js

@@ -11,6 +11,32 @@ import { Img } from '@page-speed/img';
 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";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -960,7 +986,7 @@ function HeroPlatformFeaturesGrid({
       feature.icon ?? (feature.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
       /* @__PURE__ */ jsxs("div", { children: [
         feature.title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
-        feature.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground md:text-base", children: feature.description })
+        feature.description && /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted")), children: feature.description })
       ] })
     ] }, index)) });
   }, [featuresSlot, features, featuresClassName]);
@@ -975,7 +1001,7 @@ function HeroPlatformFeaturesGrid({
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("text-center", headerClassName), children: [
           renderLogo,
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("span", { className: "mb-3 text-sm tracking-widest text-muted-foreground md:text-base", children: subtitle }) : subtitle),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base", getTextColor(background, "muted")), children: subtitle }) : subtitle),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading })),
           renderAction
         ] }),

package/dist/hero-portfolio-creative.cjs

@@ -32,6 +32,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";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -968,7 +994,7 @@ function HeroPortfolioCreative({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         profile.name && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold ", children: profile.name }),
-        profile.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: profile.title })
+        profile.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: profile.title })
       ] })
     ] });
   }, [profileSlot, profile, optixFlowConfig]);
@@ -1000,7 +1026,7 @@ function HeroPortfolioCreative({
       Pressable,
       {
         href: link.href,
-        className: cn("text-muted-foreground hover:", link.className),
+        className: cn("hover:", getTextColor(background, "muted"), link.className),
         children: link.icon ?? (link.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.iconName, size: 20 }))
       },
       index
@@ -1064,7 +1090,7 @@ function HeroPortfolioCreative({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           renderProfile,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions,
           renderSocialLinks
         ] }),

package/dist/hero-portfolio-creative.js

@@ -11,6 +11,32 @@ import { Img } from '@page-speed/img';
 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";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -947,7 +973,7 @@ function HeroPortfolioCreative({
       ) }),
       /* @__PURE__ */ jsxs("div", { children: [
         profile.name && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold ", children: profile.name }),
-        profile.title && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: profile.title })
+        profile.title && /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: profile.title })
       ] })
     ] });
   }, [profileSlot, profile, optixFlowConfig]);
@@ -979,7 +1005,7 @@ function HeroPortfolioCreative({
       Pressable,
       {
         href: link.href,
-        className: cn("text-muted-foreground hover:", link.className),
+        className: cn("hover:", getTextColor(background, "muted"), link.className),
         children: link.icon ?? (link.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: link.iconName, size: 20 }))
       },
       index
@@ -1043,7 +1069,7 @@ function HeroPortfolioCreative({
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", contentClassName), children: [
           renderProfile,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions,
           renderSocialLinks
         ] }),

package/dist/hero-pricing-comparison.cjs

@@ -62,6 +62,54 @@ 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 getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1025,15 +1073,15 @@ function HeroPricingComparison({
           "rounded-2xl p-8",
           getNestedCardBg(background, "card"),
           getNestedCardTextColor(background),
-          plan.isPopular ? "relative border-2 border-primary" : "border border-border"
+          plan.isPopular ? `relative border-2 ${getBorderColor(background, "accent")}` : "border border-border"
         ),
         children: [
           plan.isPopular && plan.popularBadge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: plan.popularBadge }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold ", children: plan.name }),
-          plan.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: plan.description }),
+          plan.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: plan.description }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl font-bold ", children: plan.price }),
-            plan.pricePeriod && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: plan.pricePeriod })
+            plan.pricePeriod && /* @__PURE__ */ jsxRuntime.jsx("span", { className: getTextColor(background, "muted"), children: plan.pricePeriod })
           ] }),
           plan.action && /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
@@ -1066,7 +1114,7 @@ function HeroPricingComparison({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         renderPlans
       ] })

package/dist/hero-pricing-comparison.js

@@ -41,6 +41,54 @@ 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 getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1004,15 +1052,15 @@ function HeroPricingComparison({
           "rounded-2xl p-8",
           getNestedCardBg(background, "card"),
           getNestedCardTextColor(background),
-          plan.isPopular ? "relative border-2 border-primary" : "border border-border"
+          plan.isPopular ? `relative border-2 ${getBorderColor(background, "accent")}` : "border border-border"
         ),
         children: [
           plan.isPopular && plan.popularBadge && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(Badge, { children: plan.popularBadge }) }),
           /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold ", children: plan.name }),
-          plan.description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: plan.description }),
+          plan.description && /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: plan.description }),
           /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
             /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold ", children: plan.price }),
-            plan.pricePeriod && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: plan.pricePeriod })
+            plan.pricePeriod && /* @__PURE__ */ jsx("span", { className: getTextColor(background, "muted"), children: plan.pricePeriod })
           ] }),
           plan.action && /* @__PURE__ */ jsx(
             Pressable,
@@ -1045,7 +1093,7 @@ function HeroPricingComparison({
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         renderPlans
       ] })

package/dist/hero-product-showcase-floating.cjs

@@ -32,6 +32,36 @@ 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";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -958,7 +988,7 @@ function HeroProductShowcaseFloating({
 }) {
   const renderBadge = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex w-fit items-center gap-2 rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm font-medium", `${getAccentColor(background)}/10`, getAccentColor(background)), children: [
       badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
       badgeText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
     ] });
@@ -998,7 +1028,7 @@ function HeroProductShowcaseFloating({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold ", children: floatingStat.value }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: floatingStat.label })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs", getTextColor(background, "muted")), children: floatingStat.label })
       ] })
     ] }) });
   }, [floatingStatSlot, floatingStat]);
@@ -1018,7 +1048,7 @@ function HeroProductShowcaseFloating({
       )) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: userCount.count }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: userCount.label })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: getTextColor(background, "muted"), children: userCount.label })
       ] })
     ] }) });
   }, [userCountSlot, userCount, optixFlowConfig]);
@@ -1052,7 +1082,7 @@ function HeroProductShowcaseFloating({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] })
       ] }) })

package/dist/hero-product-showcase-floating.js

@@ -11,6 +11,36 @@ import { Img } from '@page-speed/img';
 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";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -937,7 +967,7 @@ function HeroProductShowcaseFloating({
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs("div", { className: "inline-flex w-fit items-center gap-2 rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary", children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm font-medium", `${getAccentColor(background)}/10`, getAccentColor(background)), children: [
       badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
       badgeText && /* @__PURE__ */ jsx("span", { children: badgeText })
     ] });
@@ -977,7 +1007,7 @@ function HeroProductShowcaseFloating({
       ) }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: floatingStat.value }),
-        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: floatingStat.label })
+        /* @__PURE__ */ jsx("div", { className: cn("text-xs", getTextColor(background, "muted")), children: floatingStat.label })
       ] })
     ] }) });
   }, [floatingStatSlot, floatingStat]);
@@ -997,7 +1027,7 @@ function HeroProductShowcaseFloating({
       )) }),
       /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
         /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: userCount.count }),
-        /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: userCount.label })
+        /* @__PURE__ */ jsx("div", { className: getTextColor(background, "muted"), children: userCount.label })
       ] })
     ] }) });
   }, [userCountSlot, userCount, optixFlowConfig]);
@@ -1031,7 +1061,7 @@ function HeroProductShowcaseFloating({
         /* @__PURE__ */ jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] })
       ] }) })