@opensite/ui 1.3.0 → 1.3.1

package/dist/feature-pattern-grid-links.js

@@ -935,59 +935,124 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function FeaturePatternGridLinks({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
+  headerClassName,
   features,
   featuresSlot,
   className,
-  containerClassName,
+  spacing = "py-12 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   gridClassName,
   cardClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureIcon = useCallback((feature) => {
-    if (feature.icon) return feature.icon;
-    if (feature.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
-    return null;
-  }, []);
-  const renderFeatureLink = useCallback((feature) => {
-    if (feature.linkSlot) return feature.linkSlot;
-    if (!feature.link && !feature.linkLabel) return null;
-    const label = feature.linkLabel || (feature.link ? "Learn more" : null);
-    if (!label) return null;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: feature.link,
-        className: cn("flex items-center gap-2 text-sm font-medium", feature.linkClassName),
-        children: [
-          label,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-        ]
-      }
-    );
-  }, []);
+  const renderFeatureIcon = useCallback(
+    (feature) => {
+      if (feature.icon) return feature.icon;
+      if (feature.iconName)
+        return /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: feature.iconName,
+            size: 24,
+            className: feature.iconClassName
+          }
+        );
+      return null;
+    },
+    []
+  );
+  const renderFeatureLink = useCallback(
+    (feature) => {
+      if (feature.linkSlot) return feature.linkSlot;
+      if (!feature.link && !feature.linkLabel) return null;
+      const label = feature.linkLabel || (feature.link ? "Learn more" : null);
+      if (!label) return null;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          href: feature.link,
+          className: cn(
+            "flex items-center gap-2 text-sm font-medium",
+            feature.linkClassName
+          ),
+          children: [
+            label,
+            /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+          ]
+        }
+      );
+    },
+    []
+  );
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-10 rounded-lg border p-8", cardClassName, feature.className),
+        className: cn(
+          "flex flex-col gap-10 rounded-lg border p-8",
+          cardClassName,
+          feature.className
+        ),
         children: [
           /* @__PURE__ */ jsxs("div", { children: [
             renderFeatureIcon(feature),
-            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: cn("mt-6 mb-2 font-medium", feature.titleClassName),
+                children: feature.title
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("mt-6 mb-2 font-medium", feature.titleClassName),
+                children: feature.title
+              }
+            )),
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm",
+                  getTextColor(background, "muted"),
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "text-sm",
+                  getTextColor(background, "muted"),
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ))
           ] }),
           renderFeatureLink(feature)
         ]
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName, renderFeatureIcon, renderFeatureLink, background]);
+  }, [
+    featuresSlot,
+    features,
+    cardClassName,
+    renderFeatureIcon,
+    renderFeatureLink,
+    background
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -998,7 +1063,55 @@ function FeaturePatternGridLinks({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 text-left",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
+      ] })
     }
   );
 }

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

@@ -935,13 +935,13 @@ function FeatureThreeColumnValues({
   values,
   valuesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   labelClassName,
   titleClassName,
   gridClassName,
   cardClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

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

@@ -914,13 +914,13 @@ function FeatureThreeColumnValues({
   values,
   valuesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   labelClassName,
   titleClassName,
   gridClassName,
   cardClassName,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

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

@@ -997,7 +997,14 @@ function FeatureUtilityCardsGrid({
   const renderLabelIcon = React.useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName)
-      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: getAccentColor(background) });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: labelIconName,
+          size: 20,
+          className: getAccentColor(background)
+        }
+      );
     return null;
   }, [labelIcon, labelIconName, background]);
   const learnMoreContent = React.useMemo(() => {
@@ -1094,10 +1101,19 @@ function FeatureUtilityCardsGrid({
                 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 }))
-                ] }),
+                (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "text-lg flex items-center gap-4",
+                      labelClassName
+                    ),
+                    children: [
+                      renderLabelIcon,
+                      label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
+                    ]
+                  }
+                ),
                 learnMoreContent
               ]
             }

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

@@ -975,7 +975,14 @@ function FeatureUtilityCardsGrid({
   const renderLabelIcon = useMemo(() => {
     if (labelIcon) return labelIcon;
     if (labelIconName)
-      return /* @__PURE__ */ jsx(DynamicIcon, { name: labelIconName, size: 20, className: getAccentColor(background) });
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: labelIconName,
+          size: 20,
+          className: getAccentColor(background)
+        }
+      );
     return null;
   }, [labelIcon, labelIconName, background]);
   const learnMoreContent = useMemo(() => {
@@ -1072,10 +1079,19 @@ function FeatureUtilityCardsGrid({
                 headerClassName
               ),
               children: [
-                (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 ", labelClassName), children: [
-                  renderLabelIcon,
-                  label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { children: label }) : /* @__PURE__ */ jsx("div", { children: label }))
-                ] }),
+                (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "text-lg flex items-center gap-4",
+                      labelClassName
+                    ),
+                    children: [
+                      renderLabelIcon,
+                      label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { children: label }) : /* @__PURE__ */ jsx("div", { children: label }))
+                    ]
+                  }
+                ),
                 learnMoreContent
               ]
             }