@opensite/ui 2.6.6 → 2.6.8

package/dist/registry.js

@@ -21201,7 +21201,7 @@ function CarouselPortfolioHero({
                       "div",
                       {
                         className: cn(
-                          "ml-auto flex items-center gap-2",
+                          "ml-auto flex items-center gap-2 mt-4 md:mt-8",
                           navigationClassName
                         ),
                         children: [
@@ -36428,7 +36428,7 @@ function BreadcrumbList({ className, ...props }) {
     {
       "data-slot": "breadcrumb-list",
       className: cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5",
         className
       ),
       ...props
@@ -36455,7 +36455,7 @@ function BreadcrumbLink({
     Comp,
     {
       "data-slot": "breadcrumb-link",
-      className: cn("hover:text-foreground transition-colors", className),
+      className: cn("hover:underline transition-colors", className),
       ...props
     }
   );
@@ -36468,7 +36468,7 @@ function BreadcrumbPage({ className, ...props }) {
       role: "link",
       "aria-disabled": "true",
       "aria-current": "page",
-      className: cn("text-foreground font-normal", className),
+      className: cn("font-normal", className),
       ...props
     }
   );
@@ -37742,7 +37742,7 @@ function ArticleSidebarStickyComponent({
       {
         href: backHref,
         className: cn(
-          "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground",
+          "inline-flex items-center gap-2 text-sm",
           backLinkClassName
         ),
         children: [
@@ -37771,7 +37771,7 @@ function ArticleSidebarStickyComponent({
               children: authorName
             }
           ) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: authorName }),
-          publishDate && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: publishDate })
+          publishDate && /* @__PURE__ */ jsx("p", { className: "text-xs", children: publishDate })
         ] })
       ] });
     },
@@ -38114,7 +38114,8 @@ function ArticleBreadcrumbSocialComponent({
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
   pattern,
-  patternOpacity
+  patternOpacity,
+  patternClassName
 }) {
   const [activeSection, setActiveSection] = React30.useState(
     sections?.[0]?.id || ""
@@ -38181,7 +38182,7 @@ function ArticleBreadcrumbSocialComponent({
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
             author.name && /* @__PURE__ */ jsx("p", { className: "font-medium", children: author.name }),
-            (author.role || publishDate || readTime) && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: [author.role, publishDate, readTime].filter(Boolean).join(" \xB7 ") })
+            (author.role || publishDate || readTime) && /* @__PURE__ */ jsx("p", { className: "text-sm", children: [author.role, publishDate, readTime].filter(Boolean).join(" \xB7 ") })
           ] })
         ]
       }
@@ -38225,7 +38226,7 @@ function ArticleBreadcrumbSocialComponent({
             href: `#${section.id}`,
             className: cn(
               "block text-sm transition-colors",
-              isActive ? "font-medium" : "text-muted-foreground hover:text-foreground"
+              isActive ? "underline" : ""
             ),
             children: section.title
           },
@@ -38241,7 +38242,8 @@ function ArticleBreadcrumbSocialComponent({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -38266,7 +38268,6 @@ function ArticleBreadcrumbSocialComponent({
                     }
                   ) : title),
                   authorContent,
-                  /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
                   heroMediaContent,
                   children
                 ]
@@ -38279,7 +38280,7 @@ function ArticleBreadcrumbSocialComponent({
           "button",
           {
             onClick: scrollToTop,
-            className: "fixed bottom-8 right-8 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-opacity hover:opacity-90",
+            className: "fixed bottom-8 right-8 flex h-10 w-10 items-center justify-center rounded-full shadow-lg transition-opacity hover:opacity-90",
             "aria-label": "Back to top",
             children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up", size: 20 })
           }
@@ -38321,7 +38322,8 @@ function ArticleCompactTocComponent({
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
   pattern,
-  patternOpacity
+  patternOpacity,
+  patternClassName
 }) {
   const [activeSection, setActiveSection] = React30.useState(
     sections?.[0]?.id || ""
@@ -38358,23 +38360,6 @@ function ArticleCompactTocComponent({
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: currentPage }) })
     ] }) });
   }, [breadcrumbsSlot, breadcrumbs, currentPage, breadcrumbClassName]);
-  const shareContent = React30.useMemo(() => {
-    if (shareSlot) return shareSlot;
-    if (!socialLinks || socialLinks.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("mt-6 flex items-center gap-2", shareClassName), children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Share:" }),
-      socialLinks.map((link, index) => /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          href: link.href,
-          className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted",
-          "aria-label": link["aria-label"] || `Share on ${link.platform}`,
-          children: /* @__PURE__ */ jsx(DynamicIcon, { name: `lucide/${link.platform}`, size: 16 })
-        },
-        index
-      ))
-    ] });
-  }, [shareSlot, socialLinks, shareClassName]);
   const renderTocLinks = React30.useCallback(
     (onLinkClick) => {
       if (!sections) return null;
@@ -38389,7 +38374,7 @@ function ArticleCompactTocComponent({
             href: `#${section.id}`,
             className: cn(
               "block text-sm transition-colors",
-              isActive ? "font-medium" : "text-muted-foreground hover:text-foreground"
+              isActive ? "underline" : ""
             ),
             onClick: onLinkClick,
             children: section.title
@@ -38433,23 +38418,14 @@ function ArticleCompactTocComponent({
       )
     ] }) });
   }, [tocSlot, sections, isTocOpen, tocClassName, renderTocLinks]);
+  const hasDesktopToc = !tocSlot && sections && sections.length > 0;
   const desktopTocContent = React30.useMemo(() => {
-    if (tocSlot) return null;
-    if (!sections || sections.length === 0) return null;
-    return /* @__PURE__ */ jsx(
-      "aside",
-      {
-        className: cn(
-          "hidden lg:block fixed top-24 right-8 w-64 max-h-[calc(100vh-8rem)] overflow-y-auto",
-          tocClassName
-        ),
-        children: /* @__PURE__ */ jsxs("nav", { className: "space-y-2 rounded-lg border bg-background p-4", children: [
-          /* @__PURE__ */ jsx("span", { className: "mb-3 block text-sm font-semibold", children: "Table of Contents" }),
-          renderTocLinks()
-        ] })
-      }
-    );
-  }, [tocSlot, sections, tocClassName, renderTocLinks]);
+    if (!hasDesktopToc) return null;
+    return /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block w-64 shrink-0", tocClassName), children: /* @__PURE__ */ jsxs("nav", { className: "sticky top-24 max-h-[calc(100vh-8rem)] overflow-y-auto space-y-2 rounded-lg border p-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "mb-3 block text-sm font-semibold", children: "Table of Contents" }),
+      renderTocLinks()
+    ] }) });
+  }, [hasDesktopToc, tocClassName, renderTocLinks]);
   const heroMediaContent = React30.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -38472,20 +38448,20 @@ function ArticleCompactTocComponent({
     heroImageClassName,
     optixFlowConfig
   ]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative", className),
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
-      children: [
-        desktopTocContent,
-        /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-          breadcrumbsContent,
-          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        breadcrumbsContent,
+        /* @__PURE__ */ jsxs("div", { className: cn("relative", hasDesktopToc && "lg:flex lg:gap-8"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(hasDesktopToc && "min-w-0 lg:flex-1"), children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsx(
               "h1",
               {
@@ -38500,11 +38476,11 @@ function ArticleCompactTocComponent({
               "div",
               {
                 className: cn(
-                  "mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground",
+                  "mt-4 flex flex-wrap items-center gap-4 text-sm",
                   metaClassName
                 ),
                 children: [
-                  authorName && (authorHref ? /* @__PURE__ */ jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsx("span", { children: authorName })),
+                  authorName && /* @__PURE__ */ jsx(Pressable, { href: authorHref, children: authorName }),
                   authorName && publishDate && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" }),
                   publishDate && /* @__PURE__ */ jsx("span", { children: publishDate }),
                   publishDate && readTime && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" }),
@@ -38512,8 +38488,6 @@ function ArticleCompactTocComponent({
                 ]
               }
             ),
-            shareContent,
-            /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
             tocContent,
             children && /* @__PURE__ */ jsxs(
               "article",
@@ -38528,9 +38502,10 @@ function ArticleCompactTocComponent({
                 ]
               }
             )
-          ] })
+          ] }),
+          desktopTocContent
         ] })
-      ]
+      ] })
     }
   );
 }
@@ -38569,6 +38544,7 @@ function ArticleChaptersAuthorComponent({
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
+  patternClassName,
   pattern,
   patternOpacity
 }) {
@@ -38622,16 +38598,14 @@ function ArticleChaptersAuthorComponent({
             href: `#${chapter.id}`,
             className: cn(
               "flex items-center gap-3 text-sm transition-colors",
-              isActive ? "font-medium" : ""
+              isActive ? "underline" : ""
             ),
             children: [
               /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: cn(
-                    "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                    getNestedCardBg(background),
-                    getNestedCardTextColor(background)
+                    "flex h-6 w-6 items-center justify-center rounded-full text-xs"
                   ),
                   children: chapter.number
                 }
@@ -38657,19 +38631,7 @@ function ArticleChaptersAuthorComponent({
     if (author.socialLinks) {
       if (Array.isArray(author.socialLinks)) {
         if (author.socialLinks.length > 0) {
-          socialLinksContent = /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: author.socialLinks.map((link, index) => /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              href: link.href,
-              className: cn(
-                "flex h-8 w-8 items-center justify-center rounded-md border",
-                link.className
-              ),
-              "aria-label": link["aria-label"],
-              children: link.icon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: `lucide/${link.platform}`, size: 14 })
-            },
-            index
-          )) });
+          socialLinksContent = /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: author.socialLinks.map((link, index) => /* @__PURE__ */ jsx(SocialLinkIcon, { href: link.href }, index)) });
         }
       } else {
         const links = author.socialLinks;
@@ -38704,10 +38666,10 @@ function ArticleChaptersAuthorComponent({
         ] }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("p", { className: "font-medium", children: author.name }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: author.role })
+          /* @__PURE__ */ jsx("p", { className: "text-xs", children: author.role })
         ] })
       ] }),
-      author.bio && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: author.bio }),
+      author.bio && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm", children: author.bio }),
       socialLinksContent
     ] });
   }, [authorSlot, author, authorClassName]);
@@ -38742,8 +38704,6 @@ function ArticleChaptersAuthorComponent({
       {
         className: cn(
           "mt-12 rounded-lg border p-6 not-prose",
-          getNestedCardBg(background, "subtle"),
-          getNestedCardTextColor(background),
           conclusionClassName
         ),
         children: [
@@ -38790,7 +38750,8 @@ function ArticleChaptersAuthorComponent({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      patternClassName,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         breadcrumbsContent,
@@ -38842,7 +38803,6 @@ function ArticleChaptersAuthorComponent({
 }
 function ArticleSplitAnimatedComponent({
   className,
-  containerClassName,
   imageContainerClassName,
   contentClassName,
   titleClassName,
@@ -38866,25 +38826,16 @@ function ArticleSplitAnimatedComponent({
   category,
   categoryHref,
   categorySlot,
-  ctaActions: ctaActionsProp,
-  ctaText,
-  ctaHref,
+  ctaActions,
   ctaSlot,
   enableAnimations = true,
   optixFlowConfig,
   background,
-  spacing,
   pattern,
-  patternOpacity
+  patternOpacity,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg"
 }) {
-  const ctaActions = ctaActionsProp ?? (ctaText ? [
-    {
-      label: ctaText,
-      href: ctaHref || "#",
-      variant: "default",
-      size: "lg"
-    }
-  ] : []);
   const MotionWrapper = enableAnimations ? motion.div : "div";
   const categoryContent = React30.useMemo(() => {
     if (categorySlot) return categorySlot;
@@ -38894,7 +38845,7 @@ function ArticleSplitAnimatedComponent({
       {
         href: categoryHref,
         className: cn(
-          "inline-block rounded-full bg-primary/20 px-3 py-1 text-sm font-medium text-primary-foreground backdrop-blur-sm transition-colors hover:bg-primary/30",
+          "inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium text-primary-foreground backdrop-blur-sm transition-colors",
           categoryClassName
         ),
         children: category
@@ -38931,7 +38882,7 @@ function ArticleSplitAnimatedComponent({
             children: authorName
           }
         ) : /* @__PURE__ */ jsx("p", { className: "font-medium", children: authorName }),
-        authorRole && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: authorRole })
+        authorRole && /* @__PURE__ */ jsx("p", { className: "text-sm ", children: authorRole })
       ] })
     ] });
   }, [
@@ -39002,7 +38953,7 @@ function ArticleSplitAnimatedComponent({
             children: [
               heroMediaContent,
               /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent" }),
-              /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 p-6", children: categoryContent })
+              /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 p-4 md:p-6", children: categoryContent })
             ]
           }
         ),
@@ -39016,7 +38967,7 @@ function ArticleSplitAnimatedComponent({
                 "div",
                 {
                   className: cn(
-                    "flex items-center gap-4 text-sm text-muted-foreground",
+                    "flex items-center gap-4 text-sm ",
                     metaClassName
                   ),
                   children: [
@@ -39035,17 +38986,8 @@ function ArticleSplitAnimatedComponent({
                   ),
                   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 })),
+              ) : title),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description),
               authorContent,
               ctaContent
             ]
@@ -58626,7 +58568,7 @@ function HeroEventRegistration({
   locationSublabel,
   locationSlot,
   background,
-  containerClassName = "mx-auto w-full max-w-full md:max-w-7xl relative z-10 px-6 sm:px-8 md:px-12 lg:px-18",
+  containerClassName = "mx-auto w-full max-w-full md:max-w-7xl relative z-10 px-6",
   spacing = "py-16 md:py-40",
   pattern,
   patternOpacity,

package/dist/resource-detail-document-sidebar.cjs

@@ -505,7 +505,7 @@ function BreadcrumbList({ className, ...props }) {
     {
       "data-slot": "breadcrumb-list",
       className: cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5",
         className
       ),
       ...props
@@ -532,7 +532,7 @@ function BreadcrumbLink({
     Comp,
     {
       "data-slot": "breadcrumb-link",
-      className: cn("hover:text-foreground transition-colors", className),
+      className: cn("hover:underline transition-colors", className),
       ...props
     }
   );
@@ -545,7 +545,7 @@ function BreadcrumbPage({ className, ...props }) {
       role: "link",
       "aria-disabled": "true",
       "aria-current": "page",
-      className: cn("text-foreground font-normal", className),
+      className: cn("font-normal", className),
       ...props
     }
   );

package/dist/resource-detail-document-sidebar.js

@@ -482,7 +482,7 @@ function BreadcrumbList({ className, ...props }) {
     {
       "data-slot": "breadcrumb-list",
       className: cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5",
         className
       ),
       ...props
@@ -509,7 +509,7 @@ function BreadcrumbLink({
     Comp,
     {
       "data-slot": "breadcrumb-link",
-      className: cn("hover:text-foreground transition-colors", className),
+      className: cn("hover:underline transition-colors", className),
       ...props
     }
   );
@@ -522,7 +522,7 @@ function BreadcrumbPage({ className, ...props }) {
       role: "link",
       "aria-disabled": "true",
       "aria-current": "page",
-      className: cn("text-foreground font-normal", className),
+      className: cn("font-normal", className),
       ...props
     }
   );

package/dist/resource-list-hero-filter.cjs

@@ -593,7 +593,7 @@ function BreadcrumbList({ className, ...props }) {
     {
       "data-slot": "breadcrumb-list",
       className: cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5",
         className
       ),
       ...props
@@ -620,7 +620,7 @@ function BreadcrumbLink({
     Comp,
     {
       "data-slot": "breadcrumb-link",
-      className: cn("hover:text-foreground transition-colors", className),
+      className: cn("hover:underline transition-colors", className),
       ...props
     }
   );

package/dist/resource-list-hero-filter.js

@@ -569,7 +569,7 @@ function BreadcrumbList({ className, ...props }) {
     {
       "data-slot": "breadcrumb-list",
       className: cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5",
         className
       ),
       ...props
@@ -596,7 +596,7 @@ function BreadcrumbLink({
     Comp,
     {
       "data-slot": "breadcrumb-link",
-      className: cn("hover:text-foreground transition-colors", className),
+      className: cn("hover:underline transition-colors", className),
       ...props
     }
   );

package/package.json

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