@opensite/ui 0.4.7 → 0.4.9

package/dist/stats-impact-grid.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';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/stats/stats-impact-grid.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -908,11 +908,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;
@@ -939,13 +941,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -959,12 +968,16 @@ function StatsImpactGrid({
   description,
   stats,
   statsSlot,
-  comparisonHeading = "How Does This Compare?",
-  comparisonDescription = "Our platform delivers results that are 4x better than industry averages across all key performance indicators.",
-  industryAverage = "24%",
-  platformValue = "89%",
+  comparisonHeading,
+  comparisonDescription,
+  baselineValue,
+  targetValue,
+  baselineLabel,
+  targetLabel,
+  baselinePercent,
+  targetPercent,
   comparisonSlot,
-  ctaHeading = "Ready to See These Results in Your Business?",
+  ctaHeading,
   actions,
   ctaSlot,
   background = "white",
@@ -983,12 +996,12 @@ function StatsImpactGrid({
   comparisonClassName,
   ctaClassName
 }) {
-  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 renderStatIcon = (stat) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderStatIcon = useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
@@ -999,45 +1012,88 @@ function StatsImpactGrid({
         className: stat.iconColor || "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, []);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3", statsGridClassName), children: stats.map((stat) => /* @__PURE__ */ jsx(Card, { className: cn("overflow-hidden border p-0", stat.className, statCardClassName), children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 md:p-8", children: [
-      renderStatIcon(stat),
-      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-end", children: [
-        stat.prefix && /* @__PURE__ */ jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
-        /* @__PURE__ */ jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
-        stat.suffix && /* @__PURE__ */ jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: stat.description }))
-    ] }) }, stat.id)) });
-  };
-  const renderComparison = () => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          statsGridClassName
+        ),
+        children: stats.map((stat) => /* @__PURE__ */ jsx(
+          Card,
+          {
+            className: cn(
+              "overflow-hidden border p-0",
+              stat.className,
+              statCardClassName
+            ),
+            children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 md:p-8", children: [
+              renderStatIcon(stat),
+              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-end", children: [
+                stat.prefix && /* @__PURE__ */ jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
+                /* @__PURE__ */ jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
+                stat.suffix && /* @__PURE__ */ jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
+              ] }),
+              stat.label && /* @__PURE__ */ jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
+              stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: stat.description }))
+            ] })
+          },
+          stat.id
+        ))
+      }
+    );
+  }, [statsSlot, stats, statsGridClassName, statCardClassName, renderStatIcon]);
+  const hasComparisonContent = useMemo(() => {
+    return !!(comparisonHeading || comparisonDescription || baselineValue || targetValue || baselineLabel || targetLabel);
+  }, [
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel
+  ]);
+  const comparisonContent = useMemo(() => {
     if (comparisonSlot) return comparisonSlot;
-    if (!comparisonHeading && !comparisonDescription && !industryAverage && !platformValue) return null;
+    if (!hasComparisonContent) return null;
+    const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
     return /* @__PURE__ */ jsx("div", { className: cn("mb-16 rounded-xl bg-muted p-8", comparisonClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2 md:gap-16", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: comparisonHeading })),
         comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: comparisonDescription })),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        hasProgressBars && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx("div", { className: "h-full w-[24%] bg-muted-foreground" }) }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Industry" })
+            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-muted-foreground",
+                style: { width: `${baselinePercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx("div", { className: "h-full w-[89%] bg-primary" }) }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Our Platform" })
+            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary",
+                style: { width: `${targetPercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "INDUSTRY AVERAGE" }),
-          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: industryAverage })
+      (baselineValue || targetValue) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
+        baselineValue && /* @__PURE__ */ jsxs("div", { children: [
+          baselineLabel && /* @__PURE__ */ jsx("div", { className: "text-sm uppercase text-muted-foreground", children: baselineLabel }),
+          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: baselineValue })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsx(
+        baselineValue && targetValue && /* @__PURE__ */ jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsx(
           DynamicIcon,
           {
             name: "lucide/arrow-up-right",
@@ -1045,40 +1101,65 @@ function StatsImpactGrid({
             className: "text-primary"
           }
         ) }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-primary", children: "OUR PLATFORM" }),
-          /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: platformValue })
+        targetValue && /* @__PURE__ */ jsxs("div", { children: [
+          targetLabel && /* @__PURE__ */ jsx("div", { className: "text-sm font-medium uppercase text-primary", children: targetLabel }),
+          /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
         ] })
       ] })
     ] }) });
-  };
-  const renderActions = () => {
+  }, [
+    comparisonSlot,
+    hasComparisonContent,
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel,
+    baselinePercent,
+    targetPercent,
+    comparisonClassName
+  ]);
+  const actionsContent = useMemo(() => {
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant || "default",
-        size: "lg",
-        asButton: true,
-        className: index === 0 ? "inline-flex items-center justify-center gap-2" : void 0,
-        children: [
-          action.label,
-          index === 0 && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      },
-      index
-    )) });
-  };
-  const renderCta = () => {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          size: "lg",
+          asButton: true,
+          className: cn(
+            "inline-flex items-center justify-center gap-2",
+            actionClassName
+          ),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        action.href || index
+      );
+    }) });
+  }, [actions]);
+  const ctaContent = useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaHeading && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("text-center", ctaClassName), children: [
       ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: ctaHeading })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1089,16 +1170,34 @@ function StatsImpactGrid({
       patternClassName,
       className: cn("relative overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 to-background" }),
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-br from-primary/5 to-background" }),
         /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-5xl", containerClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-            renderBadge(),
-            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 }))
+          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-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 }))
           ] }),
-          renderStats(),
-          renderComparison(),
-          renderCta()
+          statsContent,
+          comparisonContent,
+          ctaContent
         ] })
       ]
     }

package/dist/stats-milestone-sidebar.cjs

@@ -1,16 +1,16 @@
 "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 _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-// lib/utils.ts
+// components/blocks/stats/stats-milestone-sidebar.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -333,11 +333,13 @@ var Section = React__default.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;
@@ -364,13 +366,20 @@ var Section = React__default.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
+              ]
+            }
+          )
         ]
       }
     );
@@ -383,8 +392,8 @@ function StatsMilestoneSidebar({
   sidebarSlot,
   milestones,
   milestonesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -399,14 +408,33 @@ function StatsMilestoneSidebar({
   milestoneTitleClassName,
   milestoneDescriptionClassName
 }) {
-  const renderSidebar = () => {
+  const sidebarContent = React.useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
+    if (!heading && !description) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:sticky lg:top-24", 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("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+      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(
+            "text-lg text-muted-foreground",
+            descriptionClassName
+          ),
+          children: description
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
     ] });
-  };
-  const renderMilestones = () => {
+  }, [sidebarSlot, heading, description, headingClassName, descriptionClassName]);
+  const milestonesContent = React.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-8", milestonesClassName), children: milestones.map((milestone, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -419,14 +447,43 @@ function StatsMilestoneSidebar({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-[9px] top-0 h-4 w-4 rounded-full border-2 border-primary bg-background" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-3 inline-flex rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary", milestoneYearClassName), children: milestone.year }),
-          milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-xl font-bold", milestoneTitleClassName), children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2", milestoneTitleClassName), children: milestone.title })),
-          milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", milestoneDescriptionClassName), children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: milestoneDescriptionClassName, children: milestone.description }))
+          milestone.year && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mb-3 inline-flex rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary",
+                milestoneYearClassName
+              ),
+              children: milestone.year
+            }
+          ),
+          milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: cn(
+                "mb-2 text-xl font-bold",
+                milestoneTitleClassName
+              ),
+              children: milestone.title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2", milestoneTitleClassName), children: milestone.title })),
+          milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-muted-foreground",
+                milestoneDescriptionClassName
+              ),
+              children: milestone.description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: milestoneDescriptionClassName, children: milestone.description }))
         ]
       },
       index
     )) });
-  };
+  }, [milestonesSlot, milestones, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName]);
+  const hasSidebarContent = !!(sidebarSlot || heading || description);
+  const hasMilestonesContent = !!(milestonesSlot || milestones && milestones.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -437,8 +494,8 @@ function StatsMilestoneSidebar({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: renderSidebar() }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-8", children: renderMilestones() })
+        hasSidebarContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: sidebarContent }),
+        hasMilestonesContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12", children: milestonesContent })
       ] }) })
     }
   );

package/dist/stats-milestone-sidebar.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 milestone item with year and description
+ * A milestone item with year and description.
+ * Used to display key events or achievements in a timeline.
  */
 interface MilestoneItem {
     /**
@@ -29,7 +30,8 @@ interface MilestoneItem {
     className?: string;
 }
 /**
- * Props for the StatsMilestoneSidebar component
+ * Props for the StatsMilestoneSidebar component.
+ * A two-column layout featuring a sticky sidebar with heading and description, alongside a scrollable list of milestones.
  */
 interface StatsMilestoneSidebarProps {
     /**

package/dist/stats-milestone-sidebar.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 milestone item with year and description
+ * A milestone item with year and description.
+ * Used to display key events or achievements in a timeline.
  */
 interface MilestoneItem {
     /**
@@ -29,7 +30,8 @@ interface MilestoneItem {
     className?: string;
 }
 /**
- * Props for the StatsMilestoneSidebar component
+ * Props for the StatsMilestoneSidebar component.
+ * A two-column layout featuring a sticky sidebar with heading and description, alongside a scrollable list of milestones.
  */
 interface StatsMilestoneSidebarProps {
     /**