@opensite/ui 2.6.6 → 2.6.7

package/dist/article-compact-toc.js

@@ -974,7 +974,8 @@ function ArticleCompactTocComponent({
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "hero",
   pattern,
-  patternOpacity
+  patternOpacity,
+  patternClassName
 }) {
   const [activeSection, setActiveSection] = React5.useState(
     sections?.[0]?.id || ""
@@ -1015,7 +1016,7 @@ function ArticleCompactTocComponent({
     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:" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Share:" }),
       socialLinks.map((link, index) => /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -1042,7 +1043,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
@@ -1086,23 +1087,14 @@ function ArticleCompactTocComponent({
       )
     ] }) });
   }, [tocSlot, sections, isTocOpen, tocClassName, renderTocLinks]);
+  const hasDesktopToc = !tocSlot && sections && sections.length > 0;
   const desktopTocContent = React5.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 = React5.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -1125,20 +1117,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",
               {
@@ -1153,11 +1145,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" }),
@@ -1166,7 +1158,6 @@ function ArticleCompactTocComponent({
               }
             ),
             shareContent,
-            /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
             tocContent,
             children && /* @__PURE__ */ jsxs(
               "article",
@@ -1181,9 +1172,10 @@ function ArticleCompactTocComponent({
                 ]
               }
             )
-          ] })
+          ] }),
+          desktopTocContent
         ] })
-      ]
+      ] })
     }
   );
 }

package/dist/article-hero-prose.cjs

@@ -896,7 +896,7 @@ function ArticleHeroProseComponent({
   dateFormat = "MMMM d, yyyy",
   optixFlowConfig,
   background,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName,
   spacing = "hero",
   pattern,
   patternOpacity

package/dist/article-hero-prose.js

@@ -874,7 +874,7 @@ function ArticleHeroProseComponent({
   dateFormat = "MMMM d, yyyy",
   optixFlowConfig,
   background,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName,
   spacing = "hero",
   pattern,
   patternOpacity

package/dist/article-sidebar-sticky.cjs

@@ -925,7 +925,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: [
@@ -954,7 +954,7 @@ function ArticleSidebarStickyComponent({
               children: authorName
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: authorName }),
-          publishDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: publishDate })
+          publishDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: publishDate })
         ] })
       ] });
     },

package/dist/article-sidebar-sticky.js

@@ -903,7 +903,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: [
@@ -932,7 +932,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 })
         ] })
       ] });
     },

package/dist/article-split-animated.cjs

@@ -898,7 +898,6 @@ var Section = React__namespace.default.forwardRef(
 Section.displayName = "Section";
 function ArticleSplitAnimatedComponent({
   className,
-  containerClassName,
   imageContainerClassName,
   contentClassName,
   titleClassName,
@@ -922,25 +921,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 ? framerMotion.motion.div : "div";
   const categoryContent = React__namespace.useMemo(() => {
     if (categorySlot) return categorySlot;
@@ -950,7 +940,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
@@ -987,7 +977,7 @@ function ArticleSplitAnimatedComponent({
             children: authorName
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: authorName }),
-        authorRole && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: authorRole })
+        authorRole && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm ", children: authorRole })
       ] })
     ] });
   }, [
@@ -1072,7 +1062,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: [
@@ -1091,17 +1081,8 @@ function ArticleSplitAnimatedComponent({
                   ),
                   children: title
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", titleClassName), children: title })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
+              ) : title),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description),
               authorContent,
               ctaContent
             ]

package/dist/article-split-animated.d.cts

@@ -112,16 +112,6 @@ interface ArticleSplitAnimatedProps {
      * CTA actions
      */
     ctaActions?: ActionConfig[];
-    /**
-     * @deprecated Use ctaActions instead
-     * CTA button text (backward compatibility)
-     */
-    ctaText?: string;
-    /**
-     * @deprecated Use ctaActions instead
-     * CTA button href (backward compatibility)
-     */
-    ctaHref?: string;
     /**
      * Custom slot for CTA section (overrides ctaActions)
      */
@@ -152,6 +142,6 @@ interface ArticleSplitAnimatedProps {
      */
     patternOpacity?: number;
 }
-declare function ArticleSplitAnimatedComponent({ className, containerClassName, imageContainerClassName, contentClassName, titleClassName, descriptionClassName, authorClassName, categoryClassName, metaClassName, ctaClassName, title, description, image, imageAlt, heroMediaSlot, authorName, authorImage, authorRole, authorHref, authorSlot, publishDate, readTime, category, categoryHref, categorySlot, ctaActions: ctaActionsProp, ctaText, ctaHref, ctaSlot, enableAnimations, optixFlowConfig, background, spacing, pattern, patternOpacity, }: ArticleSplitAnimatedProps): react_jsx_runtime.JSX.Element;
+declare function ArticleSplitAnimatedComponent({ className, imageContainerClassName, contentClassName, titleClassName, descriptionClassName, authorClassName, categoryClassName, metaClassName, ctaClassName, title, description, image, imageAlt, heroMediaSlot, authorName, authorImage, authorRole, authorHref, authorSlot, publishDate, readTime, category, categoryHref, categorySlot, ctaActions, ctaSlot, enableAnimations, optixFlowConfig, background, pattern, patternOpacity, containerClassName, spacing, }: ArticleSplitAnimatedProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleSplitAnimatedComponent as ArticleSplitAnimated, type ArticleSplitAnimatedProps };

package/dist/article-split-animated.d.ts

@@ -112,16 +112,6 @@ interface ArticleSplitAnimatedProps {
      * CTA actions
      */
     ctaActions?: ActionConfig[];
-    /**
-     * @deprecated Use ctaActions instead
-     * CTA button text (backward compatibility)
-     */
-    ctaText?: string;
-    /**
-     * @deprecated Use ctaActions instead
-     * CTA button href (backward compatibility)
-     */
-    ctaHref?: string;
     /**
      * Custom slot for CTA section (overrides ctaActions)
      */
@@ -152,6 +142,6 @@ interface ArticleSplitAnimatedProps {
      */
     patternOpacity?: number;
 }
-declare function ArticleSplitAnimatedComponent({ className, containerClassName, imageContainerClassName, contentClassName, titleClassName, descriptionClassName, authorClassName, categoryClassName, metaClassName, ctaClassName, title, description, image, imageAlt, heroMediaSlot, authorName, authorImage, authorRole, authorHref, authorSlot, publishDate, readTime, category, categoryHref, categorySlot, ctaActions: ctaActionsProp, ctaText, ctaHref, ctaSlot, enableAnimations, optixFlowConfig, background, spacing, pattern, patternOpacity, }: ArticleSplitAnimatedProps): react_jsx_runtime.JSX.Element;
+declare function ArticleSplitAnimatedComponent({ className, imageContainerClassName, contentClassName, titleClassName, descriptionClassName, authorClassName, categoryClassName, metaClassName, ctaClassName, title, description, image, imageAlt, heroMediaSlot, authorName, authorImage, authorRole, authorHref, authorSlot, publishDate, readTime, category, categoryHref, categorySlot, ctaActions, ctaSlot, enableAnimations, optixFlowConfig, background, pattern, patternOpacity, containerClassName, spacing, }: ArticleSplitAnimatedProps): react_jsx_runtime.JSX.Element;
 
 export { ArticleSplitAnimatedComponent as ArticleSplitAnimated, type ArticleSplitAnimatedProps };

package/dist/article-split-animated.js

@@ -875,7 +875,6 @@ var Section = React__default.forwardRef(
 Section.displayName = "Section";
 function ArticleSplitAnimatedComponent({
   className,
-  containerClassName,
   imageContainerClassName,
   contentClassName,
   titleClassName,
@@ -899,25 +898,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 = React.useMemo(() => {
     if (categorySlot) return categorySlot;
@@ -927,7 +917,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
@@ -964,7 +954,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 })
       ] })
     ] });
   }, [
@@ -1049,7 +1039,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: [
@@ -1068,17 +1058,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
             ]

package/dist/carousel-portfolio-hero.cjs

@@ -1098,7 +1098,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: [

package/dist/carousel-portfolio-hero.js

@@ -1077,7 +1077,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: [