@opensite/ui 0.4.1 → 0.4.3

package/dist/project-filterable-three-column.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
             }
           ),
@@ -415,7 +416,10 @@ function ProjectFilterableThreeColumn({
           duration: 0.2,
           ease: "easeInOut"
         },
-        className: cn("group relative cursor-pointer overflow-hidden rounded-lg", cardClassName),
+        className: cn(
+          "group relative cursor-pointer overflow-hidden rounded-lg",
+          cardClassName
+        ),
         children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-4/3 h-96 w-full", children: [
           /* @__PURE__ */ jsx(
             Img,
@@ -445,20 +449,39 @@ function ProjectFilterableThreeColumn({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("mb-16 flex flex-wrap justify-center gap-8", filterClassName), children: categories?.map((category) => /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: () => handleFilterChange(category),
             className: cn(
-              "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
-              activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
-              filterButtonClassName
+              "mb-16 flex flex-wrap justify-center gap-8",
+              filterClassName
             ),
-            children: category
-          },
-          category
-        )) }),
-        /* @__PURE__ */ jsx(motion.div, { layout: true, className: cn("grid grid-cols-1 gap-8 md:grid-cols-3", gridClassName), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: renderProjects() }) }),
+            children: categories?.map((category) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleFilterChange(category),
+                className: cn(
+                  "text-sm font-medium tracking-wider transition-colors duration-300 hover:text-foreground",
+                  activeFilter === category ? "border-b-2 border-border pb-1 text-foreground" : "text-gray-500",
+                  filterButtonClassName
+                ),
+                children: category
+              },
+              category
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: true,
+            className: cn(
+              "grid grid-cols-1 gap-8 md:grid-cols-3",
+              gridClassName
+            ),
+            children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: renderProjects() })
+          }
+        ),
         (filteredItems?.length ?? 0) === 0 && /* @__PURE__ */ jsx(
           motion.div,
           {

package/dist/project-grid-gallery.cjs

@@ -341,6 +341,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -360,7 +361,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -399,20 +400,35 @@ function ProjectGridGallery({
     return images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("group relative aspect-square overflow-hidden", cardClassName),
+        className: cn(
+          "group relative aspect-square overflow-hidden",
+          cardClassName
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: image.src,
               alt: image.alt,
-              className: cn("h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", imageClassName),
+              className: cn(
+                "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                imageClassName
+              ),
               optixFlowConfig
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-background/0 transition-all duration-300 group-hover:bg-background/10" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 bottom-0 left-0 translate-y-full transform p-6 transition-transform duration-300 group-hover:translate-y-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-xl font-semibold text-muted", titleClassName), children: image.title }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: cn(
+                  "mb-2 text-xl font-semibold text-muted",
+                  titleClassName
+                ),
+                children: image.title
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted", descriptionClassName), children: image.description })
           ] }) })
         ]

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

package/dist/project-grid-gallery.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 ProjectGridGalleryProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-grid-gallery.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
             }
           ),
@@ -393,20 +394,35 @@ function ProjectGridGallery({
     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,
             {
               src: image.src,
               alt: image.alt,
-              className: cn("h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", imageClassName),
+              className: cn(
+                "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                imageClassName
+              ),
               optixFlowConfig
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/0 transition-all duration-300 group-hover:bg-background/10" }),
           /* @__PURE__ */ jsx("div", { className: "absolute right-0 bottom-0 left-0 translate-y-full transform p-6 transition-transform duration-300 group-hover:translate-y-0", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-xl font-semibold text-muted", titleClassName), children: image.title }),
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: cn(
+                  "mb-2 text-xl font-semibold text-muted",
+                  titleClassName
+                ),
+                children: image.title
+              }
+            ),
             /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted", descriptionClassName), children: image.description })
           ] }) })
         ]

package/dist/project-grid-motion.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
             }
           ),
@@ -419,13 +420,22 @@ function ProjectGridMotion({
               optixFlowConfig
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between px-5 py-4", cardFooterClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: project.title }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: project.type })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-border px-5 py-2 text-sm font-semibold", children: project.year })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between px-5 py-4",
+                cardFooterClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: project.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: project.type })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-border px-5 py-2 text-sm font-semibold", children: project.year })
+              ]
+            }
+          )
         ]
       },
       index
@@ -440,8 +450,26 @@ function ProjectGridMotion({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-7xl leading-tight font-bold uppercase", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 grid grid-cols-1 gap-6 md:grid-cols-2", gridClassName), children: renderProjects() })
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "text-7xl leading-tight font-bold uppercase",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-10 grid grid-cols-1 gap-6 md:grid-cols-2",
+              gridClassName
+            ),
+            children: renderProjects()
+          }
+        )
       ] })
     }
   );

package/dist/project-grid-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 ProjectGridMotionProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-grid-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 ProjectGridMotionProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-grid-motion.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
             }
           ),
@@ -413,13 +414,22 @@ function ProjectGridMotion({
               optixFlowConfig
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between px-5 py-4", cardFooterClassName), children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: project.title }),
-              /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: project.type })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "rounded-2xl border border-border px-5 py-2 text-sm font-semibold", children: project.year })
-          ] })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between px-5 py-4",
+                cardFooterClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: project.title }),
+                  /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: project.type })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "rounded-2xl border border-border px-5 py-2 text-sm font-semibold", children: project.year })
+              ]
+            }
+          )
         ]
       },
       index
@@ -434,8 +444,26 @@ function ProjectGridMotion({
       patternOpacity,
       className: cn(className),
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-7xl leading-tight font-bold uppercase", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-10 grid grid-cols-1 gap-6 md:grid-cols-2", gridClassName), children: renderProjects() })
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "text-7xl leading-tight font-bold uppercase",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-10 grid grid-cols-1 gap-6 md:grid-cols-2",
+              gridClassName
+            ),
+            children: renderProjects()
+          }
+        )
       ] })
     }
   );

package/dist/project-horizontal-cards.cjs

@@ -914,6 +914,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -933,7 +934,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -974,7 +975,10 @@ function ProjectHorizontalCards({
     return projects.map((project, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn("bg-card overflow-hidden rounded-xl border shadow-sm transition-all hover:shadow-md", cardClassName),
+        className: cn(
+          "bg-card overflow-hidden rounded-xl border shadow-sm transition-all hover:shadow-md",
+          cardClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full overflow-hidden md:aspect-auto md:h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
@@ -1022,13 +1026,40 @@ function ProjectHorizontalCards({
       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("space-y-10", listClassName), 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("space-y-10", listClassName), children: renderProjects() })
+          ]
+        }
+      )
     }
   );
 }

package/dist/project-horizontal-cards.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';
@@ -49,7 +50,7 @@ interface ProjectHorizontalCardsProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-horizontal-cards.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';
@@ -49,7 +50,7 @@ interface ProjectHorizontalCardsProps {
     /**
      * Background pattern
      */
-    pattern?: string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern opacity (0-1)
      */

package/dist/project-horizontal-cards.js

@@ -893,6 +893,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -912,7 +913,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -953,7 +954,10 @@ function ProjectHorizontalCards({
     return projects.map((project, index) => /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn("bg-card overflow-hidden rounded-xl border shadow-sm transition-all hover:shadow-md", cardClassName),
+        className: cn(
+          "bg-card overflow-hidden rounded-xl border shadow-sm transition-all hover:shadow-md",
+          cardClassName
+        ),
         children: /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-3", children: [
           /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden md:aspect-auto md:h-full", children: /* @__PURE__ */ jsx(
             Img,
@@ -1001,13 +1005,40 @@ function ProjectHorizontalCards({
       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("space-y-10", listClassName), 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("space-y-10", listClassName), children: renderProjects() })
+          ]
+        }
+      )
     }
   );
 }

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

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

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