@opensite/ui 0.4.1 → 0.4.3

package/dist/auto-scroll-carousel.cjs

@@ -1016,6 +1016,7 @@ var Section = React4__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -1035,7 +1036,7 @@ var Section = React4__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1079,11 +1080,22 @@ function AutoScrollCarousel({
   const renderAction = () => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClass, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClass,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
-        className: cn("font-medium hover:underline", actionClass, actionClassName),
+        className: cn(
+          "font-medium hover:underline",
+          actionClass,
+          actionClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon,
@@ -1129,11 +1141,29 @@ function AutoScrollCarousel({
       patternClassName,
       className,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8 md:gap-12", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderAction()
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8 md:gap-12", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-3xl font-bold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderAction()
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
           Carousel,
           {

package/dist/auto-scroll-carousel.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';
@@ -102,7 +101,7 @@ interface AutoScrollCarouselProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/auto-scroll-carousel.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';
@@ -102,7 +101,7 @@ interface AutoScrollCarouselProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/auto-scroll-carousel.js

@@ -991,6 +991,7 @@ var Section = React4__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -1010,7 +1011,7 @@ var Section = React4__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1054,11 +1055,22 @@ function AutoScrollCarousel({
   const renderAction = () => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClass, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClass,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
-        className: cn("font-medium hover:underline", actionClass, actionClassName),
+        className: cn(
+          "font-medium hover:underline",
+          actionClass,
+          actionClassName
+        ),
         ...pressableProps,
         children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
           icon,
@@ -1104,11 +1116,29 @@ function AutoScrollCarousel({
       patternClassName,
       className,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24", headerClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8 md:gap-12", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })) }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderAction()
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8 md:gap-12", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-3xl font-bold md:text-4xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })) }),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderAction()
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsx("div", { className: "max-w-screen overflow-x-hidden", children: /* @__PURE__ */ jsx(
           Carousel,
           {

package/dist/blur-vignette-grid.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
             }
           ),
@@ -506,7 +507,10 @@ function BlurVignetteGrid({
           {
             width: 200,
             height: 200,
-            className: cn("size-full rounded-[2.5rem] object-cover", imageClassName),
+            className: cn(
+              "size-full rounded-[2.5rem] object-cover",
+              imageClassName
+            ),
             src: image.src,
             alt: image.alt,
             loading: "lazy",
@@ -526,7 +530,13 @@ function BlurVignetteGrid({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName), children: renderImages() })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName),
+          children: renderImages()
+        }
+      )
     }
   );
 }

package/dist/blur-vignette-grid.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 { 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';
@@ -108,7 +107,7 @@ interface BlurVignetteGridProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/blur-vignette-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';
@@ -108,7 +107,7 @@ interface BlurVignetteGridProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/blur-vignette-grid.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
             }
           ),
@@ -500,7 +501,10 @@ function BlurVignetteGrid({
           {
             width: 200,
             height: 200,
-            className: cn("size-full rounded-[2.5rem] object-cover", imageClassName),
+            className: cn(
+              "size-full rounded-[2.5rem] object-cover",
+              imageClassName
+            ),
             src: image.src,
             alt: image.alt,
             loading: "lazy",
@@ -520,7 +524,13 @@ function BlurVignetteGrid({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName), children: renderImages() })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName),
+          children: renderImages()
+        }
+      )
     }
   );
 }

package/dist/carousel-badge-cards.cjs

@@ -1047,6 +1047,7 @@ var Section = React4__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -1066,7 +1067,7 @@ var Section = React4__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1133,14 +1134,21 @@ function CarouselBadgeCards({
           "a",
           {
             href: item.href,
-            className: cn("group flex flex-col justify-between rounded-xl bg-muted p-6", item.className, cardClassName),
+            className: cn(
+              "group flex flex-col justify-between rounded-xl bg-muted p-6",
+              item.className,
+              cardClassName
+            ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsxRuntime.jsx(
                 img.Img,
                 {
                   src: item.image,
                   alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                  className: cn("h-full w-full object-cover object-center", imageClassName),
+                  className: cn(
+                    "h-full w-full object-cover object-center",
+                    imageClassName
+                  ),
                   loading: "lazy",
                   optixFlowConfig
                 }
@@ -1177,37 +1185,55 @@ function CarouselBadgeCards({
       patternClassName,
       className,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 flex items-end justify-between md:mb-14 lg:mb-16", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("shrink-0 gap-2 md:flex", controlsClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Pressable,
-              {
-                size: "icon",
-                variant: "ghost",
-                onClick: () => {
-                  carouselApi?.scrollPrev();
-                },
-                disabled: !canScrollPrev,
-                className: "disabled:pointer-events-auto",
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
-              }
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-8 flex items-end justify-between md:mb-14 lg:mb-16",
+              headerClassName
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Pressable,
-              {
-                size: "icon",
-                variant: "ghost",
-                onClick: () => {
-                  carouselApi?.scrollNext();
-                },
-                disabled: !canScrollNext,
-                className: "disabled:pointer-events-auto",
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-              }
-            )
-          ] })
-        ] }),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("shrink-0 gap-2 md:flex", controlsClassName), children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Pressable,
+                  {
+                    size: "icon",
+                    variant: "ghost",
+                    onClick: () => {
+                      carouselApi?.scrollPrev();
+                    },
+                    disabled: !canScrollPrev,
+                    className: "disabled:pointer-events-auto",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Pressable,
+                  {
+                    size: "icon",
+                    variant: "ghost",
+                    onClick: () => {
+                      carouselApi?.scrollNext();
+                    },
+                    disabled: !canScrollNext,
+                    className: "disabled:pointer-events-auto",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsxRuntime.jsx(
           Carousel,
           {
@@ -1220,7 +1246,16 @@ function CarouselBadgeCards({
               }
             },
             className: carouselClassName,
-            children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: cn("mr-5 ml-5 2xl:mr-[calc(50vw-700px+20px)] 2xl:ml-[calc(50vw-700px+20px)]", carouselContentClassName), children: renderItems() })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              CarouselContent,
+              {
+                className: cn(
+                  "mr-5 ml-5 2xl:mr-[calc(50vw-700px+20px)] 2xl:ml-[calc(50vw-700px+20px)]",
+                  carouselContentClassName
+                ),
+                children: renderItems()
+              }
+            )
           }
         ) })
       ]

package/dist/carousel-badge-cards.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 { 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';
@@ -114,7 +113,7 @@ interface CarouselBadgeCardsProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/carousel-badge-cards.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';
@@ -114,7 +113,7 @@ interface CarouselBadgeCardsProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/carousel-badge-cards.js

@@ -1023,6 +1023,7 @@ var Section = React4__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -1042,7 +1043,7 @@ var Section = React4__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1109,14 +1110,21 @@ function CarouselBadgeCards({
           "a",
           {
             href: item.href,
-            className: cn("group flex flex-col justify-between rounded-xl bg-muted p-6", item.className, cardClassName),
+            className: cn(
+              "group flex flex-col justify-between rounded-xl bg-muted p-6",
+              item.className,
+              cardClassName
+            ),
             children: [
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsx(
                 Img,
                 {
                   src: item.image,
                   alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                  className: cn("h-full w-full object-cover object-center", imageClassName),
+                  className: cn(
+                    "h-full w-full object-cover object-center",
+                    imageClassName
+                  ),
                   loading: "lazy",
                   optixFlowConfig
                 }
@@ -1153,37 +1161,55 @@ function CarouselBadgeCards({
       patternClassName,
       className,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-8 flex items-end justify-between md:mb-14 lg:mb-16", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          /* @__PURE__ */ jsxs("div", { className: cn("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: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              /* @__PURE__ */ jsxs("div", { className: cn("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__ */ jsx("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsx(
           Carousel,
           {
@@ -1196,7 +1222,16 @@ function CarouselBadgeCards({
               }
             },
             className: carouselClassName,
-            children: /* @__PURE__ */ jsx(CarouselContent, { className: cn("mr-5 ml-5 2xl:mr-[calc(50vw-700px+20px)] 2xl:ml-[calc(50vw-700px+20px)]", carouselContentClassName), children: renderItems() })
+            children: /* @__PURE__ */ jsx(
+              CarouselContent,
+              {
+                className: cn(
+                  "mr-5 ml-5 2xl:mr-[calc(50vw-700px+20px)] 2xl:ml-[calc(50vw-700px+20px)]",
+                  carouselContentClassName
+                ),
+                children: renderItems()
+              }
+            )
           }
         ) })
       ]