@opensite/ui 0.8.9 → 0.9.1

package/dist/hero-software-growth-video-dialog.js

@@ -13,6 +13,54 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 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 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:")) {
@@ -1083,7 +1131,7 @@ function HeroSoftwareGrowthVideoDialog({
       { index: 2, className: "absolute -bottom-[14%] left-[51%] w-[38.19%] max-w-137.5", ratio: 1.686153846 / 1 },
       { index: 3, className: "absolute -bottom-[30%] left-[10.7%] w-[38.19%] max-w-137.5", ratio: 1.415041783 / 1 }
     ];
-    return /* @__PURE__ */ jsx("div", { className: cn("w-full py-[16%]", showcaseClassName), children: /* @__PURE__ */ jsx("div", { className: "border-muted2 relative aspect-[2.716981132/1] w-full border", children: imageConfigs.map(({ index, className: posClassName, ratio }) => /* @__PURE__ */ jsx("div", { className: posClassName, children: /* @__PURE__ */ jsx(AspectRatio, { ratio, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: cn("w-full py-[16%]", showcaseClassName), children: /* @__PURE__ */ jsx("div", { className: cn("relative aspect-[2.716981132/1] w-full border", getBorderColor(background, "muted")), children: imageConfigs.map(({ index, className: posClassName, ratio }) => /* @__PURE__ */ jsx("div", { className: posClassName, children: /* @__PURE__ */ jsx(AspectRatio, { ratio, children: /* @__PURE__ */ jsx(
       Img,
       {
         src: showcaseImages[index].src,
@@ -1101,7 +1149,7 @@ function HeroSoftwareGrowthVideoDialog({
         children: /* @__PURE__ */ jsx("div", { className: cn("container max-w-[1440px]", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-8", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-212.5 text-center text-lg leading-snug 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("max-w-212.5 text-center text-lg leading-snug md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
             renderActions
           ] }),
           renderShowcaseImages

package/dist/hero-spiral-pattern-cards.cjs

@@ -57,6 +57,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:")) {
@@ -898,7 +924,7 @@ function HeroSpiralPatternCards({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName), children: [
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl text-muted-foreground md:mb-12 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-6 max-w-xl md:mb-12 lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-16 flex flex-col items-center justify-center lg:mt-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "b relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
@@ -908,7 +934,7 @@ function HeroSpiralPatternCards({
               xmlns: "http://www.w3.org/2000/svg",
               version: "1.1",
               viewBox: "0 0 800 800",
-              className: "h-full w-full text-muted-foreground opacity-20",
+              className: cn("h-full w-full opacity-20", getTextColor(background, "muted")),
               children: Array.from(Array(4e3).keys()).map((dot, index, array) => {
                 const angle = 0.2 * index;
                 const scalar = 300 + index * (100 / array.length);

package/dist/hero-spiral-pattern-cards.js

@@ -36,6 +36,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:")) {
@@ -877,7 +903,7 @@ function HeroSpiralPatternCards({
         /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName), children: [
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs uppercase", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-xl text-muted-foreground md:mb-12 lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-xl md:mb-12 lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         /* @__PURE__ */ jsx("div", { className: "mt-16 flex flex-col items-center justify-center lg:mt-32", children: /* @__PURE__ */ jsxs("div", { className: "b relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
@@ -887,7 +913,7 @@ function HeroSpiralPatternCards({
               xmlns: "http://www.w3.org/2000/svg",
               version: "1.1",
               viewBox: "0 0 800 800",
-              className: "h-full w-full text-muted-foreground opacity-20",
+              className: cn("h-full w-full opacity-20", getTextColor(background, "muted")),
               children: Array.from(Array(4e3).keys()).map((dot, index, array) => {
                 const angle = 0.2 * index;
                 const scalar = 300 + index * (100 / array.length);

package/dist/hero-split-icon-cards.cjs

@@ -31,6 +31,36 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -982,10 +1012,10 @@ function HeroSplitIconCards({
     if (!cardItems || cardItems.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4", children: cardItems.map((item, idx) => {
       const card = /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4 p-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-14 w-14 items-center justify-center rounded-xl", `${getAccentColor(background)}/10`, getAccentColor(background)), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold ", children: item.title }),
-          item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: item.subtitle }) : null
+          item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.subtitle }) : null
         ] })
       ] }) });
       return item.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: item.href, className: "block", children: card }, idx) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: card }, idx);
@@ -1001,9 +1031,9 @@ function HeroSplitIconCards({
       className: cn("overflow-hidden", className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6", contentClassName), children: children ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.25em] text-primary", children: eyebrow }) : eyebrow),
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.25em]", getAccentColor(background)), children: eyebrow }) : eyebrow),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", 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
         ] }) }),
         renderCards

package/dist/hero-split-icon-cards.js

@@ -10,6 +10,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,
@@ -961,10 +991,10 @@ function HeroSplitIconCards({
     if (!cardItems || cardItems.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4", children: cardItems.map((item, idx) => {
       const card = /* @__PURE__ */ jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-6", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex h-14 w-14 items-center justify-center rounded-xl", `${getAccentColor(background)}/10`, getAccentColor(background)), children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold ", children: item.title }),
-          item.subtitle ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: item.subtitle }) : null
+          item.subtitle ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.subtitle }) : null
         ] })
       ] }) });
       return item.href ? /* @__PURE__ */ jsx(Pressable, { href: item.href, className: "block", children: card }, idx) : /* @__PURE__ */ jsx("div", { children: card }, idx);
@@ -980,9 +1010,9 @@ function HeroSplitIconCards({
       className: cn("overflow-hidden", className),
       children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center", children: [
         /* @__PURE__ */ jsx("div", { className: cn("space-y-6", contentClassName), children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.25em] text-primary", children: eyebrow }) : eyebrow),
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.25em]", getAccentColor(background)), children: eyebrow }) : eyebrow),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", 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
         ] }) }),
         renderCards

package/dist/hero-split-image-newsletter.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 HeroSplitImageNewsletter({
           }
         )
       ] }),
-      newsletterForm.helperText && (typeof newsletterForm.helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: newsletterForm.helperText }) : newsletterForm.helperText)
+      newsletterForm.helperText && (typeof newsletterForm.helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: newsletterForm.helperText }) : newsletterForm.helperText)
     ] });
   }, [newsletterFormSlot, newsletterForm]);
   const renderImage = React.useMemo(() => {
@@ -913,7 +939,7 @@ function HeroSplitImageNewsletter({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center gap-10 lg:flex-row lg:gap-20", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8 lg:w-1/2", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold md:text-6xl lg:text-7xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("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("text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderNewsletterForm
         ] }),
         renderImage

package/dist/hero-split-image-newsletter.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 HeroSplitImageNewsletter({
           }
         )
       ] }),
-      newsletterForm.helperText && (typeof newsletterForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: newsletterForm.helperText }) : newsletterForm.helperText)
+      newsletterForm.helperText && (typeof newsletterForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: newsletterForm.helperText }) : newsletterForm.helperText)
     ] });
   }, [newsletterFormSlot, newsletterForm]);
   const renderImage = useMemo(() => {
@@ -892,7 +918,7 @@ function HeroSplitImageNewsletter({
       children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center gap-10 lg:flex-row lg:gap-20", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 lg:w-1/2", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-bold md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-bold md:text-6xl lg:text-7xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("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("text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderNewsletterForm
         ] }),
         renderImage

package/dist/hero-split-spiral-shapes.cjs

@@ -57,6 +57,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:")) {
@@ -897,7 +923,7 @@ function HeroSplitSpiralShapes({
           xmlns: "http://www.w3.org/2000/svg",
           version: "1.1",
           viewBox: "0 0 800 800",
-          className: "h-full w-full text-muted-foreground opacity-20",
+          className: cn("h-full w-full opacity-20", getTextColor(background, "muted")),
           children: Array.from(Array(720).keys()).map((dot, index, array) => {
             const angle = 0.2 * index;
             const scalar = 40 + index * (360 / array.length);
@@ -933,7 +959,7 @@ function HeroSplitSpiralShapes({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center py-32 text-center lg:mx-auto lg:items-start lg:px-0 lg:text-left", contentClassName), children: [
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", 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 })),
           renderActions
         ] }),
         renderShapes

package/dist/hero-split-spiral-shapes.js

@@ -36,6 +36,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:")) {
@@ -876,7 +902,7 @@ function HeroSplitSpiralShapes({
           xmlns: "http://www.w3.org/2000/svg",
           version: "1.1",
           viewBox: "0 0 800 800",
-          className: "h-full w-full text-muted-foreground opacity-20",
+          className: cn("h-full w-full opacity-20", getTextColor(background, "muted")),
           children: Array.from(Array(720).keys()).map((dot, index, array) => {
             const angle = 0.2 * index;
             const scalar = 40 + index * (360 / array.length);
@@ -912,7 +938,7 @@ function HeroSplitSpiralShapes({
         /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center py-32 text-center lg:mx-auto lg:items-start lg:px-0 lg:text-left", contentClassName), children: [
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", 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 })),
           renderActions
         ] }),
         renderShapes

package/dist/hero-startup-launch-cta.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:")) {
@@ -904,7 +930,7 @@ function HeroStartupLaunchCta({
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         badgeCard.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: badgeCard.title }),
-        badgeCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: badgeCard.subtitle })
+        badgeCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: badgeCard.subtitle })
       ] })
     ] });
   }, [badgeCardSlot, badgeCard, optixFlowConfig]);
@@ -923,7 +949,7 @@ function HeroStartupLaunchCta({
             typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
           ] }),
           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("div", { className: 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 })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
           (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4 pt-4", socialProofClassName), children: [
             renderAvatars,

package/dist/hero-startup-launch-cta.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:")) {
@@ -883,7 +909,7 @@ function HeroStartupLaunchCta({
       ),
       /* @__PURE__ */ jsxs("div", { children: [
         badgeCard.title && /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: badgeCard.title }),
-        badgeCard.subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: badgeCard.subtitle })
+        badgeCard.subtitle && /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: badgeCard.subtitle })
       ] })
     ] });
   }, [badgeCardSlot, badgeCard, optixFlowConfig]);
@@ -902,7 +928,7 @@ function HeroStartupLaunchCta({
             typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
           ] }),
           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("div", { className: 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 })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
           (avatarsSlot || avatars || socialProofText) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4 pt-4", socialProofClassName), children: [
             renderAvatars,