@opensite/ui 0.4.8 → 0.4.9

package/dist/stats-card-group.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 { O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { O as OptixFlowConfig } from './blocks-CFlYq-V7.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-OIpPF9yW.cjs';
 import 'class-variance-authority/types';
 
 /**
- * Avatar configuration for the avatar stack
+ * Avatar configuration for the avatar stack.
+ * Used to display user avatars in a stacked layout.
  */
 interface AvatarItem {
     /**
@@ -25,7 +26,8 @@ interface AvatarItem {
     className?: string;
 }
 /**
- * A stat with icon, value, label, and optional avatars
+ * A stat with icon, value, label, and optional avatars.
+ * Used to display individual metrics in a card group layout.
  */
 interface CardGroupStat {
     /**
@@ -54,7 +56,8 @@ interface CardGroupStat {
     className?: string;
 }
 /**
- * Props for the StatsCardGroup component
+ * Props for the StatsCardGroup component.
+ * A compact stats display featuring metrics in a bordered card with icons and optional avatar stacks.
  */
 interface StatsCardGroupProps {
     /**

package/dist/stats-card-group.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 { O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { O as OptixFlowConfig } from './blocks-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 /**
- * Avatar configuration for the avatar stack
+ * Avatar configuration for the avatar stack.
+ * Used to display user avatars in a stacked layout.
  */
 interface AvatarItem {
     /**
@@ -25,7 +26,8 @@ interface AvatarItem {
     className?: string;
 }
 /**
- * A stat with icon, value, label, and optional avatars
+ * A stat with icon, value, label, and optional avatars.
+ * Used to display individual metrics in a card group layout.
  */
 interface CardGroupStat {
     /**
@@ -54,7 +56,8 @@ interface CardGroupStat {
     className?: string;
 }
 /**
- * Props for the StatsCardGroup component
+ * Props for the StatsCardGroup component.
+ * A compact stats display featuring metrics in a bordered card with icons and optional avatar stacks.
  */
 interface StatsCardGroupProps {
     /**

package/dist/stats-card-group.js

@@ -1,12 +1,12 @@
 "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';
 import { Img } from '@page-speed/img';
 
-// lib/utils.ts
+// components/blocks/stats/stats-card-group.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -439,6 +439,8 @@ var Section = React__default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -465,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -498,7 +507,7 @@ function StatsCardGroup({
   avatarsClassName,
   optixFlowConfig
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsx(
@@ -511,8 +520,8 @@ function StatsCardGroup({
         children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
       }
     );
-  };
-  const renderAvatars = (stat) => {
+  }, [statIconClassName]);
+  const renderAvatars = useCallback((stat) => {
     if (!stat.showAvatars) return null;
     if (avatarsSlot) return avatarsSlot;
     if (!avatars || avatars.length === 0) return null;
@@ -535,8 +544,8 @@ function StatsCardGroup({
         avatars.length - 4
       ] })
     ] });
-  };
-  const renderStats = () => {
+  }, [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxs(
@@ -559,13 +568,13 @@ function StatsCardGroup({
               children: stat.value
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
+          stat.label && /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
           renderAvatars(stat)
         ]
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statValueClassName, statLabelClassName, renderIcon, renderAvatars]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -575,7 +584,7 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: renderStats() }) }) })
+      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
     }
   );
 }

package/dist/stats-circular-progress.cjs

@@ -448,6 +448,8 @@ var Section = React__namespace.default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -474,13 +476,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -548,7 +557,7 @@ function StatsCircularProgress({
   description,
   categories,
   categoriesSlot,
-  defaultCategory = "business",
+  defaultCategory,
   background = "white",
   spacing = "lg",
   pattern,
@@ -567,13 +576,14 @@ function StatsCircularProgress({
   statLabelClassName,
   statInfoClassName
 }) {
-  const [category, setCategory] = React__namespace.useState(defaultCategory);
-  const renderBadge = () => {
+  const effectiveDefaultCategory = defaultCategory || (categories && categories.length > 0 ? categories[0].id : "");
+  const [category, setCategory] = React__namespace.useState(effectiveDefaultCategory);
+  const badgeContent = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderCategories = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const categoriesContent = React.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -610,15 +620,16 @@ function StatsCircularProgress({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
+              stat.label && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
+              stat.info && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
             ]
           },
           index
         )) }) }, cat.id))
       ] })
     ] });
-  };
+  }, [categoriesSlot, categories, category, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -629,12 +640,12 @@ function StatsCircularProgress({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-6xl", 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("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderCategories()
+        categoriesContent
       ] })
     }
   );

package/dist/stats-circular-progress.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 circular progress indicator
+ * A stat with circular progress indicator.
+ * Used to display metrics with visual progress rings.
  */
 interface CircularStat {
     /**
@@ -33,7 +34,8 @@ interface CircularStat {
     className?: string;
 }
 /**
- * A category of stats
+ * A category of stats.
+ * Used to group related stats under a common category tab.
  */
 interface StatCategory {
     /**
@@ -54,7 +56,8 @@ interface StatCategory {
     className?: string;
 }
 /**
- * Props for the StatsCircularProgress component
+ * Props for the StatsCircularProgress component.
+ * A tabbed stats display featuring circular progress indicators organized by category.
  */
 interface StatsCircularProgressProps {
     /**

package/dist/stats-circular-progress.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 circular progress indicator
+ * A stat with circular progress indicator.
+ * Used to display metrics with visual progress rings.
  */
 interface CircularStat {
     /**
@@ -33,7 +34,8 @@ interface CircularStat {
     className?: string;
 }
 /**
- * A category of stats
+ * A category of stats.
+ * Used to group related stats under a common category tab.
  */
 interface StatCategory {
     /**
@@ -54,7 +56,8 @@ interface StatCategory {
     className?: string;
 }
 /**
- * Props for the StatsCircularProgress component
+ * Props for the StatsCircularProgress component.
+ * A tabbed stats display featuring circular progress indicators organized by category.
  */
 interface StatsCircularProgressProps {
     /**

package/dist/stats-circular-progress.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 { Slot } from '@radix-ui/react-slot';
@@ -426,6 +426,8 @@ var Section = React__default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -452,13 +454,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -526,7 +535,7 @@ function StatsCircularProgress({
   description,
   categories,
   categoriesSlot,
-  defaultCategory = "business",
+  defaultCategory,
   background = "white",
   spacing = "lg",
   pattern,
@@ -545,13 +554,14 @@ function StatsCircularProgress({
   statLabelClassName,
   statInfoClassName
 }) {
-  const [category, setCategory] = React.useState(defaultCategory);
-  const renderBadge = () => {
+  const effectiveDefaultCategory = defaultCategory || (categories && categories.length > 0 ? categories[0].id : "");
+  const [category, setCategory] = React.useState(effectiveDefaultCategory);
+  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 renderCategories = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const categoriesContent = useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -588,15 +598,16 @@ function StatsCircularProgress({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
-              /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
+              stat.label && /* @__PURE__ */ jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
+              stat.info && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
             ]
           },
           index
         )) }) }, cat.id))
       ] })
     ] });
-  };
+  }, [categoriesSlot, categories, category, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -607,12 +618,12 @@ function StatsCircularProgress({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-6xl", 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("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderCategories()
+        categoriesContent
       ] })
     }
   );

package/dist/stats-growth-timeline.cjs

@@ -1,12 +1,12 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/stats/stats-growth-timeline.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -911,6 +911,8 @@ var Section = React__namespace.default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -937,13 +939,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -959,9 +968,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,
@@ -981,12 +990,12 @@ function StatsGrowthTimeline({
   currentStatsClassName,
   futureClassName
 }) {
-  const renderBadge = () => {
+  const badgeContent = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderMilestoneIcon = (milestone) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderMilestoneIcon = React.useCallback((milestone) => {
     if (milestone.iconSlot) return milestone.iconSlot;
     if (!milestone.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -997,8 +1006,8 @@ function StatsGrowthTimeline({
         className: "text-primary"
       }
     ) });
-  };
-  const renderMilestones = () => {
+  }, []);
+  const milestonesContent = React.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-24", timelineClassName), children: [
@@ -1014,14 +1023,14 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: milestone.description })),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
+              milestone.metric && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
                 renderMilestoneIcon(milestone),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
+                  milestone.metric.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
                 ] })
               ] })
             ] }),
@@ -1031,19 +1040,19 @@ function StatsGrowthTimeline({
         milestone.id
       )) })
     ] });
-  };
-  const renderCurrentStats = () => {
+  }, [milestonesSlot, milestones, timelineClassName, milestoneClassName, renderMilestoneIcon]);
+  const currentStatsContent = React.useMemo(() => {
     if (currentStatsSlot) return currentStatsSlot;
     if (!currentStats || currentStats.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-24 rounded-lg bg-muted p-8", currentStatsClassName), children: [
       currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", stat.className), children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+        stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
       ] }, index)) })
     ] });
-  };
-  const renderActions = () => {
+  }, [currentStatsSlot, currentStats, currentStatsHeading, currentStatsClassName]);
+  const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1060,16 +1069,17 @@ function StatsGrowthTimeline({
       },
       index
     ));
-  };
-  const renderFuture = () => {
+  }, [actionsSlot, actions]);
+  const futureContent = React.useMemo(() => {
     if (futureSlot) return futureSlot;
     if (!futureHeading && !futureDescription && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: futureHeading })),
       futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [futureSlot, futureHeading, futureDescription, futureClassName, actionsContent, actions]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1080,14 +1090,14 @@ function StatsGrowthTimeline({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
         ] }),
-        renderMilestones(),
-        renderCurrentStats(),
-        renderFuture()
+        milestonesContent,
+        currentStatsContent,
+        futureContent
       ] })
     }
   );