@opensite/ui 0.8.9 → 0.9.1

package/dist/feature-checklist-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:")) {
@@ -1077,7 +1103,8 @@ function FeatureChecklistImage({
                 "p",
                 {
                   className: cn(
-                    "mt-1 text-muted-foreground md:mt-6",
+                    "mt-1 md:mt-6",
+                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description
@@ -1086,7 +1113,8 @@ function FeatureChecklistImage({
                 "div",
                 {
                   className: cn(
-                    "mt-1 text-muted-foreground md:mt-6",
+                    "mt-1 md:mt-6",
+                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description

package/dist/feature-checklist-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:")) {
@@ -1056,7 +1082,8 @@ function FeatureChecklistImage({
                 "p",
                 {
                   className: cn(
-                    "mt-1 text-muted-foreground md:mt-6",
+                    "mt-1 md:mt-6",
+                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description
@@ -1065,7 +1092,8 @@ function FeatureChecklistImage({
                 "div",
                 {
                   className: cn(
-                    "mt-1 text-muted-foreground md:mt-6",
+                    "mt-1 md:mt-6",
+                    getTextColor(background, "muted"),
                     descriptionClassName
                   ),
                   children: description

package/dist/feature-checklist-three-column.cjs

@@ -33,6 +33,36 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -996,8 +1026,8 @@ function FeatureChecklistThreeColumn({
   const renderChecklistColumn = React.useCallback((items, slot, gapClass) => {
     if (slot) return slot;
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col text-muted-foreground", gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 16, className: "text-primary" }),
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col", getTextColor(background, "muted"), gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 16, className: getAccentColor(background) }),
       getCheckItemContent(item)
     ] }, index)) });
   }, [checklistClassName, getCheckItemContent, getCheckItemClassName]);
@@ -1050,17 +1080,17 @@ function FeatureChecklistThreeColumn({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 px-4 pt-5 sm:px-5 md:px-6 md:pt-6", children: [
           card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium", card.titleClassName), children: card.title })),
-          card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", card.descriptionClassName), children: card.description }))
+          card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px border-t border-dashed" }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "text-muted-foreground", children: card.checklistItems?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: getTextColor(background, "muted"), children: card.checklistItems?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6", getCheckItemClassName(item)), children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               DynamicIcon,
               {
                 name: "lucide/check",
                 size: 16,
-                className: "mt-1 shrink-0 text-primary"
+                className: cn("mt-1 shrink-0", getAccentColor(background))
               }
             ),
             getCheckItemContent(item)

package/dist/feature-checklist-three-column.js

@@ -12,6 +12,36 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -975,8 +1005,8 @@ function FeatureChecklistThreeColumn({
   const renderChecklistColumn = useCallback((items, slot, gapClass) => {
     if (slot) return slot;
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col text-muted-foreground", gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
-      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 16, className: "text-primary" }),
+    return /* @__PURE__ */ jsx("ul", { className: cn("flex flex-col", getTextColor(background, "muted"), gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
+      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 16, className: getAccentColor(background) }),
       getCheckItemContent(item)
     ] }, index)) });
   }, [checklistClassName, getCheckItemContent, getCheckItemClassName]);
@@ -1029,17 +1059,17 @@ function FeatureChecklistThreeColumn({
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-3 px-4 pt-5 sm:px-5 md:px-6 md:pt-6", children: [
           card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium", card.titleClassName), children: card.title })),
-          card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", card.descriptionClassName), children: card.description }))
+          card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }))
         ] }),
         /* @__PURE__ */ jsx("div", { className: "h-px border-t border-dashed" }),
-        /* @__PURE__ */ jsx("ul", { className: "text-muted-foreground", children: card.checklistItems?.map((item, itemIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx("ul", { className: getTextColor(background, "muted"), children: card.checklistItems?.map((item, itemIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
           /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6", getCheckItemClassName(item)), children: [
             /* @__PURE__ */ jsx(
               DynamicIcon,
               {
                 name: "lucide/check",
                 size: 16,
-                className: "mt-1 shrink-0 text-primary"
+                className: cn("mt-1 shrink-0", getAccentColor(background))
               }
             ),
             getCheckItemContent(item)

package/dist/feature-icon-grid-accent.cjs

@@ -30,6 +30,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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -556,14 +582,14 @@ function FeatureIconGridAccent({
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium md:text-2xl", children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium md:text-2xl", children: feature.title })),
-              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-muted-foreground", children: feature.description }))
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2", getTextColor(background, "muted")), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", getTextColor(background, "muted")), children: feature.description }))
             ] })
           ]
         },
         index
       );
     });
-  }, [featuresSlot, features, cardClassName]);
+  }, [featuresSlot, features, cardClassName, background]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/feature-icon-grid-accent.js

@@ -9,6 +9,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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -535,14 +561,14 @@ function FeatureIconGridAccent({
             ),
             /* @__PURE__ */ jsxs("div", { children: [
               feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium md:text-2xl", children: feature.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg font-medium md:text-2xl", children: feature.title })),
-              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-muted-foreground", children: feature.description }))
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2", getTextColor(background, "muted")), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", getTextColor(background, "muted")), children: feature.description }))
             ] })
           ]
         },
         index
       );
     });
-  }, [featuresSlot, features, cardClassName]);
+  }, [featuresSlot, features, cardClassName, background]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/feature-icon-grid-bordered.cjs

@@ -30,6 +30,10 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -550,7 +554,8 @@ function FeatureIconGridBordered({
             "span",
             {
               className: cn(
-                "mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12",
+                "mb-8 flex size-10 shrink-0 items-center justify-center rounded-full text-primary-foreground md:size-12",
+                getAccentColor(background),
                 feature.iconClassName
               ),
               children: renderIcon(feature)
@@ -566,7 +571,7 @@ function FeatureIconGridBordered({
                 ),
                 children: [
                   feature.title,
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("absolute -left-px hidden h-6 w-px md:inline-block", getAccentColor(background)) })
                 ]
               }
             ) : /* @__PURE__ */ jsxRuntime.jsxs(
@@ -578,7 +583,7 @@ function FeatureIconGridBordered({
                 ),
                 children: [
                   feature.title,
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("absolute -left-px hidden h-6 w-px md:inline-block", getAccentColor(background)) })
                 ]
               }
             )),
@@ -606,7 +611,7 @@ function FeatureIconGridBordered({
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName, renderIcon]);
+  }, [featuresSlot, features, cardClassName, renderIcon, background]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/feature-icon-grid-bordered.js

@@ -9,6 +9,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -529,7 +533,8 @@ function FeatureIconGridBordered({
             "span",
             {
               className: cn(
-                "mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12",
+                "mb-8 flex size-10 shrink-0 items-center justify-center rounded-full text-primary-foreground md:size-12",
+                getAccentColor(background),
                 feature.iconClassName
               ),
               children: renderIcon(feature)
@@ -545,7 +550,7 @@ function FeatureIconGridBordered({
                 ),
                 children: [
                   feature.title,
-                  /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                  /* @__PURE__ */ jsx("span", { className: cn("absolute -left-px hidden h-6 w-px md:inline-block", getAccentColor(background)) })
                 ]
               }
             ) : /* @__PURE__ */ jsxs(
@@ -557,7 +562,7 @@ function FeatureIconGridBordered({
                 ),
                 children: [
                   feature.title,
-                  /* @__PURE__ */ jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                  /* @__PURE__ */ jsx("span", { className: cn("absolute -left-px hidden h-6 w-px md:inline-block", getAccentColor(background)) })
                 ]
               }
             )),
@@ -585,7 +590,7 @@ function FeatureIconGridBordered({
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName, renderIcon]);
+  }, [featuresSlot, features, cardClassName, renderIcon, background]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/feature-icon-grid-muted.cjs

@@ -30,6 +30,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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -543,7 +569,7 @@ function FeatureIconGridMuted({
         children: [
           (feature.icon || feature.iconName) && renderFeatureIcon(feature),
           feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-semibold", feature.titleClassName), children: feature.title })),
-          feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }))
+          feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
         ]
       },
       index
@@ -562,7 +588,7 @@ function FeatureIconGridMuted({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-10", children: [
         (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }))
         ] }),
         (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", gridClassName), children: featuresContent })
       ] })

package/dist/feature-icon-grid-muted.js

@@ -9,6 +9,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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -522,7 +548,7 @@ function FeatureIconGridMuted({
         children: [
           (feature.icon || feature.iconName) && renderFeatureIcon(feature),
           feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-semibold", feature.titleClassName), children: feature.title })),
-          feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm text-muted-foreground", feature.descriptionClassName), children: feature.description }))
+          feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
         ]
       },
       index
@@ -541,7 +567,7 @@ function FeatureIconGridMuted({
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
         (title || description) && /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-xl flex-col gap-2.5 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-4xl font-semibold md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", descriptionClassName), children: description }))
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }))
         ] }),
         (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mx-auto grid max-w-7xl gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", gridClassName), children: featuresContent })
       ] })

package/dist/feature-icon-tabs-content.cjs

@@ -35,6 +35,54 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1134,7 +1182,8 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex shrink-0 items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                `data-[state=active]:${getBorderColor(background, "accent")}`,
                 tabTriggerClassName,
                 tab.className
               ),
@@ -1213,7 +1262,8 @@ function FeatureIconTabsContent({
                       "p",
                       {
                         className: cn(
-                          "text-muted-foreground lg:text-lg",
+                          "lg:text-lg",
+                          getTextColor(background, "muted"),
                           content.descriptionClassName
                         ),
                         children: content.description
@@ -1222,7 +1272,8 @@ function FeatureIconTabsContent({
                       "div",
                       {
                         className: cn(
-                          "text-muted-foreground lg:text-lg",
+                          "lg:text-lg",
+                          getTextColor(background, "muted"),
                           content.descriptionClassName
                         ),
                         children: content.description
@@ -1290,10 +1341,10 @@ function FeatureIconTabsContent({
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cn("text-muted-foreground", descriptionClassName),
+                  className: cn(getTextColor(background, "muted"), descriptionClassName),
                   children: description
                 }
               ))