@opensite/ui 0.8.9 → 0.9.1

package/dist/hero-conversion-video-play.cjs

@@ -36,6 +36,58 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 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 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:")) {
@@ -1123,11 +1175,11 @@ function HeroConversionVideoPlay({
         patternOpacity,
         className: cn(className),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border-b border-muted", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden border-b", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-7", children: [
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal 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("max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
             ] }),
@@ -1142,7 +1194,7 @@ function HeroConversionVideoPlay({
             ) }) }) }) : null })
           ] }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-16 py-20", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xl font-medium text-primary", children: logosTagline }) : logosTagline),
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium", getAccentColor(background)), children: logosTagline }) : logosTagline),
             (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
           ] }) })
         ]

package/dist/hero-conversion-video-play.js

@@ -13,6 +13,58 @@ 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 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:")) {
@@ -1100,11 +1152,11 @@ function HeroConversionVideoPlay({
         patternOpacity,
         className: cn(className),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "overflow-hidden border-b border-muted", children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
+          /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden border-b", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
             /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-7", children: [
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal 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-[750px] text-center text-base leading-relaxed font-normal md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
               ] }),
               /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
             ] }),
@@ -1119,7 +1171,7 @@ function HeroConversionVideoPlay({
             ) }) }) }) : null })
           ] }) }) }),
           /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-16 py-20", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "text-center text-xl font-medium text-primary", children: logosTagline }) : logosTagline),
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl font-medium", getAccentColor(background)), children: logosTagline }) : logosTagline),
             (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
           ] }) })
         ]

package/dist/hero-creative-studio-stacked.cjs

@@ -36,6 +36,32 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 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:")) {
@@ -1155,10 +1181,10 @@ function HeroCreativeStudioStacked({
         className: cn(className),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-10 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6", contentClassName), children: [
-            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium tracking-wider text-muted-foreground uppercase", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
+            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-medium tracking-wider uppercase", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-160 flex-col gap-6", children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl leading-tight font-medium md:text-5xl xl:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl text-balance 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-xl text-balance", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-4 py-4", actionsClassName), children: renderActions })
           ] }),

package/dist/hero-creative-studio-stacked.js

@@ -13,6 +13,32 @@ 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1132,10 +1158,10 @@ function HeroCreativeStudioStacked({
         className: cn(className),
         children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-10 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", contentClassName), children: [
-            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium tracking-wider text-muted-foreground uppercase", taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
+            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium tracking-wider uppercase", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
             /* @__PURE__ */ jsxs("div", { className: "flex max-w-160 flex-col gap-6", children: [
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl leading-tight font-medium md:text-5xl xl:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl text-balance text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl text-balance", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
             ] }),
             /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-4 py-4", actionsClassName), children: renderActions })
           ] }),

package/dist/hero-crm-streamlined.cjs

@@ -58,6 +58,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:")) {
@@ -900,7 +926,7 @@ function HeroCrmStreamlined({
       className: cn("overflow-hidden font-sans", className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-10 md:flex-row", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("basis-2/4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-10 flex flex-col gap-2", children: [
-          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base font-semibold text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
+          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base font-semibold", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-2 text-4xl leading-snug! font-medium lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-2 text-lg opacity-80", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderAction

package/dist/hero-crm-streamlined.js

@@ -37,6 +37,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:")) {
@@ -879,7 +905,7 @@ function HeroCrmStreamlined({
       className: cn("overflow-hidden font-sans", className),
       children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-10 md:flex-row", children: [
         /* @__PURE__ */ jsx("div", { className: cn("basis-2/4", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "mt-10 flex flex-col gap-2", children: [
-          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base font-semibold text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
+          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base font-semibold", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-2 text-4xl leading-snug! font-medium lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-2 text-lg opacity-80", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderAction

package/dist/hero-customer-support-layered.cjs

@@ -35,6 +35,54 @@ 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 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 AspectRatio({
   ...props
 }) {
@@ -474,12 +522,12 @@ function HeroCustomerSupportLayered({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative border-b border-muted pt-10", className),
+      className: cn("relative border-b pt-10", getBorderColor(background, "muted"), className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-9 lg:max-w-150 lg:py-[20%] xl:py-[26%]", contentClassName), children: [
-          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
+          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)]", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal 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-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImages })
       ] }) })

package/dist/hero-customer-support-layered.js

@@ -10,6 +10,54 @@ import { jsx, jsxs } 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 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 AspectRatio({
   ...props
 }) {
@@ -449,12 +497,12 @@ function HeroCustomerSupportLayered({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative border-b border-muted pt-10", className),
+      className: cn("relative border-b pt-10", getBorderColor(background, "muted"), className),
       children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-9 lg:max-w-150 lg:py-[20%] xl:py-[26%]", contentClassName), children: [
-          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
+          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)]", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsx("div", { children: renderImages })
       ] }) })

package/dist/hero-dashed-border-features.cjs

@@ -64,6 +64,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";
+    }
+  }
+}
 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",
   {
@@ -1143,7 +1169,7 @@ function HeroDashedBorderFeatures({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-x border-t border-dashed px-4 py-20 md:px-16", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
           renderAnnouncement,
           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("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-6 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-6 max-w-2xl text-center lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative grid border-x border-dashed md:grid-cols-3", featuresClassName), children: [

package/dist/hero-dashed-border-features.js

@@ -42,6 +42,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";
+    }
+  }
+}
 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",
   {
@@ -1121,7 +1147,7 @@ function HeroDashedBorderFeatures({
         /* @__PURE__ */ jsx("div", { className: cn("border-x border-t border-dashed px-4 py-20 md:px-16", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
           renderAnnouncement,
           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("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-6 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-6 max-w-2xl text-center lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: cn("relative grid border-x border-dashed md:grid-cols-3", featuresClassName), children: [

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