@opensite/ui 0.4.8 → 0.5.0

package/dist/stats-growth-timeline.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 { A as ActionConfig } from './blocks-CJYRLpXR.cjs';
+import { A as ActionConfig } from './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 /**
- * A milestone in the company timeline
+ * A milestone in a timeline.
+ * Used to display key events or achievements along a timeline.
  */
 interface Milestone {
     /**
@@ -48,7 +49,8 @@ interface Milestone {
     className?: string;
 }
 /**
- * Current stat for the "Where We Are Today" section
+ * A current stat for summary sections.
+ * Used to display current metrics in a summary section.
  */
 interface CurrentStat {
     /**
@@ -65,7 +67,8 @@ interface CurrentStat {
     className?: string;
 }
 /**
- * Props for the StatsGrowthTimeline component
+ * Props for the StatsGrowthTimeline component.
+ * A vertical timeline showcasing milestones and growth journey.
  */
 interface StatsGrowthTimelineProps {
     /**

package/dist/stats-growth-timeline.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 { A as ActionConfig } from './blocks-BWc_7JNA.js';
+import { A as ActionConfig } from './blocks-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 /**
- * A milestone in the company timeline
+ * A milestone in a timeline.
+ * Used to display key events or achievements along a timeline.
  */
 interface Milestone {
     /**
@@ -48,7 +49,8 @@ interface Milestone {
     className?: string;
 }
 /**
- * Current stat for the "Where We Are Today" section
+ * A current stat for summary sections.
+ * Used to display current metrics in a summary section.
  */
 interface CurrentStat {
     /**
@@ -65,7 +67,8 @@ interface CurrentStat {
     className?: string;
 }
 /**
- * Props for the StatsGrowthTimeline component
+ * Props for the StatsGrowthTimeline component.
+ * A vertical timeline showcasing milestones and growth journey.
  */
 interface StatsGrowthTimelineProps {
     /**

package/dist/stats-growth-timeline.js

@@ -1,13 +1,13 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default from 'react';
 
-// lib/utils.ts
+// components/blocks/stats/stats-growth-timeline.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -861,7 +861,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -885,11 +886,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -916,13 +919,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -938,9 +948,9 @@ function StatsGrowthTimeline({
   milestonesSlot,
   currentStats,
   currentStatsSlot,
-  currentStatsHeading = "Where We Are Today",
-  futureHeading = "The Future Is Even Brighter",
-  futureDescription = "We're just getting started. Our roadmap includes expansion to new markets, enhanced product offerings, and continued innovation to serve our growing customer base.",
+  currentStatsHeading,
+  futureHeading,
+  futureDescription,
   futureSlot,
   actions,
   actionsSlot,
@@ -960,12 +970,12 @@ function StatsGrowthTimeline({
   currentStatsClassName,
   futureClassName
 }) {
-  const renderBadge = () => {
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderMilestoneIcon = (milestone) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderMilestoneIcon = useCallback((milestone) => {
     if (milestone.iconSlot) return milestone.iconSlot;
     if (!milestone.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(
@@ -976,8 +986,8 @@ function StatsGrowthTimeline({
         className: "text-primary"
       }
     ) });
-  };
-  const renderMilestones = () => {
+  }, []);
+  const milestonesContent = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative mt-24", timelineClassName), children: [
@@ -993,14 +1003,14 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full bg-muted text-sm font-semibold", children: milestone.year }),
+              milestone.year && /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full bg-muted text-sm font-semibold", children: milestone.year }),
               milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
+              milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
                 renderMilestoneIcon(milestone),
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
-                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
+                  milestone.metric.label && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
                 ] })
               ] })
             ] }),
@@ -1010,19 +1020,19 @@ function StatsGrowthTimeline({
         milestone.id
       )) })
     ] });
-  };
-  const renderCurrentStats = () => {
+  }, [milestonesSlot, milestones, timelineClassName, milestoneClassName, renderMilestoneIcon]);
+  const currentStatsContent = useMemo(() => {
     if (currentStatsSlot) return currentStatsSlot;
     if (!currentStats || currentStats.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-24 rounded-lg bg-muted p-8", currentStatsClassName), children: [
       currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+        stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
       ] }, index)) })
     ] });
-  };
-  const renderActions = () => {
+  }, [currentStatsSlot, currentStats, currentStatsHeading, currentStatsClassName]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => /* @__PURE__ */ jsxs(
@@ -1039,16 +1049,17 @@ function StatsGrowthTimeline({
       },
       index
     ));
-  };
-  const renderFuture = () => {
+  }, [actionsSlot, actions]);
+  const futureContent = useMemo(() => {
     if (futureSlot) return futureSlot;
     if (!futureHeading && !futureDescription && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: futureHeading })),
       futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [futureSlot, futureHeading, futureDescription, futureClassName, actionsContent, actions]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1059,14 +1070,14 @@ function StatsGrowthTimeline({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", 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-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
         ] }),
-        renderMilestones(),
-        renderCurrentStats(),
-        renderFuture()
+        milestonesContent,
+        currentStatsContent,
+        futureContent
       ] })
     }
   );

package/dist/stats-icon-cards.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');
 
 function _interopNamespace(e) {
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/stats/stats-icon-cards.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -430,7 +430,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -454,11 +455,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -485,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -520,7 +530,7 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = React.useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -531,8 +541,8 @@ function StatsIconCards({
         className: "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, [statIconClassName]);
+  const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -541,9 +551,9 @@ function StatsIconCards({
         className: cn("relative overflow-hidden rounded-xl border bg-background p-6", stat.className, statCardClassName),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
+            stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
+            stat.growth && /* @__PURE__ */ jsxRuntime.jsxs(
               "p",
               {
                 className: cn(
@@ -570,7 +580,8 @@ function StatsIconCards({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -581,11 +592,11 @@ function StatsIconCards({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
           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("mt-3 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3", 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-icon-cards.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-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 /**
- * A stat item with icon, value, label, and growth indicator
+ * A stat item with icon, value, label, and growth indicator.
+ * Used to display metrics with visual growth trends.
  */
 interface StatIconItem {
     /**
@@ -42,7 +43,8 @@ interface StatIconItem {
     className?: string;
 }
 /**
- * Props for the StatsIconCards component
+ * Props for the StatsIconCards component.
+ * A modern stats grid featuring bordered cards with icons, values, and growth indicators.
  */
 interface StatsIconCardsProps {
     /**

package/dist/stats-icon-cards.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-CyUmnmEM.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-CfOeYrR-.js';
 import 'class-variance-authority/types';
 
 /**
- * A stat item with icon, value, label, and growth indicator
+ * A stat item with icon, value, label, and growth indicator.
+ * Used to display metrics with visual growth trends.
  */
 interface StatIconItem {
     /**
@@ -42,7 +43,8 @@ interface StatIconItem {
     className?: string;
 }
 /**
- * Props for the StatsIconCards component
+ * Props for the StatsIconCards component.
+ * A modern stats grid featuring bordered cards with icons, values, and growth indicators.
  */
 interface StatsIconCardsProps {
     /**

package/dist/stats-icon-cards.js

@@ -1,11 +1,11 @@
 "use client";
+import * as React from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React from 'react';
-import React__default from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/stats/stats-icon-cards.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -409,7 +409,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -433,11 +434,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -464,13 +467,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -499,7 +509,7 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsx(
@@ -510,8 +520,8 @@ function StatsIconCards({
         className: "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, [statIconClassName]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsx(
@@ -520,9 +530,9 @@ function StatsIconCards({
         className: cn("relative overflow-hidden rounded-xl border bg-background p-6", stat.className, statCardClassName),
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
-            /* @__PURE__ */ jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
-            /* @__PURE__ */ jsxs(
+            stat.label && /* @__PURE__ */ jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
+            stat.value && /* @__PURE__ */ jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
+            stat.growth && /* @__PURE__ */ jsxs(
               "p",
               {
                 className: cn(
@@ -549,7 +559,8 @@ function StatsIconCards({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -560,11 +571,11 @@ function StatsIconCards({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
           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("mt-3 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-3", 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-impact-grid.cjs

@@ -905,7 +905,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -929,11 +930,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -960,13 +963,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/stats-impact-grid.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-CJYRLpXR.cjs';
+import { A as ActionConfig } from './blocks-B53JjGZ5.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-CfOeYrR-.cjs';
 import 'class-variance-authority/types';
 
 /**