@opensite/ui 0.8.9 → 0.9.1

package/dist/faq-bordered-badge.js

@@ -12,6 +12,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",
   {
@@ -636,7 +662,7 @@ function FaqBorderedBadge({
               /* @__PURE__ */ jsx(
                 AccordionContent,
                 {
-                  className: cn("text-muted-foreground", accordionContentClassName),
+                  className: cn(getTextColor(background, "muted"), accordionContentClassName),
                   children: item.answer
                 }
               )
@@ -652,7 +678,8 @@ function FaqBorderedBadge({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -700,7 +727,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

package/dist/faq-card-categories.cjs

@@ -32,6 +32,58 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+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 Card({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -684,7 +736,8 @@ function FaqCardCategories({
                           AccordionContent,
                           {
                             className: cn(
-                              "text-muted-foreground text-sm",
+                              getTextColor(background, "muted"),
+                              "text-sm",
                               accordionContentClassName
                             ),
                             children: item.answer
@@ -711,7 +764,8 @@ function FaqCardCategories({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -726,7 +780,8 @@ function FaqCardCategories({
         "div",
         {
           className: cn(
-            "relative rounded-lg bg-muted/50 p-8 md:p-12 lg:p-16",
+            "relative rounded-lg p-8 md:p-12 lg:p-16",
+            getNestedCardBg(background, "muted"),
             contentWrapperClassName
           ),
           style: {
@@ -755,7 +810,8 @@ function FaqCardCategories({
                     "p",
                     {
                       className: cn(
-                        "text-muted-foreground lg:text-lg",
+                        getTextColor(background, "muted"),
+                        "lg:text-lg",
                         descriptionClassName
                       ),
                       children: description

package/dist/faq-card-categories.js

@@ -10,6 +10,58 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getNestedCardBg(parentBg, variant = "muted", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "muted":
+        return "bg-background";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-background/50";
+    }
+  } else {
+    switch (variant) {
+      case "muted":
+        return "bg-muted";
+      case "card":
+        return "bg-card";
+      case "accent":
+        return "bg-accent";
+      case "subtle":
+        return "bg-muted/50";
+    }
+  }
+}
+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 Card({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -662,7 +714,8 @@ function FaqCardCategories({
                           AccordionContent,
                           {
                             className: cn(
-                              "text-muted-foreground text-sm",
+                              getTextColor(background, "muted"),
+                              "text-sm",
                               accordionContentClassName
                             ),
                             children: item.answer
@@ -689,7 +742,8 @@ function FaqCardCategories({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -704,7 +758,8 @@ function FaqCardCategories({
         "div",
         {
           className: cn(
-            "relative rounded-lg bg-muted/50 p-8 md:p-12 lg:p-16",
+            "relative rounded-lg p-8 md:p-12 lg:p-16",
+            getNestedCardBg(background, "muted"),
             contentWrapperClassName
           ),
           style: {
@@ -733,7 +788,8 @@ function FaqCardCategories({
                     "p",
                     {
                       className: cn(
-                        "text-muted-foreground lg:text-lg",
+                        getTextColor(background, "muted"),
+                        "lg:text-lg",
                         descriptionClassName
                       ),
                       children: description

package/dist/faq-categorized-sections.cjs

@@ -32,6 +32,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,
@@ -635,7 +661,7 @@ function FaqCategorizedSections({
                   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 })
                   }
                 )
               ]
@@ -653,7 +679,8 @@ function FaqCategorizedSections({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -687,7 +714,8 @@ function FaqCategorizedSections({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-categorized-sections.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,
@@ -613,7 +639,7 @@ function FaqCategorizedSections({
                   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 })
                   }
                 )
               ]
@@ -631,7 +657,8 @@ function FaqCategorizedSections({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -665,7 +692,8 @@ function FaqCategorizedSections({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-centered-accordion.cjs

@@ -32,6 +32,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,
@@ -621,7 +647,7 @@ function FaqCenteredAccordion({
                 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 })
                 }
               )
             ]
@@ -636,7 +662,8 @@ function FaqCenteredAccordion({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -670,7 +697,8 @@ function FaqCenteredAccordion({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-centered-accordion.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,
@@ -599,7 +625,7 @@ function FaqCenteredAccordion({
                 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 })
                 }
               )
             ]
@@ -614,7 +640,8 @@ function FaqCenteredAccordion({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -648,7 +675,8 @@ function FaqCenteredAccordion({
                 "p",
                 {
                   className: cn(
-                    "text-muted-foreground lg:text-lg",
+                    getTextColor(background, "muted"),
+                    "lg:text-lg",
                     descriptionClassName
                   ),
                   children: description

package/dist/faq-gradient-categories.cjs

@@ -32,6 +32,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,
@@ -636,7 +662,7 @@ function FaqGradientCategories({
                   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 })
                   }
                 )
               ]
@@ -654,7 +680,8 @@ function FaqGradientCategories({
     accordionClassName,
     accordionItemClassName,
     accordionTriggerClassName,
-    accordionContentClassName
+    accordionContentClassName,
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -695,7 +722,8 @@ function FaqGradientCategories({
                     "p",
                     {
                       className: cn(
-                        "text-muted-foreground lg:text-lg",
+                        getTextColor(background, "muted"),
+                        "lg:text-lg",
                         descriptionClassName
                       ),
                       children: description

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