@opensite/ui 1.3.0 → 1.3.2

package/dist/registry.js

@@ -20499,10 +20499,11 @@ function FeatureShowcase({
   slideClassName,
   contentClassName,
   mediaClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   equalizeOnMobile,
   stretchMediaOnMobile,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -20625,6 +20626,7 @@ function FeatureShowcase({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: [
         children,
         carouselContent
@@ -20790,7 +20792,7 @@ function FeatureSplitImageReverse({
   actions,
   actionsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   gridClassName,
   imageClassName,
   contentClassName,
@@ -20799,7 +20801,7 @@ function FeatureSplitImageReverse({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -23945,7 +23947,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 +24819,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 +25007,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 +25316,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 +25444,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
+          }
+        )
+      ] })
     }
   );
 }
@@ -25645,7 +25760,7 @@ function FeatureUtilityCardsGrid({
   utilities,
   utilitiesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   labelClassName,
   titleClassName,
@@ -25654,7 +25769,7 @@ function FeatureUtilityCardsGrid({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -25662,7 +25777,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 +25881,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
               ]
             }
@@ -25810,7 +25941,7 @@ function FeatureBentoUtilities({
   rightColumnCards,
   rightColumnSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   labelClassName,
   titleClassName,
@@ -25819,7 +25950,7 @@ function FeatureBentoUtilities({
   columnClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -25917,7 +26048,7 @@ function FeatureChecklistThreeColumn({
   cards,
   cardsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerGridClassName,
   titleClassName,
   checklistClassName,
@@ -25925,7 +26056,7 @@ function FeatureChecklistThreeColumn({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -26044,7 +26175,7 @@ function FeatureIntegrationCards({
   integrations,
   integrationsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -26052,7 +26183,7 @@ function FeatureIntegrationCards({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -26155,7 +26286,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
@@ -26235,7 +26366,7 @@ function FeatureIconTabsContent({
     if (!tabs || tabs.length === 0) return null;
     const activeDefaultTab = defaultTab || tabs[0]?.value;
     return /* @__PURE__ */ jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50 hover:scrollbar-thumb-border md:overflow-x-visible [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/30", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "container overflow-x-auto pl-0 pr-4 md:pl-4 md:pr-4 pb-2 md:px-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50 hover:scrollbar-thumb-border md:overflow-x-visible [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/30", children: /* @__PURE__ */ jsx(
         TabsList,
         {
           className: cn(
@@ -26261,7 +26392,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/60 rounded-2xl shadow-lg", children: tabs.map((tab) => {
         if (tab.contentSlot) {
           return /* @__PURE__ */ jsx(
             TabsContent,
@@ -26298,7 +26429,7 @@ function FeatureIconTabsContent({
                   "h3",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -26307,7 +26438,7 @@ function FeatureIconTabsContent({
                   "div",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -26379,7 +26510,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 +26519,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
@@ -26464,7 +26595,7 @@ function FeatureImageOverlayBadge({
   overlayLinkUrl,
   overlayLinkOnClick,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   gridClassName,
   contentClassName,
   badgeClassName,
@@ -26808,7 +26939,7 @@ function FeatureBentoImageGrid({
   items,
   itemsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -26816,7 +26947,7 @@ function FeatureBentoImageGrid({
   smallCardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -26963,7 +27094,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 +27150,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 +27220,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 +27229,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
@@ -27475,7 +27606,7 @@ function FeatureAccordionImage({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -27618,8 +27749,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 +27777,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 +27795,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 +27824,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 +27869,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.2",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",