@opensite/ui 0.8.9 → 0.9.1

package/dist/hero-design-showcase-logos.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:")) {
@@ -894,7 +920,7 @@ function HeroDesignShowcaseLogos({
         /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           /* @__PURE__ */ jsx("div", { children: renderActions }),
           /* @__PURE__ */ jsx("div", { children: renderLogos })

package/dist/hero-design-system-3d.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:")) {
@@ -989,7 +1019,7 @@ function HeroDesignSystem3d({
                   optixFlowConfig
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-nowrap transition-all duration-300 ease-in-out group-hover:text-primary", children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-nowrap transition-all duration-300 ease-in-out", `group-hover:${getAccentColor(background)}`), children: label }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 DynamicIcon,
                 {
@@ -1064,7 +1094,7 @@ function HeroDesignSystem3d({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-100 flex-col items-center gap-6 sm:max-w-125 lg:max-w-160", contentClassName), children: [
           renderTrustBadge,
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading })) }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-base leading-snug text-balance text-muted-foreground sm:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-base leading-snug text-balance sm:text-2xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),
         renderImages

package/dist/hero-design-system-3d.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:")) {
@@ -968,7 +998,7 @@ function HeroDesignSystem3d({
                   optixFlowConfig
                 }
               ),
-              /* @__PURE__ */ jsx("p", { className: "text-nowrap transition-all duration-300 ease-in-out group-hover:text-primary", children: label }),
+              /* @__PURE__ */ jsx("p", { className: cn("text-nowrap transition-all duration-300 ease-in-out", `group-hover:${getAccentColor(background)}`), children: label }),
               /* @__PURE__ */ jsx(
                 DynamicIcon,
                 {
@@ -1043,7 +1073,7 @@ function HeroDesignSystem3d({
         /* @__PURE__ */ jsx("div", { className: "container px-4", children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-100 flex-col items-center gap-6 sm:max-w-125 lg:max-w-160", contentClassName), children: [
           renderTrustBadge,
           /* @__PURE__ */ jsx("div", { className: "mb-2", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-[2.8125rem] leading-none font-bold sm:text-[3.9375rem] lg:text-[5.3125rem]", headingClassName), children: heading })) }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-base leading-snug text-balance text-muted-foreground sm:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-base leading-snug text-balance sm:text-2xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),
         renderImages

package/dist/hero-developer-tools-code.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:")) {
@@ -1051,7 +1077,7 @@ function HeroDeveloperToolsCode({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8", 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
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: renderTerminal })

package/dist/hero-developer-tools-code.js

@@ -11,6 +11,32 @@ import { Slot } from '@radix-ui/react-slot';
 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:")) {
@@ -1030,7 +1056,7 @@ function HeroDeveloperToolsCode({
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8", 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
         ] }),
         /* @__PURE__ */ jsx("div", { className: "relative", children: renderTerminal })

package/dist/hero-digital-agency-fullscreen.cjs

@@ -31,6 +31,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:")) {
@@ -978,9 +1008,9 @@ function HeroDigitalAgencyFullscreen({
     const { className: footerActionClassName, ...footerActionProps } = footerAction;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between gap-4 rounded-lg bg-foreground/20 px-6 py-4 backdrop-blur-sm", footerClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-1 bg-primary" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-muted-foreground", children: [
-          footerLabel && (typeof footerLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-primary", children: footerLabel }) : footerLabel),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-8 w-1", getAccentColor(background)) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: [
+          footerLabel && (typeof footerLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getAccentColor(background), children: footerLabel }) : footerLabel),
           footerSublabel && (typeof footerSublabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: footerSublabel }) : footerSublabel)
         ] })
       ] }),

package/dist/hero-digital-agency-fullscreen.js

@@ -10,6 +10,36 @@ import { jsx, jsxs, Fragment } 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";
+    }
+  }
+}
+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:")) {
@@ -957,9 +987,9 @@ function HeroDigitalAgencyFullscreen({
     const { className: footerActionClassName, ...footerActionProps } = footerAction;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-4 rounded-lg bg-foreground/20 px-6 py-4 backdrop-blur-sm", footerClassName), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-8 w-1 bg-primary" }),
-        /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-muted-foreground", children: [
-          footerLabel && (typeof footerLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-primary", children: footerLabel }) : footerLabel),
+        /* @__PURE__ */ jsx("div", { className: cn("h-8 w-1", getAccentColor(background)) }),
+        /* @__PURE__ */ jsxs("div", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: [
+          footerLabel && (typeof footerLabel === "string" ? /* @__PURE__ */ jsx("p", { className: getAccentColor(background), children: footerLabel }) : footerLabel),
           footerSublabel && (typeof footerSublabel === "string" ? /* @__PURE__ */ jsx("p", { children: footerSublabel }) : footerSublabel)
         ] })
       ] }),

package/dist/hero-ecommerce-product-showcase.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:")) {
@@ -1025,7 +1051,7 @@ function HeroEcommerceProductShowcase({
       index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px bg-border" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: stat.label })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: stat.label })
       ] })
     ] }, index)) });
   }, [statsSlot, stats, statsClassName]);
@@ -1034,7 +1060,7 @@ function HeroEcommerceProductShowcase({
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-2 gap-4", imagesClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-2xl bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[0].src,
@@ -1043,7 +1069,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-2xl bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[1].src,
@@ -1054,7 +1080,7 @@ function HeroEcommerceProductShowcase({
         ) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 pt-8", children: [
-        images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-2xl bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[2].src,
@@ -1063,7 +1089,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[3] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-2xl bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[3] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[3].src,
@@ -1088,7 +1114,7 @@ function HeroEcommerceProductShowcase({
         /* @__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,
           renderStats
         ] })

package/dist/hero-ecommerce-product-showcase.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:")) {
@@ -1004,7 +1030,7 @@ function HeroEcommerceProductShowcase({
       index > 0 && /* @__PURE__ */ jsx("div", { className: "h-12 w-px bg-border" }),
       /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
-        /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: stat.label })
+        /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: stat.label })
       ] })
     ] }, index)) });
   }, [statsSlot, stats, statsClassName]);
@@ -1013,7 +1039,7 @@ function HeroEcommerceProductShowcase({
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-4", imagesClassName), children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        images[0] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl bg-muted", children: /* @__PURE__ */ jsx(
+        images[0] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[0].src,
@@ -1022,7 +1048,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[1] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl bg-muted", children: /* @__PURE__ */ jsx(
+        images[1] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[1].src,
@@ -1033,7 +1059,7 @@ function HeroEcommerceProductShowcase({
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-4 pt-8", children: [
-        images[2] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl bg-muted", children: /* @__PURE__ */ jsx(
+        images[2] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[2].src,
@@ -1042,7 +1068,7 @@ function HeroEcommerceProductShowcase({
             optixFlowConfig
           }
         ) }),
-        images[3] && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl bg-muted", children: /* @__PURE__ */ jsx(
+        images[3] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[3].src,
@@ -1067,7 +1093,7 @@ function HeroEcommerceProductShowcase({
         /* @__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,
           renderStats
         ] })

package/dist/hero-enterprise-security.cjs

@@ -62,6 +62,36 @@ 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 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:")) {
@@ -1022,10 +1052,10 @@ function HeroEnterpriseSecurity({
   const renderFeatures = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-3", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card p-6 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full", feature.iconBgClass || "bg-primary/10"), children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24, className: feature.iconColorClass || "text-primary" }) }),
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-3", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-2xl border border-border p-6 text-center", getNestedCardBg(background, "card")), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full", feature.iconBgClass || `${getAccentColor(background)}/10`), children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24, className: feature.iconColorClass || getAccentColor(background) }) }),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
-      feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+      feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description })
     ] }, index)) });
   }, [featuresSlot, features, featuresClassName]);
   const renderLogos = React.useMemo(() => {
@@ -1057,7 +1087,7 @@ function HeroEnterpriseSecurity({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 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 })),
           renderActions
         ] }),
         renderFeatures,

package/dist/hero-enterprise-security.js

@@ -41,6 +41,36 @@ 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 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:")) {
@@ -1001,10 +1031,10 @@ function HeroEnterpriseSecurity({
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-3", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card p-6 text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full", feature.iconBgClass || "bg-primary/10"), children: feature.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24, className: feature.iconColorClass || "text-primary" }) }),
+    return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-3", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-2xl border border-border p-6 text-center", getNestedCardBg(background, "card")), children: [
+      /* @__PURE__ */ jsx("div", { className: cn("mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full", feature.iconBgClass || `${getAccentColor(background)}/10`), children: feature.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24, className: feature.iconColorClass || getAccentColor(background) }) }),
       /* @__PURE__ */ jsx("h3", { className: "mb-2 text-lg font-semibold ", children: feature.title }),
-      feature.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+      feature.description && /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description })
     ] }, index)) });
   }, [featuresSlot, features, featuresClassName]);
   const renderLogos = useMemo(() => {
@@ -1036,7 +1066,7 @@ function HeroEnterpriseSecurity({
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", contentClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-8 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 })),
           renderActions
         ] }),
         renderFeatures,