@opensite/ui 0.4.1 → 0.4.3

package/dist/carousel-gradient-text.cjs

@@ -1072,6 +1072,7 @@ var Section = React4__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -1091,7 +1092,7 @@ var Section = React4__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1152,26 +1153,47 @@ function CarouselGradientText({
   const renderItems = () => {
     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", { className: cn("relative aspect-4/5 max-h-[500px] rounded-2xl", item.className, cardClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background", gradientClassName) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: item.image,
-          alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-          className: cn("size-full rounded-2xl bg-cover object-cover", imageClassName),
-          loading: "lazy",
-          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: [
-          item.title,
-          "."
-        ] }),
-        item.description
-      ] }) })
-    ] }) }, idx));
+    return items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: cn("w-fit", itemClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative aspect-4/5 max-h-[500px] rounded-2xl",
+          item.className,
+          cardClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background",
+                gradientClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: item.image,
+              alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+              className: cn(
+                "size-full rounded-2xl bg-cover object-cover",
+                imageClassName
+              ),
+              loading: "lazy",
+              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: [
+              item.title,
+              "."
+            ] }),
+            item.description
+          ] }) })
+        ]
+      }
+    ) }, idx));
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1183,44 +1205,101 @@ function CarouselGradientText({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: carouselClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 md:gap-4 lg:grid-cols-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_-100vw_-100vw_0)]", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            (heading || subheading) && /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: cn("text-4xl font-semibold md:text-6xl", headingClassName), children: [
-              heading,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
-            ] }),
-            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 })),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 hidden items-center gap-4 md:flex", controlsClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "static size-12 translate-x-0 translate-y-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "static size-12 translate-x-0 translate-y-0" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: cn("max-w-[400px] select-none", carouselContentClassName), children: renderItems() })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex items-center lg:ml-[50%]", indicatorsClassName), children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: carouselClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
             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"
+              "grid gap-8 md:gap-4 lg:grid-cols-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_-100vw_-100vw_0)]",
+              headerClassName
             ),
-            onClick: () => api && api.scrollTo(index),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                (heading || subheading) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-4xl font-semibold md:text-6xl",
+                      headingClassName
+                    ),
+                    children: [
+                      heading,
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
+                    ]
+                  }
+                ),
+                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
+                  }
+                )),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "mt-8 hidden items-center gap-4 md:flex",
+                      controlsClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "static size-12 translate-x-0 translate-y-0" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "static size-12 translate-x-0 translate-y-0" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CarouselContent,
+                {
+                  className: cn(
+                    "max-w-[400px] select-none",
+                    carouselContentClassName
+                  ),
+                  children: renderItems()
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex items-center lg:ml-[50%]",
+              indicatorsClassName
+            ),
+            children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 className: cn(
-                  "inline-block transition-all duration-300",
-                  index + 1 === current ? "translate-x-0 opacity-100" : "translate-x-6 opacity-0"
+                  "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"
                 ),
-                children: items?.[index]?.title
-              }
-            )
-          },
-          index
-        )) })
+                onClick: () => api && api.scrollTo(index),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-block transition-all duration-300",
+                      index + 1 === current ? "translate-x-0 opacity-100" : "translate-x-6 opacity-0"
+                    ),
+                    children: items?.[index]?.title
+                  }
+                )
+              },
+              index
+            ))
+          }
+        )
       ]
     }
   );

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -118,7 +117,7 @@ interface CarouselGradientTextProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -118,7 +117,7 @@ interface CarouselGradientTextProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/carousel-gradient-text.js

@@ -1048,6 +1048,7 @@ var Section = React4__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -1067,7 +1068,7 @@ var Section = React4__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1128,26 +1129,47 @@ function CarouselGradientText({
   const renderItems = () => {
     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", { className: cn("relative aspect-4/5 max-h-[500px] rounded-2xl", item.className, cardClassName), children: [
-      /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background", gradientClassName) }),
-      /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: item.image,
-          alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-          className: cn("size-full rounded-2xl bg-cover object-cover", imageClassName),
-          loading: "lazy",
-          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: [
-          item.title,
-          "."
-        ] }),
-        item.description
-      ] }) })
-    ] }) }, idx));
+    return items.map((item, idx) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("w-fit", itemClassName), children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative aspect-4/5 max-h-[500px] rounded-2xl",
+          item.className,
+          cardClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background",
+                gradientClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: item.image,
+              alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+              className: cn(
+                "size-full rounded-2xl bg-cover object-cover",
+                imageClassName
+              ),
+              loading: "lazy",
+              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: [
+              item.title,
+              "."
+            ] }),
+            item.description
+          ] }) })
+        ]
+      }
+    ) }, idx));
   };
   return /* @__PURE__ */ jsxs(
     Section,
@@ -1159,44 +1181,101 @@ function CarouselGradientText({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsx(Carousel, { setApi, className: carouselClassName, children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 md:gap-4 lg:grid-cols-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_-100vw_-100vw_0)]", headerClassName), children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            (heading || subheading) && /* @__PURE__ */ jsxs("h2", { className: cn("text-4xl font-semibold md:text-6xl", headingClassName), children: [
-              heading,
-              " ",
-              /* @__PURE__ */ jsx("br", {}),
-              " ",
-              /* @__PURE__ */ jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
-            ] }),
-            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 })),
-            /* @__PURE__ */ jsxs("div", { className: cn("mt-8 hidden items-center gap-4 md:flex", controlsClassName), children: [
-              /* @__PURE__ */ jsx(CarouselPrevious, { className: "static size-12 translate-x-0 translate-y-0" }),
-              /* @__PURE__ */ jsx(CarouselNext, { className: "static size-12 translate-x-0 translate-y-0" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(CarouselContent, { className: cn("max-w-[400px] select-none", carouselContentClassName), children: renderItems() })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex items-center lg:ml-[50%]", indicatorsClassName), children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsx(
-          "span",
+        /* @__PURE__ */ jsx(Carousel, { setApi, className: carouselClassName, children: /* @__PURE__ */ jsxs(
+          "div",
           {
             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"
+              "grid gap-8 md:gap-4 lg:grid-cols-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_-100vw_-100vw_0)]",
+              headerClassName
             ),
-            onClick: () => api && api.scrollTo(index),
-            children: /* @__PURE__ */ jsx(
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                (heading || subheading) && /* @__PURE__ */ jsxs(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-4xl font-semibold md:text-6xl",
+                      headingClassName
+                    ),
+                    children: [
+                      heading,
+                      " ",
+                      /* @__PURE__ */ jsx("br", {}),
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
+                    ]
+                  }
+                ),
+                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
+                  }
+                )),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "mt-8 hidden items-center gap-4 md:flex",
+                      controlsClassName
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(CarouselPrevious, { className: "static size-12 translate-x-0 translate-y-0" }),
+                      /* @__PURE__ */ jsx(CarouselNext, { className: "static size-12 translate-x-0 translate-y-0" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                CarouselContent,
+                {
+                  className: cn(
+                    "max-w-[400px] select-none",
+                    carouselContentClassName
+                  ),
+                  children: renderItems()
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-8 flex items-center lg:ml-[50%]",
+              indicatorsClassName
+            ),
+            children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsx(
               "span",
               {
                 className: cn(
-                  "inline-block transition-all duration-300",
-                  index + 1 === current ? "translate-x-0 opacity-100" : "translate-x-6 opacity-0"
+                  "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"
                 ),
-                children: items?.[index]?.title
-              }
-            )
-          },
-          index
-        )) })
+                onClick: () => api && api.scrollTo(index),
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-block transition-all duration-300",
+                      index + 1 === current ? "translate-x-0 opacity-100" : "translate-x-6 opacity-0"
+                    ),
+                    children: items?.[index]?.title
+                  }
+                )
+              },
+              index
+            ))
+          }
+        )
       ]
     }
   );

package/dist/carousel-icon-sidebar.cjs

@@ -1072,6 +1072,7 @@ var Section = React4__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -1091,7 +1092,7 @@ var Section = React4__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1148,17 +1149,53 @@ function CarouselIconSidebar({
   const renderSidebar = () => {
     if (sidebarSlot) return sidebarSlot;
     if (!activeItem) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col gap-8 rounded-lg bg-muted px-8 py-16", sidebarClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-lg bg-background shadow-lg ring-1 ring-gray-200", iconClassName), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: activeItem.icon, size: 24 }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-        typeof activeItem.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }),
-        typeof activeItem.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-base text-muted-foreground", descriptionClassName), children: activeItem.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-base text-muted-foreground", descriptionClassName), children: activeItem.description }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", controlsClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-black hover:text-white" }),
-          /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-black hover:text-white" })
-        ] })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-full flex-col gap-8 rounded-lg bg-muted px-8 py-16",
+          sidebarClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex h-12 w-12 items-center justify-center rounded-lg bg-background shadow-lg ring-1 ring-gray-200",
+                iconClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: activeItem.icon, size: 24 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+            typeof activeItem.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }),
+            typeof activeItem.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "mb-4 text-base text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: activeItem.description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "mb-4 text-base text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: activeItem.description
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", controlsClassName), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-black hover:text-white" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-black hover:text-white" })
+            ] })
+          ] })
+        ]
+      }
+    );
   };
   const renderItems = () => {
     if (itemsSlot) return itemsSlot;
@@ -1168,7 +1205,10 @@ function CarouselIconSidebar({
       {
         src: image.src,
         alt: typeof image.title === "string" ? image.title : image.alt || "Carousel image",
-        className: cn("h-full w-full rounded-lg object-cover", imageClassName),
+        className: cn(
+          "h-full w-full rounded-lg object-cover",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -101,7 +100,7 @@ interface CarouselIconSidebarProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -101,7 +100,7 @@ interface CarouselIconSidebarProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */