@opensite/ui 1.1.9 → 1.2.1

package/dist/carousel-icon-tabs.js

@@ -1118,7 +1118,7 @@ var Section = React4__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -1198,11 +1198,11 @@ function CarouselIconTabs({
       "div",
       {
         className: cn(
-          "mb-20 flex flex-col items-center justify-center gap-8",
+          "mb-8 md:mb-20 flex flex-col items-center justify-center gap-8",
           headerClassName
         ),
         children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
           badge && /* @__PURE__ */ jsx(
             Badge,
             {
@@ -1214,7 +1214,14 @@ function CarouselIconTabs({
         ]
       }
     );
-  }, [headerSlot, headerClassName, heading, headingClassName, badge, badgeClassName]);
+  }, [
+    headerSlot,
+    headerClassName,
+    heading,
+    headingClassName,
+    badge,
+    badgeClassName
+  ]);
   const sectionsContent = useMemo(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
@@ -1229,7 +1236,7 @@ function CarouselIconTabs({
               src: item.img,
               alt: typeof item.title === "string" ? item.title : item.alt || "Tab image",
               className: cn(
-                "aspect-square h-full w-full object-cover md:aspect-2/1 cursor-pointer transition-transform hover:scale-[1.02]",
+                "aspect-square h-full w-full object-cover md:aspect-2/1 cursor-pointer rounded-xl shadow-xl",
                 imageClassName
               ),
               loading: "lazy",
@@ -1254,7 +1261,14 @@ function CarouselIconTabs({
       },
       index
     ));
-  }, [sectionsSlot, sections, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    sectionsSlot,
+    sections,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   const tabsContent = useMemo(() => {
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsx(

package/dist/carousel-image-hero.cjs

@@ -838,7 +838,7 @@ var Section = React5__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-image-hero.js

@@ -817,7 +817,7 @@ var Section = React5__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-multi-step-showcase.cjs

@@ -948,7 +948,7 @@ var Section = React__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-multi-step-showcase.js

@@ -927,7 +927,7 @@ var Section = React__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-portfolio-hero.cjs

@@ -957,7 +957,7 @@ var Section = React6__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-portfolio-hero.js

@@ -936,7 +936,7 @@ var Section = React6__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-product-feature-showcase.cjs

@@ -944,7 +944,7 @@ var Section = React__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-product-feature-showcase.js

@@ -923,7 +923,7 @@ var Section = React__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-progress-slider.cjs

@@ -918,7 +918,7 @@ var Section = React6__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-progress-slider.js

@@ -897,7 +897,7 @@ var Section = React6__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-scale-focus.cjs

@@ -1109,7 +1109,7 @@ var Section = React4__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -1123,6 +1123,10 @@ var Section = React4__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function CarouselScaleFocus({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   className,
@@ -1233,6 +1237,31 @@ function CarouselScaleFocus({
       className: cn("overflow-hidden", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:px-45", children: [
+          title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn("max-w-lg text-balance", descriptionClassName),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn("max-w-lg text-balance", descriptionClassName),
+                children: description
+              }
+            ))
+          ] }) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
             Carousel,
             {

package/dist/carousel-scale-focus.d.cts

@@ -24,6 +24,22 @@ interface CarouselScaleFocusImage {
     className?: string;
 }
 interface CarouselScaleFocusProps {
+    /**
+     * Main title content
+     */
+    title?: React.ReactNode;
+    /**
+     * Description text below title
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Array of images to display
      */
@@ -114,6 +130,6 @@ interface CarouselScaleFocusProps {
  * />
  * ```
  */
-declare function CarouselScaleFocus({ images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
+declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
 
 export { CarouselScaleFocus, type CarouselScaleFocusImage, type CarouselScaleFocusProps };

package/dist/carousel-scale-focus.d.ts

@@ -24,6 +24,22 @@ interface CarouselScaleFocusImage {
     className?: string;
 }
 interface CarouselScaleFocusProps {
+    /**
+     * Main title content
+     */
+    title?: React.ReactNode;
+    /**
+     * Description text below title
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Array of images to display
      */
@@ -114,6 +130,6 @@ interface CarouselScaleFocusProps {
  * />
  * ```
  */
-declare function CarouselScaleFocus({ images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
+declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
 
 export { CarouselScaleFocus, type CarouselScaleFocusImage, type CarouselScaleFocusProps };

package/dist/carousel-scale-focus.js

@@ -1085,7 +1085,7 @@ var Section = React4__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -1099,6 +1099,10 @@ var Section = React4__default.forwardRef(
 );
 Section.displayName = "Section";
 function CarouselScaleFocus({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   className,
@@ -1209,6 +1213,31 @@ function CarouselScaleFocus({
       className: cn("overflow-hidden", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "md:px-45", children: [
+          title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+            title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn("max-w-lg text-balance", descriptionClassName),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("max-w-lg text-balance", descriptionClassName),
+                children: description
+              }
+            ))
+          ] }) : null,
           /* @__PURE__ */ jsxs(
             Carousel,
             {

package/dist/carousel-scrolling-feature-showcase.cjs

@@ -420,7 +420,7 @@ var Section = React3__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-scrolling-feature-showcase.js

@@ -399,7 +399,7 @@ var Section = React3__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-sidebar-resources.cjs

@@ -1109,7 +1109,7 @@ var Section = React4__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-sidebar-resources.js

@@ -1085,7 +1085,7 @@ var Section = React4__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/carousel-tabs-content.cjs

@@ -1109,7 +1109,7 @@ var Section = React4__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -1123,6 +1123,10 @@ var Section = React4__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function CarouselTabsContent({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   items,
   itemsSlot,
   tabsSlot,
@@ -1198,7 +1202,7 @@ function CarouselTabsContent({
   }, []);
   const tabsContent = React4.useMemo(() => {
     if (tabsSlot) return tabsSlot;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative mb-8 flex justify-center", tabsClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-auto gap-6 bg-background", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative  flex", tabsClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-auto gap-2 md:gap-4", children: [
       items?.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1229,7 +1233,15 @@ function CarouselTabsContent({
         }
       )
     ] }) });
-  }, [tabsSlot, tabsClassName, items, current, tabClassName, indicatorClassName, indicatorStyle]);
+  }, [
+    tabsSlot,
+    tabsClassName,
+    items,
+    current,
+    tabClassName,
+    indicatorClassName,
+    indicatorStyle
+  ]);
   const itemsContent = React4.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -1241,7 +1253,7 @@ function CarouselTabsContent({
           "div",
           {
             className: cn(
-              "grid h-full max-w-4xl gap-10 rounded-xl border border-border p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 lg:gap-20",
+              "grid h-full max-w-4xl gap-10 bg-background rounded-xl border border-border p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 lg:gap-20",
               cardClassName
             ),
             children: [
@@ -1305,6 +1317,25 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(
           Carousel,
           {
@@ -1314,7 +1345,7 @@ function CarouselTabsContent({
               carouselClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex mb-8 items-center justify-between", children: [
                 tabsContent,
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",

package/dist/carousel-tabs-content.d.cts

@@ -40,6 +40,22 @@ interface CarouselTabsContentItem {
     className?: string;
 }
 interface CarouselTabsContentProps {
+    /**
+     * Main title content
+     */
+    title?: React.ReactNode;
+    /**
+     * Description text below title
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Array of content items to display
      */
@@ -141,6 +157,6 @@ interface CarouselTabsContentProps {
  * />
  * ```
  */
-declare function CarouselTabsContent({ items, itemsSlot, tabsSlot, className, tabsClassName, tabClassName, indicatorClassName, controlsClassName, carouselClassName, carouselContentClassName, itemClassName, cardClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselTabsContentProps): React.JSX.Element;
+declare function CarouselTabsContent({ title, description, titleClassName, descriptionClassName, items, itemsSlot, tabsSlot, className, tabsClassName, tabClassName, indicatorClassName, controlsClassName, carouselClassName, carouselContentClassName, itemClassName, cardClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselTabsContentProps): React.JSX.Element;
 
 export { CarouselTabsContent, type CarouselTabsContentItem, type CarouselTabsContentProps };

package/dist/carousel-tabs-content.d.ts

@@ -40,6 +40,22 @@ interface CarouselTabsContentItem {
     className?: string;
 }
 interface CarouselTabsContentProps {
+    /**
+     * Main title content
+     */
+    title?: React.ReactNode;
+    /**
+     * Description text below title
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Array of content items to display
      */
@@ -141,6 +157,6 @@ interface CarouselTabsContentProps {
  * />
  * ```
  */
-declare function CarouselTabsContent({ items, itemsSlot, tabsSlot, className, tabsClassName, tabClassName, indicatorClassName, controlsClassName, carouselClassName, carouselContentClassName, itemClassName, cardClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselTabsContentProps): React.JSX.Element;
+declare function CarouselTabsContent({ title, description, titleClassName, descriptionClassName, items, itemsSlot, tabsSlot, className, tabsClassName, tabClassName, indicatorClassName, controlsClassName, carouselClassName, carouselContentClassName, itemClassName, cardClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselTabsContentProps): React.JSX.Element;
 
 export { CarouselTabsContent, type CarouselTabsContentItem, type CarouselTabsContentProps };

package/dist/carousel-tabs-content.js

@@ -1085,7 +1085,7 @@ var Section = React4__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -1099,6 +1099,10 @@ var Section = React4__default.forwardRef(
 );
 Section.displayName = "Section";
 function CarouselTabsContent({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   items,
   itemsSlot,
   tabsSlot,
@@ -1174,7 +1178,7 @@ function CarouselTabsContent({
   }, []);
   const tabsContent = useMemo(() => {
     if (tabsSlot) return tabsSlot;
-    return /* @__PURE__ */ jsx("div", { className: cn("relative mb-8 flex justify-center", tabsClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-auto gap-6 bg-background", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("relative  flex", tabsClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-auto gap-2 md:gap-4", children: [
       items?.map((item, idx) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -1205,7 +1209,15 @@ function CarouselTabsContent({
         }
       )
     ] }) });
-  }, [tabsSlot, tabsClassName, items, current, tabClassName, indicatorClassName, indicatorStyle]);
+  }, [
+    tabsSlot,
+    tabsClassName,
+    items,
+    current,
+    tabClassName,
+    indicatorClassName,
+    indicatorStyle
+  ]);
   const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -1217,7 +1229,7 @@ function CarouselTabsContent({
           "div",
           {
             className: cn(
-              "grid h-full max-w-4xl gap-10 rounded-xl border border-border p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 lg:gap-20",
+              "grid h-full max-w-4xl gap-10 bg-background rounded-xl border border-border p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 lg:gap-20",
               cardClassName
             ),
             children: [
@@ -1281,6 +1293,25 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsxs(
           Carousel,
           {
@@ -1290,7 +1321,7 @@ function CarouselTabsContent({
               carouselClassName
             ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex mb-8 items-center justify-between", children: [
                 tabsContent,
                 /* @__PURE__ */ jsxs(
                   "div",

package/dist/case-studies-featured-border.cjs

@@ -917,7 +917,7 @@ var Section = React__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children