npm - @opensite/ui - Versions diffs - 1.3.0 → 1.3.1 - Mend

@opensite/ui 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/feature-capabilities-grid.cjs +5 -6
package/dist/feature-capabilities-grid.js +5 -6
package/dist/feature-icon-grid-bordered.cjs +1 -1
package/dist/feature-icon-grid-bordered.js +1 -1
package/dist/feature-icon-tabs-content.cjs +7 -7
package/dist/feature-icon-tabs-content.js +7 -7
package/dist/feature-image-cards-three-column.cjs +4 -4
package/dist/feature-image-cards-three-column.js +4 -4
package/dist/feature-numbered-cards.cjs +1 -1
package/dist/feature-numbered-cards.js +1 -1
package/dist/feature-pattern-grid-links.cjs +142 -29
package/dist/feature-pattern-grid-links.d.cts +21 -1
package/dist/feature-pattern-grid-links.d.ts +21 -1
package/dist/feature-pattern-grid-links.js +142 -29
package/dist/feature-three-column-values.cjs +2 -2
package/dist/feature-three-column-values.js +2 -2
package/dist/feature-utility-cards-grid.cjs +21 -5
package/dist/feature-utility-cards-grid.js +21 -5
package/dist/registry.cjs +183 -55
package/dist/registry.js +183 -55
package/package.json +1 -1

package/dist/feature-capabilities-grid.cjs CHANGED Viewed

@@ -972,8 +972,8 @@ function FeatureCapabilitiesGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-4 sm:px-4 md:px-6 lg:px-8",
-  spacing = "py-6 md:py-32",
+  containerClassName = "mx-auto w-full max-w-screen-lg md:max-w-screen-4xl relative z-10 px-6 sm:px-2 md:px-2 lg:px-2",
+  spacing = "py-12 md:py-32",
   eyebrowClassName,
   headingClassName,
   gridClassName,
@@ -1000,7 +1000,7 @@ function FeatureCapabilitiesGrid({
         Card,
         {
           className: cn(
-            "group relative rounded-md overflow-visible border-border/10 bg-background/5 p-0 transition-colors duration-300 hover:border-border/20",
+            "group relative rounded-md overflow-visible border-border/10 bg-card text-card-foreground p-0 transition-colors duration-300 hover:border-border/20",
             cardClassName,
             item.className
           ),
@@ -1018,7 +1018,7 @@ function FeatureCapabilitiesGrid({
                 "div",
                 {
                   className: cn(
-                    "flex h-10 w-10 items-center justify-center rounded-xl border border-border/15 bg-background/5",
+                    "flex h-10 w-10 items-center justify-center rounded-xl border ",
                     item.iconClassName
                   ),
                   children: iconContent
@@ -1047,7 +1047,7 @@ function FeatureCapabilitiesGrid({
                       "span",
                       {
                         className: cn(
-                          "rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none",
+                          "rounded-full border px-2 py-0.5 text-[10px] leading-none",
                           item.badgeClassName
                         ),
                         children: item.badge
@@ -1092,7 +1092,6 @@ function FeatureCapabilitiesGrid({
       patternClassName,
       className,
       containerClassName,
-      containerMaxWidth: "lg",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         eyebrow || heading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
           eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx(

package/dist/feature-capabilities-grid.js CHANGED Viewed

@@ -951,8 +951,8 @@ function FeatureCapabilitiesGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-4 sm:px-4 md:px-6 lg:px-8",
-  spacing = "py-6 md:py-32",
+  containerClassName = "mx-auto w-full max-w-screen-lg md:max-w-screen-4xl relative z-10 px-6 sm:px-2 md:px-2 lg:px-2",
+  spacing = "py-12 md:py-32",
   eyebrowClassName,
   headingClassName,
   gridClassName,
@@ -979,7 +979,7 @@ function FeatureCapabilitiesGrid({
         Card,
         {
           className: cn(
-            "group relative rounded-md overflow-visible border-border/10 bg-background/5 p-0 transition-colors duration-300 hover:border-border/20",
+            "group relative rounded-md overflow-visible border-border/10 bg-card text-card-foreground p-0 transition-colors duration-300 hover:border-border/20",
             cardClassName,
             item.className
           ),
@@ -997,7 +997,7 @@ function FeatureCapabilitiesGrid({
                 "div",
                 {
                   className: cn(
-                    "flex h-10 w-10 items-center justify-center rounded-xl border border-border/15 bg-background/5",
+                    "flex h-10 w-10 items-center justify-center rounded-xl border ",
                     item.iconClassName
                   ),
                   children: iconContent
@@ -1026,7 +1026,7 @@ function FeatureCapabilitiesGrid({
                       "span",
                       {
                         className: cn(
-                          "rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none",
+                          "rounded-full border px-2 py-0.5 text-[10px] leading-none",
                           item.badgeClassName
                         ),
                         children: item.badge
@@ -1071,7 +1071,6 @@ function FeatureCapabilitiesGrid({
       patternClassName,
       className,
       containerClassName,
-      containerMaxWidth: "lg",
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         eyebrow || heading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
           eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx(

package/dist/feature-icon-grid-bordered.cjs CHANGED Viewed

@@ -960,7 +960,7 @@ function FeatureIconGridBordered({
       "div",
       {
         className: cn(
-          "relative flex h-full flex-col justify-between gap-6 rounded-none border-dashed px-3 md:border-l md:px-5",
+          "relative flex h-full flex-col justify-between gap-6 rounded-none border-dashed px-0 md:border-l md:px-5",
           cardClassName,
           feature.className
         ),

package/dist/feature-icon-grid-bordered.js CHANGED Viewed

@@ -939,7 +939,7 @@ function FeatureIconGridBordered({
       "div",
       {
         className: cn(
-          "relative flex h-full flex-col justify-between gap-6 rounded-none border-dashed px-3 md:border-l md:px-5",
+          "relative flex h-full flex-col justify-between gap-6 rounded-none border-dashed px-0 md:border-l md:px-5",
           cardClassName,
           feature.className
         ),

package/dist/feature-icon-tabs-content.cjs CHANGED Viewed

@@ -1090,7 +1090,7 @@ function FeatureIconTabsContent({
   tabContentClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "pt-14 pb-12 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1182,7 +1182,7 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border pl-0 pr-4 md:pl-4 md:pr-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
                 `data-[state=active]:${getBorderColor(background, "accent")}`,
                 tabTriggerClassName,
                 tab.className
@@ -1196,7 +1196,7 @@ function FeatureIconTabsContent({
           ))
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-6 lg:py-16", contentWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: tabs.map((tab) => {
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-6 md:py-10", contentWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 md:p-8 bg-muted/50 rounded-2xl shadow-lg", children: tabs.map((tab) => {
         if (tab.contentSlot) {
           return /* @__PURE__ */ jsxRuntime.jsx(
             TabsContent,
@@ -1233,7 +1233,7 @@ function FeatureIconTabsContent({
                   "h3",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -1242,7 +1242,7 @@ function FeatureIconTabsContent({
                   "div",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -1314,7 +1314,7 @@ function FeatureIconTabsContent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -1323,7 +1323,7 @@ function FeatureIconTabsContent({
                 "div",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading

package/dist/feature-icon-tabs-content.js CHANGED Viewed

@@ -1068,7 +1068,7 @@ function FeatureIconTabsContent({
   tabContentClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "pt-14 pb-12 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1160,7 +1160,7 @@ function FeatureIconTabsContent({
             {
               value: tab.value,
               className: cn(
-                "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border pl-0 pr-4 md:pl-4 md:pr-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
                 `data-[state=active]:${getBorderColor(background, "accent")}`,
                 tabTriggerClassName,
                 tab.className
@@ -1174,7 +1174,7 @@ function FeatureIconTabsContent({
           ))
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: cn("py-6 lg:py-16", contentWrapperClassName), children: /* @__PURE__ */ jsx("div", { className: "relative", children: tabs.map((tab) => {
+      /* @__PURE__ */ jsx("div", { className: cn("py-6 md:py-10", contentWrapperClassName), children: /* @__PURE__ */ jsx("div", { className: "p-4 md:p-8 bg-muted/50 rounded-2xl shadow-lg", children: tabs.map((tab) => {
         if (tab.contentSlot) {
           return /* @__PURE__ */ jsx(
             TabsContent,
@@ -1211,7 +1211,7 @@ function FeatureIconTabsContent({
                   "h3",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -1220,7 +1220,7 @@ function FeatureIconTabsContent({
                   "div",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -1292,7 +1292,7 @@ function FeatureIconTabsContent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -1301,7 +1301,7 @@ function FeatureIconTabsContent({
                 "div",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading

package/dist/feature-image-cards-three-column.cjs CHANGED Viewed

@@ -1002,7 +1002,7 @@ function FeatureImageCardsThreeColumn({
   cardsSlot,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -1058,7 +1058,7 @@ function FeatureImageCardsThreeColumn({
           ),
           children: [
             renderImage(card, imageAlt),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-0 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
               (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxRuntime.jsxs(
                 Badge,
@@ -1128,7 +1128,7 @@ function FeatureImageCardsThreeColumn({
             "h2",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title
@@ -1137,7 +1137,7 @@ function FeatureImageCardsThreeColumn({
             "div",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title

package/dist/feature-image-cards-three-column.js CHANGED Viewed

@@ -980,7 +980,7 @@ function FeatureImageCardsThreeColumn({
   cardsSlot,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -1036,7 +1036,7 @@ function FeatureImageCardsThreeColumn({
           ),
           children: [
             renderImage(card, imageAlt),
-            /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-0 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+            /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
             /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
               (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxs(
                 Badge,
@@ -1106,7 +1106,7 @@ function FeatureImageCardsThreeColumn({
             "h2",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title
@@ -1115,7 +1115,7 @@ function FeatureImageCardsThreeColumn({
             "div",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title

package/dist/feature-numbered-cards.cjs CHANGED Viewed

@@ -1127,7 +1127,7 @@ function FeatureNumberedCards({
                     "span",
                     {
                       className: cn(
-                        "absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10",
+                        "absolute top-2 md:top-5 left-2 md:left-5 flex size-10 md:size-12 items-center justify-center rounded-md shadow-lg bg-primary text-sm md:text-md text-primary-foreground lg:top-10 lg:left-10 font-semibold",
                         badgeClassName
                       ),
                       children: String(index + 1).padStart(2, "0")

package/dist/feature-numbered-cards.js CHANGED Viewed

@@ -1106,7 +1106,7 @@ function FeatureNumberedCards({
                     "span",
                     {
                       className: cn(
-                        "absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10",
+                        "absolute top-2 md:top-5 left-2 md:left-5 flex size-10 md:size-12 items-center justify-center rounded-md shadow-lg bg-primary text-sm md:text-md text-primary-foreground lg:top-10 lg:left-10 font-semibold",
                         badgeClassName
                       ),
                       children: String(index + 1).padStart(2, "0")

package/dist/feature-pattern-grid-links.cjs CHANGED Viewed

@@ -956,59 +956,124 @@ var Section = React__namespace.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 = React.useCallback((feature) => {
-    if (feature.icon) return feature.icon;
-    if (feature.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
-    return null;
-  }, []);
-  const renderFeatureLink = React.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__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: feature.link,
-        className: cn("flex items-center gap-2 text-sm font-medium", feature.linkClassName),
-        children: [
-          label,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-        ]
-      }
-    );
-  }, []);
+  const renderFeatureIcon = React.useCallback(
+    (feature) => {
+      if (feature.icon) return feature.icon;
+      if (feature.iconName)
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: feature.iconName,
+            size: 24,
+            className: feature.iconClassName
+          }
+        );
+      return null;
+    },
+    []
+  );
+  const renderFeatureLink = React.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__ */ jsxRuntime.jsxs(
+        Pressable,
+        {
+          href: feature.link,
+          className: cn(
+            "flex items-center gap-2 text-sm font-medium",
+            feature.linkClassName
+          ),
+          children: [
+            label,
+            /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+          ]
+        }
+      );
+    },
+    []
+  );
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
             renderFeatureIcon(feature),
-            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6 mb-2 font-medium", feature.titleClassName), children: feature.title })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: cn("mt-6 mb-2 font-medium", feature.titleClassName),
+                children: feature.title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn("mt-6 mb-2 font-medium", feature.titleClassName),
+                children: feature.title
+              }
+            )),
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm",
+                  getTextColor(background, "muted"),
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1019,7 +1084,55 @@ function FeaturePatternGridLinks({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 text-left",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
+      ] })
     }
   );
 }

package/dist/feature-pattern-grid-links.d.cts CHANGED Viewed

@@ -57,6 +57,26 @@ interface FeaturePatternGridLinksItem {
     linkClassName?: string;
 }
 interface FeaturePatternGridLinksProps {
+    /**
+     * Main heading content
+     */
+    title?: React.ReactNode;
+    /**
+     * Supporting description content
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the header
+     */
+    headerClassName?: string;
     /**
      * Array of feature items
      */
@@ -119,6 +139,6 @@ interface FeaturePatternGridLinksProps {
  * />
  * ```
  */
-declare function FeaturePatternGridLinks({ features, featuresSlot, className, containerClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeaturePatternGridLinksProps): React.JSX.Element;
+declare function FeaturePatternGridLinks({ title, description, titleClassName, descriptionClassName, headerClassName, features, featuresSlot, className, spacing, containerClassName, gridClassName, cardClassName, background, pattern, patternOpacity, patternClassName, }: FeaturePatternGridLinksProps): React.JSX.Element;
 export { FeaturePatternGridLinks, type FeaturePatternGridLinksProps };

package/dist/feature-pattern-grid-links.d.ts CHANGED Viewed

@@ -57,6 +57,26 @@ interface FeaturePatternGridLinksItem {
     linkClassName?: string;
 }
 interface FeaturePatternGridLinksProps {
+    /**
+     * Main heading content
+     */
+    title?: React.ReactNode;
+    /**
+     * Supporting description content
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the header
+     */
+    headerClassName?: string;
     /**
      * Array of feature items
      */
@@ -119,6 +139,6 @@ interface FeaturePatternGridLinksProps {
  * />
  * ```
  */
-declare function FeaturePatternGridLinks({ features, featuresSlot, className, containerClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeaturePatternGridLinksProps): React.JSX.Element;
+declare function FeaturePatternGridLinks({ title, description, titleClassName, descriptionClassName, headerClassName, features, featuresSlot, className, spacing, containerClassName, gridClassName, cardClassName, background, pattern, patternOpacity, patternClassName, }: FeaturePatternGridLinksProps): React.JSX.Element;
 export { FeaturePatternGridLinks, type FeaturePatternGridLinksProps };