@opensite/ui 0.8.8 → 0.9.0

package/dist/stats-bar-comparison.js

@@ -11,6 +11,36 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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 getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 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",
   {
@@ -474,7 +504,9 @@ function StatsBarComparison({
       "div",
       {
         className: cn(
-          "rounded-xl border bg-card p-6",
+          "rounded-xl border p-6",
+          getNestedCardBg(background, "card"),
+          getNestedCardTextColor(background),
           group.className,
           groupCardClassName
         ),
@@ -495,7 +527,8 @@ function StatsBarComparison({
               "div",
               {
                 className: cn(
-                  "h-3 w-full overflow-hidden rounded-full bg-muted",
+                  "h-3 w-full overflow-hidden rounded-full",
+                  getNestedCardBg(background, "muted"),
                   barTrackClassName
                 ),
                 children: /* @__PURE__ */ jsx(
@@ -521,6 +554,7 @@ function StatsBarComparison({
   }, [
     comparisonsSlot,
     comparisons,
+    background,
     isVisible,
     groupCardClassName,
     groupTitleClassName,

package/dist/stats-card-group.cjs

@@ -31,6 +31,36 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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 getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -567,13 +597,17 @@ function StatsCardGroup({
           },
           avatarIndex
         )),
-        avatars.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-medium", children: [
+        avatars.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
+          "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background text-xs font-medium",
+          getNestedCardBg(background, "muted"),
+          getNestedCardTextColor(background)
+        ), children: [
           "+",
           avatars.length - 4
         ] })
       ] });
     },
-    [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]
+    [avatarsSlot, avatars, background, avatarsClassName, optixFlowConfig]
   );
   const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
@@ -621,7 +655,12 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+        "rounded-xl border p-8",
+        getNestedCardBg(background, "card"),
+        getNestedCardTextColor(background),
+        cardClassName
+      ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
     }
   );
 }

package/dist/stats-card-group.d.cts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/stats-card-group.d.ts

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

package/dist/stats-card-group.js

@@ -10,6 +10,36 @@ import { Img } from '@page-speed/img';
 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 getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -546,13 +576,17 @@ function StatsCardGroup({
           },
           avatarIndex
         )),
-        avatars.length > 4 && /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-medium", children: [
+        avatars.length > 4 && /* @__PURE__ */ jsxs("div", { className: cn(
+          "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background text-xs font-medium",
+          getNestedCardBg(background, "muted"),
+          getNestedCardTextColor(background)
+        ), children: [
           "+",
           avatars.length - 4
         ] })
       ] });
     },
-    [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]
+    [avatarsSlot, avatars, background, avatarsClassName, optixFlowConfig]
   );
   const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
@@ -600,7 +634,12 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
+      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn(
+        "rounded-xl border p-8",
+        getNestedCardBg(background, "card"),
+        getNestedCardTextColor(background),
+        cardClassName
+      ), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
     }
   );
 }

package/dist/stats-circular-progress.cjs

@@ -34,6 +34,36 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 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 getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 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",
   {
@@ -618,7 +648,9 @@ function StatsCircularProgress({
                   "div",
                   {
                     className: cn(
-                      "flex flex-col items-center justify-center rounded-xl border bg-card p-6",
+                      "flex flex-col items-center justify-center rounded-xl border p-6",
+                      getNestedCardBg(background, "card"),
+                      getNestedCardTextColor(background),
                       stat.className,
                       statCardClassName
                     ),
@@ -679,6 +711,7 @@ function StatsCircularProgress({
   }, [
     categoriesSlot,
     categories,
+    background,
     category,
     tabsClassName,
     statsClassName,

package/dist/stats-circular-progress.d.cts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.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';
 
 /**

package/dist/stats-circular-progress.d.ts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { P as PatternName } from './pattern-background-a7gKHzHy.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';
 
 /**

package/dist/stats-circular-progress.js

@@ -12,6 +12,36 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 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 getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 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",
   {
@@ -596,7 +626,9 @@ function StatsCircularProgress({
                   "div",
                   {
                     className: cn(
-                      "flex flex-col items-center justify-center rounded-xl border bg-card p-6",
+                      "flex flex-col items-center justify-center rounded-xl border p-6",
+                      getNestedCardBg(background, "card"),
+                      getNestedCardTextColor(background),
                       stat.className,
                       statCardClassName
                     ),
@@ -657,6 +689,7 @@ function StatsCircularProgress({
   }, [
     categoriesSlot,
     categories,
+    background,
     category,
     tabsClassName,
     statsClassName,

package/dist/stats-growth-timeline.cjs

@@ -32,6 +32,36 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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 getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 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",
   {
@@ -1019,7 +1049,11 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              milestone.year && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full bg-muted text-sm font-semibold", children: milestone.year }),
+              milestone.year && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+                "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
+                getNestedCardBg(background, "muted"),
+                getNestedCardTextColor(background)
+              ), children: milestone.year }),
               milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: milestone.description })),
               milestone.metric && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
@@ -1039,6 +1073,7 @@ function StatsGrowthTimeline({
   }, [
     milestonesSlot,
     milestones,
+    background,
     timelineClassName,
     milestoneClassName,
     renderMilestoneIcon
@@ -1049,7 +1084,12 @@ function StatsGrowthTimeline({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("mt-24 rounded-lg bg-muted p-8", currentStatsClassName),
+        className: cn(
+          "mt-24 rounded-lg p-8",
+          getNestedCardBg(background, "muted"),
+          getNestedCardTextColor(background),
+          currentStatsClassName
+        ),
         children: [
           currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", stat.className), children: [
@@ -1062,6 +1102,7 @@ function StatsGrowthTimeline({
   }, [
     currentStatsSlot,
     currentStats,
+    background,
     currentStatsHeading,
     currentStatsClassName
   ]);

package/dist/stats-growth-timeline.d.cts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig } from './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/stats-growth-timeline.d.ts

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

package/dist/stats-growth-timeline.js

@@ -11,6 +11,36 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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 getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 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",
   {
@@ -998,7 +1028,11 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              milestone.year && /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full bg-muted text-sm font-semibold", children: milestone.year }),
+              milestone.year && /* @__PURE__ */ jsx("div", { className: cn(
+                "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
+                getNestedCardBg(background, "muted"),
+                getNestedCardTextColor(background)
+              ), children: milestone.year }),
               milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
               milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
@@ -1018,6 +1052,7 @@ function StatsGrowthTimeline({
   }, [
     milestonesSlot,
     milestones,
+    background,
     timelineClassName,
     milestoneClassName,
     renderMilestoneIcon
@@ -1028,7 +1063,12 @@ function StatsGrowthTimeline({
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("mt-24 rounded-lg bg-muted p-8", currentStatsClassName),
+        className: cn(
+          "mt-24 rounded-lg p-8",
+          getNestedCardBg(background, "muted"),
+          getNestedCardTextColor(background),
+          currentStatsClassName
+        ),
         children: [
           currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
@@ -1041,6 +1081,7 @@ function StatsGrowthTimeline({
   }, [
     currentStatsSlot,
     currentStats,
+    background,
     currentStatsHeading,
     currentStatsClassName
   ]);

package/dist/stats-icon-cards.d.cts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { P as PatternName } from './pattern-background-a7gKHzHy.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';
 
 /**

package/dist/stats-icon-cards.d.ts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
-import { P as PatternName } from './pattern-background-a7gKHzHy.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';
 
 /**

package/dist/stats-impact-grid.cjs

@@ -32,6 +32,36 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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 getNestedCardTextColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-foreground" : "";
+}
 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",
   {
@@ -1085,7 +1115,12 @@ function StatsImpactGrid({
     if (comparisonSlot) return comparisonSlot;
     if (!hasComparisonContent) return null;
     const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-16 rounded-xl bg-muted p-8", comparisonClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+      "mb-16 rounded-xl p-8",
+      getNestedCardBg(background, "muted"),
+      getNestedCardTextColor(background),
+      comparisonClassName
+    ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: comparisonHeading })),
         comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: comparisonDescription })),
@@ -1127,6 +1162,7 @@ function StatsImpactGrid({
   }, [
     comparisonSlot,
     hasComparisonContent,
+    background,
     comparisonHeading,
     comparisonDescription,
     baselineValue,