@opensite/ui 0.8.9 → 0.9.1

package/dist/cta-simple-centered.js

@@ -10,6 +10,32 @@ 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -986,7 +1012,8 @@ function CtaSimpleCentered({
           "p",
           {
             className: cn(
-              "mb-8 text-lg text-muted-foreground",
+              "mb-8 text-lg",
+              getTextColor(background, "muted"),
               descriptionClassName
             ),
             children: description

package/dist/cta-split-gradient-image.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:")) {
@@ -918,7 +944,8 @@ function CtaSplitGradientImage({
                     "p",
                     {
                       className: cn(
-                        "text-lg text-muted-foreground",
+                        "text-lg",
+                        getTextColor(background, "muted"),
                         descriptionClassName
                       ),
                       children: description

package/dist/cta-split-gradient-image.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:")) {
@@ -897,7 +923,8 @@ function CtaSplitGradientImage({
                     "p",
                     {
                       className: cn(
-                        "text-lg text-muted-foreground",
+                        "text-lg",
+                        getTextColor(background, "muted"),
                         descriptionClassName
                       ),
                       children: description

package/dist/cta-split-image-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:")) {
@@ -1000,7 +1026,7 @@ function CtaSplitImageLogos({
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-10 w-full", logosClassName), children: [
-      logosLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: logosLabel }),
+      logosLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm", getTextColor(background, "muted")), children: logosLabel }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-6 lg:justify-start", children: logos.map((logo, index) => /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
@@ -1051,7 +1077,8 @@ function CtaSplitImageLogos({
                     "p",
                     {
                       className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-xl",
+                        "mb-8 max-w-xl lg:text-xl",
+                        getTextColor(background, "muted"),
                         descriptionClassName
                       ),
                       children: description

package/dist/cta-split-image-logos.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:")) {
@@ -979,7 +1005,7 @@ function CtaSplitImageLogos({
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-10 w-full", logosClassName), children: [
-      logosLabel && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: logosLabel }),
+      logosLabel && /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm", getTextColor(background, "muted")), children: logosLabel }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-6 lg:justify-start", children: logos.map((logo, index) => /* @__PURE__ */ jsx(
         Img,
         {
@@ -1030,7 +1056,8 @@ function CtaSplitImageLogos({
                     "p",
                     {
                       className: cn(
-                        "mb-8 max-w-xl text-muted-foreground lg:text-xl",
+                        "mb-8 max-w-xl lg:text-xl",
+                        getTextColor(background, "muted"),
                         descriptionClassName
                       ),
                       children: description

package/dist/cta-split-image.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:")) {
@@ -947,7 +973,8 @@ function CtaSplitImage({
             "p",
             {
               className: cn(
-                "mb-8 text-muted-foreground lg:text-lg",
+                "mb-8 lg:text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -957,7 +984,7 @@ function CtaSplitImage({
         ]
       }
     );
-  }, [heading, description, actionsContent, contentClassName, headingClassName, descriptionClassName]);
+  }, [heading, description, actionsContent, contentClassName, headingClassName, descriptionClassName, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/cta-split-image.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:")) {
@@ -926,7 +952,8 @@ function CtaSplitImage({
             "p",
             {
               className: cn(
-                "mb-8 text-muted-foreground lg:text-lg",
+                "mb-8 lg:text-lg",
+                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
@@ -936,7 +963,7 @@ function CtaSplitImage({
         ]
       }
     );
-  }, [heading, description, actionsContent, contentClassName, headingClassName, descriptionClassName]);
+  }, [heading, description, actionsContent, contentClassName, headingClassName, descriptionClassName, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/cta-stacked-cards.cjs

@@ -61,6 +61,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:")) {
@@ -941,7 +967,8 @@ function CtaStackedCards({
                         "p",
                         {
                           className: cn(
-                            "mb-8 text-muted-foreground lg:text-lg",
+                            "mb-8 lg:text-lg",
+                            getTextColor(background, "muted"),
                             descriptionClassName
                           ),
                           children: description

package/dist/cta-stacked-cards.js

@@ -40,6 +40,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:")) {
@@ -920,7 +946,8 @@ function CtaStackedCards({
                         "p",
                         {
                           className: cn(
-                            "mb-8 text-muted-foreground lg:text-lg",
+                            "mb-8 lg:text-lg",
+                            getTextColor(background, "muted"),
                             descriptionClassName
                           ),
                           children: description

package/dist/faq-badge-support.cjs

@@ -36,6 +36,32 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -1101,7 +1127,7 @@ function FaqBadgeSupport({
                 AccordionContent,
                 {
                   className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground lg:text-lg", children: item.answer })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
                 }
               )
             ]
@@ -1116,7 +1142,8 @@ function FaqBadgeSupport({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   const supportSectionContent = React.useMemo(() => {
     if (supportSlot) return supportSlot;
@@ -1128,7 +1155,7 @@ function FaqBadgeSupport({
           supportSectionClassName
         ),
         children: [
-          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: supportText }) : supportText),
+          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: supportText }) : supportText),
           supportAction && /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
@@ -1148,7 +1175,7 @@ function FaqBadgeSupport({
         ]
       }
     );
-  }, [supportSlot, supportText, supportAction, supportSectionClassName]);
+  }, [supportSlot, supportText, supportAction, supportSectionClassName, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1189,7 +1216,8 @@ function FaqBadgeSupport({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground mt-6 text-base md:text-lg",
+                    getTextColor(background, "muted"),
+                    "mt-6 text-base md:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-badge-support.js

@@ -13,6 +13,32 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -1078,7 +1104,7 @@ function FaqBadgeSupport({
                 AccordionContent,
                 {
                   className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                  children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground lg:text-lg", children: item.answer })
+                  children: /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
                 }
               )
             ]
@@ -1093,7 +1119,8 @@ function FaqBadgeSupport({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   const supportSectionContent = useMemo(() => {
     if (supportSlot) return supportSlot;
@@ -1105,7 +1132,7 @@ function FaqBadgeSupport({
           supportSectionClassName
         ),
         children: [
-          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: supportText }) : supportText),
+          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: supportText }) : supportText),
           supportAction && /* @__PURE__ */ jsxs(
             Pressable,
             {
@@ -1125,7 +1152,7 @@ function FaqBadgeSupport({
         ]
       }
     );
-  }, [supportSlot, supportText, supportAction, supportSectionClassName]);
+  }, [supportSlot, supportText, supportAction, supportSectionClassName, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1166,7 +1193,8 @@ function FaqBadgeSupport({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground mt-6 text-base md:text-lg",
+                    getTextColor(background, "muted"),
+                    "mt-6 text-base md:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-bordered-badge.cjs

@@ -34,6 +34,32 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -658,7 +684,7 @@ function FaqBorderedBadge({
               /* @__PURE__ */ jsxRuntime.jsx(
                 AccordionContent,
                 {
-                  className: cn("text-muted-foreground", accordionContentClassName),
+                  className: cn(getTextColor(background, "muted"), accordionContentClassName),
                   children: item.answer
                 }
               )
@@ -674,7 +700,8 @@ function FaqBorderedBadge({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -722,7 +749,8 @@ function FaqBorderedBadge({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground max-w-2xl text-balance",
+                    getTextColor(background, "muted"),
+                    "max-w-2xl text-balance",
                     descriptionClassName
                   ),
                   children: description