@opensite/ui 1.3.0 → 1.3.1

package/dist/registry.js

@@ -23945,7 +23945,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
         ),
@@ -24817,7 +24817,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")
@@ -25005,13 +25005,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
@@ -25314,59 +25314,124 @@ function FeatureBadgeGridSix({
   );
 }
 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$1(() => {
     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,
     {
@@ -25377,7 +25442,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
+          }
+        )
+      ] })
     }
   );
 }
@@ -25662,7 +25775,14 @@ function FeatureUtilityCardsGrid({
   const renderLabelIcon = useMemo$1(() => {
     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$1(() => {
@@ -25759,10 +25879,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
               ]
             }
@@ -26155,7 +26284,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
@@ -26247,7 +26376,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
@@ -26261,7 +26390,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,
@@ -26298,7 +26427,7 @@ function FeatureIconTabsContent({
                   "h3",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -26307,7 +26436,7 @@ function FeatureIconTabsContent({
                   "div",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -26379,7 +26508,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
@@ -26388,7 +26517,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
@@ -26963,7 +27092,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,
@@ -27019,7 +27148,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,
@@ -27089,7 +27218,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
@@ -27098,7 +27227,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
@@ -27618,8 +27747,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,
@@ -27646,7 +27775,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
           ),
@@ -27664,7 +27793,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
@@ -27693,7 +27822,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
@@ -27738,7 +27867,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/package.json

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