@opensite/ui 1.2.0 → 1.2.2

package/dist/auto-scroll-carousel.cjs

@@ -1100,13 +1100,11 @@ 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-lg px-0",
           actionClass,
           actionClassName
         ),
@@ -1118,13 +1116,13 @@ function AutoScrollCarousel({
             DynamicIcon,
             {
               name: "lucide/move-right",
-              size: 20,
+              size: 24,
               className: "ml-2 inline"
             }
           )
         ] })
       }
-    );
+    ) });
   }, [actionSlot, action, actionClassName]);
   const imagesContent = React4.useMemo(() => {
     if (imagesSlot) return imagesSlot;
@@ -1159,15 +1157,15 @@ function AutoScrollCarousel({
           "div",
           {
             className: cn(
-              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24",
+              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24 px-6 md:px-0",
               headerClassName
             ),
             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",
+                    "text-3xl font-bold md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading

package/dist/auto-scroll-carousel.js

@@ -1075,13 +1075,11 @@ 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-lg px-0",
           actionClass,
           actionClassName
         ),
@@ -1093,13 +1091,13 @@ function AutoScrollCarousel({
             DynamicIcon,
             {
               name: "lucide/move-right",
-              size: 20,
+              size: 24,
               className: "ml-2 inline"
             }
           )
         ] })
       }
-    );
+    ) });
   }, [actionSlot, action, actionClassName]);
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
@@ -1134,15 +1132,15 @@ function AutoScrollCarousel({
           "div",
           {
             className: cn(
-              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24",
+              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24 px-6 md:px-0",
               headerClassName
             ),
             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",
+                    "text-3xl font-bold md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading

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-gradient-text.cjs

@@ -1166,8 +1166,9 @@ function CarouselGradientText({
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: cn("w-fit", itemClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      Pressable,
       {
+        href: item.href,
         className: cn(
           "relative aspect-4/5 max-h-[500px] rounded-2xl",
           item.className,
@@ -1196,12 +1197,12 @@ function CarouselGradientText({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-background/50 dark:text-foreground/50", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-1 text-background dark:text-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-white/70", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-1 text-white", children: [
               item.title,
               "."
             ] }),
-            item.description
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.description })
           ] }) })
         ]
       }
@@ -1250,19 +1251,7 @@ function CarouselGradientText({
                     ]
                   }
                 ),
-                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    className: cn("mt-8 text-xl text-primary", taglineClassName),
-                    children: tagline
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn("mt-8 text-xl text-primary", taglineClassName),
-                    children: tagline
-                  }
-                ) : null,
+                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : null,
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {

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

@@ -30,6 +30,10 @@ interface CarouselGradientTextItem {
      * Additional CSS classes for the card
      */
     className?: string;
+    /**
+     * href for the card
+     */
+    href?: string;
 }
 interface CarouselGradientTextProps {
     /**

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

@@ -30,6 +30,10 @@ interface CarouselGradientTextItem {
      * Additional CSS classes for the card
      */
     className?: string;
+    /**
+     * href for the card
+     */
+    href?: string;
 }
 interface CarouselGradientTextProps {
     /**

package/dist/carousel-gradient-text.js

@@ -1142,8 +1142,9 @@ function CarouselGradientText({
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return items.map((item, idx) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("w-fit", itemClassName), children: /* @__PURE__ */ jsxs(
-      "div",
+      Pressable,
       {
+        href: item.href,
         className: cn(
           "relative aspect-4/5 max-h-[500px] rounded-2xl",
           item.className,
@@ -1172,12 +1173,12 @@ function CarouselGradientText({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold text-background/50 dark:text-foreground/50", children: [
-            /* @__PURE__ */ jsxs("span", { className: "mr-1 text-background dark:text-foreground", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-white/70", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mr-1 text-white", children: [
               item.title,
               "."
             ] }),
-            item.description
+            /* @__PURE__ */ jsx("div", { children: item.description })
           ] }) })
         ]
       }
@@ -1226,19 +1227,7 @@ function CarouselGradientText({
                     ]
                   }
                 ),
-                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: cn("mt-8 text-xl text-primary", taglineClassName),
-                    children: tagline
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn("mt-8 text-xl text-primary", taglineClassName),
-                    children: tagline
-                  }
-                ) : null,
+                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : null,
                 /* @__PURE__ */ jsxs(
                   "div",
                   {

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,
@@ -1216,7 +1220,7 @@ function CarouselIconSidebar({
       "div",
       {
         className: cn(
-          "flex h-full flex-col gap-8 rounded-lg px-8 py-16",
+          "flex h-full flex-col gap-8 rounded-lg p-8",
           getNestedCardBg(background),
           getNestedCardTextColor(background),
           sidebarClassName
@@ -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,9 +1318,41 @@ function CarouselIconSidebar({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md: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 }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:visible 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 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "visible md:hidden md:col-span-2", children: sidebarContent })
         ] }) }),
         lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
           lightbox.Lightbox,

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 };