@opensite/ui 0.4.2 → 0.4.3

package/dist/timeline-horizontal-phases.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 TimelinePhase {
@@ -74,7 +73,7 @@ interface TimelineHorizontalPhasesProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/timeline-horizontal-phases.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 TimelinePhase {
@@ -74,7 +73,7 @@ interface TimelineHorizontalPhasesProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/timeline-horizontal-phases.js

@@ -379,6 +379,7 @@ var Section = React.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -398,7 +399,7 @@ var Section = React.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -449,7 +450,16 @@ function TimelineHorizontalPhases({
         patternOpacity,
         patternClassName,
         style,
-        children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center", 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: cn("flex flex-col items-center", 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
+          }
+        ) })
       }
     );
   }
@@ -465,51 +475,103 @@ function TimelineHorizontalPhases({
       patternClassName,
       style,
       children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center", 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(Card, { className: cn("relative w-full border-none shadow-none md:py-16", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center md:mt-12", children: [
-          /* @__PURE__ */ jsx(Separator, { className: "absolute -top-8 left-0 hidden md:block" }),
-          safeCurrentPhase !== void 0 && /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              initial: { width: 0 },
-              whileInView: {
-                width: `${safeCurrentPhase / phases.length * 104}%`
-              },
-              transition: { ease: "easeOut", duration: 0.5 },
-              className: cn(
-                "absolute -top-8 left-0 hidden h-0.5 bg-foreground md:block"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 md:grid-cols-4", phasesClassName), children: phases.map((phase, index) => /* @__PURE__ */ jsxs("div", { className: cn("relative space-y-2", phaseClassName), children: [
-            /* @__PURE__ */ jsx(
-              Separator,
-              {
-                orientation: "vertical",
-                className: "absolute top-6 left-0 block md:hidden"
-              }
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-10 text-center text-3xl font-bold tracking-tighter text-foreground sm:text-6xl",
+              headingClassName
             ),
-            index === 0 && /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                initial: { height: 0 },
-                whileInView: {
-                  height: safeCurrentPhase * 112
-                },
-                transition: { ease: "easeOut", duration: 0.5 },
-                className: cn(
-                  "absolute left-0 z-10 w-0.5 bg-foreground md:hidden"
-                )
-              }
+            children: heading
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Card,
+          {
+            className: cn(
+              "relative w-full border-none shadow-none md:py-16",
+              cardClassName
             ),
-            /* @__PURE__ */ jsx("div", { className: "absolute top-0 -left-[9px] z-10 mb-5 flex size-5 items-center justify-center rounded-full bg-foreground p-1 md:-top-10 md:left-0", children: /* @__PURE__ */ jsx("div", { className: "size-full rounded-full bg-background" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "pl-7 md:pl-0", children: [
-              /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", dateClassName), children: phase.date }),
-              /* @__PURE__ */ jsx("h2", { className: cn("text-xl font-bold tracking-tighter text-foreground", titleClassName), children: phase.title }),
-              /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", descriptionClassName), children: phase.description })
-            ] })
-          ] }, phase.id)) })
-        ] }) }) })
+            children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center md:mt-12", children: [
+              /* @__PURE__ */ jsx(Separator, { className: "absolute -top-8 left-0 hidden md:block" }),
+              safeCurrentPhase !== void 0 && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  initial: { width: 0 },
+                  whileInView: {
+                    width: `${safeCurrentPhase / phases.length * 104}%`
+                  },
+                  transition: { ease: "easeOut", duration: 0.5 },
+                  className: cn(
+                    "absolute -top-8 left-0 hidden h-0.5 bg-foreground md:block"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 md:grid-cols-4", phasesClassName), children: phases.map((phase, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn("relative space-y-2", phaseClassName),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Separator,
+                      {
+                        orientation: "vertical",
+                        className: "absolute top-6 left-0 block md:hidden"
+                      }
+                    ),
+                    index === 0 && /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        initial: { height: 0 },
+                        whileInView: {
+                          height: safeCurrentPhase * 112
+                        },
+                        transition: { ease: "easeOut", duration: 0.5 },
+                        className: cn(
+                          "absolute left-0 z-10 w-0.5 bg-foreground md:hidden"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "absolute top-0 -left-[9px] z-10 mb-5 flex size-5 items-center justify-center rounded-full bg-foreground p-1 md:-top-10 md:left-0", children: /* @__PURE__ */ jsx("div", { className: "size-full rounded-full bg-background" }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "pl-7 md:pl-0", children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "text-sm text-muted-foreground",
+                            dateClassName
+                          ),
+                          children: phase.date
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "h2",
+                        {
+                          className: cn(
+                            "text-xl font-bold tracking-tighter text-foreground",
+                            titleClassName
+                          ),
+                          children: phase.title
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "text-sm text-muted-foreground",
+                            descriptionClassName
+                          ),
+                          children: phase.description
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                phase.id
+              )) })
+            ] }) })
+          }
+        )
       ] })
     }
   );

package/dist/timeline-product-launch.cjs

@@ -802,6 +802,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -821,7 +822,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -902,66 +903,163 @@ function TimelineProductLaunch({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-2 text-3xl font-semibold md:text-5xl", headingClassName), children: heading }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl text-muted-foreground", descriptionClassName), children: description })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "mb-2 text-3xl font-semibold md:text-5xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "max-w-2xl text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 flex flex-col gap-6 rounded-xl border border-border bg-card p-4 sm:p-8 lg:p-11", cardClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "contents items-center justify-between sm:flex", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-2xl font-semibold tracking-tight", cardHeadingClassName), children: cardHeading }),
-              renderCta()
-            ] }),
-            steps && steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex gap-4 sm:flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid h-full w-4 justify-center gap-10 sm:h-4 sm:w-auto sm:items-center", `sm:grid-cols-${steps.length}`), children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 left-1/2 w-px -translate-x-1/2 bg-ring sm:inset-auto sm:left-auto sm:h-px sm:w-full sm:translate-x-0" }),
-                  steps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "mt-8 flex flex-col gap-6 rounded-xl border border-border bg-card p-4 sm:p-8 lg:p-11",
+                cardClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "contents items-center justify-between sm:flex", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
                     {
-                      className: "relative top-3 size-2 rounded-full bg-ring sm:top-0"
-                    },
-                    index
-                  ))
+                      className: cn(
+                        "text-2xl font-semibold tracking-tight",
+                        cardHeadingClassName
+                      ),
+                      children: cardHeading
+                    }
+                  ),
+                  renderCta()
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("animate-timeline-reveal absolute inset-0 grid h-full w-4 justify-center gap-10 sm:h-4 sm:w-auto sm:items-center", `sm:grid-cols-${steps.length}`), children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 left-1/2 w-px -translate-x-1/2 bg-primary sm:inset-auto sm:left-auto sm:h-px sm:w-full sm:translate-x-0" }),
-                  steps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
+                steps && steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex gap-4 sm:flex-col", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "grid h-full w-4 justify-center gap-10 sm:h-4 sm:w-auto sm:items-center",
+                          `sm:grid-cols-${steps.length}`
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 left-1/2 w-px -translate-x-1/2 bg-ring sm:inset-auto sm:left-auto sm:h-px sm:w-full sm:translate-x-0" }),
+                          steps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: "relative top-3 size-2 rounded-full bg-ring sm:top-0"
+                            },
+                            index
+                          ))
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "animate-timeline-reveal absolute inset-0 grid h-full w-4 justify-center gap-10 sm:h-4 sm:w-auto sm:items-center",
+                          `sm:grid-cols-${steps.length}`
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 left-1/2 w-px -translate-x-1/2 bg-primary sm:inset-auto sm:left-auto sm:h-px sm:w-full sm:translate-x-0" }),
+                          steps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              className: "relative top-3 size-2 rounded-full bg-primary sm:top-0"
+                            },
+                            index
+                          ))
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
                     {
-                      className: "relative top-3 size-2 rounded-full bg-primary sm:top-0"
-                    },
-                    index
-                  ))
+                      className: cn(
+                        "grid gap-10",
+                        `sm:grid-cols-${steps.length}`,
+                        stepsClassName
+                      ),
+                      children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          className: cn(
+                            "flex h-full flex-col justify-between gap-4",
+                            stepClassName
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                              /* @__PURE__ */ jsxRuntime.jsxs(
+                                "div",
+                                {
+                                  className: cn(
+                                    "flex h-8 w-fit items-center gap-px overflow-hidden rounded-md border border-border bg-border text-sm font-medium",
+                                    stepTitleClassName
+                                  ),
+                                  children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid h-full place-items-center bg-background px-2", children: step.number }),
+                                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid h-full place-items-center bg-background px-2", children: step.title })
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "h3",
+                                {
+                                  className: cn("mt-5 font-medium", stepHeadingClassName),
+                                  children: step.heading
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "p",
+                                {
+                                  className: cn(
+                                    "mt-2 text-sm text-muted-foreground",
+                                    stepDescriptionClassName
+                                  ),
+                                  children: step.description
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  Progress,
+                                  {
+                                    value: step.progress,
+                                    className: "h-1 flex-1"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "w-8 text-right text-xs text-muted-foreground", children: [
+                                  step.progress,
+                                  "%"
+                                ] })
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: step.duration })
+                            ] })
+                          ]
+                        },
+                        index
+                      ))
+                    }
+                  )
                 ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-10", `sm:grid-cols-${steps.length}`, stepsClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: cn("flex h-full flex-col justify-between gap-4", stepClassName),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-8 w-fit items-center gap-px overflow-hidden rounded-md border border-border bg-border text-sm font-medium", stepTitleClassName), children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid h-full place-items-center bg-background px-2", children: step.number }),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid h-full place-items-center bg-background px-2", children: step.title })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-5 font-medium", stepHeadingClassName), children: step.heading }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-sm text-muted-foreground", stepDescriptionClassName), children: step.description })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(Progress, { value: step.progress, className: "h-1 flex-1" }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "w-8 text-right text-xs text-muted-foreground", children: [
-                          step.progress,
-                          "%"
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: step.duration })
-                    ] })
-                  ]
-                },
-                index
-              )) })
-            ] })
-          ] })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         /* Mobile: Top to bottom animation */

package/dist/timeline-product-launch.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 { A as ActionConfig } from './blocks-CJYRLpXR.cjs';
-import './patternSvgs-c5ZNVoTT.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface TimelineProductLaunchStep {
@@ -96,7 +95,7 @@ interface TimelineProductLaunchProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/timeline-product-launch.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 { A as ActionConfig } from './blocks-BWc_7JNA.js';
-import './patternSvgs-c5ZNVoTT.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface TimelineProductLaunchStep {
@@ -96,7 +95,7 @@ interface TimelineProductLaunchProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */