@opensite/ui 1.2.4 → 1.2.6

package/dist/feature-stats-highlight.cjs

@@ -32,36 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.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" : "";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -896,7 +866,7 @@ function FeatureStatsHighlight({
   stats,
   statsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   gridClassName,
   contentClassName,
   badgeClassName,
@@ -906,7 +876,7 @@ function FeatureStatsHighlight({
   statsGridClassName,
   statCardClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -946,9 +916,7 @@ function FeatureStatsHighlight({
       "div",
       {
         className: cn(
-          "flex flex-col gap-2 rounded-xl border p-6",
-          getNestedCardBg(background, "card"),
-          getNestedCardTextColor(background),
+          "flex flex-col gap-2 rounded-xl border p-4 md:p-6 bg-card text-card-foreground h-full justify-between",
           statCardClassName,
           stat.className
         ),
@@ -957,13 +925,22 @@ function FeatureStatsHighlight({
             "span",
             {
               className: cn(
-                "text-4xl font-bold lg:text-5xl",
+                "text-3xl font-bold lg:text-4xl xl:text-5xl",
                 stat.valueClassName
               ),
               children: stat.value
             }
           ),
-          stat.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("", stat.labelClassName), children: stat.label })
+          stat.label && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "uppercase font-bold text-sm opacity-60",
+                stat.labelClassName
+              ),
+              children: stat.label
+            }
+          )
         ]
       },
       index
@@ -985,7 +962,7 @@ function FeatureStatsHighlight({
           className: cn("grid gap-10 lg:grid-cols-2 lg:gap-20", gridClassName),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
-              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("w-fit", badgeClassName), children: badge }),
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", className: cn("", badgeClassName), children: badge }),
               title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
@@ -1008,7 +985,16 @@ function FeatureStatsHighlight({
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(" lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(" lg:text-lg", descriptionClassName), children: description })),
               (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
             ] }),
-            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
+            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6",
+                  statsGridClassName
+                ),
+                children: statsContent
+              }
+            )
           ]
         }
       )

package/dist/feature-stats-highlight.js

@@ -11,36 +11,6 @@ import { Slot } from '@radix-ui/react-slot';
 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" : "";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -875,7 +845,7 @@ function FeatureStatsHighlight({
   stats,
   statsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   gridClassName,
   contentClassName,
   badgeClassName,
@@ -885,7 +855,7 @@ function FeatureStatsHighlight({
   statsGridClassName,
   statCardClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -925,9 +895,7 @@ function FeatureStatsHighlight({
       "div",
       {
         className: cn(
-          "flex flex-col gap-2 rounded-xl border p-6",
-          getNestedCardBg(background, "card"),
-          getNestedCardTextColor(background),
+          "flex flex-col gap-2 rounded-xl border p-4 md:p-6 bg-card text-card-foreground h-full justify-between",
           statCardClassName,
           stat.className
         ),
@@ -936,13 +904,22 @@ function FeatureStatsHighlight({
             "span",
             {
               className: cn(
-                "text-4xl font-bold lg:text-5xl",
+                "text-3xl font-bold lg:text-4xl xl:text-5xl",
                 stat.valueClassName
               ),
               children: stat.value
             }
           ),
-          stat.label && /* @__PURE__ */ jsx("span", { className: cn("", stat.labelClassName), children: stat.label })
+          stat.label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "uppercase font-bold text-sm opacity-60",
+                stat.labelClassName
+              ),
+              children: stat.label
+            }
+          )
         ]
       },
       index
@@ -964,7 +941,7 @@ function FeatureStatsHighlight({
           className: cn("grid gap-10 lg:grid-cols-2 lg:gap-20", gridClassName),
           children: [
             /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", contentClassName), children: [
-              badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("w-fit", badgeClassName), children: badge }),
+              badge && /* @__PURE__ */ jsx(Badge, { variant: "default", className: cn("", badgeClassName), children: badge }),
               title && (typeof title === "string" ? /* @__PURE__ */ jsx(
                 "h2",
                 {
@@ -987,7 +964,16 @@ function FeatureStatsHighlight({
               description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(" lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn(" lg:text-lg", descriptionClassName), children: description })),
               (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
             ] }),
-            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-6", statsGridClassName), children: statsContent })
+            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6",
+                  statsGridClassName
+                ),
+                children: statsContent
+              }
+            )
           ]
         }
       )