@opensite/ui 3.3.0 → 3.3.2

package/dist/stats-growth-timeline.js

@@ -5,7 +5,7 @@ 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
 import { Pressable } from '@page-speed/pressable';
 
@@ -13,36 +13,6 @@ import { Pressable } from '@page-speed/pressable';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -459,6 +429,70 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function StatsGrowthTimeline({
   sectionId = "stats-growth-timeline",
   badge,
@@ -475,6 +509,7 @@ function StatsGrowthTimeline({
   futureSlot,
   actions,
   actionsSlot,
+  actionsClassName,
   background,
   pattern,
   patternOpacity,
@@ -521,19 +556,18 @@ function StatsGrowthTimeline({
                 "div",
                 {
                   className: cn(
-                    "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
-                    getNestedCardBg(background, "muted"),
-                    getNestedCardTextColor(background)
+                    "bg-muted text-muted-foreground",
+                    "mb-4 inline-flex h-fit py-2 w-fit px-4 items-center justify-center rounded-full text-sm font-semibold"
                   ),
                   children: milestone.year
                 }
               ),
-              milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: milestone.title })),
-              milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
+              milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : milestone.title),
+              milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : milestone.description),
               milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
                 renderMilestoneIcon(milestone),
                 /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
+                  /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-primary", children: milestone.metric.value }),
                   milestone.metric.label && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
                 ] })
               ] })
@@ -559,16 +593,15 @@ function StatsGrowthTimeline({
       "div",
       {
         className: cn(
-          "mt-24 rounded-lg p-8",
-          getNestedCardBg(background, "muted"),
-          getNestedCardTextColor(background),
+          "p-6 md:p-12 bg-card text-card-foreground",
+          "mt-24 rounded-lg border border-border shadow-md",
           currentStatsClassName
         ),
         children: [
-          currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
+          currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-12 text-center text-4xl lg:text-5xl font-bold", children: currentStatsHeading }) : currentStatsHeading),
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-            stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+            /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold text-primary md:text-3xl xl:text-4xl", children: stat.value }),
+            stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-balance text-sm", children: stat.label })
           ] }, index)) })
         ]
       }
@@ -580,39 +613,29 @@ function StatsGrowthTimeline({
     currentStatsHeading,
     currentStatsClassName
   ]);
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant,
-        className: "inline-flex items-center font-medium text-primary hover:underline",
-        children: [
-          action.label,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-        ]
-      },
-      index
-    ));
-  }, [actionsSlot, actions]);
   const futureContent = useMemo(() => {
     if (futureSlot) return futureSlot;
     if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
       return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: futureHeading })),
-      futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
-      actionsContent
+      futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-full md:max-w-lg text-balance", children: futureDescription }) : futureDescription),
+      /* @__PURE__ */ jsx(
+        BlockActions,
+        {
+          actions,
+          actionsSlot,
+          actionsClassName
+        }
+      )
     ] });
   }, [
     futureSlot,
     futureHeading,
     futureDescription,
     futureClassName,
-    actionsContent,
+    actionsSlot,
+    actionsClassName,
     actions
   ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
@@ -649,7 +672,7 @@ function StatsGrowthTimeline({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          ) : description)
         ] }),
         milestonesContent,
         currentStatsContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",