@opensite/ui 0.8.9 → 0.9.1

package/dist/hero-event-registration.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";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1025,24 +1055,24 @@ function HeroEventRegistration({
     if (!stats || stats.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__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]);
   const renderLocation = React.useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-background p-4 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full", `${getAccentColor(background)}/10`), children: /* @__PURE__ */ jsxRuntime.jsx(
         DynamicIcon,
         {
           name: "lucide/map-pin",
           size: 24,
-          className: "text-primary"
+          className: getAccentColor(background)
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: locationSublabel }) : locationSublabel)
+        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: locationSublabel }) : locationSublabel)
       ] })
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
@@ -1074,7 +1104,7 @@ function HeroEventRegistration({
         /* @__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,
           renderStats
         ] }),

package/dist/hero-event-registration.js

@@ -12,6 +12,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:")) {
@@ -1004,24 +1034,24 @@ function HeroEventRegistration({
     if (!stats || stats.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__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]);
   const renderLocation = useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-background p-4 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full", `${getAccentColor(background)}/10`), children: /* @__PURE__ */ jsx(
         DynamicIcon,
         {
           name: "lucide/map-pin",
           size: 24,
-          className: "text-primary"
+          className: getAccentColor(background)
         }
       ) }),
       /* @__PURE__ */ jsxs("div", { children: [
         locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: locationSublabel }) : locationSublabel)
+        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: locationSublabel }) : locationSublabel)
       ] })
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
@@ -1053,7 +1083,7 @@ function HeroEventRegistration({
         /* @__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,
           renderStats
         ] }),

package/dist/hero-feature-cards-grid.cjs

@@ -31,6 +31,84 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "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:")) {
@@ -975,11 +1053,11 @@ function HeroFeatureCardsGrid({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-2 lg:grid-cols-4", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "group rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/50 hover:shadow-lg",
+        className: cn("group rounded-2xl border border-border p-6 transition-all hover:shadow-lg", getNestedCardBg(background, "card"), `hover:${getBorderColor(background, "accent")}/50`),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex h-12 w-12 items-center justify-center rounded-lg transition-colors", `${getAccentColor(background)}/10 ${getAccentColor(background)}`, `group-hover:${getAccentColor(background)} group-hover:text-primary-foreground`), children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24 }) }),
           /* @__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
@@ -996,7 +1074,7 @@ function HeroFeatureCardsGrid({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", contentClassName), children: [
           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", 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", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderFeatures

package/dist/hero-feature-cards-grid.js

@@ -10,6 +10,84 @@ 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 getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "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:")) {
@@ -954,11 +1032,11 @@ function HeroFeatureCardsGrid({
     return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid gap-8 md:grid-cols-2 lg:grid-cols-4", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "group rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/50 hover:shadow-lg",
+        className: cn("group rounded-2xl border border-border p-6 transition-all hover:shadow-lg", getNestedCardBg(background, "card"), `hover:${getBorderColor(background, "accent")}/50`),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: feature.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24 }) }),
+          /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex h-12 w-12 items-center justify-center rounded-lg transition-colors", `${getAccentColor(background)}/10 ${getAccentColor(background)}`, `group-hover:${getAccentColor(background)} group-hover:text-primary-foreground`), children: feature.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 24 }) }),
           /* @__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
@@ -975,7 +1053,7 @@ function HeroFeatureCardsGrid({
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", contentClassName), children: [
           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", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderFeatures

package/dist/hero-gradient-avatars-rating.cjs

@@ -60,6 +60,32 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
+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:")) {
@@ -1023,7 +1049,7 @@ function HeroGradientAvatarsRating({
       Pressable,
       {
         href: topLinkHref,
-        className: "my-6 text-xs font-bold tracking-[0.3em] text-muted-foreground uppercase hover:underline",
+        className: cn("my-6 text-xs font-bold tracking-[0.3em] uppercase hover:underline", getTextColor(background, "muted")),
         children: topLinkText
       }
     );
@@ -1076,7 +1102,7 @@ function HeroGradientAvatarsRating({
         )),
         ratingValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: ratingValue })
       ] }),
-      ratingLabel && (typeof ratingLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: ratingLabel }) : ratingLabel)
+      ratingLabel && (typeof ratingLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: ratingLabel }) : ratingLabel)
     ] });
   }, [ratingValue, ratingLabel, starCount]);
   const renderImages = React.useMemo(() => {
@@ -1122,10 +1148,10 @@ function HeroGradientAvatarsRating({
               typeof heading === "string" ? heading : heading,
               headingSubtitle && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: headingSubtitle })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: getTextColor(background, "muted"), children: headingSubtitle })
               ] })
             ] }),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("my-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("my-8 max-w-xl lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             renderActions,
             (avatars || avatarsSlot || ratingValue || ratingLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
               renderAvatars,

package/dist/hero-gradient-avatars-rating.js

@@ -38,6 +38,32 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
+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:")) {
@@ -1001,7 +1027,7 @@ function HeroGradientAvatarsRating({
       Pressable,
       {
         href: topLinkHref,
-        className: "my-6 text-xs font-bold tracking-[0.3em] text-muted-foreground uppercase hover:underline",
+        className: cn("my-6 text-xs font-bold tracking-[0.3em] uppercase hover:underline", getTextColor(background, "muted")),
         children: topLinkText
       }
     );
@@ -1054,7 +1080,7 @@ function HeroGradientAvatarsRating({
         )),
         ratingValue && /* @__PURE__ */ jsx("span", { className: "font-semibold", children: ratingValue })
       ] }),
-      ratingLabel && (typeof ratingLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: ratingLabel }) : ratingLabel)
+      ratingLabel && (typeof ratingLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium", getTextColor(background, "muted")), children: ratingLabel }) : ratingLabel)
     ] });
   }, [ratingValue, ratingLabel, starCount]);
   const renderImages = useMemo(() => {
@@ -1100,10 +1126,10 @@ function HeroGradientAvatarsRating({
               typeof heading === "string" ? heading : heading,
               headingSubtitle && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("br", {}),
-                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: headingSubtitle })
+                /* @__PURE__ */ jsx("span", { className: getTextColor(background, "muted"), children: headingSubtitle })
               ] })
             ] }),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("my-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("my-8 max-w-xl lg:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
             renderActions,
             (avatars || avatarsSlot || ratingValue || ratingLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
               renderAvatars,

package/dist/hero-gradient-client-focused.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:")) {
@@ -887,7 +913,7 @@ function HeroGradientClientFocused({
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center gap-5", containerClassName), children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-2xl text-7xl font-medium max-lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-2xl text-7xl font-medium max-lg:text-5xl", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl text-muted-foreground max-lg:text-sm", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl max-lg:text-sm", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
         renderActions,
         renderImage
       ] })

package/dist/hero-gradient-client-focused.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:")) {
@@ -866,7 +892,7 @@ function HeroGradientClientFocused({
       ),
       children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center gap-5", containerClassName), children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-2xl text-7xl font-medium max-lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("max-w-2xl text-7xl font-medium max-lg:text-5xl", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl text-muted-foreground max-lg:text-sm", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl max-lg:text-sm", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
         renderActions,
         renderImage
       ] })

package/dist/hero-grid-pattern-efficiency.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:")) {
@@ -860,7 +886,7 @@ function HeroGridPatternEfficiency({
     return /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: [
       "Less complexity. ",
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-6", children: "More" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-block before:absolute before:top-0 before:-right-2 before:-bottom-2 before:-left-4 before:-z-10 before:rounded-lg before:bg-muted-foreground/15", children: highlightedWord })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative inline-block before:absolute before:top-0 before:-right-2 before:-bottom-2 before:-left-4 before:-z-10 before:rounded-lg", `before:${getTextColor(background, "muted")}/15`), children: highlightedWord })
     ] });
   }, [heading, highlightedWord, headingClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -877,7 +903,7 @@ function HeroGridPatternEfficiency({
         description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-7 text-xl font-light lg:text-3xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 flex w-fit flex-col gap-2.5 text-center", actionClassName), children: [
           renderAction,
-          actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: actionSubtext }) : actionSubtext)
+          actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: actionSubtext }) : actionSubtext)
         ] })
       ] }) })
     }