@opensite/ui 0.8.5 → 0.8.6

package/dist/feature-stats-highlight.js

@@ -855,7 +855,7 @@ function FeatureStatsHighlight({
   statsGridClassName,
   statCardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -894,10 +894,23 @@ function FeatureStatsHighlight({
     return stats.map((stat, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-2 rounded-xl border bg-card p-6", statCardClassName, stat.className),
+        className: cn(
+          "flex flex-col gap-2 rounded-xl border bg-card p-6",
+          statCardClassName,
+          stat.className
+        ),
         children: [
-          stat.value && /* @__PURE__ */ jsx("span", { className: cn("text-4xl font-bold lg:text-5xl", stat.valueClassName), children: stat.value }),
-          stat.label && /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", stat.labelClassName), children: stat.label })
+          stat.value && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-4xl font-bold lg:text-5xl",
+                stat.valueClassName
+              ),
+              children: stat.value
+            }
+          ),
+          stat.label && /* @__PURE__ */ jsx("span", { className: cn("", stat.labelClassName), children: stat.label })
         ]
       },
       index
@@ -913,15 +926,39 @@ function FeatureStatsHighlight({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { 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 }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground 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 })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          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 }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              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 })
+          ]
+        }
+      )
     }
   );
 }

package/dist/feature-tabbed-content-image.cjs

@@ -1110,10 +1110,7 @@ function FeatureTabbedContentImage({
         TabsTrigger,
         {
           value: slide.id.toString(),
-          className: cn(
-            "text-sm hover:bg-background md:text-base",
-            tabTriggerClassName
-          ),
+          className: cn("text-sm  md:text-base", tabTriggerClassName),
           children: slide.tabName
         },
         slide.id
@@ -1155,19 +1152,13 @@ function FeatureTabbedContentImage({
                   slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn(" lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn("lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   )),
@@ -1249,7 +1240,7 @@ function FeatureTabbedContentImage({
                 "p",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description
@@ -1258,7 +1249,7 @@ function FeatureTabbedContentImage({
                 "div",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description

package/dist/feature-tabbed-content-image.js

@@ -1088,10 +1088,7 @@ function FeatureTabbedContentImage({
         TabsTrigger,
         {
           value: slide.id.toString(),
-          className: cn(
-            "text-sm hover:bg-background md:text-base",
-            tabTriggerClassName
-          ),
+          className: cn("text-sm  md:text-base", tabTriggerClassName),
           children: slide.tabName
         },
         slide.id
@@ -1133,19 +1130,13 @@ function FeatureTabbedContentImage({
                   slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx(
                     "p",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn(" lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   ) : /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: cn(
-                        "text-muted-foreground lg:text-xl",
-                        slide.descriptionClassName
-                      ),
+                      className: cn("lg:text-xl", slide.descriptionClassName),
                       children: slide.description
                     }
                   )),
@@ -1227,7 +1218,7 @@ function FeatureTabbedContentImage({
                 "p",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description
@@ -1236,7 +1227,7 @@ function FeatureTabbedContentImage({
                 "div",
                 {
                   className: cn(
-                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    "text-center text-balance  lg:text-xl",
                     descriptionClassName
                   ),
                   children: description

package/dist/feature-three-column-values.cjs

@@ -542,17 +542,13 @@ function FeatureThreeColumnValues({
     return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn(
-          "rounded-lg bg-accent p-5",
-          cardClassName,
-          value.className
-        ),
+        className: cn("rounded-lg p-5", cardClassName, value.className),
         children: [
           (value.icon || value.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: cn(
-                "mb-8 flex size-12 items-center justify-center rounded-full bg-background",
+                "mb-8 flex size-12 items-center justify-center rounded-full ",
                 value.iconClassName
               ),
               children: renderValueIcon(value)
@@ -571,25 +567,7 @@ function FeatureThreeColumnValues({
               children: value.title
             }
           )),
-          value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "leading-7 text-muted-foreground",
-                value.descriptionClassName
-              ),
-              children: value.description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "leading-7 text-muted-foreground",
-                value.descriptionClassName
-              ),
-              children: value.description
-            }
-          ))
+          value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-7 ", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-7", value.descriptionClassName), children: value.description }))
         ]
       },
       index
@@ -606,25 +584,7 @@ function FeatureThreeColumnValues({
       className,
       containerClassName,
       children: [
-        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: cn(
-              "mb-4 text-sm text-muted-foreground lg:text-base",
-              labelClassName
-            ),
-            children: label
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "mb-4 text-sm text-muted-foreground lg:text-base",
-              labelClassName
-            ),
-            children: label
-          }
-        )),
+        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-sm lg:text-base", labelClassName), children: label })),
         title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
           "h2",
           {

package/dist/feature-three-column-values.js

@@ -521,17 +521,13 @@ function FeatureThreeColumnValues({
     return values.map((value, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn(
-          "rounded-lg bg-accent p-5",
-          cardClassName,
-          value.className
-        ),
+        className: cn("rounded-lg p-5", cardClassName, value.className),
         children: [
           (value.icon || value.iconName) && /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
-                "mb-8 flex size-12 items-center justify-center rounded-full bg-background",
+                "mb-8 flex size-12 items-center justify-center rounded-full ",
                 value.iconClassName
               ),
               children: renderValueIcon(value)
@@ -550,25 +546,7 @@ function FeatureThreeColumnValues({
               children: value.title
             }
           )),
-          value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "leading-7 text-muted-foreground",
-                value.descriptionClassName
-              ),
-              children: value.description
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "leading-7 text-muted-foreground",
-                value.descriptionClassName
-              ),
-              children: value.description
-            }
-          ))
+          value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-7 ", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-7", value.descriptionClassName), children: value.description }))
         ]
       },
       index
@@ -585,25 +563,7 @@ function FeatureThreeColumnValues({
       className,
       containerClassName,
       children: [
-        label && (typeof label === "string" ? /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn(
-              "mb-4 text-sm text-muted-foreground lg:text-base",
-              labelClassName
-            ),
-            children: label
-          }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "mb-4 text-sm text-muted-foreground lg:text-base",
-              labelClassName
-            ),
-            children: label
-          }
-        )),
+        label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-sm lg:text-base", labelClassName), children: label })),
         title && (typeof title === "string" ? /* @__PURE__ */ jsx(
           "h2",
           {

package/dist/feature-utility-cards-grid.cjs

@@ -985,14 +985,15 @@ function FeatureUtilityCardsGrid({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
   const renderLabelIcon = React.useMemo(() => {
     if (labelIcon) return labelIcon;
-    if (labelIconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
+    if (labelIconName)
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
     return null;
   }, [labelIcon, labelIconName]);
   const learnMoreContent = React.useMemo(() => {
@@ -1004,7 +1005,10 @@ function FeatureUtilityCardsGrid({
         {
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
-          className: cn("hover:text-primary hover:underline", learnMoreAction.className),
+          className: cn(
+            "hover:text-primary hover:underline",
+            learnMoreAction.className
+          ),
           "aria-label": learnMoreAction["aria-label"],
           children: learnMoreAction.children
         }
@@ -1015,7 +1019,7 @@ function FeatureUtilityCardsGrid({
       {
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
-        className: cn("hover:text-primary hover:underline", learnMoreAction.className),
+        className: cn(learnMoreAction.className),
         "aria-label": learnMoreAction["aria-label"],
         children: [
           learnMoreAction.icon,
@@ -1025,32 +1029,45 @@ function FeatureUtilityCardsGrid({
       }
     );
   }, [learnMoreSlot, learnMoreAction]);
-  const renderUtilityImage = React__namespace.useCallback((utility) => {
-    if (utility.imageSlot) return utility.imageSlot;
-    if (utility.image) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: utility.image,
-          alt: utility.imageAlt || (typeof utility.title === "string" ? utility.title : "Utility image"),
-          className: cn("aspect-video w-full object-cover", utility.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
+  const renderUtilityImage = React__namespace.useCallback(
+    (utility) => {
+      if (utility.imageSlot) return utility.imageSlot;
+      if (utility.image) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: utility.image,
+            alt: utility.imageAlt || (typeof utility.title === "string" ? utility.title : "Utility image"),
+            className: cn(
+              "aspect-video w-full object-cover",
+              utility.imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
+      }
+      return null;
+    },
+    [optixFlowConfig]
+  );
   const utilitiesContent = React.useMemo(() => {
     if (utilitiesSlot) return utilitiesSlot;
     if (!utilities || utilities.length === 0) return null;
-    return utilities.map((utility, index) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("overflow-hidden pt-0", cardClassName, utility.className), children: [
-      renderUtilityImage(utility),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
-        utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
-        utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }))
-      ] })
-    ] }, index));
+    return utilities.map((utility, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Card,
+      {
+        className: cn("overflow-hidden pt-0", cardClassName, utility.className),
+        children: [
+          renderUtilityImage(utility),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
+            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
+            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", utility.descriptionClassName), children: utility.description }))
+          ] })
+        ]
+      },
+      index
+    ));
   }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1064,20 +1081,50 @@ function FeatureUtilityCardsGrid({
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
         (label || labelIcon || labelIconName || learnMoreSlot || learnMoreAction) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between text-sm", headerClassName), children: [
-            (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 text-muted-foreground", labelClassName), children: [
-              renderLabelIcon,
-              label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
-            ] }),
-            learnMoreContent
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between text-sm",
+                headerClassName
+              ),
+              children: [
+                (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 ", labelClassName), children: [
+                  renderLabelIcon,
+                  label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
+                ] }),
+                learnMoreContent
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" })
         ] }),
         (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title })),
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn("text-3xl font-medium md:w-1/2", titleClassName),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("text-3xl font-medium md:w-1/2", titleClassName),
+              children: title
+            }
+          )),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
         ] }),
-        (utilitiesSlot || utilities && utilities.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: utilitiesContent })
+        (utilitiesSlot || utilities && utilities.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: utilitiesContent
+          }
+        )
       ]
     }
   );