@opensite/ui 0.4.8 → 0.4.9

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

@@ -2,13 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import './blocks-BWc_7JNA.js';
+import './blocks-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 /**
- * A secondary stat item with value and label
+ * A secondary stat item with value and label.
+ * Used to display supporting metrics alongside a primary stat.
  */
 interface SecondaryStat {
     /**
@@ -25,7 +26,8 @@ interface SecondaryStat {
     className?: string;
 }
 /**
- * Props for the StatsPrimarySecondary component
+ * Props for the StatsPrimarySecondary component.
+ * A two-column stats layout featuring one prominent primary metric with a badge indicator, alongside a row of secondary supporting stats.
  */
 interface StatsPrimarySecondaryProps {
     /**

package/dist/stats-primary-secondary.js

@@ -1,13 +1,13 @@
 "use client";
+import * as React from 'react';
+import React__default, { useCallback, useMemo } 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';
 
-// lib/utils.ts
+// components/blocks/stats/stats-primary-secondary.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -472,6 +472,8 @@ var Section = React__default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -498,13 +500,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -512,10 +521,10 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function StatsPrimarySecondary({
-  primaryValue = "92%",
-  primaryBadge = "+7% this month",
+  primaryValue,
+  primaryBadge,
   primaryBadgeSlot,
-  primaryDescription = "of U.S. adults have bought from businesses using our platform",
+  primaryDescription,
   primarySlot,
   secondaryStats,
   secondaryStatsSlot,
@@ -534,16 +543,17 @@ function StatsPrimarySecondary({
   secondaryValueClassName,
   secondaryLabelClassName
 }) {
-  const renderPrimaryBadge = () => {
+  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
     ] });
-  };
-  const renderPrimary = () => {
+  }, [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,
@@ -551,15 +561,17 @@ function StatsPrimarySecondary({
       ] }),
       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 }))
     ] }) });
-  };
-  const renderSecondaryStats = () => {
+  }, [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: [
-      /* @__PURE__ */ jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
-      /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
+      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 })
     ] }, index));
-  };
+  }, [secondaryStatsSlot, secondaryStats, secondaryValueClassName, secondaryLabelClassName]);
+  const hasPrimaryContent = !!(primarySlot || primaryValue);
+  const hasSecondaryContent = !!(secondaryStatsSlot || secondaryStats && secondaryStats.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -570,8 +582,8 @@ function StatsPrimarySecondary({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("grid items-center gap-6 lg:grid-cols-12 lg:gap-12", containerClassName), children: [
-        renderPrimary(),
-        /* @__PURE__ */ jsx("div", { className: cn("relative lg:col-span-8 lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border", secondaryClassName), children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: renderSecondaryStats() }) })
+        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

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/stats/stats-simple-grid.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -773,6 +773,8 @@ var Section = React__namespace.default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -799,13 +801,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -833,7 +842,7 @@ function StatsSimpleGrid({
   statValueClassName,
   statLabelClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -853,15 +862,17 @@ function StatsSimpleGrid({
         index
       );
     });
-  };
-  const renderStats = () => {
+  }, [actionsSlot, actions]);
+  const statsContent = React.useMemo(() => {
     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: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
-      /* @__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]);
+  const hasHeaderContent = !!(heading || actionsSlot || actions && actions.length > 0);
+  const hasStatsContent = !!(statsSlot || stats && stats.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -872,11 +883,11 @@ function StatsSimpleGrid({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start text-left", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), 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: renderActions() })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-start gap-2 sm:flex-row", actionsClassName), children: actionsContent })
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__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: renderStats() })
+        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,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 { S as StatItem, A as ActionConfig } from './blocks-CJYRLpXR.cjs';
+import { S as StatItem, A as ActionConfig } from './blocks-CFlYq-V7.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-OIpPF9yW.cjs';
 import 'class-variance-authority/types';
 
 /**
- * Props for the StatsSimpleGrid component
+ * Props for the StatsSimpleGrid component.
+ * A clean, minimal stats section with a heading, action buttons, and a responsive grid of key metrics.
  */
 interface StatsSimpleGridProps {
     /**

package/dist/stats-simple-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 { S as StatItem, A as ActionConfig } from './blocks-BWc_7JNA.js';
+import { S as StatItem, A as ActionConfig } from './blocks-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 /**
- * Props for the StatsSimpleGrid component
+ * Props for the StatsSimpleGrid component.
+ * A clean, minimal stats section with a heading, action buttons, and a responsive grid of key metrics.
  */
 interface StatsSimpleGridProps {
     /**

package/dist/stats-simple-grid.js

@@ -1,12 +1,12 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React from 'react';
-import React__default from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/stats/stats-simple-grid.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -752,6 +752,8 @@ var Section = React__default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -778,13 +780,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -812,7 +821,7 @@ function StatsSimpleGrid({
   statValueClassName,
   statLabelClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -832,15 +841,17 @@ function StatsSimpleGrid({
         index
       );
     });
-  };
-  const renderStats = () => {
+  }, [actionsSlot, actions]);
+  const statsContent = useMemo(() => {
     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: [
-      /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
-      /* @__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]);
+  const hasHeaderContent = !!(heading || actionsSlot || actions && actions.length > 0);
+  const hasStatsContent = !!(statsSlot || stats && stats.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -851,11 +862,11 @@ function StatsSimpleGrid({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start text-left", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), 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: renderActions() })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-start gap-2 sm:flex-row", actionsClassName), children: actionsContent })
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__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: renderStats() })
+        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

@@ -1,13 +1,13 @@
 "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 TabsPrimitive = require('@radix-ui/react-tabs');
-var React = require('react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -27,10 +27,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 
-// lib/utils.ts
+// components/blocks/stats/stats-timeline-tabs.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -553,6 +553,8 @@ var Section = React__namespace.default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -579,13 +581,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -599,7 +608,7 @@ function StatsTimelineTabs({
   description,
   periods,
   tabsSlot,
-  defaultPeriod = "monthly",
+  defaultPeriod,
   background = "white",
   spacing = "lg",
   pattern,
@@ -616,15 +625,16 @@ function StatsTimelineTabs({
   statsGridClassName,
   statCardClassName
 }) {
-  const renderBadge = () => {
+  const effectiveDefaultPeriod = defaultPeriod || (periods && periods.length > 0 ? periods[0].id : "");
+  const badgeContent = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-2", badgeClassName), children: badge });
-  };
-  const renderTabs = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const tabsContent = React.useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!periods || periods.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: defaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
+    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;
@@ -638,7 +648,7 @@ function StatsTimelineTabs({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: stat.label }),
+                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,
@@ -651,7 +661,7 @@ function StatsTimelineTabs({
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
+              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",
@@ -674,7 +684,7 @@ function StatsTimelineTabs({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
+                stat.previousLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
                   "vs ",
                   stat.previousLabel
                 ] })
@@ -685,7 +695,9 @@ function StatsTimelineTabs({
         );
       }) }) }, 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(
     Section,
     {
@@ -696,12 +708,12 @@ function StatsTimelineTabs({
       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: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
-          renderBadge(),
+        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 }))
         ] }),
-        renderTabs()
+        hasTabsContent && tabsContent
       ] }) })
     }
   );

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

@@ -2,13 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import './blocks-CJYRLpXR.cjs';
+import './blocks-CFlYq-V7.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-OIpPF9yW.cjs';
 import 'class-variance-authority/types';
 
 /**
- * A single stat entry with value, change, and trend
+ * A single stat entry with value, change, and trend.
+ * Used to display metrics with trend indicators and comparison periods.
  */
 interface TimelineStat {
     /**
@@ -41,7 +42,8 @@ interface TimelineStat {
     className?: string;
 }
 /**
- * A time period with its associated stats
+ * A time period with its associated stats.
+ * Groups metrics by time range for tabbed display.
  */
 interface TimePeriod {
     /**
@@ -62,7 +64,8 @@ interface TimePeriod {
     className?: string;
 }
 /**
- * Props for the StatsTimelineTabs component
+ * Props for the StatsTimelineTabs component.
+ * A tabbed stats display showing metrics across different time periods with color-coded trend indicators.
  */
 interface StatsTimelineTabsProps {
     /**

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

@@ -2,13 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import './blocks-BWc_7JNA.js';
+import './blocks-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 /**
- * A single stat entry with value, change, and trend
+ * A single stat entry with value, change, and trend.
+ * Used to display metrics with trend indicators and comparison periods.
  */
 interface TimelineStat {
     /**
@@ -41,7 +42,8 @@ interface TimelineStat {
     className?: string;
 }
 /**
- * A time period with its associated stats
+ * A time period with its associated stats.
+ * Groups metrics by time range for tabbed display.
  */
 interface TimePeriod {
     /**
@@ -62,7 +64,8 @@ interface TimePeriod {
     className?: string;
 }
 /**
- * Props for the StatsTimelineTabs component
+ * Props for the StatsTimelineTabs component.
+ * A tabbed stats display showing metrics across different time periods with color-coded trend indicators.
  */
 interface StatsTimelineTabsProps {
     /**