@opensite/ui 0.7.8 → 0.7.9

package/dist/registry.cjs

@@ -18356,6 +18356,36 @@ function CarouselFullscreenScrollFx({
             ))
           }
         ),
+        slides && slides.length > 1 && activeIndex < slides.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => scrollToSlide(activeIndex + 1),
+            className: cn(
+              "fixed bottom-8 left-1/2 z-50 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
+              scrollIndicatorClassName
+            ),
+            "aria-label": "Scroll to next slide",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
+            ] })
+          }
+        ),
+        slides && slides.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "fixed bottom-8 right-8 z-50 text-sm text-white/50",
+              counterClassName
+            ),
+            children: [
+              String(activeIndex + 1).padStart(2, "0"),
+              " /",
+              " ",
+              String(slides.length).padStart(2, "0")
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -18464,36 +18494,6 @@ function CarouselFullscreenScrollFx({
                           renderActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: renderActions })
                         ]
                       }
-                    ),
-                    index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        onClick: () => scrollToSlide(index + 1),
-                        className: cn(
-                          "absolute bottom-8 left-1/2 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
-                          scrollIndicatorClassName
-                        ),
-                        "aria-label": "Scroll to next slide",
-                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
-                        ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        className: cn(
-                          "absolute bottom-8 right-8 text-sm text-white/50",
-                          counterClassName
-                        ),
-                        children: [
-                          String(index + 1).padStart(2, "0"),
-                          " /",
-                          " ",
-                          String(slides?.length ?? 0).padStart(2, "0")
-                        ]
-                      }
                     )
                   ]
                 },
@@ -18513,18 +18513,18 @@ function CarouselGalleryThumbnails({
   autoPlayInterval = 5e3,
   showThumbnails = true,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full px-4 md:px-10 lg:px-16 max-w-full relative z-10",
   slideClassName,
   navigationClassName,
   captionClassName,
   thumbnailsClassName,
   thumbnailClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "sm",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "50"
+  slideMediaBrightness = "100"
 }) {
   const [currentIndex, setCurrentIndex] = React52__namespace.useState(0);
   const prevSlide = React52__namespace.useCallback(() => {
@@ -18563,37 +18563,50 @@ function CarouselGalleryThumbnails({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden rounded-lg", containerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-video w-full overflow-hidden", slideClassName), children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden rounded-2xl"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "absolute inset-0 transform transition-all duration-500 ease-in-out",
-                index === currentIndex ? "translate-x-0 opacity-100" : index < currentIndex ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
-                image.className
+                "relative aspect-video w-full overflow-hidden",
+                slideClassName
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+              children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  src: image.src,
-                  alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
                   className: cn(
-                    "h-full w-full object-cover",
-                    BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                    image.imageClassName
+                    "absolute inset-0 transform transition-all duration-500 ease-in-out",
+                    index === currentIndex ? "translate-x-0 opacity-100" : index < currentIndex ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
+                    image.className
                   ),
-                  optixFlowConfig
-                }
-              )
-            },
-            `slide-${index}`
-          )) }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: image.src,
+                      alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                        image.imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  )
+                },
+                `slide-${index}`
+              ))
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
               size: "icon",
-              className: cn("absolute left-2 top-1/2 -translate-y-1/2", navigationClassName),
+              className: cn(
+                "absolute left-2 top-1/2 -translate-y-1/2",
+                navigationClassName
+              ),
               onClick: prevSlide,
               asButton: true,
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
@@ -18603,35 +18616,56 @@ function CarouselGalleryThumbnails({
             Pressable,
             {
               size: "icon",
-              className: cn("absolute right-2 top-1/2 -translate-y-1/2", navigationClassName),
+              className: cn(
+                "absolute right-2 top-1/2 -translate-y-1/2",
+                navigationClassName
+              ),
               onClick: nextSlide,
               asButton: true,
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-sm text-white", captionClassName), children: images?.[currentIndex].alt && (typeof images?.[currentIndex].alt === "string" ? images?.[currentIndex].alt : /* @__PURE__ */ jsxRuntime.jsx("div", { children: images?.[currentIndex].alt })) })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/90 to-transparent pt-12 md:pt-24 p-4 md:p-10 font-semibold text-sm text-white text-shadow",
+                captionClassName
+              ),
+              children: images?.[currentIndex].alt && (typeof images?.[currentIndex].alt === "string" ? images?.[currentIndex].alt : /* @__PURE__ */ jsxRuntime.jsx("div", { children: images?.[currentIndex].alt }))
+            }
+          )
         ] }),
-        showThumbnails && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 flex gap-2 overflow-x-auto px-2 py-2", thumbnailsClassName), children: images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        showThumbnails && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
             className: cn(
-              "relative h-20 w-20 shrink-0 transition-all duration-200",
-              index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
-              thumbnailClassName
+              "mt-4 flex justify-center gap-2 overflow-x-auto px-2 py-2",
+              thumbnailsClassName
             ),
-            onClick: () => setCurrentIndex(index),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+            children: images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
               {
-                src: image.src,
-                alt: `Thumbnail ${index + 1}`,
-                className: "h-full w-full rounded-sm object-cover",
-                optixFlowConfig
-              }
-            )
-          },
-          `thumb-${index}`
-        )) })
+                className: cn(
+                  "relative h-20 w-20 shrink-0 transition-all duration-200",
+                  index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
+                  thumbnailClassName
+                ),
+                onClick: () => setCurrentIndex(index),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: image.src,
+                    alt: `Thumbnail ${index + 1}`,
+                    className: "h-full w-full rounded-sm object-cover",
+                    optixFlowConfig
+                  }
+                )
+              },
+              `thumb-${index}`
+            ))
+          }
+        )
       ]
     }
   );
@@ -18658,10 +18692,18 @@ function CarouselHorizontalCards({
   const carouselRef = React52__namespace.useRef(null);
   const [isAtStart, setIsAtStart] = React52__namespace.useState(true);
   const [isAtEnd, setIsAtEnd] = React52__namespace.useState(false);
+  const getCardWidth = React52__namespace.useCallback(() => {
+    if (typeof window === "undefined") return 320;
+    if (window.innerWidth >= 1024) return 400;
+    if (window.innerWidth >= 640) return 360;
+    return 320;
+  }, []);
   const scroll = (direction) => {
     if (carouselRef.current) {
-      const { scrollLeft, clientWidth } = carouselRef.current;
-      const scrollAmount = clientWidth * 0.8;
+      const { scrollLeft } = carouselRef.current;
+      const cardWidth = getCardWidth();
+      const gap = 16;
+      const scrollAmount = cardWidth + gap;
       const newScrollLeft = direction === "left" ? scrollLeft - scrollAmount : scrollLeft + scrollAmount;
       carouselRef.current.scrollTo({ left: newScrollLeft, behavior: "smooth" });
     }
@@ -18693,7 +18735,10 @@ function CarouselHorizontalCards({
     return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
-        className: cn("group w-[320px] shrink-0 sm:w-[360px] lg:w-[400px]", item.className),
+        className: cn(
+          "group w-[320px] shrink-0 snap-start sm:w-[360px] lg:w-[400px]",
+          item.className
+        ),
         initial: { opacity: 0, y: 20 },
         animate: { opacity: 1, y: 0 },
         transition: { duration: 0.5, delay: index * 0.1 },
@@ -18755,7 +18800,11 @@ function CarouselHorizontalCards({
             "div",
             {
               ref: carouselRef,
-              className: cn("scrollbar-hide flex w-full space-x-4 overflow-x-auto pb-4", carouselClassName),
+              className: cn(
+                "scrollbar-hide flex w-full space-x-4 overflow-x-auto pb-4",
+                "snap-x snap-mandatory scroll-pl-0",
+                carouselClassName
+              ),
               children: renderItems()
             }
           ),
@@ -18763,20 +18812,36 @@ function CarouselHorizontalCards({
             Pressable,
             {
               onClick: () => scroll("left"),
-              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn(
+                "absolute left-4 top-1/2 z-10 -translate-y-1/2",
+                "flex h-12 w-12 items-center justify-center",
+                "rounded-full border border-border/50 bg-background shadow-lg",
+                "text-foreground transition-all duration-200",
+                "hover:bg-accent hover:shadow-xl hover:scale-105",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                navigationClassName
+              ),
               "aria-label": "Scroll left",
               asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
             }
           ),
           !isAtEnd && /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
               onClick: () => scroll("right"),
-              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn(
+                "absolute right-4 top-1/2 z-10 -translate-y-1/2",
+                "flex h-12 w-12 items-center justify-center",
+                "rounded-full border border-border/50 bg-background shadow-lg",
+                "text-foreground transition-all duration-200",
+                "hover:bg-accent hover:shadow-xl hover:scale-105",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                navigationClassName
+              ),
               "aria-label": "Scroll right",
               asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
             }
           )
         ] })

package/dist/registry.js

@@ -18316,6 +18316,36 @@ function CarouselFullscreenScrollFx({
             ))
           }
         ),
+        slides && slides.length > 1 && activeIndex < slides.length - 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => scrollToSlide(activeIndex + 1),
+            className: cn(
+              "fixed bottom-8 left-1/2 z-50 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
+              scrollIndicatorClassName
+            ),
+            "aria-label": "Scroll to next slide",
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
+              /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
+            ] })
+          }
+        ),
+        slides && slides.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "fixed bottom-8 right-8 z-50 text-sm text-white/50",
+              counterClassName
+            ),
+            children: [
+              String(activeIndex + 1).padStart(2, "0"),
+              " /",
+              " ",
+              String(slides.length).padStart(2, "0")
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -18424,36 +18454,6 @@ function CarouselFullscreenScrollFx({
                           renderActions && /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: renderActions })
                         ]
                       }
-                    ),
-                    index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        onClick: () => scrollToSlide(index + 1),
-                        className: cn(
-                          "absolute bottom-8 left-1/2 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
-                          scrollIndicatorClassName
-                        ),
-                        "aria-label": "Scroll to next slide",
-                        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-                          /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
-                          /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
-                        ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: cn(
-                          "absolute bottom-8 right-8 text-sm text-white/50",
-                          counterClassName
-                        ),
-                        children: [
-                          String(index + 1).padStart(2, "0"),
-                          " /",
-                          " ",
-                          String(slides?.length ?? 0).padStart(2, "0")
-                        ]
-                      }
                     )
                   ]
                 },
@@ -18473,18 +18473,18 @@ function CarouselGalleryThumbnails({
   autoPlayInterval = 5e3,
   showThumbnails = true,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full px-4 md:px-10 lg:px-16 max-w-full relative z-10",
   slideClassName,
   navigationClassName,
   captionClassName,
   thumbnailsClassName,
   thumbnailClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "sm",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "50"
+  slideMediaBrightness = "100"
 }) {
   const [currentIndex, setCurrentIndex] = React52.useState(0);
   const prevSlide = React52.useCallback(() => {
@@ -18523,37 +18523,50 @@ function CarouselGalleryThumbnails({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("relative overflow-hidden rounded-lg", containerClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: cn("relative aspect-video w-full overflow-hidden", slideClassName), children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: cn("relative overflow-hidden rounded-2xl"), children: [
+          /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "absolute inset-0 transform transition-all duration-500 ease-in-out",
-                index === currentIndex ? "translate-x-0 opacity-100" : index < currentIndex ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
-                image.className
+                "relative aspect-video w-full overflow-hidden",
+                slideClassName
               ),
-              children: /* @__PURE__ */ jsx(
-                Img,
+              children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsx(
+                "div",
                 {
-                  src: image.src,
-                  alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
                   className: cn(
-                    "h-full w-full object-cover",
-                    BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                    image.imageClassName
+                    "absolute inset-0 transform transition-all duration-500 ease-in-out",
+                    index === currentIndex ? "translate-x-0 opacity-100" : index < currentIndex ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
+                    image.className
                   ),
-                  optixFlowConfig
-                }
-              )
-            },
-            `slide-${index}`
-          )) }),
+                  children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: image.src,
+                      alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                        image.imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  )
+                },
+                `slide-${index}`
+              ))
+            }
+          ),
           /* @__PURE__ */ jsx(
             Pressable,
             {
               size: "icon",
-              className: cn("absolute left-2 top-1/2 -translate-y-1/2", navigationClassName),
+              className: cn(
+                "absolute left-2 top-1/2 -translate-y-1/2",
+                navigationClassName
+              ),
               onClick: prevSlide,
               asButton: true,
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
@@ -18563,35 +18576,56 @@ function CarouselGalleryThumbnails({
             Pressable,
             {
               size: "icon",
-              className: cn("absolute right-2 top-1/2 -translate-y-1/2", navigationClassName),
+              className: cn(
+                "absolute right-2 top-1/2 -translate-y-1/2",
+                navigationClassName
+              ),
               onClick: nextSlide,
               asButton: true,
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-sm text-white", captionClassName), children: images?.[currentIndex].alt && (typeof images?.[currentIndex].alt === "string" ? images?.[currentIndex].alt : /* @__PURE__ */ jsx("div", { children: images?.[currentIndex].alt })) })
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/90 to-transparent pt-12 md:pt-24 p-4 md:p-10 font-semibold text-sm text-white text-shadow",
+                captionClassName
+              ),
+              children: images?.[currentIndex].alt && (typeof images?.[currentIndex].alt === "string" ? images?.[currentIndex].alt : /* @__PURE__ */ jsx("div", { children: images?.[currentIndex].alt }))
+            }
+          )
         ] }),
-        showThumbnails && /* @__PURE__ */ jsx("div", { className: cn("mt-4 flex gap-2 overflow-x-auto px-2 py-2", thumbnailsClassName), children: images?.map((image, index) => /* @__PURE__ */ jsx(
-          "button",
+        showThumbnails && /* @__PURE__ */ jsx(
+          "div",
           {
             className: cn(
-              "relative h-20 w-20 shrink-0 transition-all duration-200",
-              index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
-              thumbnailClassName
+              "mt-4 flex justify-center gap-2 overflow-x-auto px-2 py-2",
+              thumbnailsClassName
             ),
-            onClick: () => setCurrentIndex(index),
-            children: /* @__PURE__ */ jsx(
-              Img,
+            children: images?.map((image, index) => /* @__PURE__ */ jsx(
+              "button",
               {
-                src: image.src,
-                alt: `Thumbnail ${index + 1}`,
-                className: "h-full w-full rounded-sm object-cover",
-                optixFlowConfig
-              }
-            )
-          },
-          `thumb-${index}`
-        )) })
+                className: cn(
+                  "relative h-20 w-20 shrink-0 transition-all duration-200",
+                  index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
+                  thumbnailClassName
+                ),
+                onClick: () => setCurrentIndex(index),
+                children: /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: image.src,
+                    alt: `Thumbnail ${index + 1}`,
+                    className: "h-full w-full rounded-sm object-cover",
+                    optixFlowConfig
+                  }
+                )
+              },
+              `thumb-${index}`
+            ))
+          }
+        )
       ]
     }
   );
@@ -18618,10 +18652,18 @@ function CarouselHorizontalCards({
   const carouselRef = React52.useRef(null);
   const [isAtStart, setIsAtStart] = React52.useState(true);
   const [isAtEnd, setIsAtEnd] = React52.useState(false);
+  const getCardWidth = React52.useCallback(() => {
+    if (typeof window === "undefined") return 320;
+    if (window.innerWidth >= 1024) return 400;
+    if (window.innerWidth >= 640) return 360;
+    return 320;
+  }, []);
   const scroll = (direction) => {
     if (carouselRef.current) {
-      const { scrollLeft, clientWidth } = carouselRef.current;
-      const scrollAmount = clientWidth * 0.8;
+      const { scrollLeft } = carouselRef.current;
+      const cardWidth = getCardWidth();
+      const gap = 16;
+      const scrollAmount = cardWidth + gap;
       const newScrollLeft = direction === "left" ? scrollLeft - scrollAmount : scrollLeft + scrollAmount;
       carouselRef.current.scrollTo({ left: newScrollLeft, behavior: "smooth" });
     }
@@ -18653,7 +18695,10 @@ function CarouselHorizontalCards({
     return items.map((item, index) => /* @__PURE__ */ jsx(
       motion.div,
       {
-        className: cn("group w-[320px] shrink-0 sm:w-[360px] lg:w-[400px]", item.className),
+        className: cn(
+          "group w-[320px] shrink-0 snap-start sm:w-[360px] lg:w-[400px]",
+          item.className
+        ),
         initial: { opacity: 0, y: 20 },
         animate: { opacity: 1, y: 0 },
         transition: { duration: 0.5, delay: index * 0.1 },
@@ -18715,7 +18760,11 @@ function CarouselHorizontalCards({
             "div",
             {
               ref: carouselRef,
-              className: cn("scrollbar-hide flex w-full space-x-4 overflow-x-auto pb-4", carouselClassName),
+              className: cn(
+                "scrollbar-hide flex w-full space-x-4 overflow-x-auto pb-4",
+                "snap-x snap-mandatory scroll-pl-0",
+                carouselClassName
+              ),
               children: renderItems()
             }
           ),
@@ -18723,20 +18772,36 @@ function CarouselHorizontalCards({
             Pressable,
             {
               onClick: () => scroll("left"),
-              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn(
+                "absolute left-4 top-1/2 z-10 -translate-y-1/2",
+                "flex h-12 w-12 items-center justify-center",
+                "rounded-full border border-border/50 bg-background shadow-lg",
+                "text-foreground transition-all duration-200",
+                "hover:bg-accent hover:shadow-xl hover:scale-105",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                navigationClassName
+              ),
               "aria-label": "Scroll left",
               asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
             }
           ),
           !isAtEnd && /* @__PURE__ */ jsx(
             Pressable,
             {
               onClick: () => scroll("right"),
-              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn(
+                "absolute right-4 top-1/2 z-10 -translate-y-1/2",
+                "flex h-12 w-12 items-center justify-center",
+                "rounded-full border border-border/50 bg-background shadow-lg",
+                "text-foreground transition-all duration-200",
+                "hover:bg-accent hover:shadow-xl hover:scale-105",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                navigationClassName
+              ),
               "aria-label": "Scroll right",
               asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
             }
           )
         ] })