@opensite/ui 0.5.2 → 0.5.4

package/dist/stats-card-group.js

@@ -493,8 +493,8 @@ function StatsCardGroup({
   statsSlot,
   avatars,
   avatarsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -508,44 +508,50 @@ function StatsCardGroup({
   avatarsClassName,
   optixFlowConfig
 }) {
-  const renderIcon = useCallback((stat) => {
-    if (stat.iconSlot) return stat.iconSlot;
-    if (!stat.icon) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10",
-          statIconClassName
-        ),
-        children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
-      }
-    );
-  }, [statIconClassName]);
-  const renderAvatars = useCallback((stat) => {
-    if (!stat.showAvatars) return null;
-    if (avatarsSlot) return avatarsSlot;
-    if (!avatars || avatars.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex -space-x-2", avatarsClassName), children: [
-      avatars.slice(0, 4).map((avatar, avatarIndex) => /* @__PURE__ */ jsx(
-        Img,
+  const renderIcon = useCallback(
+    (stat) => {
+      if (stat.iconSlot) return stat.iconSlot;
+      if (!stat.icon) return null;
+      return /* @__PURE__ */ jsx(
+        "div",
         {
-          src: avatar.src,
-          alt: avatar.alt,
           className: cn(
-            "h-8 w-8 rounded-full border-2 border-background object-cover",
-            avatar.className
+            "mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10",
+            statIconClassName
           ),
-          optixFlowConfig
-        },
-        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
-      ] })
-    ] });
-  }, [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]);
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
+        }
+      );
+    },
+    [statIconClassName]
+  );
+  const renderAvatars = useCallback(
+    (stat) => {
+      if (!stat.showAvatars) return null;
+      if (avatarsSlot) return avatarsSlot;
+      if (!avatars || avatars.length === 0) return null;
+      return /* @__PURE__ */ jsxs("div", { className: cn("flex -space-x-2", avatarsClassName), children: [
+        avatars.slice(0, 4).map((avatar, avatarIndex) => /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: avatar.src,
+            alt: avatar.alt,
+            className: cn(
+              "h-8 w-8 rounded-full border-2 border-background object-cover",
+              avatar.className
+            ),
+            optixFlowConfig
+          },
+          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
+        ] })
+      ] });
+    },
+    [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]
+  );
   const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
@@ -575,7 +581,14 @@ function StatsCardGroup({
       },
       index
     ));
-  }, [statsSlot, stats, statValueClassName, statLabelClassName, renderIcon, renderAvatars]);
+  }, [
+    statsSlot,
+    stats,
+    statValueClassName,
+    statLabelClassName,
+    renderIcon,
+    renderAvatars
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/stats-circular-progress.cjs

@@ -559,8 +559,8 @@ function StatsCircularProgress({
   categories,
   categoriesSlot,
   defaultCategory,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -597,39 +597,94 @@ function StatsCircularProgress({
           children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: cat.id, children: typeof cat.name === "string" ? `${cat.name} Metrics` : cat.name }, `select-${cat.id}`))
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: category, onValueChange: setCategory, className: cn("w-full", tabsClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-12 hidden justify-center md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: cat.id, children: typeof cat.name === "string" ? `${cat.name} Metrics` : cat.name }, cat.id)) }) }),
-        categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: cat.id, className: cat.className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: cat.stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn("flex flex-col items-center justify-center rounded-xl border bg-card p-6", stat.className, statCardClassName),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-4 flex items-center justify-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CircularProgressIndicator, { value: stat.value, size: 120 }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Tabs,
+        {
+          value: category,
+          onValueChange: setCategory,
+          className: cn("w-full", tabsClassName),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-12 hidden justify-center md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: cat.id, children: typeof cat.name === "string" ? `${cat.name} Metrics` : cat.name }, cat.id)) }) }),
+            categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: cat.id, className: cat.className, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+                  statsClassName
+                ),
+                children: cat.stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
                   {
                     className: cn(
-                      "text-2xl font-bold md:text-3xl",
-                      getColorClass(stat.value),
-                      statValueClassName
+                      "flex flex-col items-center justify-center rounded-xl border bg-card p-6",
+                      stat.className,
+                      statCardClassName
                     ),
                     children: [
-                      stat.value,
-                      stat.suffix
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-4 flex items-center justify-center", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          CircularProgressIndicator,
+                          {
+                            value: stat.value,
+                            size: 120
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            className: cn(
+                              "text-2xl font-bold md:text-3xl",
+                              getColorClass(stat.value),
+                              statValueClassName
+                            ),
+                            children: [
+                              stat.value,
+                              stat.suffix
+                            ]
+                          }
+                        ) })
+                      ] }),
+                      stat.label && /* @__PURE__ */ jsxRuntime.jsx(
+                        "h3",
+                        {
+                          className: cn(
+                            "text-center text-lg font-semibold md:text-xl",
+                            statLabelClassName
+                          ),
+                          children: stat.label
+                        }
+                      ),
+                      stat.info && /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "mt-1 text-center text-xs text-muted-foreground md:text-sm",
+                            statInfoClassName
+                          ),
+                          children: stat.info
+                        }
+                      )
                     ]
-                  }
-                ) })
-              ] }),
-              stat.label && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
-              stat.info && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
-            ]
-          },
-          index
-        )) }) }, cat.id))
-      ] })
+                  },
+                  index
+                ))
+              }
+            ) }, cat.id))
+          ]
+        }
+      )
     ] });
-  }, [categoriesSlot, categories, category, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName]);
+  }, [
+    categoriesSlot,
+    categories,
+    category,
+    tabsClassName,
+    statsClassName,
+    statCardClassName,
+    statValueClassName,
+    statLabelClassName,
+    statInfoClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -643,8 +698,32 @@ function StatsCircularProgress({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           badgeContent,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mt-3 max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName),
+              children: description
+            }
+          ))
         ] }),
         categoriesContent
       ] })

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

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

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

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import './blocks-k17uluAz.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/stats-circular-progress.js

@@ -537,8 +537,8 @@ function StatsCircularProgress({
   categories,
   categoriesSlot,
   defaultCategory,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -575,39 +575,94 @@ function StatsCircularProgress({
           children: categories.map((cat) => /* @__PURE__ */ jsx("option", { value: cat.id, children: typeof cat.name === "string" ? `${cat.name} Metrics` : cat.name }, `select-${cat.id}`))
         }
       ) }),
-      /* @__PURE__ */ jsxs(Tabs, { value: category, onValueChange: setCategory, className: cn("w-full", tabsClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-12 hidden justify-center md:flex", children: /* @__PURE__ */ jsx(TabsList, { children: categories.map((cat) => /* @__PURE__ */ jsx(TabsTrigger, { value: cat.id, children: typeof cat.name === "string" ? `${cat.name} Metrics` : cat.name }, cat.id)) }) }),
-        categories.map((cat) => /* @__PURE__ */ jsx(TabsContent, { value: cat.id, className: cat.className, children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: cat.stats.map((stat, index) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("flex flex-col items-center justify-center rounded-xl border bg-card p-6", stat.className, statCardClassName),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "relative mb-4 flex items-center justify-center", children: [
-                /* @__PURE__ */ jsx(CircularProgressIndicator, { value: stat.value, size: 120 }),
-                /* @__PURE__ */ jsx("div", { className: "absolute flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs(
-                  "span",
+      /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          value: category,
+          onValueChange: setCategory,
+          className: cn("w-full", tabsClassName),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-12 hidden justify-center md:flex", children: /* @__PURE__ */ jsx(TabsList, { children: categories.map((cat) => /* @__PURE__ */ jsx(TabsTrigger, { value: cat.id, children: typeof cat.name === "string" ? `${cat.name} Metrics` : cat.name }, cat.id)) }) }),
+            categories.map((cat) => /* @__PURE__ */ jsx(TabsContent, { value: cat.id, className: cat.className, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+                  statsClassName
+                ),
+                children: cat.stats.map((stat, index) => /* @__PURE__ */ jsxs(
+                  "div",
                   {
                     className: cn(
-                      "text-2xl font-bold md:text-3xl",
-                      getColorClass(stat.value),
-                      statValueClassName
+                      "flex flex-col items-center justify-center rounded-xl border bg-card p-6",
+                      stat.className,
+                      statCardClassName
                     ),
                     children: [
-                      stat.value,
-                      stat.suffix
+                      /* @__PURE__ */ jsxs("div", { className: "relative mb-4 flex items-center justify-center", children: [
+                        /* @__PURE__ */ jsx(
+                          CircularProgressIndicator,
+                          {
+                            value: stat.value,
+                            size: 120
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { className: "absolute flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: cn(
+                              "text-2xl font-bold md:text-3xl",
+                              getColorClass(stat.value),
+                              statValueClassName
+                            ),
+                            children: [
+                              stat.value,
+                              stat.suffix
+                            ]
+                          }
+                        ) })
+                      ] }),
+                      stat.label && /* @__PURE__ */ jsx(
+                        "h3",
+                        {
+                          className: cn(
+                            "text-center text-lg font-semibold md:text-xl",
+                            statLabelClassName
+                          ),
+                          children: stat.label
+                        }
+                      ),
+                      stat.info && /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "mt-1 text-center text-xs text-muted-foreground md:text-sm",
+                            statInfoClassName
+                          ),
+                          children: stat.info
+                        }
+                      )
                     ]
-                  }
-                ) })
-              ] }),
-              stat.label && /* @__PURE__ */ jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
-              stat.info && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
-            ]
-          },
-          index
-        )) }) }, cat.id))
-      ] })
+                  },
+                  index
+                ))
+              }
+            ) }, cat.id))
+          ]
+        }
+      )
     ] });
-  }, [categoriesSlot, categories, category, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName]);
+  }, [
+    categoriesSlot,
+    categories,
+    category,
+    tabsClassName,
+    statsClassName,
+    statCardClassName,
+    statValueClassName,
+    statLabelClassName,
+    statInfoClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
@@ -621,8 +676,32 @@ function StatsCircularProgress({
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           badgeContent,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mt-3 max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName),
+              children: description
+            }
+          ))
         ] }),
         categoriesContent
       ] })

package/dist/stats-growth-timeline.cjs

@@ -975,8 +975,8 @@ function StatsGrowthTimeline({
   futureSlot,
   actions,
   actionsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -999,14 +999,7 @@ function StatsGrowthTimeline({
   const renderMilestoneIcon = React.useCallback((milestone) => {
     if (milestone.iconSlot) return milestone.iconSlot;
     if (!milestone.icon) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(
-      DynamicIcon,
-      {
-        name: milestone.icon,
-        size: 32,
-        className: "text-primary"
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: milestone.icon, size: 32, className: "text-primary" }) });
   }, []);
   const milestonesContent = React.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
@@ -1041,18 +1034,35 @@ function StatsGrowthTimeline({
         milestone.id
       )) })
     ] });
-  }, [milestonesSlot, milestones, timelineClassName, milestoneClassName, renderMilestoneIcon]);
+  }, [
+    milestonesSlot,
+    milestones,
+    timelineClassName,
+    milestoneClassName,
+    renderMilestoneIcon
+  ]);
   const currentStatsContent = React.useMemo(() => {
     if (currentStatsSlot) return currentStatsSlot;
     if (!currentStats || currentStats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-24 rounded-lg bg-muted p-8", 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: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-        stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
-      ] }, index)) })
-    ] });
-  }, [currentStatsSlot, currentStats, currentStatsHeading, currentStatsClassName]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("mt-24 rounded-lg bg-muted p-8", 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: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
+            stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+          ] }, index)) })
+        ]
+      }
+    );
+  }, [
+    currentStatsSlot,
+    currentStats,
+    currentStatsHeading,
+    currentStatsClassName
+  ]);
   const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -1073,13 +1083,21 @@ function StatsGrowthTimeline({
   }, [actionsSlot, actions]);
   const futureContent = React.useMemo(() => {
     if (futureSlot) return futureSlot;
-    if (!futureHeading && !futureDescription && (!actions || actions.length === 0)) return null;
+    if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
+      return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: futureHeading })),
       futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
       actionsContent
     ] });
-  }, [futureSlot, futureHeading, futureDescription, futureClassName, actionsContent, actions]);
+  }, [
+    futureSlot,
+    futureHeading,
+    futureDescription,
+    futureClassName,
+    actionsContent,
+    actions
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -1093,8 +1111,26 @@ function StatsGrowthTimeline({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           badgeContent,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-3xl text-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
         ] }),
         milestonesContent,
         currentStatsContent,

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

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

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

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { A as ActionConfig } from './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**