@opensite/ui 0.4.7 → 0.4.8

package/dist/stats-impact-grid.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-impact-grid.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -929,7 +929,7 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
@@ -980,12 +980,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",
@@ -1004,12 +1008,12 @@ function StatsImpactGrid({
   comparisonClassName,
   ctaClassName
 }) {
-  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 renderStatIcon = (stat) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderStatIcon = React.useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1020,45 +1024,88 @@ function StatsImpactGrid({
         className: stat.iconColor || "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, []);
+  const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3", statsGridClassName), children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("overflow-hidden border p-0", stat.className, statCardClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 md:p-8", children: [
-      renderStatIcon(stat),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-end", children: [
-        stat.prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
-        stat.suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: stat.description }))
-    ] }) }, stat.id)) });
-  };
-  const renderComparison = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          statsGridClassName
+        ),
+        children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(
+          Card,
+          {
+            className: cn(
+              "overflow-hidden border p-0",
+              stat.className,
+              statCardClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 md:p-8", children: [
+              renderStatIcon(stat),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-end", children: [
+                stat.prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
+                stat.suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
+              ] }),
+              stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
+              stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: stat.description }))
+            ] })
+          },
+          stat.id
+        ))
+      }
+    );
+  }, [statsSlot, stats, statsGridClassName, statCardClassName, renderStatIcon]);
+  const hasComparisonContent = React.useMemo(() => {
+    return !!(comparisonHeading || comparisonDescription || baselineValue || targetValue || baselineLabel || targetLabel);
+  }, [
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel
+  ]);
+  const comparisonContent = React.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__ */ jsxRuntime.jsx("div", { className: cn("mb-16 rounded-xl bg-muted p-8", comparisonClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2 md:gap-16", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: comparisonHeading })),
         comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: comparisonDescription })),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        hasProgressBars && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-[24%] bg-muted-foreground" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Industry" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full bg-muted-foreground",
+                style: { width: `${baselinePercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-[89%] bg-primary" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Our Platform" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full bg-primary",
+                style: { width: `${targetPercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "INDUSTRY AVERAGE" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: industryAverage })
+      (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
+        baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm uppercase text-muted-foreground", children: baselineLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+        baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
             name: "lucide/arrow-up-right",
@@ -1066,40 +1113,65 @@ function StatsImpactGrid({
             className: "text-primary"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-primary", children: "OUR PLATFORM" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: platformValue })
+        targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium uppercase text-primary", children: targetLabel }),
+          /* @__PURE__ */ jsxRuntime.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 = React.useMemo(() => {
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      },
-      index
-    )) });
-  };
-  const renderCta = () => {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          size: "lg",
+          asButton: true,
+          className: cn(
+            "inline-flex items-center justify-center gap-2",
+            actionClassName
+          ),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        action.href || index
+      );
+    }) });
+  }, [actions]);
+  const ctaContent = React.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaHeading && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", ctaClassName), children: [
       ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: ctaHeading })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1110,16 +1182,34 @@ function StatsImpactGrid({
       patternClassName,
       className: cn("relative overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 to-background" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-br from-primary/5 to-background" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-5xl", containerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-            renderBadge(),
-            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 }))
+          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-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 }))
           ] }),
-          renderStats(),
-          renderComparison(),
-          renderCta()
+          statsContent,
+          comparisonContent,
+          ctaContent
         ] })
       ]
     }

package/dist/stats-impact-grid.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-Cohq4eio.cjs';
+import { A as ActionConfig } from './blocks-CJYRLpXR.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-DJbzb6lO.cjs';
 import 'class-variance-authority/types';
 
 /**
- * An impact stat with icon, value, label, and description
+ * An impact stat with icon, value, label, and description.
+ * Used to display key metrics, KPIs, or performance indicators.
  */
 interface ImpactStat {
     /**
@@ -20,11 +21,11 @@ interface ImpactStat {
      */
     value: React.ReactNode;
     /**
-     * Prefix for the value (e.g., "$")
+     * Prefix for the value (e.g., "$", "€", "£")
      */
     prefix?: React.ReactNode;
     /**
-     * Suffix for the value (e.g., "%", "B+", "x")
+     * Suffix for the value (e.g., "%", "B+", "x", "K")
      */
     suffix?: React.ReactNode;
     /**
@@ -32,9 +33,9 @@ interface ImpactStat {
      */
     label: React.ReactNode;
     /**
-     * Description of the stat
+     * Description or context for the stat
      */
-    description: React.ReactNode;
+    description?: React.ReactNode;
     /**
      * Icon name in format: prefix/name (e.g., "lucide/line-chart")
      */
@@ -53,7 +54,8 @@ interface ImpactStat {
     className?: string;
 }
 /**
- * Props for the StatsImpactGrid component
+ * Props for the StatsImpactGrid component.
+ * A versatile stats section for displaying metrics with optional comparison visualization.
  */
 interface StatsImpactGridProps {
     /**
@@ -73,7 +75,7 @@ interface StatsImpactGridProps {
      */
     description?: React.ReactNode;
     /**
-     * Array of impact stats to display
+     * Array of impact stats to display in the grid
      */
     stats?: ImpactStat[];
     /**
@@ -81,31 +83,47 @@ interface StatsImpactGridProps {
      */
     statsSlot?: React.ReactNode;
     /**
-     * Industry comparison section heading
+     * Comparison section heading
      */
     comparisonHeading?: React.ReactNode;
     /**
-     * Industry comparison description
+     * Comparison section description
      */
     comparisonDescription?: React.ReactNode;
     /**
-     * Industry average value
+     * Baseline comparison value (displayed as the first/lower comparison point)
+     */
+    baselineValue?: React.ReactNode;
+    /**
+     * Target comparison value (displayed as the second/higher comparison point)
+     */
+    targetValue?: React.ReactNode;
+    /**
+     * Label for the baseline comparison bar
+     */
+    baselineLabel?: React.ReactNode;
+    /**
+     * Label for the target comparison bar
+     */
+    targetLabel?: React.ReactNode;
+    /**
+     * Percentage width for the baseline progress bar (0-100)
      */
-    industryAverage?: React.ReactNode;
+    baselinePercent?: number;
     /**
-     * Platform value
+     * Percentage width for the target progress bar (0-100)
      */
-    platformValue?: React.ReactNode;
+    targetPercent?: number;
     /**
      * Custom slot for comparison section (overrides comparison props)
      */
     comparisonSlot?: React.ReactNode;
     /**
-     * CTA heading
+     * CTA section heading
      */
     ctaHeading?: React.ReactNode;
     /**
-     * Array of action buttons
+     * Array of action buttons for the CTA section
      */
     actions?: ActionConfig[];
     /**
@@ -175,22 +193,31 @@ interface StatsImpactGridProps {
 }
 /**
  * StatsImpactGrid - A comprehensive stats section featuring a grid of impact metrics
- * with icons, an industry comparison bar chart, and a call-to-action. Each stat card
- * displays an icon, large value with prefix/suffix, label, and description. Includes
- * a visual comparison between industry average and platform performance. Ideal for
- * showcasing ROI, business impact, or platform benefits with social proof.
+ * with icons, an optional comparison bar visualization, and a call-to-action.
+ * Each stat card displays an icon, large value with prefix/suffix, label, and description.
+ * The comparison section visualizes the difference between two values with progress bars.
+ * Ideal for showcasing ROI, performance metrics, growth comparisons, or any key indicators.
  *
  * @example
  * ```tsx
  * <StatsImpactGrid
- *   badge="Proven Results"
- *   heading="Transforming Businesses With Real Numbers"
+ *   badge="Results"
+ *   heading="Our Impact"
  *   stats={[
- *     { id: "roi", value: "437", suffix: "%", label: "Average ROI", ... },
+ *     { id: "growth", value: "437", suffix: "%", label: "Growth Rate", description: "Year over year" },
  *   ]}
+ *   comparisonHeading="Performance Comparison"
+ *   baselineLabel="Before"
+ *   baselineValue="24%"
+ *   baselinePercent={24}
+ *   targetLabel="After"
+ *   targetValue="89%"
+ *   targetPercent={89}
+ *   ctaHeading="Ready to get started?"
+ *   actions={[{ label: "Get Started", href: "/signup" }]}
  * />
  * ```
  */
-declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, industryAverage, platformValue, comparisonSlot, ctaHeading, actions, ctaSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, comparisonClassName, ctaClassName, }: StatsImpactGridProps): react_jsx_runtime.JSX.Element;
+declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, baselineValue, targetValue, baselineLabel, targetLabel, baselinePercent, targetPercent, comparisonSlot, ctaHeading, actions, ctaSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, comparisonClassName, ctaClassName, }: StatsImpactGridProps): react_jsx_runtime.JSX.Element;
 
 export { type ImpactStat, StatsImpactGrid, type StatsImpactGridProps };

package/dist/stats-impact-grid.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-k17uluAz.js';
+import { A as ActionConfig } from './blocks-BWc_7JNA.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-DJbzb6lO.js';
 import 'class-variance-authority/types';
 
 /**
- * An impact stat with icon, value, label, and description
+ * An impact stat with icon, value, label, and description.
+ * Used to display key metrics, KPIs, or performance indicators.
  */
 interface ImpactStat {
     /**
@@ -20,11 +21,11 @@ interface ImpactStat {
      */
     value: React.ReactNode;
     /**
-     * Prefix for the value (e.g., "$")
+     * Prefix for the value (e.g., "$", "€", "£")
      */
     prefix?: React.ReactNode;
     /**
-     * Suffix for the value (e.g., "%", "B+", "x")
+     * Suffix for the value (e.g., "%", "B+", "x", "K")
      */
     suffix?: React.ReactNode;
     /**
@@ -32,9 +33,9 @@ interface ImpactStat {
      */
     label: React.ReactNode;
     /**
-     * Description of the stat
+     * Description or context for the stat
      */
-    description: React.ReactNode;
+    description?: React.ReactNode;
     /**
      * Icon name in format: prefix/name (e.g., "lucide/line-chart")
      */
@@ -53,7 +54,8 @@ interface ImpactStat {
     className?: string;
 }
 /**
- * Props for the StatsImpactGrid component
+ * Props for the StatsImpactGrid component.
+ * A versatile stats section for displaying metrics with optional comparison visualization.
  */
 interface StatsImpactGridProps {
     /**
@@ -73,7 +75,7 @@ interface StatsImpactGridProps {
      */
     description?: React.ReactNode;
     /**
-     * Array of impact stats to display
+     * Array of impact stats to display in the grid
      */
     stats?: ImpactStat[];
     /**
@@ -81,31 +83,47 @@ interface StatsImpactGridProps {
      */
     statsSlot?: React.ReactNode;
     /**
-     * Industry comparison section heading
+     * Comparison section heading
      */
     comparisonHeading?: React.ReactNode;
     /**
-     * Industry comparison description
+     * Comparison section description
      */
     comparisonDescription?: React.ReactNode;
     /**
-     * Industry average value
+     * Baseline comparison value (displayed as the first/lower comparison point)
+     */
+    baselineValue?: React.ReactNode;
+    /**
+     * Target comparison value (displayed as the second/higher comparison point)
+     */
+    targetValue?: React.ReactNode;
+    /**
+     * Label for the baseline comparison bar
+     */
+    baselineLabel?: React.ReactNode;
+    /**
+     * Label for the target comparison bar
+     */
+    targetLabel?: React.ReactNode;
+    /**
+     * Percentage width for the baseline progress bar (0-100)
      */
-    industryAverage?: React.ReactNode;
+    baselinePercent?: number;
     /**
-     * Platform value
+     * Percentage width for the target progress bar (0-100)
      */
-    platformValue?: React.ReactNode;
+    targetPercent?: number;
     /**
      * Custom slot for comparison section (overrides comparison props)
      */
     comparisonSlot?: React.ReactNode;
     /**
-     * CTA heading
+     * CTA section heading
      */
     ctaHeading?: React.ReactNode;
     /**
-     * Array of action buttons
+     * Array of action buttons for the CTA section
      */
     actions?: ActionConfig[];
     /**
@@ -175,22 +193,31 @@ interface StatsImpactGridProps {
 }
 /**
  * StatsImpactGrid - A comprehensive stats section featuring a grid of impact metrics
- * with icons, an industry comparison bar chart, and a call-to-action. Each stat card
- * displays an icon, large value with prefix/suffix, label, and description. Includes
- * a visual comparison between industry average and platform performance. Ideal for
- * showcasing ROI, business impact, or platform benefits with social proof.
+ * with icons, an optional comparison bar visualization, and a call-to-action.
+ * Each stat card displays an icon, large value with prefix/suffix, label, and description.
+ * The comparison section visualizes the difference between two values with progress bars.
+ * Ideal for showcasing ROI, performance metrics, growth comparisons, or any key indicators.
  *
  * @example
  * ```tsx
  * <StatsImpactGrid
- *   badge="Proven Results"
- *   heading="Transforming Businesses With Real Numbers"
+ *   badge="Results"
+ *   heading="Our Impact"
  *   stats={[
- *     { id: "roi", value: "437", suffix: "%", label: "Average ROI", ... },
+ *     { id: "growth", value: "437", suffix: "%", label: "Growth Rate", description: "Year over year" },
  *   ]}
+ *   comparisonHeading="Performance Comparison"
+ *   baselineLabel="Before"
+ *   baselineValue="24%"
+ *   baselinePercent={24}
+ *   targetLabel="After"
+ *   targetValue="89%"
+ *   targetPercent={89}
+ *   ctaHeading="Ready to get started?"
+ *   actions={[{ label: "Get Started", href: "/signup" }]}
  * />
  * ```
  */
-declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, industryAverage, platformValue, comparisonSlot, ctaHeading, actions, ctaSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, comparisonClassName, ctaClassName, }: StatsImpactGridProps): react_jsx_runtime.JSX.Element;
+declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, baselineValue, targetValue, baselineLabel, targetLabel, baselinePercent, targetPercent, comparisonSlot, ctaHeading, actions, ctaSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, comparisonClassName, ctaClassName, }: StatsImpactGridProps): react_jsx_runtime.JSX.Element;
 
 export { type ImpactStat, StatsImpactGrid, type StatsImpactGridProps };