@opensite/ui 0.5.2 → 0.5.4

package/dist/stats-animated-counter.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-animated-counter.js

@@ -523,17 +523,38 @@ function AnimatedStatItem({
   const iconContent = useMemo(() => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10", iconClassName), children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 28, className: "text-primary" }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10",
+          iconClassName
+        ),
+        children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 28, className: "text-primary" })
+      }
+    );
   }, [stat.iconSlot, stat.icon, iconClassName]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center", stat.className), children: [
-    iconContent,
-    /* @__PURE__ */ jsxs("div", { className: cn("mb-2 text-4xl font-bold md:text-5xl", valueClassName), children: [
-      stat.prefix,
-      count,
-      stat.suffix
-    ] }),
-    stat.label && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col items-center text-center", stat.className),
+      children: [
+        iconContent,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("mb-2 text-4xl font-bold md:text-5xl", valueClassName),
+            children: [
+              stat.prefix,
+              count,
+              stat.suffix
+            ]
+          }
+        ),
+        stat.label && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
+      ]
+    }
+  );
 }
 function StatsAnimatedCounter({
   heading,
@@ -541,8 +562,8 @@ function StatsAnimatedCounter({
   stats,
   statsSlot,
   animationDuration = 2e3,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -589,7 +610,15 @@ function StatsAnimatedCounter({
       },
       index
     ));
-  }, [statsSlot, stats, animationDuration, isVisible, statValueClassName, statLabelClassName, statIconClassName]);
+  }, [
+    statsSlot,
+    stats,
+    animationDuration,
+    isVisible,
+    statValueClassName,
+    statLabelClassName,
+    statIconClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -599,13 +628,47 @@ function StatsAnimatedCounter({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
-        ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: sectionRef,
+          className: cn("mx-auto max-w-5xl", containerClassName),
+          children: [
+            hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-4 text-3xl font-bold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto max-w-2xl text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+            ] }),
+            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+                  statsClassName
+                ),
+                children: statsContent
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/stats-bar-comparison.cjs

@@ -445,8 +445,8 @@ function StatsBarComparison({
   comparisons,
   comparisonsSlot,
   animate = true,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -489,29 +489,64 @@ function StatsBarComparison({
   const comparisonsContent = React3.useMemo(() => {
     if (comparisonsSlot) return comparisonsSlot;
     if (!comparisons || comparisons.length === 0) return null;
-    return comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border bg-card p-6", group.className, groupCardClassName), children: [
-      group.title && (typeof group.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-6 text-lg font-semibold", groupTitleClassName), children: group.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bar.className, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-bold", barValueClassName), children: bar.displayValue })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-3 w-full overflow-hidden rounded-full bg-muted", barTrackClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "h-full rounded-full transition-all duration-1000 ease-out",
-              bar.color || "bg-primary"
-            ),
-            style: {
-              width: isVisible ? `${bar.value}%` : "0%",
-              transitionDelay: `${groupIndex * 100 + barIndex * 50}ms`
+    return comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-xl border bg-card p-6",
+          group.className,
+          groupCardClassName
+        ),
+        children: [
+          group.title && (typeof group.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: cn("mb-6 text-lg font-semibold", groupTitleClassName),
+              children: group.title
             }
-          }
-        ) })
-      ] }, barIndex)) })
-    ] }, groupIndex));
-  }, [comparisonsSlot, comparisons, isVisible, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName]);
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bar.className, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-bold", barValueClassName), children: bar.displayValue })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "h-3 w-full overflow-hidden rounded-full bg-muted",
+                  barTrackClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full rounded-full transition-all duration-1000 ease-out",
+                      bar.color || "bg-primary"
+                    ),
+                    style: {
+                      width: isVisible ? `${bar.value}%` : "0%",
+                      transitionDelay: `${groupIndex * 100 + barIndex * 50}ms`
+                    }
+                  }
+                )
+              }
+            )
+          ] }, barIndex)) })
+        ]
+      },
+      groupIndex
+    ));
+  }, [
+    comparisonsSlot,
+    comparisons,
+    isVisible,
+    groupCardClassName,
+    groupTitleClassName,
+    barLabelClassName,
+    barValueClassName,
+    barTrackClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -522,14 +557,39 @@ function StatsBarComparison({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-4xl", 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("mb-4 text-3xl font-bold md:text-4xl", 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-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
-        ] }),
-        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: sectionRef,
+          className: cn("mx-auto max-w-4xl", 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(
+                    "mb-4 text-3xl font-bold md:text-4xl",
+                    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-2xl text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+            ] }),
+            (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
+          ]
+        }
+      )
     }
   );
 }

package/dist/stats-bar-comparison.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-bar-comparison.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-bar-comparison.js

@@ -424,8 +424,8 @@ function StatsBarComparison({
   comparisons,
   comparisonsSlot,
   animate = true,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -468,29 +468,64 @@ function StatsBarComparison({
   const comparisonsContent = useMemo(() => {
     if (comparisonsSlot) return comparisonsSlot;
     if (!comparisons || comparisons.length === 0) return null;
-    return comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border bg-card p-6", group.className, groupCardClassName), children: [
-      group.title && (typeof group.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-6 text-lg font-semibold", groupTitleClassName), children: group.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
-      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxs("div", { className: bar.className, children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
-          /* @__PURE__ */ jsx("span", { className: cn("text-sm font-bold", barValueClassName), children: bar.displayValue })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("h-3 w-full overflow-hidden rounded-full bg-muted", barTrackClassName), children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "h-full rounded-full transition-all duration-1000 ease-out",
-              bar.color || "bg-primary"
-            ),
-            style: {
-              width: isVisible ? `${bar.value}%` : "0%",
-              transitionDelay: `${groupIndex * 100 + barIndex * 50}ms`
+    return comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-xl border bg-card p-6",
+          group.className,
+          groupCardClassName
+        ),
+        children: [
+          group.title && (typeof group.title === "string" ? /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: cn("mb-6 text-lg font-semibold", groupTitleClassName),
+              children: group.title
             }
-          }
-        ) })
-      ] }, barIndex)) })
-    ] }, groupIndex));
-  }, [comparisonsSlot, comparisons, isVisible, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName]);
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
+          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxs("div", { className: bar.className, children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
+              /* @__PURE__ */ jsx("span", { className: cn("text-sm font-bold", barValueClassName), children: bar.displayValue })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "h-3 w-full overflow-hidden rounded-full bg-muted",
+                  barTrackClassName
+                ),
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full rounded-full transition-all duration-1000 ease-out",
+                      bar.color || "bg-primary"
+                    ),
+                    style: {
+                      width: isVisible ? `${bar.value}%` : "0%",
+                      transitionDelay: `${groupIndex * 100 + barIndex * 50}ms`
+                    }
+                  }
+                )
+              }
+            )
+          ] }, barIndex)) })
+        ]
+      },
+      groupIndex
+    ));
+  }, [
+    comparisonsSlot,
+    comparisons,
+    isVisible,
+    groupCardClassName,
+    groupTitleClassName,
+    barLabelClassName,
+    barValueClassName,
+    barTrackClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
@@ -501,14 +536,39 @@ function StatsBarComparison({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-4xl", containerClassName), children: [
-        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          badgeContent,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
-        ] }),
-        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: sectionRef,
+          className: cn("mx-auto max-w-4xl", containerClassName),
+          children: [
+            hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+              badgeContent,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-4 text-3xl font-bold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto max-w-2xl text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+            ] }),
+            (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
+          ]
+        }
+      )
     }
   );
 }

package/dist/stats-card-group.cjs

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

package/dist/stats-card-group.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 { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { O as OptixFlowConfig } 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-card-group.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 { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**