@opensite/ui 2.6.1 → 2.6.3

package/dist/registry.js

@@ -21080,7 +21080,7 @@ function CarouselPortfolioHero({
   navigationClassName,
   counterClassName,
   optixFlowConfig,
-  background = "dark",
+  background,
   spacing = "none",
   pattern,
   patternOpacity,
@@ -21114,34 +21114,6 @@ function CarouselPortfolioHero({
       }
     };
   }, [resetInterval]);
-  const renderActions = () => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  };
   const currentSlide = slides?.[currentIndex];
   return /* @__PURE__ */ jsxs(
     Section,
@@ -21183,7 +21155,7 @@ function CarouselPortfolioHero({
             className: cn(
               "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 md:px-8 lg:px-12"
             ),
-            children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
+            children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", contentClassName), children: [
               currentSlide?.tag && /* @__PURE__ */ jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -21219,7 +21191,14 @@ function CarouselPortfolioHero({
                 {
                   className: cn("mt-8 flex items-center gap-4", actionsClassName),
                   children: [
-                    renderActions(),
+                    /* @__PURE__ */ jsx(
+                      BlockActions,
+                      {
+                        actions,
+                        actionsSlot,
+                        actionsClassName
+                      }
+                    ),
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
@@ -21233,7 +21212,11 @@ function CarouselPortfolioHero({
                             {
                               variant: "outline",
                               size: "icon",
-                              className: cn("rounded-full border-foreground/40", getNestedCardBg(background), getNestedCardTextColor(background)),
+                              className: cn(
+                                "rounded-full border-foreground/40",
+                                getNestedCardBg(background),
+                                getNestedCardTextColor(background)
+                              ),
                               onClick: goToPrev,
                               asButton: true,
                               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
@@ -23849,7 +23832,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -23859,7 +23841,6 @@ function FeatureBadgeGridSix({
                 {
                   className: cn(
                     "text-sm md:text-base",
-                    getTextColor(background, "muted"),
                     feature.descriptionClassName
                   ),
                   children: feature.description
@@ -23930,16 +23911,7 @@ function FeatureBadgeGridSix({
               ),
               children: title
             }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "text-2xl font-bold md:text-3xl lg:text-4xl",
-                titleClassName
-              ),
-              children: title
-            }
-          ))
+          ) : title)
         ] }),
         /* @__PURE__ */ jsx(
           "div",
@@ -24699,7 +24671,7 @@ function FeatureBentoUtilities({
       }
       return /* @__PURE__ */ jsxs(Card, { className: cardClasses, children: [
         renderTitle(),
-        card.description && /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: card.description })
+        card.description && /* @__PURE__ */ jsx("p", { className: "relative", children: card.description })
       ] }, index);
     },
     [optixFlowConfig]
@@ -24728,20 +24700,10 @@ function FeatureBentoUtilities({
       className,
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
-        (labelIconElement || label) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex items-center gap-2",
-              getTextColor(background, "muted"),
-              labelClassName
-            ),
-            children: [
-              labelIconElement,
-              label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: label }))
-            ]
-          }
-        ),
+        (labelIconElement || label) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", labelClassName), children: [
+          labelIconElement,
+          label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsx("div", { className: "text-sm", children: label }))
+        ] }),
         /* @__PURE__ */ jsx(Separator, { className: "mt-3 mb-8" }),
         /* @__PURE__ */ jsxs(
           "div",
@@ -25937,7 +25899,6 @@ function FeatureBentoImageGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -25945,6 +25906,7 @@ function FeatureBentoImageGrid({
   smallCardClassName,
   optixFlowConfig,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
@@ -26190,17 +26152,8 @@ function FeatureBentoImageGrid({
             ),
             children: title
           }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "mb-4 text-center text-4xl font-semibold text-balance",
-              titleClassName
-            ),
-            children: title
-          }
-        )),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-balance", descriptionClassName), children: description })),
+        ) : title),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : description),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -36923,11 +36876,11 @@ function BlogFilteredResultsComponent({
 }
 function BlogMasonryFeaturedComponent({
   heading,
+  description,
   posts,
   featuredSlot,
   postsSlot,
   className,
-  containerClassName,
   headingClassName,
   postsClassName,
   featuredClassName,
@@ -36935,7 +36888,8 @@ function BlogMasonryFeaturedComponent({
   postCardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -36944,7 +36898,7 @@ function BlogMasonryFeaturedComponent({
   const featuredPostContent = React30.useMemo(() => {
     if (featuredSlot) return featuredSlot;
     if (!featuredPost) return null;
-    const postHref = featuredPost.href || featuredPost.url || featuredPost.link || "#";
+    const postHref = featuredPost.href || featuredPost.url || featuredPost.link;
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -36971,13 +36925,13 @@ function BlogMasonryFeaturedComponent({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
-                /* @__PURE__ */ jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-2.5 flex items-center gap-1 text-sm", children: [
                   (featuredPost.date || featuredPost.published) && /* @__PURE__ */ jsx("time", { children: featuredPost.date || featuredPost.published }),
                   (featuredPost.date || featuredPost.published) && featuredPost.author && "\xB7",
                   featuredPost.author && /* @__PURE__ */ jsx("span", { children: featuredPost.author })
                 ] }),
-                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg md:text-3xl lg:text-4xl", children: featuredPost.title })),
-                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "mt-4 text-muted-foreground", children: featuredPost.description || featuredPost.summary })
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg", children: featuredPost.title })),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "mt-4", children: featuredPost.description || featuredPost.summary })
               ] })
             ]
           }
@@ -37034,22 +36988,24 @@ function BlogMasonryFeaturedComponent({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
           "h1",
           {
             className: cn(
-              "mb-6 md:mb-12 text-center text-4xl font-medium md:text-6xl text-balance",
+              "mb-6 md:mb-12 text-center text-2xl font-medium md:text-4xl text-balance",
               headingClassName
             ),
             children: heading
           }
-        ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+        ) : heading),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-balance", children: description }) : description),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "xs:grid-cols-1 mt-6 md:mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
+              "grid-cols-1 mt-6 md:mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
               postsClassName
             ),
             children: [
@@ -37638,7 +37594,6 @@ function BlogCarouselAppleComponent({
 function ArticleHeroProseComponent({
   post,
   className,
-  containerClassName,
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -37651,7 +37606,8 @@ function ArticleHeroProseComponent({
   dateFormat = "MMMM d, yyyy",
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -37722,8 +37678,9 @@ function ArticleHeroProseComponent({
       pattern,
       patternOpacity,
       className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
@@ -37735,7 +37692,7 @@ function ArticleHeroProseComponent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-3xl text-5xl font-semibold text-pretty md:text-6xl",
+                    "max-w-full md:max-w-3xl text-2xl font-semibold text-pretty md:text-5xl",
                     titleClassName
                   ),
                   children: title
@@ -37745,7 +37702,7 @@ function ArticleHeroProseComponent({
                 "h3",
                 {
                   className: cn(
-                    "max-w-3xl text-lg text-muted-foreground md:text-xl text-balance",
+                    "max-w-full md:max-w-3xl text-lg text-muted-foreground md:text-xl text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -37756,7 +37713,7 @@ function ArticleHeroProseComponent({
             ]
           }
         ) }),
-        children && /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsx(
+        children && /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
@@ -37924,7 +37881,6 @@ function ArticleSidebarStickyComponent({
 }
 function ArticleTocSidebarComponent({
   className,
-  containerClassName,
   articleClassName,
   sidebarClassName,
   headerClassName,
@@ -37952,19 +37908,18 @@ function ArticleTocSidebarComponent({
   heroMediaSlot,
   ctaTitle,
   ctaDescription,
-  ctaActions: ctaActionsProp,
-  ctaButtonText,
-  ctaButtonHref,
+  ctaActions,
   ctaSlot,
   children,
   enableTocTracking = true,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
-  patternOpacity
+  patternOpacity,
+  patternClassName
 }) {
-  const ctaActions = ctaActionsProp ?? (ctaButtonText ? [{ label: ctaButtonText, href: ctaButtonHref || "#", variant: "default", className: "w-full" }] : []);
   const [activeSection, setActiveSection] = React30.useState(
     sections?.[0]?.id || ""
   );
@@ -38000,7 +37955,14 @@ function ArticleTocSidebarComponent({
         /* @__PURE__ */ jsx(AvatarFallback, { children: authorName.charAt(0) })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        authorHref ? /* @__PURE__ */ jsx(Pressable, { href: authorHref, className: "text-sm font-medium hover:underline", children: authorName }) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: authorName }),
+        authorHref ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: authorHref,
+            className: "text-sm font-medium hover:underline",
+            children: authorName
+          }
+        ) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: authorName }),
         /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
           publishDate,
           readTime && /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -38010,7 +37972,15 @@ function ArticleTocSidebarComponent({
         ] })
       ] })
     ] });
-  }, [authorSlot, authorName, authorImage, authorHref, publishDate, readTime, authorClassName]);
+  }, [
+    authorSlot,
+    authorName,
+    authorImage,
+    authorHref,
+    publishDate,
+    readTime,
+    authorClassName
+  ]);
   const heroMediaContent = React30.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -38019,11 +37989,20 @@ function ArticleTocSidebarComponent({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        className: cn(
+          "my-8 aspect-video w-full rounded-lg object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
   const tocContent = React30.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
@@ -38051,12 +38030,20 @@ function ArticleTocSidebarComponent({
   }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
   const ctaContent = React30.useMemo(() => {
     if (ctaSlot) return ctaSlot;
-    if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0)) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", getNestedCardBg(background, "subtle"), getNestedCardTextColor(background), ctaClassName), children: [
+    if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0))
+      return null;
+    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", ctaClassName), children: [
       ctaTitle && (typeof ctaTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-semibold", children: ctaTitle }) : ctaTitle),
-      ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: ctaDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: ctaDescription })),
+      ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm", children: ctaDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: ctaDescription })),
       ctaActions && ctaActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: ctaActions.map((action, index) => {
-        const { label, icon, iconAfter, children: actionChildren, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children: actionChildren,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -38081,18 +38068,38 @@ function ArticleTocSidebarComponent({
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
-        /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
-            categoryContent,
-            title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", titleClassName), children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
-            authorContent
-          ] }),
-          heroMediaContent,
-          children
-        ] }),
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
+        /* @__PURE__ */ jsxs(
+          "article",
+          {
+            className: cn(
+              "prose max-w-none dark:prose-invert",
+              articleClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
+                categoryContent,
+                title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mt-4 text-2xl font-bold tracking-tight md:text-4xl",
+                      titleClassName
+                    ),
+                    children: title
+                  }
+                ) : title),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description),
+                authorContent
+              ] }),
+              heroMediaContent,
+              children
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
           tocContent,
           ctaContent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3399,7 +3399,7 @@
   },
   "dependencies": {
     "@opensite/hooks": "2.1.0",
-    "@page-speed/forms": "0.7.8",
+    "@page-speed/forms": "0.7.9",
     "@page-speed/icon": "0.1.1",
     "@page-speed/img": "0.4.6",
     "@page-speed/lightbox": "0.2.1",