@opensite/ui 1.2.2 → 1.2.4

package/dist/auto-scroll-carousel.cjs

@@ -1104,7 +1104,7 @@ function AutoScrollCarousel({
       Pressable,
       {
         className: cn(
-          "font-medium flex items-center text-lg px-0",
+          "font-medium flex items-center text-lg px-0 text-primary",
           actionClass,
           actionClassName
         ),
@@ -1115,7 +1115,7 @@ function AutoScrollCarousel({
           iconAfter ?? /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
-              name: "lucide/move-right",
+              name: "lucide/arrow-up-right",
               size: 24,
               className: "ml-2 inline"
             }

package/dist/auto-scroll-carousel.js

@@ -1079,7 +1079,7 @@ function AutoScrollCarousel({
       Pressable,
       {
         className: cn(
-          "font-medium flex items-center text-lg px-0",
+          "font-medium flex items-center text-lg px-0 text-primary",
           actionClass,
           actionClassName
         ),
@@ -1090,7 +1090,7 @@ function AutoScrollCarousel({
           iconAfter ?? /* @__PURE__ */ jsx(
             DynamicIcon,
             {
-              name: "lucide/move-right",
+              name: "lucide/arrow-up-right",
               size: 24,
               className: "ml-2 inline"
             }

package/dist/blur-vignette-grid.cjs

@@ -397,7 +397,7 @@ function BlurVignette({
   radius = "24px",
   inset = "16px",
   transitionLength = "32px",
-  blur = "8px"
+  blur = "3px"
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
@@ -413,7 +413,7 @@ function BlurVignette({
         y: 0
       },
       viewport: { once: true, amount: 0.2 },
-      className: `group relative cursor-pointer overflow-hidden rounded-[2.5rem] ${className}`,
+      className: `group relative cursor-pointer overflow-hidden rounded-2xl shadow-xl ${className}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
           .blur-vignette {
@@ -458,17 +458,18 @@ function BlurVignette({
             -webkit-mask-repeat: no-repeat;
             opacity: 0;
             transition: opacity 0.3s ease;
-        }
+            filter: brightness(0.5);
+          }
 
-        .blur-vignette.active {
-        opacity: 1;
-        }
+          .blur-vignette.active {
+            opacity: 1;
+          }
 
-        .group:hover .blur-vignette {
-        opacity: 0;
-        }
+          .group:hover .blur-vignette {
+            opacity: 0;
+          }
         ` }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "blur-vignette active" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "blur-vignette active rounded-2xl" }),
         children
       ]
     }
@@ -499,7 +500,7 @@ function BlurVignetteGrid({
     radius = "24px",
     inset = "10px",
     transitionLength = "100px",
-    blur = "8px"
+    blur = "3px"
   } = vignetteConfig || {};
   const imagesContent = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
@@ -520,12 +521,7 @@ function BlurVignetteGrid({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
-            width: 200,
-            height: 200,
-            className: cn(
-              "size-full rounded-[2.5rem] object-cover",
-              imageClassName
-            ),
+            className: cn("size-full  object-cover", imageClassName),
             src: image.src,
             alt: image.alt,
             loading: "lazy",

package/dist/blur-vignette-grid.d.cts

@@ -52,7 +52,7 @@ interface BlurVignetteConfig {
     transitionLength?: string;
     /**
      * Blur intensity
-     * @default "15px"
+     * @default "3px"
      */
     blur?: string;
 }
@@ -153,7 +153,7 @@ interface BlurVignetteGridProps {
  *     { src: "/images/photo-1.jpg", alt: "Photo 1", colSpan: 2, height: "h-82" },
  *     { src: "/images/photo-2.jpg", alt: "Photo 2", colSpan: 3, height: "h-82" }
  *   ]}
- *   vignetteConfig={{ radius: "24px", blur: "15px" }}
+ *   vignetteConfig={{ radius: "24px", blur: "3px" }}
  * />
  * ```
  */

package/dist/blur-vignette-grid.d.ts

@@ -52,7 +52,7 @@ interface BlurVignetteConfig {
     transitionLength?: string;
     /**
      * Blur intensity
-     * @default "15px"
+     * @default "3px"
      */
     blur?: string;
 }
@@ -153,7 +153,7 @@ interface BlurVignetteGridProps {
  *     { src: "/images/photo-1.jpg", alt: "Photo 1", colSpan: 2, height: "h-82" },
  *     { src: "/images/photo-2.jpg", alt: "Photo 2", colSpan: 3, height: "h-82" }
  *   ]}
- *   vignetteConfig={{ radius: "24px", blur: "15px" }}
+ *   vignetteConfig={{ radius: "24px", blur: "3px" }}
  * />
  * ```
  */

package/dist/blur-vignette-grid.js

@@ -391,7 +391,7 @@ function BlurVignette({
   radius = "24px",
   inset = "16px",
   transitionLength = "32px",
-  blur = "8px"
+  blur = "3px"
 }) {
   return /* @__PURE__ */ jsxs(
     motion.div,
@@ -407,7 +407,7 @@ function BlurVignette({
         y: 0
       },
       viewport: { once: true, amount: 0.2 },
-      className: `group relative cursor-pointer overflow-hidden rounded-[2.5rem] ${className}`,
+      className: `group relative cursor-pointer overflow-hidden rounded-2xl shadow-xl ${className}`,
       children: [
         /* @__PURE__ */ jsx("style", { children: `
           .blur-vignette {
@@ -452,17 +452,18 @@ function BlurVignette({
             -webkit-mask-repeat: no-repeat;
             opacity: 0;
             transition: opacity 0.3s ease;
-        }
+            filter: brightness(0.5);
+          }
 
-        .blur-vignette.active {
-        opacity: 1;
-        }
+          .blur-vignette.active {
+            opacity: 1;
+          }
 
-        .group:hover .blur-vignette {
-        opacity: 0;
-        }
+          .group:hover .blur-vignette {
+            opacity: 0;
+          }
         ` }),
-        /* @__PURE__ */ jsx("div", { className: "blur-vignette active" }),
+        /* @__PURE__ */ jsx("div", { className: "blur-vignette active rounded-2xl" }),
         children
       ]
     }
@@ -493,7 +494,7 @@ function BlurVignetteGrid({
     radius = "24px",
     inset = "10px",
     transitionLength = "100px",
-    blur = "8px"
+    blur = "3px"
   } = vignetteConfig || {};
   const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
@@ -514,12 +515,7 @@ function BlurVignetteGrid({
         children: /* @__PURE__ */ jsx(
           Img,
           {
-            width: 200,
-            height: 200,
-            className: cn(
-              "size-full rounded-[2.5rem] object-cover",
-              imageClassName
-            ),
+            className: cn("size-full  object-cover", imageClassName),
             src: image.src,
             alt: image.alt,
             loading: "lazy",

package/dist/carousel-gradient-text.cjs

@@ -1170,7 +1170,7 @@ function CarouselGradientText({
       {
         href: item.href,
         className: cn(
-          "relative aspect-4/5 max-h-[500px] rounded-2xl",
+          "relative flex aspect-4/5 max-h-[500px] rounded-2xl",
           item.className,
           cardClassName
         ),
@@ -1179,7 +1179,7 @@ function CarouselGradientText({
             "div",
             {
               className: cn(
-                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-40% dark:from-background",
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-50% dark:from-background",
                 gradientClassName
               )
             }
@@ -1225,12 +1225,13 @@ function CarouselGradientText({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName: "px-4",
       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)]",
+              "grid 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: [
@@ -1255,10 +1256,7 @@ function CarouselGradientText({
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: cn(
-                      "mt-8 hidden items-center gap-4 md:flex",
-                      controlsClassName
-                    ),
+                    className: cn("mt-8 items-center gap-2 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" })
@@ -1283,15 +1281,15 @@ function CarouselGradientText({
           "div",
           {
             className: cn(
-              "mt-8 flex items-center lg:ml-[50%]",
+              "mt-4 md:mt-8 flex items-center lg:ml-[50%] max-w-full overflow-x-auto scrollbar-hide",
               indicatorsClassName
             ),
             children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 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-fit px-4" : "m-4 size-4"
+                  "flex h-8 shrink-0 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-fit px-4" : "my-4 mx-2 md:mx-4 size-4"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/carousel-gradient-text.js

@@ -1146,7 +1146,7 @@ function CarouselGradientText({
       {
         href: item.href,
         className: cn(
-          "relative aspect-4/5 max-h-[500px] rounded-2xl",
+          "relative flex aspect-4/5 max-h-[500px] rounded-2xl",
           item.className,
           cardClassName
         ),
@@ -1155,7 +1155,7 @@ function CarouselGradientText({
             "div",
             {
               className: cn(
-                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-40% dark:from-background",
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-50% dark:from-background",
                 gradientClassName
               )
             }
@@ -1201,12 +1201,13 @@ function CarouselGradientText({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName: "px-4",
       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)]",
+              "grid 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: [
@@ -1231,10 +1232,7 @@ function CarouselGradientText({
                 /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: cn(
-                      "mt-8 hidden items-center gap-4 md:flex",
-                      controlsClassName
-                    ),
+                    className: cn("mt-8 items-center gap-2 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" })
@@ -1259,15 +1257,15 @@ function CarouselGradientText({
           "div",
           {
             className: cn(
-              "mt-8 flex items-center lg:ml-[50%]",
+              "mt-4 md:mt-8 flex items-center lg:ml-[50%] max-w-full overflow-x-auto scrollbar-hide",
               indicatorsClassName
             ),
             children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsx(
               "span",
               {
                 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-fit px-4" : "m-4 size-4"
+                  "flex h-8 shrink-0 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-fit px-4" : "my-4 mx-2 md:mx-4 size-4"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsx(

package/dist/carousel-icon-sidebar.cjs

@@ -1220,7 +1220,7 @@ function CarouselIconSidebar({
       "div",
       {
         className: cn(
-          "flex h-full flex-col gap-8 rounded-lg p-8",
+          "flex h-full flex-row md:flex-col gap-4 md:gap-8 rounded-lg p-4 md:p-8",
           getNestedCardBg(background),
           getNestedCardTextColor(background),
           sidebarClassName
@@ -1230,35 +1230,55 @@ function CarouselIconSidebar({
             "div",
             {
               className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-lg shadow-lg ring-1 ring-border",
+                "flex h-fit w-fit p-3 items-center justify-center rounded-lg shadow-lg ring-1 ring-border bg-card",
                 getNestedCardBg(background, "card"),
                 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.jsxs("div", { className: "flex flex-col justify-between h-full gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:gap-4", children: [
+              typeof activeItem.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-xl md:text-2xl font-medium",
+                    titleClassName
+                  ),
+                  children: activeItem.title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl md:text-2xl 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-2", 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-foreground hover:text-background" }),
               /* @__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-foreground hover:text-background" })
             ] })
@@ -1318,7 +1338,7 @@ function CarouselIconSidebar({
       patternClassName,
       className,
       children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-4 md:px-0", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -1349,10 +1369,9 @@ function CarouselIconSidebar({
             }
           ))
         ] }) : 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: "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 })
+        /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 md: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: cn("h-full", carouselContentClassName), children: itemsContent }) })
         ] }) }),
         lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
           lightbox.Lightbox,

package/dist/carousel-icon-sidebar.js

@@ -1196,7 +1196,7 @@ function CarouselIconSidebar({
       "div",
       {
         className: cn(
-          "flex h-full flex-col gap-8 rounded-lg p-8",
+          "flex h-full flex-row md:flex-col gap-4 md:gap-8 rounded-lg p-4 md:p-8",
           getNestedCardBg(background),
           getNestedCardTextColor(background),
           sidebarClassName
@@ -1206,35 +1206,55 @@ function CarouselIconSidebar({
             "div",
             {
               className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-lg shadow-lg ring-1 ring-border",
+                "flex h-fit w-fit p-3 items-center justify-center rounded-lg shadow-lg ring-1 ring-border bg-card",
                 getNestedCardBg(background, "card"),
                 iconClassName
               ),
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: activeItem.icon, size: 24 })
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-            typeof activeItem.title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }),
-            typeof activeItem.description === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "mb-4 text-base text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: activeItem.description
-              }
-            ) : /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "mb-4 text-base text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: activeItem.description
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", controlsClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between h-full gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:gap-4", children: [
+              typeof activeItem.title === "string" ? /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-xl md:text-2xl font-medium",
+                    titleClassName
+                  ),
+                  children: activeItem.title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl md:text-2xl font-medium",
+                    titleClassName
+                  ),
+                  children: activeItem.title
+                }
+              ),
+              typeof activeItem.description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-4 text-base text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: activeItem.description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-4 text-base text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: activeItem.description
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", controlsClassName), children: [
               /* @__PURE__ */ jsx(CarouselPrevious, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-foreground hover:text-background" }),
               /* @__PURE__ */ jsx(CarouselNext, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-foreground hover:text-background" })
             ] })
@@ -1294,7 +1314,7 @@ function CarouselIconSidebar({
       patternClassName,
       className,
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-4 md:px-0", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
@@ -1325,10 +1345,9 @@ function CarouselIconSidebar({
             }
           ))
         ] }) : 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: "hidden md:visible md:col-span-2", children: sidebarContent }),
-          /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: itemsContent }) }),
-          /* @__PURE__ */ jsx("div", { className: "visible md:hidden md:col-span-2", children: sidebarContent })
+        /* @__PURE__ */ jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md: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: cn("h-full", carouselContentClassName), children: itemsContent }) })
         ] }) }),
         lightboxOpen && /* @__PURE__ */ jsx(
           Lightbox,

package/dist/carousel-scale-focus.cjs

@@ -1235,6 +1235,7 @@ function CarouselScaleFocus({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:px-45", children: [
           title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [
@@ -1294,11 +1295,36 @@ function CarouselScaleFocus({
               ]
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "mt-10 flex items-center justify-center gap-4 md:hidden",
+                controlsClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CarouselPrevious,
+                  {
+                    className: "static translate-x-0 translate-y-0 size-10",
+                    variant: "default"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CarouselNext,
+                  {
+                    className: "static translate-x-0 translate-y-0 size-10",
+                    variant: "default"
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "mx-auto mt-10 flex w-full max-w-135.75 items-center justify-center",
+                "mx-auto mt-10 hidden w-full max-w-135.75 items-center justify-center md:flex",
                 indicatorsClassName
               ),
               children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(

package/dist/carousel-scale-focus.js

@@ -1211,6 +1211,7 @@ function CarouselScaleFocus({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "md:px-45", children: [
           title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [
@@ -1270,11 +1271,36 @@ function CarouselScaleFocus({
               ]
             }
           ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "mt-10 flex items-center justify-center gap-4 md:hidden",
+                controlsClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  CarouselPrevious,
+                  {
+                    className: "static translate-x-0 translate-y-0 size-10",
+                    variant: "default"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CarouselNext,
+                  {
+                    className: "static translate-x-0 translate-y-0 size-10",
+                    variant: "default"
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "mx-auto mt-10 flex w-full max-w-135.75 items-center justify-center",
+                "mx-auto mt-10 hidden w-full max-w-135.75 items-center justify-center md:flex",
                 indicatorsClassName
               ),
               children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(