@opensite/ui 0.4.1 → 0.4.3

package/dist/timeline-changelog-badges.d.ts

@@ -1,8 +1,7 @@
 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-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -74,7 +73,7 @@ interface TimelineChangelogBadgesProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/timeline-changelog-badges.js

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

package/dist/timeline-history-prose.cjs

@@ -403,6 +403,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -422,7 +423,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -470,7 +471,16 @@ function TimelineHistoryProse({
         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 sm: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 sm:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) })
       }
     );
   }
@@ -486,7 +496,16 @@ function TimelineHistoryProse({
       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 sm:text-6xl", headingClassName), children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-4xl", entriesClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Separator,
@@ -495,18 +514,55 @@ function TimelineHistoryProse({
               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-3.5 left-0 flex size-4 items-center justify-center rounded-full bg-foreground" }),
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("rounded-xl py-2 text-xl font-bold tracking-tight xl:mb-4 xl:px-3", titleClassName), children: entry.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("h5", { className: cn("text-md top-3 -left-34 rounded-xl tracking-tight text-muted-foreground xl:absolute", dateClassName), children: entry.date }),
-            /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "my-5 border-none shadow-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-0 xl:px-2", children: entry.content ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("prose text-foreground dark:prose-invert", contentClassName), children: entry.content }) : entry.contentHtml ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn("prose text-foreground dark:prose-invert", contentClassName),
-                dangerouslySetInnerHTML: { __html: entry.contentHtml }
-              }
-            ) : null }) })
-          ] }, 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-3.5 left-0 flex size-4 items-center justify-center rounded-full bg-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h4",
+                  {
+                    className: cn(
+                      "rounded-xl py-2 text-xl font-bold tracking-tight xl:mb-4 xl:px-3",
+                      titleClassName
+                    ),
+                    children: entry.title
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h5",
+                  {
+                    className: cn(
+                      "text-md top-3 -left-34 rounded-xl tracking-tight text-muted-foreground xl:absolute",
+                      dateClassName
+                    ),
+                    children: entry.date
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "my-5 border-none shadow-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-0 xl:px-2", children: entry.content ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "prose text-foreground dark:prose-invert",
+                      contentClassName
+                    ),
+                    children: entry.content
+                  }
+                ) : entry.contentHtml ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "prose text-foreground dark:prose-invert",
+                      contentClassName
+                    ),
+                    dangerouslySetInnerHTML: { __html: entry.contentHtml }
+                  }
+                ) : null }) })
+              ]
+            },
+            index
+          ))
         ] })
       ] })
     }

package/dist/timeline-history-prose.d.cts

@@ -1,8 +1,7 @@
 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-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -72,7 +71,7 @@ interface TimelineHistoryProseProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/timeline-history-prose.d.ts

@@ -1,8 +1,7 @@
 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-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -72,7 +71,7 @@ interface TimelineHistoryProseProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/timeline-history-prose.js

@@ -378,6 +378,7 @@ var Section = React.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -397,7 +398,7 @@ var Section = React.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -445,7 +446,16 @@ function TimelineHistoryProse({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsx("h1", { className: cn("mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl", headingClassName), children: heading }) })
+        children: /* @__PURE__ */ jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) })
       }
     );
   }
@@ -461,7 +471,16 @@ function TimelineHistoryProse({
       patternClassName,
       style,
       children: /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
-        /* @__PURE__ */ jsx("h1", { className: cn("mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl", headingClassName), children: heading }),
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-4xl", entriesClassName), children: [
           /* @__PURE__ */ jsx(
             Separator,
@@ -470,18 +489,55 @@ function TimelineHistoryProse({
               className: "absolute top-4 left-2 bg-muted"
             }
           ),
-          entries.map((entry, index) => /* @__PURE__ */ jsxs("div", { className: cn("relative mb-10 pl-8", entryClassName), children: [
-            /* @__PURE__ */ jsx("div", { className: "absolute top-3.5 left-0 flex size-4 items-center justify-center rounded-full bg-foreground" }),
-            /* @__PURE__ */ jsx("h4", { className: cn("rounded-xl py-2 text-xl font-bold tracking-tight xl:mb-4 xl:px-3", titleClassName), children: entry.title }),
-            /* @__PURE__ */ jsx("h5", { className: cn("text-md top-3 -left-34 rounded-xl tracking-tight text-muted-foreground xl:absolute", dateClassName), children: entry.date }),
-            /* @__PURE__ */ jsx(Card, { className: "my-5 border-none shadow-none", children: /* @__PURE__ */ jsx(CardContent, { className: "px-0 xl:px-2", children: entry.content ? /* @__PURE__ */ jsx("div", { className: cn("prose text-foreground dark:prose-invert", contentClassName), children: entry.content }) : entry.contentHtml ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn("prose text-foreground dark:prose-invert", contentClassName),
-                dangerouslySetInnerHTML: { __html: entry.contentHtml }
-              }
-            ) : null }) })
-          ] }, index))
+          entries.map((entry, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("relative mb-10 pl-8", entryClassName),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "absolute top-3.5 left-0 flex size-4 items-center justify-center rounded-full bg-foreground" }),
+                /* @__PURE__ */ jsx(
+                  "h4",
+                  {
+                    className: cn(
+                      "rounded-xl py-2 text-xl font-bold tracking-tight xl:mb-4 xl:px-3",
+                      titleClassName
+                    ),
+                    children: entry.title
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "h5",
+                  {
+                    className: cn(
+                      "text-md top-3 -left-34 rounded-xl tracking-tight text-muted-foreground xl:absolute",
+                      dateClassName
+                    ),
+                    children: entry.date
+                  }
+                ),
+                /* @__PURE__ */ jsx(Card, { className: "my-5 border-none shadow-none", children: /* @__PURE__ */ jsx(CardContent, { className: "px-0 xl:px-2", children: entry.content ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "prose text-foreground dark:prose-invert",
+                      contentClassName
+                    ),
+                    children: entry.content
+                  }
+                ) : entry.contentHtml ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "prose text-foreground dark:prose-invert",
+                      contentClassName
+                    ),
+                    dangerouslySetInnerHTML: { __html: entry.contentHtml }
+                  }
+                ) : null }) })
+              ]
+            },
+            index
+          ))
         ] })
       ] })
     }

package/dist/timeline-horizontal-icons.cjs

@@ -507,6 +507,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -526,7 +527,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -578,7 +579,25 @@ function TimelineHorizontalIcons({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col items-center justify-center", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl", headingClassName), children: heading }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center justify-center",
+              containerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )
+          }
+        )
       }
     );
   }
@@ -593,53 +612,123 @@ function TimelineHorizontalIcons({
       patternOpacity,
       patternClassName,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center justify-center", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl", headingClassName), children: heading }),
-        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("relative w-full border-none shadow-none md:py-16", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "relative flex flex-col items-center p-0 md:mt-12", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "absolute -top-8 left-0 hidden md:block" }),
-          safeCurrentPhase !== void 0 && phases.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
-            {
-              initial: { width: 0 },
-              whileInView: {
-                width: `${safeCurrentPhase / phases.length * 104}%`
-              },
-              transition: { ease: "easeOut", duration: 0.5 },
-              className: cn(
-                "absolute -top-[33px] left-0 hidden h-0.5 bg-foreground md:block"
-              )
-            }
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-center justify-center",
+            containerClassName
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-4", phasesClassName), children: phases.map((phase, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative space-y-2", phaseClassName), children: [
+          children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              Separator,
+              "h1",
               {
-                orientation: "vertical",
-                className: "absolute top-6 left-2.5 block md:hidden"
+                className: cn(
+                  "mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl",
+                  headingClassName
+                ),
+                children: heading
               }
             ),
-            index === 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              framerMotion.motion.div,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Card,
               {
-                initial: { height: 0 },
-                whileInView: {
-                  height: safeCurrentPhase * 125
-                },
-                transition: { ease: "easeOut", duration: 0.5 },
                 className: cn(
-                  "absolute top-22 left-2.5 z-10 w-0.5 bg-foreground md:hidden"
-                )
+                  "relative w-full border-none shadow-none md:py-16",
+                  cardClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "relative flex flex-col items-center p-0 md:mt-12", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "absolute -top-8 left-0 hidden md:block" }),
+                  safeCurrentPhase !== void 0 && phases.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                    framerMotion.motion.div,
+                    {
+                      initial: { width: 0 },
+                      whileInView: {
+                        width: `${safeCurrentPhase / phases.length * 104}%`
+                      },
+                      transition: { ease: "easeOut", duration: 0.5 },
+                      className: cn(
+                        "absolute -top-[33px] left-0 hidden h-0.5 bg-foreground md:block"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-4", phasesClassName), children: phases.map((phase, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: cn("relative space-y-2", phaseClassName),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          Separator,
+                          {
+                            orientation: "vertical",
+                            className: "absolute top-6 left-2.5 block md:hidden"
+                          }
+                        ),
+                        index === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                          framerMotion.motion.div,
+                          {
+                            initial: { height: 0 },
+                            whileInView: {
+                              height: safeCurrentPhase * 125
+                            },
+                            transition: { ease: "easeOut", duration: 0.5 },
+                            className: cn(
+                              "absolute top-22 left-2.5 z-10 w-0.5 bg-foreground md:hidden"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "absolute top-4 -left-6 z-10 mb-5 flex size-18 items-center justify-center rounded-full bg-background p-1 md:-top-17 md:-left-4",
+                              iconClassName
+                            ),
+                            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: phase.icon, size: 16 }) }) })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-13 md:pl-0", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "p",
+                            {
+                              className: cn(
+                                "mt-10 text-sm text-muted-foreground",
+                                dateClassName
+                              ),
+                              children: phase.date
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "h2",
+                            {
+                              className: cn(
+                                "text-xl font-bold tracking-tighter text-foreground",
+                                titleClassName
+                              ),
+                              children: phase.title
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "p",
+                            {
+                              className: cn(
+                                "text-sm text-muted-foreground",
+                                descriptionClassName
+                              ),
+                              children: phase.description
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    phase.id
+                  )) })
+                ] })
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute top-4 -left-6 z-10 mb-5 flex size-18 items-center justify-center rounded-full bg-background p-1 md:-top-17 md:-left-4", iconClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-10 items-center justify-center rounded-lg border border-border bg-background p-[5px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full items-center justify-center rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: phase.icon, size: 16 }) }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-13 md:pl-0", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-10 text-sm text-muted-foreground", dateClassName), children: phase.date }),
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-xl font-bold tracking-tighter text-foreground", titleClassName), children: phase.title }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", descriptionClassName), children: phase.description })
-            ] })
-          ] }, phase.id)) })
-        ] }) })
-      ] })
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/timeline-horizontal-icons.d.cts

@@ -1,8 +1,7 @@
 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-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -79,7 +78,7 @@ interface TimelineHorizontalIconsProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */