@opensite/ui 0.4.1 → 0.4.3

package/dist/project-hover-reveal-grid.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';
@@ -37,7 +38,7 @@ interface ProjectHoverRevealGridProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-hover-reveal-grid.js

@@ -335,6 +335,7 @@ var Section = React.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -354,7 +355,7 @@ var Section = React.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -390,7 +391,10 @@ function ProjectHoverRevealGrid({
     return images.map((image, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("group relative aspect-square overflow-hidden", cardClassName),
+        className: cn(
+          "group relative aspect-square overflow-hidden",
+          cardClassName
+        ),
         children: [
           /* @__PURE__ */ jsx(
             Img,

package/dist/project-interactive-hover-reveal.cjs

@@ -881,6 +881,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -900,7 +901,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -943,7 +944,10 @@ function ProjectInteractiveHoverReveal({
       Pressable,
       {
         href: project.link,
-        className: cn("group relative block h-80 overflow-hidden rounded-xl", cardClassName),
+        className: cn(
+          "group relative block h-80 overflow-hidden rounded-xl",
+          cardClassName
+        ),
         onMouseEnter: () => setHoveredIndex(index),
         onMouseLeave: () => setHoveredIndex(null),
         children: [
@@ -980,14 +984,7 @@ function ProjectInteractiveHoverReveal({
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center text-sm font-medium text-white drop-shadow", children: [
                   "View Project",
                   " ",
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/arrow-right",
-                      size: 14,
-                      className: "ml-1"
-                    }
-                  )
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14, className: "ml-1" })
                 ] })
               ]
             }
@@ -1005,13 +1002,49 @@ function ProjectInteractiveHoverReveal({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center md:mb-16", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground mx-auto max-w-3xl text-lg", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-3", gridClassName), children: renderProjects() })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "container mx-auto px-4 md:px-6 2xl:max-w-[1400px]",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center md:mb-16", headerClassName), children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground mx-auto max-w-3xl text-lg",
+                    subheadingClassName
+                  ),
+                  children: subheading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
+                  gridClassName
+                ),
+                children: renderProjects()
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/project-interactive-hover-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';
@@ -46,7 +47,7 @@ interface ProjectInteractiveHoverRevealProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-interactive-hover-reveal.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';
@@ -46,7 +47,7 @@ interface ProjectInteractiveHoverRevealProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-interactive-hover-reveal.js

@@ -860,6 +860,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -879,7 +880,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -922,7 +923,10 @@ function ProjectInteractiveHoverReveal({
       Pressable,
       {
         href: project.link,
-        className: cn("group relative block h-80 overflow-hidden rounded-xl", cardClassName),
+        className: cn(
+          "group relative block h-80 overflow-hidden rounded-xl",
+          cardClassName
+        ),
         onMouseEnter: () => setHoveredIndex(index),
         onMouseLeave: () => setHoveredIndex(null),
         children: [
@@ -959,14 +963,7 @@ function ProjectInteractiveHoverReveal({
                 /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center text-sm font-medium text-white drop-shadow", children: [
                   "View Project",
                   " ",
-                  /* @__PURE__ */ jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/arrow-right",
-                      size: 14,
-                      className: "ml-1"
-                    }
-                  )
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14, className: "ml-1" })
                 ] })
               ]
             }
@@ -984,13 +981,49 @@ function ProjectInteractiveHoverReveal({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center md:mb-16", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground mx-auto max-w-3xl text-lg", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-3", gridClassName), children: renderProjects() })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "container mx-auto px-4 md:px-6 2xl:max-w-[1400px]",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center md:mb-16", headerClassName), children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground mx-auto max-w-3xl text-lg",
+                    subheadingClassName
+                  ),
+                  children: subheading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
+                  gridClassName
+                ),
+                children: renderProjects()
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/project-masonry-columns.cjs

@@ -342,6 +342,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -361,7 +362,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -403,18 +404,27 @@ function ProjectMasonryColumns({
         whileInView: { opacity: 1, y: 0 },
         viewport: { once: true },
         transition: { duration: 0.6, delay: index * 0.05 },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("group relative overflow-hidden border-border transition-all duration-300", imageWrapperClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: image.src,
-              alt: image.alt,
-              className: "h-auto w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:brightness-105",
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 transition-all duration-300 group-hover:bg-black/10" })
-        ] })
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "group relative overflow-hidden border-border transition-all duration-300",
+              imageWrapperClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src: image.src,
+                  alt: image.alt,
+                  className: "h-auto w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:brightness-105",
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 transition-all duration-300 group-hover:bg-black/10" })
+            ]
+          }
+        )
       },
       index
     ));
@@ -427,7 +437,16 @@ function ProjectMasonryColumns({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("columns-1 gap-4 space-y-4 md:columns-2 md:gap-6 md:space-y-6 lg:columns-3", gridClassName), children: renderImages() }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "columns-1 gap-4 space-y-4 md:columns-2 md:gap-6 md:space-y-6 lg:columns-3",
+            gridClassName
+          ),
+          children: renderImages()
+        }
+      ) })
     }
   );
 }

package/dist/project-masonry-columns.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';
@@ -35,7 +36,7 @@ interface ProjectMasonryColumnsProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-masonry-columns.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';
@@ -35,7 +36,7 @@ interface ProjectMasonryColumnsProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-masonry-columns.js

@@ -336,6 +336,7 @@ var Section = React.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -355,7 +356,7 @@ var Section = React.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -397,18 +398,27 @@ function ProjectMasonryColumns({
         whileInView: { opacity: 1, y: 0 },
         viewport: { once: true },
         transition: { duration: 0.6, delay: index * 0.05 },
-        children: /* @__PURE__ */ jsxs("div", { className: cn("group relative overflow-hidden border-border transition-all duration-300", imageWrapperClassName), children: [
-          /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: image.src,
-              alt: image.alt,
-              className: "h-auto w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:brightness-105",
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 transition-all duration-300 group-hover:bg-black/10" })
-        ] })
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "group relative overflow-hidden border-border transition-all duration-300",
+              imageWrapperClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: image.src,
+                  alt: image.alt,
+                  className: "h-auto w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:brightness-105",
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 transition-all duration-300 group-hover:bg-black/10" })
+            ]
+          }
+        )
       },
       index
     ));
@@ -421,7 +431,16 @@ function ProjectMasonryColumns({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("columns-1 gap-4 space-y-4 md:columns-2 md:gap-6 md:space-y-6 lg:columns-3", gridClassName), children: renderImages() }) })
+      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "columns-1 gap-4 space-y-4 md:columns-2 md:gap-6 md:space-y-6 lg:columns-3",
+            gridClassName
+          ),
+          children: renderImages()
+        }
+      ) })
     }
   );
 }

package/dist/project-nature-mosaic.cjs

@@ -776,6 +776,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -795,7 +796,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -886,10 +887,37 @@ function ProjectNatureMosaic({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-12 text-xl leading-tight font-medium md:text-3xl whitespace-pre-line", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12 grid grid-cols-1 gap-4 md:grid-cols-2", gridClassName), children: renderImages() }),
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-12 text-xl leading-tight font-medium md:text-3xl whitespace-pre-line",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mb-12 grid grid-cols-1 gap-4 md:grid-cols-2",
+              gridClassName
+            ),
+            children: renderImages()
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md", children: [
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mb-4 text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {

package/dist/project-nature-mosaic.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';
@@ -47,7 +48,7 @@ interface ProjectNatureMosaicProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-nature-mosaic.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';
@@ -47,7 +48,7 @@ interface ProjectNatureMosaicProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-nature-mosaic.js

@@ -755,6 +755,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -774,7 +775,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -865,10 +866,37 @@ function ProjectNatureMosaic({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-12 text-xl leading-tight font-medium md:text-3xl whitespace-pre-line", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        /* @__PURE__ */ jsx("div", { className: cn("mb-12 grid grid-cols-1 gap-4 md:grid-cols-2", gridClassName), children: renderImages() }),
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mb-12 text-xl leading-tight font-medium md:text-3xl whitespace-pre-line",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mb-12 grid grid-cols-1 gap-4 md:grid-cols-2",
+              gridClassName
+            ),
+            children: renderImages()
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "max-w-md", children: [
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mb-4 text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsx(
             Pressable,
             {

package/dist/project-scroll-reveal.cjs

@@ -463,6 +463,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -482,7 +483,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -713,12 +714,24 @@ function ProjectScrollReveal({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container space-y-16", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl font-semibold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "text-center text-4xl font-semibold md:text-6xl",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
         /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
             ref: containerRef,
-            className: cn("mx-auto grid max-w-7xl grid-cols-1 gap-8 lg:gap-12", gridClassName),
+            className: cn(
+              "mx-auto grid max-w-7xl grid-cols-1 gap-8 lg:gap-12",
+              gridClassName
+            ),
             variants: {
               hidden: { opacity: 0 },
               visible: {