@opensite/ui 0.4.8 → 0.4.9

package/dist/stats-animated-counter.cjs

@@ -459,6 +459,8 @@ var Section = React__namespace.default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -485,13 +487,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -531,19 +540,19 @@ function AnimatedStatItem({
   iconClassName
 }) {
   const count = useAnimatedCounter(stat.value, duration, isVisible);
-  const renderIcon = () => {
+  const iconContent = React.useMemo(() => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10", iconClassName), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 28, className: "text-primary" }) });
-  };
+  }, [stat.iconSlot, stat.icon, iconClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center", stat.className), children: [
-    renderIcon(),
+    iconContent,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-2 text-4xl font-bold md:text-5xl", valueClassName), children: [
       stat.prefix,
       count,
       stat.suffix
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
+    stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
   ] });
 }
 function StatsAnimatedCounter({
@@ -584,7 +593,8 @@ function StatsAnimatedCounter({
     }
     return () => observer.disconnect();
   }, []);
-  const renderStats = () => {
+  const hasHeaderContent = !!(heading || description);
+  const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -599,7 +609,7 @@ function StatsAnimatedCounter({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, animationDuration, isVisible, statValueClassName, statLabelClassName, statIconClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -610,11 +620,11 @@ function StatsAnimatedCounter({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
-          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: 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: descriptionClassName, children: description }))
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
+          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 }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: renderStats() })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
       ] })
     }
   );

package/dist/stats-animated-counter.d.cts

@@ -2,13 +2,14 @@ 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-CJYRLpXR.cjs';
+import './blocks-CFlYq-V7.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-OIpPF9yW.cjs';
 import 'class-variance-authority/types';
 
 /**
- * A stat with animated counter
+ * A stat with animated counter.
+ * Used to display metrics that animate from 0 to their target value.
  */
 interface AnimatedStat {
     /**
@@ -41,7 +42,8 @@ interface AnimatedStat {
     className?: string;
 }
 /**
- * Props for the StatsAnimatedCounter component
+ * Props for the StatsAnimatedCounter component.
+ * A stats section with animated number counters that trigger on scroll.
  */
 interface StatsAnimatedCounterProps {
     /**
@@ -132,10 +134,10 @@ interface StatsAnimatedCounterProps {
  * @example
  * ```tsx
  * <StatsAnimatedCounter
- *   heading="Our Impact in Numbers"
+ *   heading="Our Impact"
  *   stats={[
  *     { value: 500, suffix: "+", label: "Projects Completed", icon: "lucide/folder-check" },
- *     { value: 98, suffix: "%", label: "Client Satisfaction", icon: "lucide/heart" },
+ *     { value: 98, suffix: "%", label: "Satisfaction Rate", icon: "lucide/heart" },
  *   ]}
  *   animationDuration={2000}
  * />

package/dist/stats-animated-counter.d.ts

@@ -2,13 +2,14 @@ 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-BWc_7JNA.js';
+import './blocks-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 /**
- * A stat with animated counter
+ * A stat with animated counter.
+ * Used to display metrics that animate from 0 to their target value.
  */
 interface AnimatedStat {
     /**
@@ -41,7 +42,8 @@ interface AnimatedStat {
     className?: string;
 }
 /**
- * Props for the StatsAnimatedCounter component
+ * Props for the StatsAnimatedCounter component.
+ * A stats section with animated number counters that trigger on scroll.
  */
 interface StatsAnimatedCounterProps {
     /**
@@ -132,10 +134,10 @@ interface StatsAnimatedCounterProps {
  * @example
  * ```tsx
  * <StatsAnimatedCounter
- *   heading="Our Impact in Numbers"
+ *   heading="Our Impact"
  *   stats={[
  *     { value: 500, suffix: "+", label: "Projects Completed", icon: "lucide/folder-check" },
- *     { value: 98, suffix: "%", label: "Client Satisfaction", icon: "lucide/heart" },
+ *     { value: 98, suffix: "%", label: "Satisfaction Rate", icon: "lucide/heart" },
  *   ]}
  *   animationDuration={2000}
  * />

package/dist/stats-animated-counter.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -438,6 +438,8 @@ var Section = React__default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -464,13 +466,20 @@ var Section = React__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -510,19 +519,19 @@ function AnimatedStatItem({
   iconClassName
 }) {
   const count = useAnimatedCounter(stat.value, duration, isVisible);
-  const renderIcon = () => {
+  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" }) });
-  };
+  }, [stat.iconSlot, stat.icon, iconClassName]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center", stat.className), children: [
-    renderIcon(),
+    iconContent,
     /* @__PURE__ */ jsxs("div", { className: cn("mb-2 text-4xl font-bold md:text-5xl", valueClassName), children: [
       stat.prefix,
       count,
       stat.suffix
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
+    stat.label && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
   ] });
 }
 function StatsAnimatedCounter({
@@ -563,7 +572,8 @@ function StatsAnimatedCounter({
     }
     return () => observer.disconnect();
   }, []);
-  const renderStats = () => {
+  const hasHeaderContent = !!(heading || description);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsx(
@@ -578,7 +588,7 @@ function StatsAnimatedCounter({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, animationDuration, isVisible, statValueClassName, statLabelClassName, statIconClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -589,11 +599,11 @@ function StatsAnimatedCounter({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__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: 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: descriptionClassName, children: description }))
+        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: renderStats() })
+        (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

@@ -388,6 +388,8 @@ var Section = React3__namespace.default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -414,13 +416,20 @@ var Section = React3__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -471,12 +480,12 @@ function StatsBarComparison({
     }
     return () => observer.disconnect();
   }, [animate]);
-  const renderBadge = () => {
+  const badgeContent = React3.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderComparisons = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  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: [
@@ -501,7 +510,8 @@ function StatsBarComparison({
         ) })
       ] }, barIndex)) })
     ] }, groupIndex));
-  };
+  }, [comparisonsSlot, comparisons, isVisible, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -512,12 +522,12 @@ function StatsBarComparison({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-4xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        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 }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: renderComparisons() })
+        (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,13 +2,14 @@ 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-CJYRLpXR.cjs';
+import './blocks-CFlYq-V7.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-OIpPF9yW.cjs';
 import 'class-variance-authority/types';
 
 /**
- * A comparison bar item
+ * A comparison bar item.
+ * Used to display a single bar in a comparison visualization.
  */
 interface ComparisonBar {
     /**
@@ -33,7 +34,8 @@ interface ComparisonBar {
     className?: string;
 }
 /**
- * A comparison group with multiple bars
+ * A comparison group with multiple bars.
+ * Used to group related comparison bars together.
  */
 interface ComparisonGroup {
     /**
@@ -50,7 +52,8 @@ interface ComparisonGroup {
     className?: string;
 }
 /**
- * Props for the StatsBarComparison component
+ * Props for the StatsBarComparison component.
+ * A visual comparison section featuring animated horizontal bar charts.
  */
 interface StatsBarComparisonProps {
     /**

package/dist/stats-bar-comparison.d.ts

@@ -2,13 +2,14 @@ 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-BWc_7JNA.js';
+import './blocks-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 /**
- * A comparison bar item
+ * A comparison bar item.
+ * Used to display a single bar in a comparison visualization.
  */
 interface ComparisonBar {
     /**
@@ -33,7 +34,8 @@ interface ComparisonBar {
     className?: string;
 }
 /**
- * A comparison group with multiple bars
+ * A comparison group with multiple bars.
+ * Used to group related comparison bars together.
  */
 interface ComparisonGroup {
     /**
@@ -50,7 +52,8 @@ interface ComparisonGroup {
     className?: string;
 }
 /**
- * Props for the StatsBarComparison component
+ * Props for the StatsBarComparison component.
+ * A visual comparison section featuring animated horizontal bar charts.
  */
 interface StatsBarComparisonProps {
     /**

package/dist/stats-bar-comparison.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React3 from 'react';
-import React3__default from 'react';
+import React3__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
@@ -367,6 +367,8 @@ var Section = React3__default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -393,13 +395,20 @@ var Section = React3__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -450,12 +459,12 @@ function StatsBarComparison({
     }
     return () => observer.disconnect();
   }, [animate]);
-  const renderBadge = () => {
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderComparisons = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  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: [
@@ -480,7 +489,8 @@ function StatsBarComparison({
         ) })
       ] }, barIndex)) })
     ] }, groupIndex));
-  };
+  }, [comparisonsSlot, comparisons, isVisible, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -491,12 +501,12 @@ function StatsBarComparison({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-4xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        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 }))
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: renderComparisons() })
+        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
       ] })
     }
   );

package/dist/stats-card-group.cjs

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/stats/stats-card-group.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -460,6 +460,8 @@ var Section = React__namespace.default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -486,13 +488,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -519,7 +528,7 @@ function StatsCardGroup({
   avatarsClassName,
   optixFlowConfig
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = React.useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -532,8 +541,8 @@ function StatsCardGroup({
         children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
       }
     );
-  };
-  const renderAvatars = (stat) => {
+  }, [statIconClassName]);
+  const renderAvatars = React.useCallback((stat) => {
     if (!stat.showAvatars) return null;
     if (avatarsSlot) return avatarsSlot;
     if (!avatars || avatars.length === 0) return null;
@@ -556,8 +565,8 @@ function StatsCardGroup({
         avatars.length - 4
       ] })
     ] });
-  };
-  const renderStats = () => {
+  }, [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]);
+  const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -580,13 +589,13 @@ function StatsCardGroup({
               children: stat.value
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
+          stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
           renderAvatars(stat)
         ]
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statValueClassName, statLabelClassName, renderIcon, renderAvatars]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -596,7 +605,7 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: /* @__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: renderStats() }) }) })
+      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 }) }) })
     }
   );
 }