@opensite/ui 0.4.1 → 0.4.3

package/dist/process-steps-grid.d.ts

@@ -1,9 +1,8 @@
 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 { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -93,7 +92,7 @@ interface ProcessStepsGridProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/process-steps-grid.js

@@ -440,6 +440,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -459,7 +460,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -500,28 +501,43 @@ function ProcessStepsGrid({
   const renderSteps = () => {
     if (stepsSlot) return stepsSlot;
     if (!steps || steps.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", stepsGridClassName), children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
-          "group relative overflow-hidden rounded-lg border bg-card p-8 transition-all hover:border-primary/50 hover:shadow-lg",
-          stepCardClassName,
-          step.className
+          "grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          stepsGridClassName
         ),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "absolute -right-4 -top-4 text-[120px] font-bold leading-none text-muted/20 transition-colors group-hover:text-primary/10", children: String(index + 1).padStart(2, "0") }),
-          /* @__PURE__ */ jsxs("div", { className: "relative z-10", children: [
-            (step.iconSlot || step.icon) && /* @__PURE__ */ jsx("div", { className: cn(
-              "mb-6 flex size-14 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
-              stepIconClassName
-            ), children: step.iconSlot ?? (step.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: step.icon, size: 28 })) }),
-            step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title })),
-            step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-foreground/50 leading-relaxed", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-foreground/50 leading-relaxed", children: step.description }))
-          ] })
-        ]
-      },
-      index
-    )) });
+        children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "group relative overflow-hidden rounded-lg border bg-card p-8 transition-all hover:border-primary/50 hover:shadow-lg",
+              stepCardClassName,
+              step.className
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "absolute -right-4 -top-4 text-[120px] font-bold leading-none text-muted/20 transition-colors group-hover:text-primary/10", children: String(index + 1).padStart(2, "0") }),
+              /* @__PURE__ */ jsxs("div", { className: "relative z-10", children: [
+                (step.iconSlot || step.icon) && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mb-6 flex size-14 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground",
+                      stepIconClassName
+                    ),
+                    children: step.iconSlot ?? (step.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: step.icon, size: 28 }))
+                  }
+                ),
+                step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title }) : /* @__PURE__ */ jsx("div", { className: "mb-3 text-xl font-semibold tracking-tight", children: step.title })),
+                step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-foreground/50 leading-relaxed", children: step.description }) : /* @__PURE__ */ jsx("div", { className: "text-foreground/50 leading-relaxed", children: step.description }))
+              ] })
+            ]
+          },
+          index
+        ))
+      }
+    );
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -533,8 +549,26 @@ function ProcessStepsGrid({
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: contentClassName, children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-4xl font-semibold tracking-tight lg:text-5xl", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-lg text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mb-4 text-4xl font-semibold tracking-tight lg:text-5xl",
+                headingClassName
+              ),
+              children: resolvedHeading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-2xl text-lg text-foreground/50",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         renderSteps()
       ] })

package/dist/process-sticky-steps.cjs

@@ -880,6 +880,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -899,7 +900,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -977,17 +978,41 @@ function ProcessStickySteps({
   ctaUrl
 }) {
   const resolvedHeading = title ?? heading;
-  const resolvedActions = actions ?? (ctaText && ctaUrl ? [{ label: ctaText, href: ctaUrl, variant: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/corner-down-right", size: 20, className: "text-primary" }) }] : []);
+  const resolvedActions = actions ?? (ctaText && ctaUrl ? [
+    {
+      label: ctaText,
+      href: ctaUrl,
+      variant: "ghost",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: "lucide/corner-down-right",
+          size: 20,
+          className: "text-primary"
+        }
+      )
+    }
+  ] : []);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!resolvedActions || resolvedActions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-2", actionsClassName), children: resolvedActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
           asButton: true,
-          className: cn("flex items-center justify-start gap-2", actionClassName),
+          className: cn(
+            "flex items-center justify-start gap-2",
+            actionClassName
+          ),
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
@@ -1030,24 +1055,42 @@ function ProcessStickySteps({
       className,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20", contentClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", children: [
-            resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("w-fit", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DynamicIcon,
-              {
-                name: "lucide/asterisk",
-                size: 40,
-                className: "absolute -top-2 -right-2 text-primary md:size-10 lg:-right-14"
-              }
-            )
-          ] }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-base text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderActions()
-        ] }),
-        renderSteps()
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20",
+            contentClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", children: [
+                resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("w-fit", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: resolvedHeading })),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/asterisk",
+                    size: 40,
+                    className: "absolute -top-2 -right-2 text-primary md:size-10 lg:-right-14"
+                  }
+                )
+              ] }),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base text-foreground/50",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderActions()
+            ] }),
+            renderSteps()
+          ]
+        }
+      )
     }
   );
 }

package/dist/process-sticky-steps.d.cts

@@ -1,9 +1,8 @@
 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, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -93,7 +92,7 @@ interface ProcessStickyStepsProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/process-sticky-steps.d.ts

@@ -1,9 +1,8 @@
 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, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -93,7 +92,7 @@ interface ProcessStickyStepsProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/process-sticky-steps.js

@@ -859,6 +859,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -878,7 +879,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -956,17 +957,41 @@ function ProcessStickySteps({
   ctaUrl
 }) {
   const resolvedHeading = title ?? heading;
-  const resolvedActions = actions ?? (ctaText && ctaUrl ? [{ label: ctaText, href: ctaUrl, variant: "ghost", icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/corner-down-right", size: 20, className: "text-primary" }) }] : []);
+  const resolvedActions = actions ?? (ctaText && ctaUrl ? [
+    {
+      label: ctaText,
+      href: ctaUrl,
+      variant: "ghost",
+      icon: /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: "lucide/corner-down-right",
+          size: 20,
+          className: "text-primary"
+        }
+      )
+    }
+  ] : []);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!resolvedActions || resolvedActions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", actionsClassName), children: resolvedActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
           asButton: true,
-          className: cn("flex items-center justify-start gap-2", actionClassName),
+          className: cn(
+            "flex items-center justify-start gap-2",
+            actionClassName
+          ),
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             icon,
@@ -1009,24 +1034,42 @@ function ProcessStickySteps({
       className,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20", contentClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: "top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", children: [
-            resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
-            /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/asterisk",
-                size: 40,
-                className: "absolute -top-2 -right-2 text-primary md:size-10 lg:-right-14"
-              }
-            )
-          ] }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-base text-foreground/50", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions()
-        ] }),
-        renderSteps()
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20",
+            contentClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative w-fit text-5xl font-semibold tracking-tight lg:text-7xl", children: [
+                resolvedHeading && (typeof resolvedHeading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("w-fit", headingClassName), children: resolvedHeading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: resolvedHeading })),
+                /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/asterisk",
+                    size: 40,
+                    className: "absolute -top-2 -right-2 text-primary md:size-10 lg:-right-14"
+                  }
+                )
+              ] }),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base text-foreground/50",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderActions()
+            ] }),
+            renderSteps()
+          ]
+        }
+      )
     }
   );
 }

package/dist/project-alternating-motion.cjs

@@ -376,6 +376,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -395,7 +396,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -455,7 +456,10 @@ function ProjectAlternatingMotion({
           /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
-              className: cn("aspect-3/2 w-full overflow-hidden rounded-sm", imageContainerClassName),
+              className: cn(
+                "aspect-3/2 w-full overflow-hidden rounded-sm",
+                imageContainerClassName
+              ),
               initial: { y: -80, opacity: 0 },
               whileInView: { y: 0, opacity: 1 },
               transition: { duration: 0.8, ease: "easeOut" },
@@ -485,7 +489,25 @@ function ProjectAlternatingMotion({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-10 flex items-center justify-between border-b border-border pb-4", headerClassName), children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-2xl font-semibold sm:text-lg", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mb-10 flex items-center justify-between border-b border-border pb-4",
+              headerClassName
+            ),
+            children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-2xl font-semibold sm:text-lg",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-12", listClassName), children: renderProjects() })
       ] })
     }

package/dist/project-alternating-motion.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -41,7 +42,7 @@ interface ProjectAlternatingMotionProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-alternating-motion.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -41,7 +42,7 @@ interface ProjectAlternatingMotionProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-alternating-motion.js

@@ -370,6 +370,7 @@ var Section = React.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -389,7 +390,7 @@ var Section = React.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -449,7 +450,10 @@ function ProjectAlternatingMotion({
           /* @__PURE__ */ jsx(
             motion.div,
             {
-              className: cn("aspect-3/2 w-full overflow-hidden rounded-sm", imageContainerClassName),
+              className: cn(
+                "aspect-3/2 w-full overflow-hidden rounded-sm",
+                imageContainerClassName
+              ),
               initial: { y: -80, opacity: 0 },
               whileInView: { y: 0, opacity: 1 },
               transition: { duration: 0.8, ease: "easeOut" },
@@ -479,7 +483,25 @@ function ProjectAlternatingMotion({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: cn("mb-10 flex items-center justify-between border-b border-border pb-4", headerClassName), children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-2xl font-semibold sm:text-lg", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mb-10 flex items-center justify-between border-b border-border pb-4",
+              headerClassName
+            ),
+            children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-2xl font-semibold sm:text-lg",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }))
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: cn("space-y-12", listClassName), children: renderProjects() })
       ] })
     }

package/dist/project-background-reveal.cjs

@@ -880,6 +880,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -899,7 +900,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -993,9 +994,36 @@ function ProjectBackgroundReveal({
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerClassName, children: [
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-1 text-muted-foreground uppercase md:text-lg", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-bold uppercase md:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-7 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mb-1 text-muted-foreground uppercase md:text-lg",
+                subheadingClassName
+              ),
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-3xl font-bold uppercase md:text-7xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-7 max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
@@ -1010,7 +1038,13 @@ function ProjectBackgroundReveal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-24 flex flex-col gap-5 md:mt-36", listClassName), children: renderProjects() })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("mt-24 flex flex-col gap-5 md:mt-36", listClassName),
+            children: renderProjects()
+          }
+        )
       ] })
     }
   );

package/dist/project-background-reveal.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -58,7 +59,7 @@ interface ProjectBackgroundRevealProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */