@opensite/ui 0.4.2 → 0.4.4

package/dist/timeline-alternating-diagonal.cjs

@@ -496,6 +496,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -515,7 +516,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -605,74 +606,140 @@ function TimelineAlternatingDiagonal({
       patternClassName,
       style,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-y", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8 mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", containerClassName), children: [
-          renderBadge(),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl leading-tight tracking-tight md:text-4xl lg:text-6xl", headingClassName), children: heading }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[600px] tracking-[-0.32px] text-muted-foreground", descriptionClassName), children: description })
-        ] }) }),
-        items && items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden border-x pb-40 lg:pt-20 [&>*:last-child]:pb-20 [&>div>div:first-child]:pt-20! mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex", itemClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex w-full justify-center px-1 py-10 text-end md:gap-6 lg:gap-10",
-                item.reverse ? "lg:flex-row-reverse lg:text-start" : ""
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-y", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8 mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl",
+              containerClassName
+            ),
+            children: [
+              renderBadge(),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl leading-tight tracking-tight md:text-4xl lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
               ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 max-lg:hidden", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl tracking-[-0.96px]", titleClassName), children: item.title }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "mt-2.5 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground",
-                        item.reverse ? "" : "ml-auto",
-                        itemDescriptionClassName
-                      ),
-                      children: item.description
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-[-1] size-fit -translate-y-5 bg-background p-4 max-lg:-translate-x-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[10px] border bg-card p-[5px] shadow-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-fit rounded-md border bg-muted p-1", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 16 }) }) }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 max-lg:-translate-x-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-start lg:pointer-events-none lg:hidden", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl tracking-[-0.96px]", titleClassName), children: item.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2.5 mb-10 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground", itemDescriptionClassName), children: item.description })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: item.reverse ? "lg:ml-auto" : "", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsxRuntime.jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid grid-cols-[auto_1fr_auto] items-stretch", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(DiagonalPattern, { className: "h-full w-6 lg:w-10" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-[600px] tracking-[-0.32px] text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              )
+            ]
+          }
+        ) }),
+        items && items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "overflow-hidden border-x pb-40 lg:pt-20 [&>*:last-child]:pb-20 [&>div>div:first-child]:pt-20! mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl",
+              itemsClassName
+            ),
+            children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex", itemClassName), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex w-full justify-center px-1 py-10 text-end md:gap-6 lg:gap-10",
+                    item.reverse ? "lg:flex-row-reverse lg:text-start" : ""
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 max-lg:hidden", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
-                        img.Img,
+                        "h3",
                         {
-                          src: item.image.src,
-                          alt: item.image.alt,
-                          className: cn("object-contain dark:invert", imageClassName),
-                          width: 400,
-                          height: 500,
-                          optixFlowConfig
+                          className: cn(
+                            "text-2xl tracking-[-0.96px]",
+                            titleClassName
+                          ),
+                          children: item.title
                         }
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsx(DiagonalPattern, { className: "w-6 lg:w-10" })
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "mt-2.5 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground",
+                            item.reverse ? "" : "ml-auto",
+                            itemDescriptionClassName
+                          ),
+                          children: item.description
+                        }
+                      )
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsxRuntime.jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) })
-                  ] }) })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "absolute z-[-2] h-full w-[3px] translate-x-5 rounded-full lg:left-1/2 lg:-translate-x-1/2",
-                index === items.length - 1 ? "bg-linear-to-b from-foreground/10 via-foreground/10 to-transparent" : "bg-foreground/10"
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-[-1] size-fit -translate-y-5 bg-background p-4 max-lg:-translate-x-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[10px] border bg-card p-[5px] shadow-md", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-fit rounded-md border bg-muted p-1", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 16 }) }) }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 max-lg:-translate-x-4", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-start lg:pointer-events-none lg:hidden", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "h3",
+                          {
+                            className: cn(
+                              "text-2xl tracking-[-0.96px]",
+                              titleClassName
+                            ),
+                            children: item.title
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "p",
+                          {
+                            className: cn(
+                              "mt-2.5 mb-10 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground",
+                              itemDescriptionClassName
+                            ),
+                            children: item.description
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: item.reverse ? "lg:ml-auto" : "", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsxRuntime.jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid grid-cols-[auto_1fr_auto] items-stretch", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(DiagonalPattern, { className: "h-full w-6 lg:w-10" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            img.Img,
+                            {
+                              src: item.image.src,
+                              alt: item.image.alt,
+                              className: cn(
+                                "object-contain dark:invert",
+                                imageClassName
+                              ),
+                              width: 400,
+                              height: 500,
+                              optixFlowConfig
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(DiagonalPattern, { className: "w-6 lg:w-10" })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsxRuntime.jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) })
+                      ] }) })
+                    ] })
+                  ]
+                }
               ),
-              children: index === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-[3px] -translate-y-full bg-linear-to-b from-transparent to-foreground/10" })
-            }
-          )
-        ] }, index)) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute z-[-2] h-full w-[3px] translate-x-5 rounded-full lg:left-1/2 lg:-translate-x-1/2",
+                    index === items.length - 1 ? "bg-linear-to-b from-foreground/10 via-foreground/10 to-transparent" : "bg-foreground/10"
+                  ),
+                  children: index === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-[3px] -translate-y-full bg-linear-to-b from-transparent to-foreground/10" })
+                }
+              )
+            ] }, index))
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-full border-y md:h-12 lg:h-28", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full border-x mx-auto px-2 sm:px-4 lg:px-8 max-w-7xl" }) })
       ]
     }

package/dist/timeline-alternating-diagonal.d.cts

@@ -1,11 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import './patternSvgs-c5ZNVoTT.cjs';
-import './blocks-CJYRLpXR.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineAlternatingItem {
@@ -89,7 +88,7 @@ interface TimelineAlternatingDiagonalProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/timeline-alternating-diagonal.d.ts

@@ -1,11 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import './patternSvgs-c5ZNVoTT.js';
-import './blocks-BWc_7JNA.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface TimelineAlternatingItem {
@@ -89,7 +88,7 @@ interface TimelineAlternatingDiagonalProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/timeline-alternating-diagonal.js

@@ -475,6 +475,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -494,7 +495,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -584,74 +585,140 @@ function TimelineAlternatingDiagonal({
       patternClassName,
       style,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "border-y", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8 mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", containerClassName), children: [
-          renderBadge(),
-          /* @__PURE__ */ jsx("h2", { className: cn("text-3xl leading-tight tracking-tight md:text-4xl lg:text-6xl", headingClassName), children: heading }),
-          /* @__PURE__ */ jsx("p", { className: cn("max-w-[600px] tracking-[-0.32px] text-muted-foreground", descriptionClassName), children: description })
-        ] }) }),
-        items && items.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden border-x pb-40 lg:pt-20 [&>*:last-child]:pb-20 [&>div>div:first-child]:pt-20! mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl", itemsClassName), children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: cn("relative flex", itemClassName), children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex w-full justify-center px-1 py-10 text-end md:gap-6 lg:gap-10",
-                item.reverse ? "lg:flex-row-reverse lg:text-start" : ""
+        /* @__PURE__ */ jsx("div", { className: "border-y", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8 mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl",
+              containerClassName
+            ),
+            children: [
+              renderBadge(),
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl leading-tight tracking-tight md:text-4xl lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
               ),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 max-lg:hidden", children: [
-                  /* @__PURE__ */ jsx("h3", { className: cn("text-2xl tracking-[-0.96px]", titleClassName), children: item.title }),
-                  /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "mt-2.5 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground",
-                        item.reverse ? "" : "ml-auto",
-                        itemDescriptionClassName
-                      ),
-                      children: item.description
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "z-[-1] size-fit -translate-y-5 bg-background p-4 max-lg:-translate-x-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-[10px] border bg-card p-[5px] shadow-md", children: /* @__PURE__ */ jsx("div", { className: "size-fit rounded-md border bg-muted p-1", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 16 }) }) }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 max-lg:-translate-x-4", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "text-start lg:pointer-events-none lg:hidden", children: [
-                    /* @__PURE__ */ jsx("h3", { className: cn("text-2xl tracking-[-0.96px]", titleClassName), children: item.title }),
-                    /* @__PURE__ */ jsx("p", { className: cn("mt-2.5 mb-10 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground", itemDescriptionClassName), children: item.description })
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: "flex items-start justify-start", children: /* @__PURE__ */ jsxs("div", { className: item.reverse ? "lg:ml-auto" : "", children: [
-                    /* @__PURE__ */ jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) }),
-                    /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-[auto_1fr_auto] items-stretch", children: [
-                      /* @__PURE__ */ jsx(DiagonalPattern, { className: "h-full w-6 lg:w-10" }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-[600px] tracking-[-0.32px] text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              )
+            ]
+          }
+        ) }),
+        items && items.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "overflow-hidden border-x pb-40 lg:pt-20 [&>*:last-child]:pb-20 [&>div>div:first-child]:pt-20! mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl",
+              itemsClassName
+            ),
+            children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: cn("relative flex", itemClassName), children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex w-full justify-center px-1 py-10 text-end md:gap-6 lg:gap-10",
+                    item.reverse ? "lg:flex-row-reverse lg:text-start" : ""
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 max-lg:hidden", children: [
                       /* @__PURE__ */ jsx(
-                        Img,
+                        "h3",
                         {
-                          src: item.image.src,
-                          alt: item.image.alt,
-                          className: cn("object-contain dark:invert", imageClassName),
-                          width: 400,
-                          height: 500,
-                          optixFlowConfig
+                          className: cn(
+                            "text-2xl tracking-[-0.96px]",
+                            titleClassName
+                          ),
+                          children: item.title
                         }
                       ),
-                      /* @__PURE__ */ jsx(DiagonalPattern, { className: "w-6 lg:w-10" })
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "mt-2.5 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground",
+                            item.reverse ? "" : "ml-auto",
+                            itemDescriptionClassName
+                          ),
+                          children: item.description
+                        }
+                      )
                     ] }),
-                    /* @__PURE__ */ jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) })
-                  ] }) })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "absolute z-[-2] h-full w-[3px] translate-x-5 rounded-full lg:left-1/2 lg:-translate-x-1/2",
-                index === items.length - 1 ? "bg-linear-to-b from-foreground/10 via-foreground/10 to-transparent" : "bg-foreground/10"
+                    /* @__PURE__ */ jsx("div", { className: "z-[-1] size-fit -translate-y-5 bg-background p-4 max-lg:-translate-x-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-[10px] border bg-card p-[5px] shadow-md", children: /* @__PURE__ */ jsx("div", { className: "size-fit rounded-md border bg-muted p-1", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 16 }) }) }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 max-lg:-translate-x-4", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "text-start lg:pointer-events-none lg:hidden", children: [
+                        /* @__PURE__ */ jsx(
+                          "h3",
+                          {
+                            className: cn(
+                              "text-2xl tracking-[-0.96px]",
+                              titleClassName
+                            ),
+                            children: item.title
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            className: cn(
+                              "mt-2.5 mb-10 max-w-[300px] tracking-[-0.32px] text-balance text-muted-foreground",
+                              itemDescriptionClassName
+                            ),
+                            children: item.description
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: "flex items-start justify-start", children: /* @__PURE__ */ jsxs("div", { className: item.reverse ? "lg:ml-auto" : "", children: [
+                        /* @__PURE__ */ jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) }),
+                        /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-[auto_1fr_auto] items-stretch", children: [
+                          /* @__PURE__ */ jsx(DiagonalPattern, { className: "h-full w-6 lg:w-10" }),
+                          /* @__PURE__ */ jsx(
+                            Img,
+                            {
+                              src: item.image.src,
+                              alt: item.image.alt,
+                              className: cn(
+                                "object-contain dark:invert",
+                                imageClassName
+                              ),
+                              width: 400,
+                              height: 500,
+                              optixFlowConfig
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(DiagonalPattern, { className: "w-6 lg:w-10" })
+                        ] }),
+                        /* @__PURE__ */ jsx("div", { className: "px-6 lg:px-10", children: /* @__PURE__ */ jsx(DiagonalPattern, { className: "h-6 lg:h-10" }) })
+                      ] }) })
+                    ] })
+                  ]
+                }
               ),
-              children: index === 0 && /* @__PURE__ */ jsx("div", { className: "h-4 w-[3px] -translate-y-full bg-linear-to-b from-transparent to-foreground/10" })
-            }
-          )
-        ] }, index)) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute z-[-2] h-full w-[3px] translate-x-5 rounded-full lg:left-1/2 lg:-translate-x-1/2",
+                    index === items.length - 1 ? "bg-linear-to-b from-foreground/10 via-foreground/10 to-transparent" : "bg-foreground/10"
+                  ),
+                  children: index === 0 && /* @__PURE__ */ jsx("div", { className: "h-4 w-[3px] -translate-y-full bg-linear-to-b from-transparent to-foreground/10" })
+                }
+              )
+            ] }, index))
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: "h-8 w-full border-y md:h-12 lg:h-28", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full border-x mx-auto px-2 sm:px-4 lg:px-8 max-w-7xl" }) })
       ]
     }

package/dist/timeline-changelog-badges.cjs

@@ -437,6 +437,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -456,7 +457,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -504,7 +505,16 @@ function TimelineChangelogBadges({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-10 text-center text-3xl font-bold tracking-tighter text-foreground lg:text-6xl", headingClassName), children: heading }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-10 text-center text-3xl font-bold tracking-tighter text-foreground lg:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) })
       }
     );
   }
@@ -520,7 +530,16 @@ function TimelineChangelogBadges({
       patternClassName,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-10 text-center text-3xl font-bold tracking-tighter text-foreground lg:text-6xl", headingClassName), children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-10 text-center text-3xl font-bold tracking-tighter text-foreground lg:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-4xl", entriesClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Separator,
@@ -529,27 +548,51 @@ function TimelineChangelogBadges({
               className: "absolute top-4 left-2 bg-muted"
             }
           ),
-          entries.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mb-10 pl-8", entryClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 left-0 flex size-5 items-center justify-center rounded-full bg-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-background" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Badge,
-              {
-                variant: "secondary",
-                className: cn("mb-4 rounded-xl px-3 py-2 text-sm", badgeClassName),
-                children: entry.date
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "my-5 border-none shadow-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-2", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col gap-1", itemsClassName), children: entry.items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-2 h-2 w-2 flex-none rounded-full bg-foreground" }),
-              item.content ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-md leading-relaxed text-foreground", itemClassName), children: item.content }) : item.contentHtml ? /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: cn("text-md leading-relaxed text-foreground", itemClassName),
-                  dangerouslySetInnerHTML: { __html: item.contentHtml }
-                }
-              ) : null
-            ] }, itemIndex)) }) }) })
-          ] }, index))
+          entries.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn("relative mb-10 pl-8", entryClassName),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 left-0 flex size-5 items-center justify-center rounded-full bg-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-background" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Badge,
+                  {
+                    variant: "secondary",
+                    className: cn(
+                      "mb-4 rounded-xl px-3 py-2 text-sm",
+                      badgeClassName
+                    ),
+                    children: entry.date
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "my-5 border-none shadow-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-2", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col gap-1", itemsClassName), children: entry.items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-2 h-2 w-2 flex-none rounded-full bg-foreground" }),
+                  item.content ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-md leading-relaxed text-foreground",
+                        itemClassName
+                      ),
+                      children: item.content
+                    }
+                  ) : item.contentHtml ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-md leading-relaxed text-foreground",
+                        itemClassName
+                      ),
+                      dangerouslySetInnerHTML: {
+                        __html: item.contentHtml
+                      }
+                    }
+                  ) : null
+                ] }, itemIndex)) }) }) })
+              ]
+            },
+            index
+          ))
         ] })
       ] })
     }