@opensite/ui 0.8.9 → 0.9.1

package/dist/hero-grid-pattern-efficiency.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:")) {
@@ -839,7 +865,7 @@ function HeroGridPatternEfficiency({
     return /* @__PURE__ */ jsxs("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: [
       "Less complexity. ",
       /* @__PURE__ */ jsx("span", { className: "mr-6", children: "More" }),
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(
@@ -856,7 +882,7 @@ function HeroGridPatternEfficiency({
         description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-7 text-xl font-light lg:text-3xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
         /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex w-fit flex-col gap-2.5 text-center", actionClassName), children: [
           renderAction,
-          actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: actionSubtext }) : actionSubtext)
+          actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: actionSubtext }) : actionSubtext)
         ] })
       ] }) })
     }

package/dist/hero-grid-pattern-solutions.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:")) {
@@ -1051,7 +1077,7 @@ function HeroGridPatternSolutions({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
             renderBadge,
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center 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 mb-8 max-w-2xl text-center lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             renderActions
           ] })
         ] }),

package/dist/hero-grid-pattern-solutions.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:")) {
@@ -1030,7 +1056,7 @@ function HeroGridPatternSolutions({
           /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
             renderBadge,
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
             renderActions
           ] })
         ] }),

package/dist/hero-image-left-content.cjs

@@ -59,6 +59,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";
+    }
+  }
+}
 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",
   {
@@ -954,7 +980,7 @@ function HeroImageLeftContent({
             badgeIcon
           ] }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl 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("mb-8 max-w-xl 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("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: renderActions })
         ] })
       ] }) })

package/dist/hero-image-left-content.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";
+    }
+  }
+}
 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",
   {
@@ -933,7 +959,7 @@ function HeroImageLeftContent({
             badgeIcon
           ] }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-8 max-w-xl 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("flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", actionsClassName), children: renderActions })
         ] })
       ] }) })

package/dist/hero-innovation-image-grid.cjs

@@ -34,6 +34,32 @@ var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatio
 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:")) {
@@ -1015,7 +1041,7 @@ function HeroInnovationImageGrid({
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-12", contentClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl font-bold md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl font-bold 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 }))
           ] }),
           renderAction
         ] }) }),

package/dist/hero-innovation-image-grid.js

@@ -12,6 +12,32 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 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:")) {
@@ -993,7 +1019,7 @@ function HeroInnovationImageGrid({
         /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-12", contentClassName), children: [
           /* @__PURE__ */ jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-3 text-4xl font-bold md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-3 text-4xl font-bold 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 }))
           ] }),
           renderAction
         ] }) }),

package/dist/hero-logo-centered-screenshot.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:")) {
@@ -896,7 +922,7 @@ function HeroLogoCenteredScreenshot({
           renderLogo,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("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("max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           renderAction
         ] }) }),

package/dist/hero-logo-centered-screenshot.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:")) {
@@ -875,7 +901,7 @@ function HeroLogoCenteredScreenshot({
           renderLogo,
           /* @__PURE__ */ jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           renderAction
         ] }) }),

package/dist/hero-marketplace-scattered-images.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:")) {
@@ -996,7 +1022,7 @@ function HeroMarketplaceScatteredImages({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative container mx-auto max-w-xl py-10 text-center", contentClassName), children: [
           showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-sm text-muted-foreground md:text-base", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-sm md:text-base", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderAction,
           renderTagline
         ] }),

package/dist/hero-marketplace-scattered-images.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:")) {
@@ -975,7 +1001,7 @@ function HeroMarketplaceScatteredImages({
         /* @__PURE__ */ jsxs("div", { className: cn("relative container mx-auto max-w-xl py-10 text-center", contentClassName), children: [
           showGridPattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-5 text-sm text-muted-foreground md:text-base", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-5 text-sm md:text-base", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderAction,
           renderTagline
         ] }),

package/dist/hero-mentorship-video-split.cjs

@@ -36,6 +36,10 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+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:")) {
@@ -1062,7 +1066,7 @@ function HeroMentorshipVideoSplit({
     if (videoSlot) return videoSlot;
     if (!videoThumbnail) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-97.5 flex-col gap-6", children: [
-      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl text-primary", children: videoLabel }) : videoLabel),
+      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl", getAccentColor(background)), children: videoLabel }) : videoLabel),
       /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1119,8 +1123,8 @@ function HeroMentorshipVideoSplit({
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col justify-between gap-12", contentClassName), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-165 flex-col gap-9", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-medium text-primary md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-medium md:text-xl", getAccentColor(background), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
               renderAction
             ] }),
             renderVideoSection

package/dist/hero-mentorship-video-split.js

@@ -13,6 +13,10 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+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:")) {
@@ -1039,7 +1043,7 @@ function HeroMentorshipVideoSplit({
     if (videoSlot) return videoSlot;
     if (!videoThumbnail) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex max-w-97.5 flex-col gap-6", children: [
-      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xl text-primary", children: videoLabel }) : videoLabel),
+      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl", getAccentColor(background)), children: videoLabel }) : videoLabel),
       /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -1096,8 +1100,8 @@ function HeroMentorshipVideoSplit({
         children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col justify-between gap-12", contentClassName), children: [
             /* @__PURE__ */ jsxs("div", { className: "flex max-w-165 flex-col gap-9", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-none text-primary sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg font-medium text-primary md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg font-medium md:text-xl", getAccentColor(background), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
               renderAction
             ] }),
             renderVideoSection

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

@@ -31,6 +31,58 @@ 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -883,7 +935,7 @@ function HeroMinimalCenteredDark({
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
-        badge && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-success" })
@@ -897,9 +949,9 @@ function HeroMinimalCenteredDark({
           " ",
           "is here"
         ] }) : null),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-2xl 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-2xl text-lg md: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-10 flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm", getTextColor(background, "muted"), statsClassName), children: renderStats })
       ] })
     }
   );