@opensite/ui 1.5.8 → 1.6.0

package/dist/stats-number-ticker.js

@@ -494,22 +494,51 @@ function TickerStatItem({
   descriptionClassName
 }) {
   const decimals = stat.value % 1 !== 0 ? 1 : 0;
-  const displayValue = useNumberTicker(stat.value, duration, isVisible, decimals);
-  return /* @__PURE__ */ jsxs("div", { className: cn(
-    "rounded-xl border p-6 transition-shadow hover:shadow-md",
-    getNestedCardBg(background, "card"),
-    getNestedCardTextColor(background),
-    stat.className,
-    cardClassName
-  ), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("mb-2 text-4xl font-bold tabular-nums md:text-5xl", valueClassName), children: [
-      stat.prefix,
-      displayValue,
-      stat.suffix
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("mb-1 text-lg font-semibold", labelClassName), children: stat.label }),
-    stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", descriptionClassName), children: stat.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", descriptionClassName), children: stat.description }))
-  ] });
+  const displayValue = useNumberTicker(
+    stat.value,
+    duration,
+    isVisible,
+    decimals
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border p-6 transition-shadow hover:shadow-md",
+        getNestedCardBg(background, "card"),
+        getNestedCardTextColor(background),
+        stat.className,
+        cardClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-2 text-4xl font-bold tabular-nums md:text-5xl",
+              valueClassName
+            ),
+            children: [
+              stat.prefix,
+              displayValue,
+              stat.suffix
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("mb-1 text-lg font-semibold", labelClassName), children: stat.label }),
+        stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "text-sm text-muted-foreground",
+              descriptionClassName
+            ),
+            children: stat.description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", descriptionClassName), children: stat.description }))
+      ]
+    }
+  );
 }
 function StatsNumberTicker({
   badge,
@@ -520,12 +549,12 @@ function StatsNumberTicker({
   statsSlot,
   animationDuration = 2500,
   background = "white",
-  spacing = "lg",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -561,21 +590,41 @@ function StatsNumberTicker({
   const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsx(
-      TickerStatItem,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        stat,
-        duration: animationDuration,
-        isVisible,
-        background,
-        cardClassName: statCardClassName,
-        valueClassName: statValueClassName,
-        labelClassName: statLabelClassName,
-        descriptionClassName: statDescriptionClassName
-      },
-      index
-    )) });
-  }, [statsSlot, stats, background, animationDuration, isVisible, statsGridClassName, statCardClassName, statValueClassName, statLabelClassName, statDescriptionClassName]);
+        className: cn(
+          "grid gap-6 sm:grid-cols-2 lg:grid-cols-4",
+          statsGridClassName
+        ),
+        children: stats.map((stat, index) => /* @__PURE__ */ jsx(
+          TickerStatItem,
+          {
+            stat,
+            duration: animationDuration,
+            isVisible,
+            background,
+            cardClassName: statCardClassName,
+            valueClassName: statValueClassName,
+            labelClassName: statLabelClassName,
+            descriptionClassName: statDescriptionClassName
+          },
+          index
+        ))
+      }
+    );
+  }, [
+    statsSlot,
+    stats,
+    background,
+    animationDuration,
+    isVisible,
+    statsGridClassName,
+    statCardClassName,
+    statValueClassName,
+    statLabelClassName,
+    statDescriptionClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
@@ -586,11 +635,30 @@ function StatsNumberTicker({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: "relative", children: [
         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-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
         statsContent
       ] })

package/dist/stats-primary-secondary.cjs

@@ -553,12 +553,12 @@ function StatsPrimarySecondary({
   secondaryStats,
   secondaryStatsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   primaryClassName,
   primaryValueClassName,
   primaryBadgeClassName,
@@ -652,29 +652,21 @@ function StatsPrimarySecondary({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "grid items-center gap-6 lg:grid-cols-12 lg:gap-12",
-            containerClassName
-          ),
-          children: [
-            hasPrimaryContent && primaryContent,
-            hasSecondaryContent && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border",
-                  hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12",
-                  secondaryClassName
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent })
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        hasPrimaryContent && primaryContent,
+        hasSecondaryContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border",
+              hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12",
+              secondaryClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent })
+          }
+        )
+      ] })
     }
   );
 }

package/dist/stats-primary-secondary.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -134,6 +134,6 @@ interface StatsPrimarySecondaryProps {
  * />
  * ```
  */
-declare function StatsPrimarySecondary({ primaryValue, primaryBadge, primaryBadgeSlot, primaryDescription, primarySlot, secondaryStats, secondaryStatsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, primaryClassName, primaryValueClassName, primaryBadgeClassName, primaryDescriptionClassName, secondaryClassName, secondaryValueClassName, secondaryLabelClassName, }: StatsPrimarySecondaryProps): react_jsx_runtime.JSX.Element;
+declare function StatsPrimarySecondary({ primaryValue, primaryBadge, primaryBadgeSlot, primaryDescription, primarySlot, secondaryStats, secondaryStatsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, primaryClassName, primaryValueClassName, primaryBadgeClassName, primaryDescriptionClassName, secondaryClassName, secondaryValueClassName, secondaryLabelClassName, }: StatsPrimarySecondaryProps): react_jsx_runtime.JSX.Element;
 
 export { type SecondaryStat, StatsPrimarySecondary, type StatsPrimarySecondaryProps };

package/dist/stats-primary-secondary.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -134,6 +134,6 @@ interface StatsPrimarySecondaryProps {
  * />
  * ```
  */
-declare function StatsPrimarySecondary({ primaryValue, primaryBadge, primaryBadgeSlot, primaryDescription, primarySlot, secondaryStats, secondaryStatsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, primaryClassName, primaryValueClassName, primaryBadgeClassName, primaryDescriptionClassName, secondaryClassName, secondaryValueClassName, secondaryLabelClassName, }: StatsPrimarySecondaryProps): react_jsx_runtime.JSX.Element;
+declare function StatsPrimarySecondary({ primaryValue, primaryBadge, primaryBadgeSlot, primaryDescription, primarySlot, secondaryStats, secondaryStatsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, primaryClassName, primaryValueClassName, primaryBadgeClassName, primaryDescriptionClassName, secondaryClassName, secondaryValueClassName, secondaryLabelClassName, }: StatsPrimarySecondaryProps): react_jsx_runtime.JSX.Element;
 
 export { type SecondaryStat, StatsPrimarySecondary, type StatsPrimarySecondaryProps };

package/dist/stats-primary-secondary.js

@@ -532,12 +532,12 @@ function StatsPrimarySecondary({
   secondaryStats,
   secondaryStatsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   primaryClassName,
   primaryValueClassName,
   primaryBadgeClassName,
@@ -631,29 +631,21 @@ function StatsPrimarySecondary({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "grid items-center gap-6 lg:grid-cols-12 lg:gap-12",
-            containerClassName
-          ),
-          children: [
-            hasPrimaryContent && primaryContent,
-            hasSecondaryContent && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border",
-                  hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12",
-                  secondaryClassName
-                ),
-                children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent })
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        hasPrimaryContent && primaryContent,
+        hasSecondaryContent && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border",
+              hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12",
+              secondaryClassName
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent })
+          }
+        )
+      ] })
     }
   );
 }

package/dist/stats-simple-grid.cjs

@@ -831,12 +831,12 @@ function StatsSimpleGrid({
   actions,
   actionsSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   actionsClassName,
@@ -916,49 +916,41 @@ function StatsSimpleGrid({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col items-start text-left",
-            containerClassName
-          ),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-4xl md:max-w-[30rem] lg:max-w-[37rem] lg:text-5xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-col justify-start gap-2 sm:flex-row",
-                    actionsClassName
-                  ),
-                  children: actionsContent
-                }
-              )
-            ] }),
-            hasStatsContent && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16",
-                  statsClassName
-                ),
-                children: statsContent
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start text-left"), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-4xl md:max-w-120 lg:max-w-148 lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex flex-col justify-start gap-2 sm:flex-row",
+                actionsClassName
+              ),
+              children: actionsContent
+            }
+          )
+        ] }),
+        hasStatsContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16",
+              statsClassName
+            ),
+            children: statsContent
+          }
+        )
+      ] })
     }
   );
 }

package/dist/stats-simple-grid.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { S as StatItem, A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { S as StatItem, A as ActionConfig } from './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -108,6 +108,6 @@ interface StatsSimpleGridProps {
  * />
  * ```
  */
-declare function StatsSimpleGrid({ heading, stats, statsSlot, actions, actionsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, contentClassName, headingClassName, actionsClassName, statsClassName, statItemClassName, statValueClassName, statLabelClassName, }: StatsSimpleGridProps): react_jsx_runtime.JSX.Element;
+declare function StatsSimpleGrid({ heading, stats, statsSlot, actions, actionsSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, contentClassName, headingClassName, actionsClassName, statsClassName, statItemClassName, statValueClassName, statLabelClassName, }: StatsSimpleGridProps): react_jsx_runtime.JSX.Element;
 
 export { StatItem, StatsSimpleGrid, type StatsSimpleGridProps };

package/dist/stats-simple-grid.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { S as StatItem, A as ActionConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { S as StatItem, A as ActionConfig } from './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -108,6 +108,6 @@ interface StatsSimpleGridProps {
  * />
  * ```
  */
-declare function StatsSimpleGrid({ heading, stats, statsSlot, actions, actionsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, contentClassName, headingClassName, actionsClassName, statsClassName, statItemClassName, statValueClassName, statLabelClassName, }: StatsSimpleGridProps): react_jsx_runtime.JSX.Element;
+declare function StatsSimpleGrid({ heading, stats, statsSlot, actions, actionsSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, contentClassName, headingClassName, actionsClassName, statsClassName, statItemClassName, statValueClassName, statLabelClassName, }: StatsSimpleGridProps): react_jsx_runtime.JSX.Element;
 
 export { StatItem, StatsSimpleGrid, type StatsSimpleGridProps };

package/dist/stats-simple-grid.js

@@ -810,12 +810,12 @@ function StatsSimpleGrid({
   actions,
   actionsSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   actionsClassName,
@@ -895,49 +895,41 @@ function StatsSimpleGrid({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col items-start text-left",
-            containerClassName
-          ),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-4xl md:max-w-[30rem] lg:max-w-[37rem] lg:text-5xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-col justify-start gap-2 sm:flex-row",
-                    actionsClassName
-                  ),
-                  children: actionsContent
-                }
-              )
-            ] }),
-            hasStatsContent && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16",
-                  statsClassName
-                ),
-                children: statsContent
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start text-left"), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-4xl md:max-w-120 lg:max-w-148 lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex flex-col justify-start gap-2 sm:flex-row",
+                actionsClassName
+              ),
+              children: actionsContent
+            }
+          )
+        ] }),
+        hasStatsContent && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16",
+              statsClassName
+            ),
+            children: statsContent
+          }
+        )
+      ] })
     }
   );
 }

package/dist/stats-timeline-tabs.cjs

@@ -643,12 +643,12 @@ function StatsTimelineTabs({
   tabsSlot,
   defaultPeriod,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -775,7 +775,8 @@ function StatsTimelineTabs({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6", children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/stats-timeline-tabs.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -173,6 +173,6 @@ interface StatsTimelineTabsProps {
  * />
  * ```
  */
-declare function StatsTimelineTabs({ badge, badgeSlot, heading, description, periods, tabsSlot, defaultPeriod, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, tabsClassName, tabsListClassName, statsGridClassName, statCardClassName, }: StatsTimelineTabsProps): react_jsx_runtime.JSX.Element;
+declare function StatsTimelineTabs({ badge, badgeSlot, heading, description, periods, tabsSlot, defaultPeriod, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, tabsClassName, tabsListClassName, statsGridClassName, statCardClassName, }: StatsTimelineTabsProps): react_jsx_runtime.JSX.Element;
 
 export { StatsTimelineTabs, type StatsTimelineTabsProps, type TimePeriod, type TimelineStat };