@opensite/ui 1.2.0 → 1.2.1

package/dist/auto-scroll-carousel.cjs

@@ -1100,13 +1100,13 @@ function AutoScrollCarousel({
       className: actionClass,
       ...pressableProps
     } = action;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex text-left", children: /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
         variant: "link",
         asButton: true,
         className: cn(
-          "font-medium flex items-center",
+          "font-medium flex items-center text-xl",
           actionClass,
           actionClassName
         ),
@@ -1124,7 +1124,7 @@ function AutoScrollCarousel({
           )
         ] })
       }
-    );
+    ) });
   }, [actionSlot, action, actionClassName]);
   const imagesContent = React4.useMemo(() => {
     if (imagesSlot) return imagesSlot;
@@ -1164,7 +1164,7 @@ function AutoScrollCarousel({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8 md:gap-12", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
+                "h2",
                 {
                   className: cn(
                     "text-3xl font-bold md:text-4xl",

package/dist/auto-scroll-carousel.js

@@ -1075,13 +1075,13 @@ function AutoScrollCarousel({
       className: actionClass,
       ...pressableProps
     } = action;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "flex text-left", children: /* @__PURE__ */ jsx(
       Pressable,
       {
         variant: "link",
         asButton: true,
         className: cn(
-          "font-medium flex items-center",
+          "font-medium flex items-center text-xl",
           actionClass,
           actionClassName
         ),
@@ -1099,7 +1099,7 @@ function AutoScrollCarousel({
           )
         ] })
       }
-    );
+    ) });
   }, [actionSlot, action, actionClassName]);
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
@@ -1139,7 +1139,7 @@ function AutoScrollCarousel({
             ),
             children: [
               /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8 md:gap-12", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h1",
+                "h2",
                 {
                   className: cn(
                     "text-3xl font-bold md:text-4xl",

package/dist/blur-vignette-grid.cjs

@@ -428,9 +428,9 @@ function BlurVignette({
             --r: max(var(--transition-length), calc(var(--radius) - var(--inset)));
             --corner-size: calc(var(--r) + var(--inset)) calc(var(--r) + var(--inset));
             --corner-gradient: transparent 0px,
-              transparent calc(var(--r) - var(--transition-length)), 
+              transparent calc(var(--r) - var(--transition-length)),
               black var(--r);
-            --fill-gradient: black, 
+            --fill-gradient: black,
               black var(--inset),
               transparent calc(var(--inset) + var(--transition-length)),
               transparent calc(100% - var(--transition-length) - var(--inset)),
@@ -443,21 +443,21 @@ function BlurVignette({
               radial-gradient(at bottom left, var(--corner-gradient)),
               radial-gradient(at top left, var(--corner-gradient)),
               radial-gradient(at top right, var(--corner-gradient));
-            -webkit-mask-size: 100% var(--fill-narrow-size), 
+            -webkit-mask-size: 100% var(--fill-narrow-size),
               var(--fill-narrow-size) 100%,
-              var(--corner-size), 
-              var(--corner-size), 
+              var(--corner-size),
+              var(--corner-size),
               var(--corner-size),
               var(--corner-size);
-            -webkit-mask-position: 0 var(--fill-farther-position), 
+            -webkit-mask-position: 0 var(--fill-farther-position),
               var(--fill-farther-position) 0,
-              0 0, 
-              100% 0, 
-              100% 100%, 
+              0 0,
+              100% 0,
+              100% 100%,
               0 100%;
             -webkit-mask-repeat: no-repeat;
             opacity: 0;
-            transition: opacity 0.3s ease;    
+            transition: opacity 0.3s ease;
         }
 
         .blur-vignette.active {
@@ -556,33 +556,21 @@ function BlurVignetteGrid({
       patternClassName,
       className,
       children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", 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-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-muted-foreground",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
+          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-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: description
             }
           ))
@@ -590,7 +578,11 @@ function BlurVignetteGrid({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(`grid grid-cols-1 md:grid-cols-${gridColumns}`, gridGap, gridClassName),
+            className: cn(
+              `grid grid-cols-1 md:grid-cols-${gridColumns}`,
+              gridGap,
+              gridClassName
+            ),
             children: imagesContent
           }
         )

package/dist/blur-vignette-grid.js

@@ -422,9 +422,9 @@ function BlurVignette({
             --r: max(var(--transition-length), calc(var(--radius) - var(--inset)));
             --corner-size: calc(var(--r) + var(--inset)) calc(var(--r) + var(--inset));
             --corner-gradient: transparent 0px,
-              transparent calc(var(--r) - var(--transition-length)), 
+              transparent calc(var(--r) - var(--transition-length)),
               black var(--r);
-            --fill-gradient: black, 
+            --fill-gradient: black,
               black var(--inset),
               transparent calc(var(--inset) + var(--transition-length)),
               transparent calc(100% - var(--transition-length) - var(--inset)),
@@ -437,21 +437,21 @@ function BlurVignette({
               radial-gradient(at bottom left, var(--corner-gradient)),
               radial-gradient(at top left, var(--corner-gradient)),
               radial-gradient(at top right, var(--corner-gradient));
-            -webkit-mask-size: 100% var(--fill-narrow-size), 
+            -webkit-mask-size: 100% var(--fill-narrow-size),
               var(--fill-narrow-size) 100%,
-              var(--corner-size), 
-              var(--corner-size), 
+              var(--corner-size),
+              var(--corner-size),
               var(--corner-size),
               var(--corner-size);
-            -webkit-mask-position: 0 var(--fill-farther-position), 
+            -webkit-mask-position: 0 var(--fill-farther-position),
               var(--fill-farther-position) 0,
-              0 0, 
-              100% 0, 
-              100% 100%, 
+              0 0,
+              100% 0,
+              100% 100%,
               0 100%;
             -webkit-mask-repeat: no-repeat;
             opacity: 0;
-            transition: opacity 0.3s ease;    
+            transition: opacity 0.3s ease;
         }
 
         .blur-vignette.active {
@@ -550,33 +550,21 @@ function BlurVignetteGrid({
       patternClassName,
       className,
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", 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-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-muted-foreground",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx(
+          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-muted-foreground",
-                descriptionClassName
-              ),
+              className: cn("max-w-lg text-balance", descriptionClassName),
               children: description
             }
           ))
@@ -584,7 +572,11 @@ function BlurVignetteGrid({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(`grid grid-cols-1 md:grid-cols-${gridColumns}`, gridGap, gridClassName),
+            className: cn(
+              `grid grid-cols-1 md:grid-cols-${gridColumns}`,
+              gridGap,
+              gridClassName
+            ),
             children: imagesContent
           }
         )

package/dist/carousel-badge-cards.cjs

@@ -1243,7 +1243,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-badge-cards.js

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

@@ -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

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

@@ -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

@@ -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

@@ -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(

package/dist/carousel-icon-tabs.js

@@ -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(