@opensite/ui 0.8.9 → 0.9.0

package/dist/faq-gradient-categories.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";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -614,7 +640,7 @@ function FaqGradientCategories({
                   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 })
                   }
                 )
               ]
@@ -632,7 +658,8 @@ function FaqGradientCategories({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -673,7 +700,8 @@ function FaqGradientCategories({
                     "p",
                     {
                       className: cn(
-                        "text-muted-foreground lg:text-lg",
+                        getTextColor(background, "muted"),
+                        "lg:text-lg",
                         descriptionClassName
                       ),
                       children: description

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.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface FaqBenefit {

package/dist/faq-icon-benefits.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface FaqBenefit {

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.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface FaqItem {

package/dist/faq-muted-cards.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface FaqItem {

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.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface FaqItem {

package/dist/faq-numbered-grid.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface FaqItem {

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.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface FaqItem {

package/dist/faq-numbered-list.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface FaqItem {