@opensite/ui 1.1.9 → 1.2.1

package/dist/carousel-badge-cards.js

@@ -1089,7 +1089,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
@@ -1153,7 +1153,7 @@ function CarouselBadgeCards({
           {
             href: item.href,
             className: cn(
-              "group flex flex-col justify-between rounded-xl p-6 w-full",
+              "group flex flex-col justify-between rounded-xl p-6 w-full h-full",
               getNestedCardBg(background),
               getNestedCardTextColor(background),
               item.className,
@@ -1219,7 +1219,7 @@ function CarouselBadgeCards({
           "div",
           {
             className: cn(
-              "mb-8 flex items-end justify-between md:mb-14 lg:mb-16",
+              "mb-8 flex items-end justify-between md:mb-14 lg:mb-16 px-6 md:px-0",
               headerClassName
             ),
             children: [

package/dist/carousel-demo-link.cjs

@@ -1050,7 +1050,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-demo-link.js

@@ -1026,7 +1026,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-feature-badge.cjs

@@ -998,7 +998,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-feature-badge.js

@@ -974,7 +974,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-fullscreen-scroll-fx.cjs

@@ -812,7 +812,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-fullscreen-scroll-fx.js

@@ -791,7 +791,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-gallery-thumbnails.cjs

@@ -927,7 +927,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-gallery-thumbnails.js

@@ -906,7 +906,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-gradient-overlay.cjs

@@ -1050,7 +1050,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
@@ -1142,7 +1142,7 @@ function CarouselGradientOverlay({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-white-foreground md:p-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-4 text-white md:p-8", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 pt-4 text-xl font-semibold md:mb-3 md:pt-4 lg:pt-4", children: item.title }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 md:mb-12 lg:mb-9", children: item.description }),
                 readMoreText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
@@ -1254,7 +1254,7 @@ function CarouselGradientOverlay({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full -mx-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Carousel,
             {

package/dist/carousel-gradient-overlay.js

@@ -1026,7 +1026,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
@@ -1118,7 +1118,7 @@ function CarouselGradientOverlay({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-white-foreground md:p-8", children: [
+              /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-4 text-white 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 }),
                 readMoreText && /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm", children: [
@@ -1230,7 +1230,7 @@ function CarouselGradientOverlay({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full -mx-4", children: [
           /* @__PURE__ */ jsx(
             Carousel,
             {

package/dist/carousel-gradient-text.cjs

@@ -1108,7 +1108,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
@@ -1178,7 +1178,7 @@ function CarouselGradientText({
             "div",
             {
               className: cn(
-                "absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background",
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-40% dark:from-background",
                 gradientClassName
               )
             }
@@ -1246,7 +1246,7 @@ function CarouselGradientText({
                       " ",
                       /* @__PURE__ */ jsxRuntime.jsx("br", {}),
                       " ",
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary", subheadingClassName), children: subheading })
                     ]
                   }
                 ),
@@ -1302,7 +1302,7 @@ function CarouselGradientText({
               {
                 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"
+                  index + 1 === current ? "w-fit px-4" : "m-4 size-4"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/carousel-gradient-text.js

@@ -1084,7 +1084,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
@@ -1154,7 +1154,7 @@ function CarouselGradientText({
             "div",
             {
               className: cn(
-                "absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background",
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-40% dark:from-background",
                 gradientClassName
               )
             }
@@ -1222,7 +1222,7 @@ function CarouselGradientText({
                       " ",
                       /* @__PURE__ */ jsx("br", {}),
                       " ",
-                      /* @__PURE__ */ jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
+                      /* @__PURE__ */ jsx("span", { className: cn("text-primary", subheadingClassName), children: subheading })
                     ]
                   }
                 ),
@@ -1278,7 +1278,7 @@ function CarouselGradientText({
               {
                 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"
+                  index + 1 === current ? "w-fit px-4" : "m-4 size-4"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsx(

package/dist/carousel-horizontal-cards.cjs

@@ -992,7 +992,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-horizontal-cards.js

@@ -971,7 +971,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-icon-sidebar.cjs

@@ -1139,7 +1139,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
@@ -1153,10 +1153,14 @@ var Section = React4__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function CarouselIconSidebar({
+  title,
+  description,
   items,
   itemsSlot,
   sidebarSlot,
   className,
+  sectionTitleClassName,
+  sectionDescriptionClassName,
   sidebarClassName,
   iconClassName,
   titleClassName,
@@ -1274,13 +1278,13 @@ function CarouselIconSidebar({
   const itemsContent = React4.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: cn("h-full", itemClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-2/1 h-full w-full", image.className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: cn("h-full", itemClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full w-full", image.className), children: /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
       {
         src: image.src,
         alt: typeof image.title === "string" ? image.title : image.alt || "Carousel image",
         className: cn(
-          "h-full w-full rounded-lg object-cover cursor-pointer transition-transform hover:scale-[1.02]",
+          "h-full w-full rounded-lg object-cover cursor-pointer",
           imageClassName
         ),
         loading: "lazy",
@@ -1296,7 +1300,14 @@ function CarouselIconSidebar({
         }
       }
     ) }) }, index));
-  }, [itemsSlot, items, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1307,6 +1318,25 @@ function CarouselIconSidebar({
       patternClassName,
       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",
+                sectionTitleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: sectionTitleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg text-balance", sectionDescriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", sectionDescriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-5", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-2", children: sidebarContent }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: itemsContent }) })

package/dist/carousel-icon-sidebar.d.cts

@@ -36,6 +36,14 @@ interface CarouselIconSidebarItem {
     className?: string;
 }
 interface CarouselIconSidebarProps {
+    /**
+     * Section title (displayed above the carousel)
+     */
+    title?: React.ReactNode;
+    /**
+     * Section description (displayed above the carousel)
+     */
+    description?: React.ReactNode;
     /**
      * Array of items to display
      */
@@ -52,6 +60,14 @@ interface CarouselIconSidebarProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the section title
+     */
+    sectionTitleClassName?: string;
+    /**
+     * Additional CSS classes for the section description
+     */
+    sectionDescriptionClassName?: string;
     /**
      * Additional CSS classes for the sidebar panel
      */
@@ -61,11 +77,11 @@ interface CarouselIconSidebarProps {
      */
     iconClassName?: string;
     /**
-     * Additional CSS classes for the title
+     * Additional CSS classes for the sidebar item title
      */
     titleClassName?: string;
     /**
-     * Additional CSS classes for the description
+     * Additional CSS classes for the sidebar item description
      */
     descriptionClassName?: string;
     /**
@@ -136,6 +152,6 @@ interface CarouselIconSidebarProps {
  * />
  * ```
  */
-declare function CarouselIconSidebar({ items, itemsSlot, sidebarSlot, className, sidebarClassName, iconClassName, titleClassName, descriptionClassName, controlsClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselIconSidebarProps): React.JSX.Element;
+declare function CarouselIconSidebar({ title, description, items, itemsSlot, sidebarSlot, className, sectionTitleClassName, sectionDescriptionClassName, sidebarClassName, iconClassName, titleClassName, descriptionClassName, controlsClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselIconSidebarProps): React.JSX.Element;
 
 export { CarouselIconSidebar, type CarouselIconSidebarItem, type CarouselIconSidebarProps };

package/dist/carousel-icon-sidebar.d.ts

@@ -36,6 +36,14 @@ interface CarouselIconSidebarItem {
     className?: string;
 }
 interface CarouselIconSidebarProps {
+    /**
+     * Section title (displayed above the carousel)
+     */
+    title?: React.ReactNode;
+    /**
+     * Section description (displayed above the carousel)
+     */
+    description?: React.ReactNode;
     /**
      * Array of items to display
      */
@@ -52,6 +60,14 @@ interface CarouselIconSidebarProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the section title
+     */
+    sectionTitleClassName?: string;
+    /**
+     * Additional CSS classes for the section description
+     */
+    sectionDescriptionClassName?: string;
     /**
      * Additional CSS classes for the sidebar panel
      */
@@ -61,11 +77,11 @@ interface CarouselIconSidebarProps {
      */
     iconClassName?: string;
     /**
-     * Additional CSS classes for the title
+     * Additional CSS classes for the sidebar item title
      */
     titleClassName?: string;
     /**
-     * Additional CSS classes for the description
+     * Additional CSS classes for the sidebar item description
      */
     descriptionClassName?: string;
     /**
@@ -136,6 +152,6 @@ interface CarouselIconSidebarProps {
  * />
  * ```
  */
-declare function CarouselIconSidebar({ items, itemsSlot, sidebarSlot, className, sidebarClassName, iconClassName, titleClassName, descriptionClassName, controlsClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselIconSidebarProps): React.JSX.Element;
+declare function CarouselIconSidebar({ title, description, items, itemsSlot, sidebarSlot, className, sectionTitleClassName, sectionDescriptionClassName, sidebarClassName, iconClassName, titleClassName, descriptionClassName, controlsClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselIconSidebarProps): React.JSX.Element;
 
 export { CarouselIconSidebar, type CarouselIconSidebarItem, type CarouselIconSidebarProps };

package/dist/carousel-icon-sidebar.js

@@ -1115,7 +1115,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
@@ -1129,10 +1129,14 @@ var Section = React4__default.forwardRef(
 );
 Section.displayName = "Section";
 function CarouselIconSidebar({
+  title,
+  description,
   items,
   itemsSlot,
   sidebarSlot,
   className,
+  sectionTitleClassName,
+  sectionDescriptionClassName,
   sidebarClassName,
   iconClassName,
   titleClassName,
@@ -1250,13 +1254,13 @@ function CarouselIconSidebar({
   const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("h-full", itemClassName), children: /* @__PURE__ */ jsx("div", { className: cn("aspect-2/1 h-full w-full", image.className), children: /* @__PURE__ */ jsx(
+    return items.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("h-full", itemClassName), children: /* @__PURE__ */ jsx("div", { className: cn("h-full w-full", image.className), children: /* @__PURE__ */ jsx(
       Img,
       {
         src: image.src,
         alt: typeof image.title === "string" ? image.title : image.alt || "Carousel image",
         className: cn(
-          "h-full w-full rounded-lg object-cover cursor-pointer transition-transform hover:scale-[1.02]",
+          "h-full w-full rounded-lg object-cover cursor-pointer",
           imageClassName
         ),
         loading: "lazy",
@@ -1272,7 +1276,14 @@ function CarouselIconSidebar({
         }
       }
     ) }) }, index));
-  }, [itemsSlot, items, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    itemsSlot,
+    items,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1283,6 +1294,25 @@ function CarouselIconSidebar({
       patternClassName,
       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",
+                sectionTitleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: sectionTitleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", sectionDescriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", sectionDescriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-5", children: [
           /* @__PURE__ */ jsx("div", { className: "md:col-span-2", children: sidebarContent }),
           /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: itemsContent }) })

package/dist/carousel-icon-tabs.cjs

@@ -1142,7 +1142,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
@@ -1222,11 +1222,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__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-4xl", headingClassName), children: heading })),
           badge && /* @__PURE__ */ jsxRuntime.jsx(
             Badge,
             {
@@ -1238,7 +1238,14 @@ function CarouselIconTabs({
         ]
       }
     );
-  }, [headerSlot, headerClassName, heading, headingClassName, badge, badgeClassName]);
+  }, [
+    headerSlot,
+    headerClassName,
+    heading,
+    headingClassName,
+    badge,
+    badgeClassName
+  ]);
   const sectionsContent = React4.useMemo(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
@@ -1253,7 +1260,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",
@@ -1278,7 +1285,14 @@ function CarouselIconTabs({
       },
       index
     ));
-  }, [sectionsSlot, sections, itemClassName, imageClassName, optixFlowConfig, handleImageClick]);
+  }, [
+    sectionsSlot,
+    sections,
+    itemClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
   const tabsContent = React4.useMemo(() => {
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(