@opensite/ui 0.4.7 → 0.4.9

package/dist/services-list-feature-spotlight.cjs

@@ -469,11 +469,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -500,13 +502,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
+              ]
+            }
+          )
         ]
       }
     );

package/dist/services-list-feature-spotlight.d.cts

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

package/dist/services-list-feature-spotlight.d.ts

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

package/dist/services-list-feature-spotlight.js

@@ -448,11 +448,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -479,13 +481,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
+              ]
+            }
+          )
         ]
       }
     );

package/dist/stats-animated-counter.cjs

@@ -454,11 +454,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     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-Cohq4eio.cjs';
+import './blocks-CFlYq-V7.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.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-k17uluAz.js';
+import './blocks-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.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';
@@ -433,11 +433,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     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

@@ -383,11 +383,13 @@ var Section = React3__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     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-Cohq4eio.cjs';
+import './blocks-CFlYq-V7.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.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-k17uluAz.js';
+import './blocks-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.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 {
     /**