@opensite/ui 0.4.2 → 0.4.4

package/dist/carousel-gradient-overlay.js

@@ -990,6 +990,7 @@ var Section = React4__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -1009,7 +1010,7 @@ var Section = React4__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1077,35 +1078,53 @@ function CarouselGradientOverlay({
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
-        children: /* @__PURE__ */ jsx(Pressable, { href: item.href, className: cn("group rounded-xl", item.className, cardClassName), children: /* @__PURE__ */ jsxs("div", { className: "group relative h-full min-h-108 max-w-full overflow-hidden rounded-xl md:aspect-5/4 lg:aspect-video", children: [
-          /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: item.image,
-              alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-              className: cn("absolute h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105", imageClassName),
-              loading: "lazy",
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 h-full bg-linear-to-t from-primary from-20% to-transparent mix-blend-multiply", gradientClassName) }),
-          /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-primary-foreground md:p-8", children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-2 pt-4 text-xl font-semibold md:mb-3 md:pt-4 lg:pt-4", children: item.title }),
-            /* @__PURE__ */ jsx("div", { className: "mb-8 line-clamp-2 md:mb-12 lg:mb-9", children: item.description }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
-              readMoreText,
-              " ",
+        children: /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: item.href,
+            className: cn("group rounded-xl", item.className, cardClassName),
+            children: /* @__PURE__ */ jsxs("div", { className: "group relative h-full min-h-108 max-w-full overflow-hidden rounded-xl md:aspect-5/4 lg:aspect-video", children: [
               /* @__PURE__ */ jsx(
-                DynamicIcon,
+                Img,
                 {
-                  name: "lucide/arrow-right",
-                  size: 20,
-                  className: "ml-2 transition-transform group-hover:translate-x-1"
+                  src: item.image,
+                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                  className: cn(
+                    "absolute h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute inset-0 h-full bg-linear-to-t from-primary from-20% to-transparent mix-blend-multiply",
+                    gradientClassName
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-primary-foreground md:p-8", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 pt-4 text-xl font-semibold md:mb-3 md:pt-4 lg:pt-4", children: item.title }),
+                /* @__PURE__ */ jsx("div", { className: "mb-8 line-clamp-2 md:mb-12 lg:mb-9", children: item.description }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
+                  readMoreText,
+                  " ",
+                  /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/arrow-right",
+                      size: 20,
+                      className: "ml-2 transition-transform group-hover:translate-x-1"
+                    }
+                  )
+                ] })
+              ] })
             ] })
-          ] })
-        ] }) })
+          }
+        )
       },
       item.id
     ));
@@ -1120,40 +1139,76 @@ function CarouselGradientOverlay({
       patternClassName,
       className,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-8 flex items-end justify-between md:mb-14 lg:mb-16", headerClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-            title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-lg text-muted-foreground", descriptionClassName), children: description }))
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: cn("hidden shrink-0 gap-2 md:flex", controlsClassName), children: [
-            /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                size: "icon",
-                variant: "ghost",
-                onClick: () => {
-                  carouselApi?.scrollPrev();
-                },
-                disabled: !canScrollPrev,
-                className: "disabled:pointer-events-auto",
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
-              }
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-8 flex items-end justify-between md:mb-14 lg:mb-16",
+              headerClassName
             ),
-            /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                size: "icon",
-                variant: "ghost",
-                onClick: () => {
-                  carouselApi?.scrollNext();
-                },
-                disabled: !canScrollNext,
-                className: "disabled:pointer-events-auto",
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-              }
-            )
-          ] })
-        ] }),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-3xl font-medium md:text-4xl lg:text-5xl",
+                      titleClassName
+                    ),
+                    children: title
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-lg text-muted-foreground",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "max-w-lg text-muted-foreground",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ))
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: cn("hidden shrink-0 gap-2 md:flex", controlsClassName), children: [
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    size: "icon",
+                    variant: "ghost",
+                    onClick: () => {
+                      carouselApi?.scrollPrev();
+                    },
+                    disabled: !canScrollPrev,
+                    className: "disabled:pointer-events-auto",
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    size: "icon",
+                    variant: "ghost",
+                    onClick: () => {
+                      carouselApi?.scrollNext();
+                    },
+                    disabled: !canScrollNext,
+                    className: "disabled:pointer-events-auto",
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: [
           /* @__PURE__ */ jsx(
             Carousel,
@@ -1167,21 +1222,36 @@ function CarouselGradientOverlay({
                 }
               },
               className: carouselClassName,
-              children: /* @__PURE__ */ jsx(CarouselContent, { className: cn("ml-0 2xl:mr-[max(0rem,calc(50vw-700px))] 2xl:ml-[max(8rem,calc(50vw-700px))]", carouselContentClassName), children: renderItems() })
+              children: /* @__PURE__ */ jsx(
+                CarouselContent,
+                {
+                  className: cn(
+                    "ml-0 2xl:mr-[max(0rem,calc(50vw-700px))] 2xl:ml-[max(8rem,calc(50vw-700px))]",
+                    carouselContentClassName
+                  ),
+                  children: renderItems()
+                }
+              )
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex justify-center gap-2", indicatorsClassName), children: items?.map((_, index) => /* @__PURE__ */ jsx(
-            "button",
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              className: cn(
-                "h-2 w-2 rounded-full transition-colors",
-                currentSlide === index ? "bg-primary" : "bg-primary/20"
-              ),
-              onClick: () => carouselApi?.scrollTo(index),
-              "aria-label": `Go to slide ${index + 1}`
-            },
-            index
-          )) })
+              className: cn("mt-8 flex justify-center gap-2", indicatorsClassName),
+              children: items?.map((_, index) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: cn(
+                    "h-2 w-2 rounded-full transition-colors",
+                    currentSlide === index ? "bg-primary" : "bg-primary/20"
+                  ),
+                  onClick: () => carouselApi?.scrollTo(index),
+                  "aria-label": `Go to slide ${index + 1}`
+                },
+                index
+              ))
+            }
+          )
         ] })
       ]
     }

package/dist/carousel-gradient-text.cjs

@@ -1072,6 +1072,7 @@ var Section = React4__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -1091,7 +1092,7 @@ var Section = React4__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1152,26 +1153,47 @@ function CarouselGradientText({
   const renderItems = () => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: cn("w-fit", itemClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative aspect-4/5 max-h-[500px] rounded-2xl", item.className, cardClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background", gradientClassName) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: item.image,
-          alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-          className: cn("size-full rounded-2xl bg-cover object-cover", imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-background/50 dark:text-foreground/50", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-1 text-background dark:text-foreground", children: [
-          item.title,
-          "."
-        ] }),
-        item.description
-      ] }) })
-    ] }) }, idx));
+    return items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: cn("w-fit", itemClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative aspect-4/5 max-h-[500px] rounded-2xl",
+          item.className,
+          cardClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background",
+                gradientClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: item.image,
+              alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+              className: cn(
+                "size-full rounded-2xl bg-cover object-cover",
+                imageClassName
+              ),
+              loading: "lazy",
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-background/50 dark:text-foreground/50", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-1 text-background dark:text-foreground", children: [
+              item.title,
+              "."
+            ] }),
+            item.description
+          ] }) })
+        ]
+      }
+    ) }, idx));
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1183,44 +1205,101 @@ function CarouselGradientText({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: carouselClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 md:gap-4 lg:grid-cols-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_-100vw_-100vw_0)]", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            (heading || subheading) && /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: cn("text-4xl font-semibold md:text-6xl", headingClassName), children: [
-              heading,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
-            ] }),
-            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-8 text-xl text-primary", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 text-xl text-primary", taglineClassName), children: tagline })),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 hidden items-center gap-4 md:flex", controlsClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "static size-12 translate-x-0 translate-y-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "static size-12 translate-x-0 translate-y-0" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: cn("max-w-[400px] select-none", carouselContentClassName), children: renderItems() })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex items-center lg:ml-[50%]", indicatorsClassName), children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: carouselClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
             className: cn(
-              "flex h-8 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-muted-foreground/15 text-xs font-semibold whitespace-nowrap transition-all duration-300",
-              index + 1 === current ? "w-32" : "m-4 size-4"
+              "grid gap-8 md:gap-4 lg:grid-cols-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_-100vw_-100vw_0)]",
+              headerClassName
             ),
-            onClick: () => api && api.scrollTo(index),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                (heading || subheading) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-4xl font-semibold md:text-6xl",
+                      headingClassName
+                    ),
+                    children: [
+                      heading,
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
+                    ]
+                  }
+                ),
+                tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn("mt-8 text-xl text-primary", taglineClassName),
+                    children: tagline
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn("mt-8 text-xl text-primary", taglineClassName),
+                    children: tagline
+                  }
+                )),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "mt-8 hidden items-center gap-4 md:flex",
+                      controlsClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "static size-12 translate-x-0 translate-y-0" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "static size-12 translate-x-0 translate-y-0" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CarouselContent,
+                {
+                  className: cn(
+                    "max-w-[400px] select-none",
+                    carouselContentClassName
+                  ),
+                  children: renderItems()
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex items-center lg:ml-[50%]",
+              indicatorsClassName
+            ),
+            children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 className: cn(
-                  "inline-block transition-all duration-300",
-                  index + 1 === current ? "translate-x-0 opacity-100" : "translate-x-6 opacity-0"
+                  "flex h-8 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-muted-foreground/15 text-xs font-semibold whitespace-nowrap transition-all duration-300",
+                  index + 1 === current ? "w-32" : "m-4 size-4"
                 ),
-                children: items?.[index]?.title
-              }
-            )
-          },
-          index
-        )) })
+                onClick: () => api && api.scrollTo(index),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-block transition-all duration-300",
+                      index + 1 === current ? "translate-x-0 opacity-100" : "translate-x-6 opacity-0"
+                    ),
+                    children: items?.[index]?.title
+                  }
+                )
+              },
+              index
+            ))
+          }
+        )
       ]
     }
   );

package/dist/carousel-gradient-text.d.cts

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

package/dist/carousel-gradient-text.d.ts

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