@opensite/ui 0.8.9 → 0.9.1

package/dist/hero-minimal-centered-dark.js

@@ -10,6 +10,58 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -862,7 +914,7 @@ function HeroMinimalCenteredDark({
         className
       ),
       children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
-        badge && /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-2 rounded-full border border-border/50 bg-muted/30 px-4 py-2 text-sm text-muted-foreground", badgeClassName), children: [
+        badge && /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-2 rounded-full border border-border/50 px-4 py-2 text-sm", `${getNestedCardBg(background, "muted")}/30`, getTextColor(background, "muted"), badgeClassName), children: [
           showStatusDot && /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
             /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75" }),
             /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-success" })
@@ -876,9 +928,9 @@ function HeroMinimalCenteredDark({
           " ",
           "is here"
         ] }) : null),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-2xl 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 max-w-2xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
         (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm text-muted-foreground", statsClassName), children: renderStats })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm", getTextColor(background, "muted"), statsClassName), children: renderStats })
       ] })
     }
   );

package/dist/hero-mobile-app-download.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:")) {
@@ -1025,8 +1055,8 @@ function HeroMobileAppDownload({
   const renderRating = React.useMemo(() => {
     if (ratingSlot) return ratingSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 pt-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 16, className: "fill-primary text-primary" }, i)) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/star", size: 16, className: cn("fill-current", getAccentColor(background)) }, i)) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-sm", getTextColor(background, "muted")), children: [
         ratingValue,
         " ",
         ratingLabel
@@ -1044,7 +1074,7 @@ function HeroMobileAppDownload({
       notification.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-full", notification.iconBgClass), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: notification.icon, size: 20, className: notification.iconColorClass }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         notification.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: notification.title }),
-        notification.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: notification.subtitle })
+        notification.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs", getTextColor(background, "muted")), children: notification.subtitle })
       ] })
     ] }) });
   }, [notificationSlot, notification]);
@@ -1076,7 +1106,7 @@ function HeroMobileAppDownload({
         /* @__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 })),
           renderStoreActions,
           renderRating
         ] }),

package/dist/hero-mobile-app-download.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:")) {
@@ -1004,8 +1034,8 @@ function HeroMobileAppDownload({
   const renderRating = useMemo(() => {
     if (ratingSlot) return ratingSlot;
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 16, className: "fill-primary text-primary" }, i)) }),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/star", size: 16, className: cn("fill-current", getAccentColor(background)) }, i)) }),
+      /* @__PURE__ */ jsxs("span", { className: cn("text-sm", getTextColor(background, "muted")), children: [
         ratingValue,
         " ",
         ratingLabel
@@ -1023,7 +1053,7 @@ function HeroMobileAppDownload({
       notification.icon && /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 items-center justify-center rounded-full", notification.iconBgClass), children: /* @__PURE__ */ jsx(DynamicIcon, { name: notification.icon, size: 20, className: notification.iconColorClass }) }),
       /* @__PURE__ */ jsxs("div", { children: [
         notification.title && /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: notification.title }),
-        notification.subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: notification.subtitle })
+        notification.subtitle && /* @__PURE__ */ jsx("div", { className: cn("text-xs", getTextColor(background, "muted")), children: notification.subtitle })
       ] })
     ] }) });
   }, [notificationSlot, notification]);
@@ -1055,7 +1085,7 @@ function HeroMobileAppDownload({
         /* @__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 })),
           renderStoreActions,
           renderRating
         ] }),

package/dist/hero-newsletter-minimal.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";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -865,7 +891,7 @@ function HeroNewsletterMinimal({
   const renderStats = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-sm text-muted-foreground", stat.className), children: [
+    return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 text-sm", getTextColor(background, "muted"), stat.className), children: [
       stat.icon,
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: stat.value })
     ] }, index));
@@ -907,9 +933,9 @@ function HeroNewsletterMinimal({
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-xl 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 max-w-xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex w-full max-w-md flex-col gap-4 sm:flex-row", formClassName), children: renderForm }),
-        disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-sm text-muted-foreground", disclaimerClassName), children: disclaimer }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: disclaimerClassName, children: disclaimer })),
+        disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-sm", getTextColor(background, "muted"), disclaimerClassName), children: disclaimer }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: disclaimerClassName, children: disclaimer })),
         (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex flex-wrap items-center justify-center gap-8", statsClassName), children: renderStats })
       ] })
     }

package/dist/hero-newsletter-minimal.js

@@ -10,6 +10,32 @@ 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -844,7 +870,7 @@ function HeroNewsletterMinimal({
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-sm text-muted-foreground", stat.className), children: [
+    return stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-sm", getTextColor(background, "muted"), stat.className), children: [
       stat.icon,
       /* @__PURE__ */ jsx("span", { children: stat.value })
     ] }, index));
@@ -886,9 +912,9 @@ function HeroNewsletterMinimal({
       ),
       children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-xl 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 max-w-xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
         /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex w-full max-w-md flex-col gap-4 sm:flex-row", formClassName), children: renderForm }),
-        disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm text-muted-foreground", disclaimerClassName), children: disclaimer }) : /* @__PURE__ */ jsx("div", { className: disclaimerClassName, children: disclaimer })),
+        disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", getTextColor(background, "muted"), disclaimerClassName), children: disclaimer }) : /* @__PURE__ */ jsx("div", { className: disclaimerClassName, children: disclaimer })),
         (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex flex-wrap items-center justify-center gap-8", statsClassName), children: renderStats })
       ] })
     }

package/dist/hero-overlay-cta-grid.cjs

@@ -33,6 +33,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";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -980,17 +1010,17 @@ function HeroOverlayCtaGrid({
         href: card.href,
         className: "group flex items-center gap-4 px-6 py-6 transition-colors hover:bg-primary/5",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex h-12 w-12 flex-none items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.icon, size: 22 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative flex h-12 w-12 flex-none items-center justify-center rounded-full transition-colors group-hover:text-primary-foreground", `${getAccentColor(background)}/10`, getAccentColor(background), `group-hover:${getAccentColor(background)}`), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.icon, size: 22 }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-semibold ", children: card.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: card.subtitle })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: card.subtitle })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
               name: "lucide/arrow-right",
               size: 18,
-              className: "ml-auto flex-none text-primary"
+              className: cn("ml-auto flex-none", getAccentColor(background))
             }
           )
         ]

package/dist/hero-overlay-cta-grid.js

@@ -12,6 +12,36 @@ import { cva } from 'class-variance-authority';
 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";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -959,17 +989,17 @@ function HeroOverlayCtaGrid({
         href: card.href,
         className: "group flex items-center gap-4 px-6 py-6 transition-colors hover:bg-primary/5",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "relative flex h-12 w-12 flex-none items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: card.icon, size: 22 }) }),
+          /* @__PURE__ */ jsx("div", { className: cn("relative flex h-12 w-12 flex-none items-center justify-center rounded-full transition-colors group-hover:text-primary-foreground", `${getAccentColor(background)}/10`, getAccentColor(background), `group-hover:${getAccentColor(background)}`), children: /* @__PURE__ */ jsx(DynamicIcon, { name: card.icon, size: 22 }) }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx("p", { className: "text-base font-semibold ", children: card.label }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: card.subtitle })
+            /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: card.subtitle })
           ] }),
           /* @__PURE__ */ jsx(
             DynamicIcon,
             {
               name: "lucide/arrow-right",
               size: 18,
-              className: "ml-auto flex-none text-primary"
+              className: cn("ml-auto flex-none", getAccentColor(background))
             }
           )
         ]

package/dist/hero-pattern-badge-logos.cjs

@@ -33,6 +33,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 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",
   {
@@ -968,11 +994,11 @@ function HeroPatternBadgeLogos({
           badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: badge }) : badge }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground md:text-lg lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl md:text-lg lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions }),
           (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-muted-foreground", children: logosTagline }) : logosTagline),
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm", getTextColor(background, "muted")), children: logosTagline }) : logosTagline),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
           ] })
         ] }) }) })

package/dist/hero-pattern-badge-logos.js

@@ -12,6 +12,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";
+    }
+  }
+}
 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",
   {
@@ -947,11 +973,11 @@ function HeroPatternBadgeLogos({
           badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: badge }) : badge }),
           /* @__PURE__ */ jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground md:text-lg 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-2xl md:text-lg lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-6 flex items-center gap-4", actionsClassName), children: renderActions }),
           (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground", children: logosTagline }) : logosTagline),
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm", getTextColor(background, "muted")), children: logosTagline }) : logosTagline),
             /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
           ] })
         ] }) }) })

package/dist/hero-pattern-logo-tech-stack.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:")) {
@@ -889,7 +919,7 @@ function HeroPatternLogoTechStack({
     if (techLogosSlot) return techLogosSlot;
     if (!techLogos || techLogos.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 flex flex-col items-center gap-5", techLogosClassName), children: [
-      techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground lg:text-left", children: techStackLabel }) : techStackLabel),
+      techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium lg:text-left", getTextColor(background, "muted")), children: techStackLabel }) : techStackLabel),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -940,9 +970,9 @@ function HeroPatternLogoTechStack({
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("mb-6 text-2xl font-bold tracking-tight text-pretty lg:text-5xl", headingClassName), children: [
               heading,
               " ",
-              highlightedWord && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: highlightedWord })
+              highlightedWord && /* @__PURE__ */ jsxRuntime.jsx("span", { className: getAccentColor(background), children: highlightedWord })
             ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           renderActions,
           renderTechLogos