@opensite/ui 0.5.2 → 0.5.4

package/dist/stats-primary-secondary.js

@@ -529,8 +529,8 @@ function StatsPrimarySecondary({
   primarySlot,
   secondaryStats,
   secondaryStatsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -547,30 +547,77 @@ function StatsPrimarySecondary({
   const renderPrimaryBadge = useCallback(() => {
     if (primaryBadgeSlot) return primaryBadgeSlot;
     if (!primaryBadge) return null;
-    return /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: cn("ml-2 gap-1", primaryBadgeClassName), children: [
-      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 16, className: "shrink-0" }),
-      primaryBadge
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        variant: "secondary",
+        className: cn("ml-2 gap-1", primaryBadgeClassName),
+        children: [
+          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 16, className: "shrink-0" }),
+          primaryBadge
+        ]
+      }
+    );
   }, [primaryBadgeSlot, primaryBadge, primaryBadgeClassName]);
   const primaryContent = useMemo(() => {
     if (primarySlot) return primarySlot;
     if (!primaryValue) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-4", primaryClassName), children: /* @__PURE__ */ jsxs("div", { className: "lg:pe-6 xl:pe-12", children: [
-      /* @__PURE__ */ jsxs("p", { className: cn("text-6xl font-bold leading-10", primaryValueClassName), children: [
-        primaryValue,
-        renderPrimaryBadge()
-      ] }),
-      primaryDescription && (typeof primaryDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-muted-foreground sm:mt-3", primaryDescriptionClassName), children: primaryDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2 sm:mt-3", primaryDescriptionClassName), children: primaryDescription }))
+      /* @__PURE__ */ jsxs(
+        "p",
+        {
+          className: cn(
+            "text-6xl font-bold leading-10",
+            primaryValueClassName
+          ),
+          children: [
+            primaryValue,
+            renderPrimaryBadge()
+          ]
+        }
+      ),
+      primaryDescription && (typeof primaryDescription === "string" ? /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "mt-2 text-muted-foreground sm:mt-3",
+            primaryDescriptionClassName
+          ),
+          children: primaryDescription
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2 sm:mt-3", primaryDescriptionClassName), children: primaryDescription }))
     ] }) });
-  }, [primarySlot, primaryValue, primaryClassName, primaryValueClassName, primaryDescription, primaryDescriptionClassName, renderPrimaryBadge]);
+  }, [
+    primarySlot,
+    primaryValue,
+    primaryClassName,
+    primaryValueClassName,
+    primaryDescription,
+    primaryDescriptionClassName,
+    renderPrimaryBadge
+  ]);
   const secondaryStatsContent = useMemo(() => {
     if (secondaryStatsSlot) return secondaryStatsSlot;
     if (!secondaryStats || secondaryStats.length === 0) return null;
     return secondaryStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: stat.className, children: [
       stat.value && /* @__PURE__ */ jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
-      stat.label && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
+      stat.label && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "mt-1 text-muted-foreground",
+            secondaryLabelClassName
+          ),
+          children: stat.label
+        }
+      )
     ] }, index));
-  }, [secondaryStatsSlot, secondaryStats, secondaryValueClassName, secondaryLabelClassName]);
+  }, [
+    secondaryStatsSlot,
+    secondaryStats,
+    secondaryValueClassName,
+    secondaryLabelClassName
+  ]);
   const hasPrimaryContent = !!(primarySlot || primaryValue);
   const hasSecondaryContent = !!(secondaryStatsSlot || secondaryStats && secondaryStats.length > 0);
   return /* @__PURE__ */ jsx(
@@ -582,10 +629,29 @@ 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 }) })
-      ] })
+      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 })
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/stats-simple-grid.cjs

@@ -828,8 +828,8 @@ function StatsSimpleGrid({
   statsSlot,
   actions,
   actionsSlot,
-  background = "muted",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -847,7 +847,14 @@ function StatsSimpleGrid({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -868,10 +875,34 @@ function StatsSimpleGrid({
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", statItemClassName), children: [
-      stat.value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
-      stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-base leading-6 text-muted-foreground lg:text-lg", statLabelClassName), children: stat.label })
+      stat.value && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl",
+            statValueClassName
+          ),
+          children: stat.value
+        }
+      ),
+      stat.label && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "text-base leading-6 text-muted-foreground lg:text-lg",
+            statLabelClassName
+          ),
+          children: stat.label
+        }
+      )
     ] }, index));
-  }, [statsSlot, stats, statItemClassName, statValueClassName, statLabelClassName]);
+  }, [
+    statsSlot,
+    stats,
+    statItemClassName,
+    statValueClassName,
+    statLabelClassName
+  ]);
   const hasHeaderContent = !!(heading || actionsSlot || actions && actions.length > 0);
   const hasStatsContent = !!(statsSlot || stats && stats.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -883,13 +914,49 @@ 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 })
-      ] })
+      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
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

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

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { S as StatItem, A as ActionConfig } from './blocks-Cohq4eio.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';
 
 /**

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

@@ -2,9 +2,9 @@ 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 { S as StatItem, A as ActionConfig } from './blocks-k17uluAz.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';
 
 /**

package/dist/stats-simple-grid.js

@@ -807,8 +807,8 @@ function StatsSimpleGrid({
   statsSlot,
   actions,
   actionsSlot,
-  background = "muted",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -826,7 +826,14 @@ function StatsSimpleGrid({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -847,10 +854,34 @@ function StatsSimpleGrid({
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("w-full", statItemClassName), children: [
-      stat.value && /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
-      stat.label && /* @__PURE__ */ jsx("div", { className: cn("text-base leading-6 text-muted-foreground lg:text-lg", statLabelClassName), children: stat.label })
+      stat.value && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl",
+            statValueClassName
+          ),
+          children: stat.value
+        }
+      ),
+      stat.label && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "text-base leading-6 text-muted-foreground lg:text-lg",
+            statLabelClassName
+          ),
+          children: stat.label
+        }
+      )
     ] }, index));
-  }, [statsSlot, stats, statItemClassName, statValueClassName, statLabelClassName]);
+  }, [
+    statsSlot,
+    stats,
+    statItemClassName,
+    statValueClassName,
+    statLabelClassName
+  ]);
   const hasHeaderContent = !!(heading || actionsSlot || actions && actions.length > 0);
   const hasStatsContent = !!(statsSlot || stats && stats.length > 0);
   return /* @__PURE__ */ jsx(
@@ -862,13 +893,49 @@ 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 })
-      ] })
+      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
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/stats-timeline-tabs.cjs

@@ -610,8 +610,8 @@ function StatsTimelineTabs({
   periods,
   tabsSlot,
   defaultPeriod,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -635,68 +635,100 @@ function StatsTimelineTabs({
   const tabsContent = React.useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!periods || periods.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: effectiveDefaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: tabsListClassName, children: periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
-      periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: period.id, className: cn("mt-4", period.className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: period.stats.map((stat, index) => {
-        const isPositive = stat.trend === "up" && !stat.inversePositive || stat.trend === "down" && stat.inversePositive;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "rounded-lg border bg-card p-6 transition-shadow hover:shadow-md",
-              stat.className,
-              statCardClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-                stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: stat.label }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/clock",
-                      size: 16,
-                      className: "mr-1 text-muted-foreground"
-                    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
+      {
+        defaultValue: effectiveDefaultPeriod,
+        className: cn("mt-8 w-full", tabsClassName),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: tabsListClassName, children: periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
+          periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(
+            TabsContent,
+            {
+              value: period.id,
+              className: cn("mt-4", period.className),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid gap-6 md:grid-cols-2 lg:grid-cols-4",
+                    statsGridClassName
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
-                ] })
-              ] }),
-              stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "flex items-center rounded-full px-2 py-1 text-xs font-medium",
-                      isPositive ? "bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400" : "bg-rose-50 text-rose-600 dark:bg-rose-950 dark:text-rose-400"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        DynamicIcon,
-                        {
-                          name: stat.trend === "up" ? "lucide/arrow-up-right" : "lucide/arrow-down-right",
-                          size: 12,
-                          className: "mr-1"
-                        }
-                      ),
-                      Math.abs(stat.change),
-                      "%"
-                    ]
-                  }
-                ),
-                stat.previousLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
-                  "vs ",
-                  stat.previousLabel
-                ] })
-              ] })
-            ]
-          },
-          index
-        );
-      }) }) }, period.id))
-    ] });
-  }, [tabsSlot, periods, effectiveDefaultPeriod, tabsClassName, tabsListClassName, statsGridClassName, statCardClassName]);
+                  children: period.stats.map((stat, index) => {
+                    const isPositive = stat.trend === "up" && !stat.inversePositive || stat.trend === "down" && stat.inversePositive;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "rounded-lg border bg-card p-6 transition-shadow hover:shadow-md",
+                          stat.className,
+                          statCardClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+                            stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: stat.label }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                DynamicIcon,
+                                {
+                                  name: "lucide/clock",
+                                  size: 16,
+                                  className: "mr-1 text-muted-foreground"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
+                            ] })
+                          ] }),
+                          stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center", children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              "div",
+                              {
+                                className: cn(
+                                  "flex items-center rounded-full px-2 py-1 text-xs font-medium",
+                                  isPositive ? "bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400" : "bg-rose-50 text-rose-600 dark:bg-rose-950 dark:text-rose-400"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: stat.trend === "up" ? "lucide/arrow-up-right" : "lucide/arrow-down-right",
+                                      size: 12,
+                                      className: "mr-1"
+                                    }
+                                  ),
+                                  Math.abs(stat.change),
+                                  "%"
+                                ]
+                              }
+                            ),
+                            stat.previousLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
+                              "vs ",
+                              stat.previousLabel
+                            ] })
+                          ] })
+                        ]
+                      },
+                      index
+                    );
+                  })
+                }
+              )
+            },
+            period.id
+          ))
+        ]
+      }
+    );
+  }, [
+    tabsSlot,
+    periods,
+    effectiveDefaultPeriod,
+    tabsClassName,
+    tabsListClassName,
+    statsGridClassName,
+    statCardClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   const hasTabsContent = !!(tabsSlot || periods && periods.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -711,8 +743,32 @@ function StatsTimelineTabs({
       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: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2 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 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+          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 max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("mx-auto max-w-2xl", descriptionClassName),
+              children: description
+            }
+          ))
         ] }),
         hasTabsContent && tabsContent
       ] }) })

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

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

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

@@ -2,9 +2,9 @@ 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-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**