@opensite/ui 0.8.9 → 0.9.1

package/dist/faq-icon-benefits.cjs

@@ -30,6 +30,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,
@@ -554,14 +584,16 @@ function FaqIconBenefits({
                 "div",
                 {
                   className: cn(
-                    "flex size-12 items-center justify-center rounded-full bg-primary/10",
+                    "flex size-12 items-center justify-center rounded-full",
+                    getAccentColor(background),
+                    "opacity-10",
                     iconWrapperClassName
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,
                     {
                       name: benefit.icon,
-                      className: cn("size-6 text-primary", iconClassName)
+                      className: cn("size-6", getAccentColor(background), iconClassName)
                     }
                   )
                 }
@@ -571,7 +603,8 @@ function FaqIconBenefits({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground text-sm",
+                    getTextColor(background, "muted"),
+                    "text-sm",
                     benefitDescriptionClassName
                   ),
                   children: benefit.description
@@ -591,7 +624,8 @@ function FaqIconBenefits({
     iconWrapperClassName,
     iconClassName,
     titleClassName,
-    benefitDescriptionClassName
+    benefitDescriptionClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -625,7 +659,8 @@ function FaqIconBenefits({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-icon-benefits.js

@@ -9,6 +9,36 @@ 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 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,
@@ -533,14 +563,16 @@ function FaqIconBenefits({
                 "div",
                 {
                   className: cn(
-                    "flex size-12 items-center justify-center rounded-full bg-primary/10",
+                    "flex size-12 items-center justify-center rounded-full",
+                    getAccentColor(background),
+                    "opacity-10",
                     iconWrapperClassName
                   ),
                   children: /* @__PURE__ */ jsx(
                     DynamicIcon,
                     {
                       name: benefit.icon,
-                      className: cn("size-6 text-primary", iconClassName)
+                      className: cn("size-6", getAccentColor(background), iconClassName)
                     }
                   )
                 }
@@ -550,7 +582,8 @@ function FaqIconBenefits({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground text-sm",
+                    getTextColor(background, "muted"),
+                    "text-sm",
                     benefitDescriptionClassName
                   ),
                   children: benefit.description
@@ -570,7 +603,8 @@ function FaqIconBenefits({
     iconWrapperClassName,
     iconClassName,
     titleClassName,
-    benefitDescriptionClassName
+    benefitDescriptionClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -604,7 +638,8 @@ function FaqIconBenefits({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-muted-cards.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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -652,7 +678,7 @@ function FaqMutedCards({
               /* @__PURE__ */ jsxRuntime.jsx(
                 AccordionContent,
                 {
-                  className: cn("text-muted-foreground", accordionContentClassName),
+                  className: cn(getTextColor(background, "muted"), accordionContentClassName),
                   children: item.answer
                 }
               )
@@ -668,7 +694,8 @@ function FaqMutedCards({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,

package/dist/faq-muted-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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -630,7 +656,7 @@ function FaqMutedCards({
               /* @__PURE__ */ jsx(
                 AccordionContent,
                 {
-                  className: cn("text-muted-foreground", accordionContentClassName),
+                  className: cn(getTextColor(background, "muted"), accordionContentClassName),
                   children: item.answer
                 }
               )
@@ -646,7 +672,8 @@ function FaqMutedCards({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,

package/dist/faq-numbered-grid.cjs

@@ -44,6 +44,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 maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -476,7 +502,8 @@ function FaqNumberedGrid({
                   "p",
                   {
                     className: cn(
-                      "text-muted-foreground text-sm",
+                      getTextColor(background, "muted"),
+                      "text-sm",
                       answerClassName
                     ),
                     children: item.answer
@@ -496,7 +523,8 @@ function FaqNumberedGrid({
     itemClassName,
     numberClassName,
     questionClassName,
-    answerClassName
+    answerClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -530,7 +558,8 @@ function FaqNumberedGrid({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-numbered-grid.js

@@ -38,6 +38,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 maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -470,7 +496,8 @@ function FaqNumberedGrid({
                   "p",
                   {
                     className: cn(
-                      "text-muted-foreground text-sm",
+                      getTextColor(background, "muted"),
+                      "text-sm",
                       answerClassName
                     ),
                     children: item.answer
@@ -490,7 +517,8 @@ function FaqNumberedGrid({
     itemClassName,
     numberClassName,
     questionClassName,
-    answerClassName
+    answerClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -524,7 +552,8 @@ function FaqNumberedGrid({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-numbered-list.cjs

@@ -46,6 +46,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",
   {
@@ -511,7 +537,8 @@ function FaqNumberedList({
                   "p",
                   {
                     className: cn(
-                      "text-muted-foreground text-sm",
+                      getTextColor(background, "muted"),
+                      "text-sm",
                       answerClassName
                     ),
                     children: item.answer
@@ -531,7 +558,8 @@ function FaqNumberedList({
     itemClassName,
     numberClassName,
     questionClassName,
-    answerClassName
+    answerClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -565,7 +593,8 @@ function FaqNumberedList({
               "p",
               {
                 className: cn(
-                  "text-muted-foreground mt-6 max-w-xl text-base md:text-lg",
+                  getTextColor(background, "muted"),
+                  "mt-6 max-w-xl text-base md:text-lg",
                   descriptionClassName
                 ),
                 children: description

package/dist/faq-numbered-list.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";
+    }
+  }
+}
 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",
   {
@@ -505,7 +531,8 @@ function FaqNumberedList({
                   "p",
                   {
                     className: cn(
-                      "text-muted-foreground text-sm",
+                      getTextColor(background, "muted"),
+                      "text-sm",
                       answerClassName
                     ),
                     children: item.answer
@@ -525,7 +552,8 @@ function FaqNumberedList({
     itemClassName,
     numberClassName,
     questionClassName,
-    answerClassName
+    answerClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -559,7 +587,8 @@ function FaqNumberedList({
               "p",
               {
                 className: cn(
-                  "text-muted-foreground mt-6 max-w-xl text-base md:text-lg",
+                  getTextColor(background, "muted"),
+                  "mt-6 max-w-xl text-base md:text-lg",
                   descriptionClassName
                 ),
                 children: description

package/dist/faq-profile-sidebar.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 svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1051,7 +1077,7 @@ function FaqProfileSidebar({
             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 })
             }
           )
         ]
@@ -1064,7 +1090,8 @@ function FaqProfileSidebar({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   const profileSectionContent = React.useMemo(() => {
     if (profileSlot) return profileSlot;
@@ -1088,7 +1115,8 @@ function FaqProfileSidebar({
             "p",
             {
               className: cn(
-                "text-muted-foreground text-sm",
+                getTextColor(background, "muted"),
+                "text-sm",
                 profileRoleClassName
               ),
               children: profileRole
@@ -1100,7 +1128,8 @@ function FaqProfileSidebar({
         "p",
         {
           className: cn(
-            "text-muted-foreground mt-4 text-sm",
+            getTextColor(background, "muted"),
+            "mt-4 text-sm",
             profileDescriptionClassName
           ),
           children: profileDescription
@@ -1144,7 +1173,8 @@ function FaqProfileSidebar({
     profileRoleClassName,
     profileDescriptionClassName,
     contactSectionClassName,
-    optixFlowConfig
+    optixFlowConfig,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -1179,7 +1209,7 @@ function FaqProfileSidebar({
                   "p",
                   {
                     className: cn(
-                      "text-muted-foreground",
+                      getTextColor(background, "muted"),
                       descriptionClassName
                     ),
                     children: description