@opensite/ui 0.7.7 → 0.7.9

package/dist/registry.js

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import { cva } from 'class-variance-authority';
-import { motion, AnimatePresence, useMotionValue, useMotionTemplate, useScroll, useTransform, useSpring, useInView, useMotionValueEvent } from 'framer-motion';
+import { motion, AnimatePresence, useMotionValue, useMotionTemplate, useSpring, useTransform, useInView, useScroll, useMotionValueEvent } from 'framer-motion';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { useForm, Form, Field } from '@page-speed/forms';
 import { TextInput as TextInput$1, Select, TextArea as TextArea$1, Radio } from '@page-speed/forms/inputs';
@@ -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,17 +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
+  patternOpacity,
+  slideMediaBrightness = "100"
 }) {
   const [currentIndex, setCurrentIndex] = React52.useState(0);
   const prevSlide = React52.useCallback(() => {
@@ -18522,33 +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", image.imageClassName),
-                  optixFlowConfig
-                }
-              )
-            },
-            `slide-${index}`
-          )) }),
+                  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
+                  ),
+                  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 })
@@ -18558,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}`
+            ))
+          }
+        )
       ]
     }
   );
@@ -18613,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" });
     }
@@ -18648,7 +18695,10 @@ function CarouselHorizontalCards({
     return items.map((item, index) => /* @__PURE__ */ jsx(
       motion.div,
       {
-        className: cn("group w-[280px] shrink-0", 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 },
@@ -18684,7 +18734,7 @@ function CarouselHorizontalCards({
       patternOpacity,
       "aria-labelledby": "carousel-title",
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 md:px-6", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: cn("mb-6 flex items-center justify-between", headerClassName), children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: cn("mb-8 flex items-center justify-between gap-4", headerClassName), children: /* @__PURE__ */ jsxs("div", { children: [
           heading && /* @__PURE__ */ jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
             typeof heading === "string" ? /* @__PURE__ */ jsx(
               "h2",
@@ -18699,7 +18749,7 @@ function CarouselHorizontalCards({
               {
                 name: "lucide/chevron-right",
                 size: 24,
-                className: "ml-2 transition-transform group-hover:translate-x-1"
+                className: "ml-2 flex-shrink-0 self-center transition-transform group-hover:translate-x-1"
               }
             )
           ] }),
@@ -18710,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()
             }
           ),
@@ -18718,7 +18772,15 @@ function CarouselHorizontalCards({
             Pressable,
             {
               onClick: () => scroll("left"),
-              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 rounded-full border bg-background/60 p-2 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: 24 })
@@ -18728,7 +18790,15 @@ function CarouselHorizontalCards({
             Pressable,
             {
               onClick: () => scroll("right"),
-              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 rounded-full border bg-background/60 p-2 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: 24 })
@@ -18787,7 +18857,7 @@ function CarouselImageHero({
         Pressable,
         {
           asButton: true,
-          className: cn("bg-primary-foreground text-primary dark:bg-primary dark:text-primary-foreground", actionClassName),
+          className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
             icon,
@@ -18855,12 +18925,12 @@ function CarouselImageHero({
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24, className: "text-white" })
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-2", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => setCurrentImageIndex(index),
               className: cn(
-                "h-2.5 w-2.5 rounded-full transition-colors",
+                "flex h-3 w-3 items-center justify-center rounded-full transition-colors",
                 index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
               ),
               "aria-label": `Go to image ${index + 1}`
@@ -18868,7 +18938,7 @@ function CarouselImageHero({
             index
           )) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-24 text-center md:px-6 md:py-32 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-3xl space-y-8", contentClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-16 text-center md:px-6 md:py-20", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
             badge && (typeof badge === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm", badgeClassName), children: /* @__PURE__ */ jsx("span", { children: badge }) }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badge })),
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-primary-foreground dark:text-primary sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
@@ -19004,38 +19074,42 @@ function CarouselMultiStepShowcase({
             }
           ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
         ] }),
-        stepsSlot ? /* @__PURE__ */ jsx("div", { className: stepNavigationClassName, children: stepsSlot }) : /* @__PURE__ */ jsx(
+        stepsSlot ? /* @__PURE__ */ jsx("div", { className: cn("hidden sm:block", stepNavigationClassName), children: stepsSlot }) : /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "mb-8 flex flex-wrap justify-center gap-2",
+              "mb-8 hidden flex-wrap justify-center gap-2 sm:flex",
               stepNavigationClassName
             ),
-            children: steps?.map((step, index) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => goToStep(index),
-                className: cn(
-                  "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
-                  activeStep === index ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
-                  step.className
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                        activeStep === index ? "bg-primary-foreground text-primary" : "bg-background"
-                      ),
-                      children: step.step
-                    }
+            children: steps?.map((step, index) => {
+              const isCompleted = index < activeStep;
+              const isActive = index === activeStep;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => goToStep(index),
+                  className: cn(
+                    "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
+                    isActive ? "bg-primary text-primary-foreground" : isCompleted ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
+                    step.className
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
-                ]
-              },
-              step.id
-            ))
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "flex h-6 w-6 items-center justify-center rounded-full text-xs",
+                          isActive ? "bg-primary-foreground text-primary" : isCompleted ? "bg-primary-foreground text-primary" : "bg-background"
+                        ),
+                        children: isCompleted ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 14 }) : step.step
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
+                  ]
+                },
+                step.id
+              );
+            })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -19184,10 +19258,11 @@ function CarouselPortfolioHero({
   navigationClassName,
   counterClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background = "dark",
+  spacing = "none",
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideMediaBrightness = "50"
 }) {
   const [currentIndex, setCurrentIndex] = React52.useState(0);
   const goToNext = React52.useCallback(() => {
@@ -19233,7 +19308,7 @@ function CarouselPortfolioHero({
       pattern,
       patternOpacity,
       children: [
-        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
+        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
@@ -19241,22 +19316,23 @@ function CarouselPortfolioHero({
               index === currentIndex ? "opacity-100" : "opacity-0",
               slide.className
             ),
-            children: [
-              /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: slide.image,
-                  alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
-                  className: cn("h-full w-full object-cover", slide.imageClassName),
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" })
-            ]
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: slide.image,
+                alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
+                className: cn(
+                  "h-full w-full object-cover",
+                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                  slide.imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           },
           slide.id
         )),
-        /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex h-full w-full flex-col justify-end p-4 pb-16 text-white sm:p-8 md:p-12", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-3xl", contentClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
           currentSlide?.tag && /* @__PURE__ */ jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsx("span", { className: cn("inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium", tagClassName), children: currentSlide.tag }) : /* @__PURE__ */ jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
           currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold sm:text-5xl md:text-6xl", titleClassName), children: currentSlide.title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: currentSlide.title })),
           currentSlide?.description && (typeof currentSlide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl", descriptionClassName), children: currentSlide.description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: currentSlide.description })),
@@ -19360,13 +19436,13 @@ function CarouselProductFeatureShowcase({
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
+    return /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-wrap gap-3", children: actions.map((action, index) => {
       const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
           asButton: true,
-          className: cn("mt-8", actionClassName),
+          className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
             icon,
@@ -19376,7 +19452,7 @@ function CarouselProductFeatureShowcase({
         },
         index
       );
-    });
+    }) });
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -19421,9 +19497,9 @@ function CarouselProductFeatureShowcase({
                 {
                   onClick: goToPrev,
                   asButton: true,
-                  variant: "secondary",
+                  variant: "outline",
                   size: "icon",
-                  className: "rounded-full bg-background/80 backdrop-blur-sm",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full border-border bg-background/90 text-foreground backdrop-blur-sm hover:bg-background",
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
                 }
               ),
@@ -19432,9 +19508,9 @@ function CarouselProductFeatureShowcase({
                 {
                   onClick: goToNext,
                   asButton: true,
-                  variant: "secondary",
+                  variant: "outline",
                   size: "icon",
-                  className: "rounded-full bg-background/80 backdrop-blur-sm",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full border-border bg-background/90 text-foreground backdrop-blur-sm hover:bg-background",
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
                 }
               )
@@ -19520,13 +19596,13 @@ function SliderBtn({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute inset-0 -z-10 max-h-full max-w-full overflow-hidden",
+            className: "absolute inset-0 -z-10 max-h-full max-w-full overflow-hidden rounded-lg",
             role: "progressbar",
             "aria-valuenow": active === value ? progress : 0,
             children: /* @__PURE__ */ jsx(
               "span",
               {
-                className: cn("absolute left-0", progressBarClass),
+                className: cn("absolute left-0 rounded-b-lg", progressBarClass),
                 style: {
                   [vertical ? "height" : "width"]: active === value ? `${progress}%` : "0%"
                 }
@@ -19557,7 +19633,7 @@ function CarouselProgressSlider({
   subheading,
   slides,
   slidesSlot,
-  duration = 5e3,
+  duration = 8e3,
   fastDuration = 400,
   vertical = false,
   className,
@@ -19576,22 +19652,35 @@ function CarouselProgressSlider({
   const [active, setActive] = React52.useState(slides?.[0]?.id ?? "");
   const [progress, setProgress] = React52.useState(0);
   const [isFastForward, setIsFastForward] = React52.useState(false);
+  const [isPaused, setIsPaused] = React52.useState(false);
   const frame = React52.useRef(0);
   const firstFrameTime = React52.useRef(performance.now());
   const targetValue = React52.useRef(null);
+  const pausedProgress = React52.useRef(0);
   const sliderValues = React52.useMemo(
     () => slides?.map((slide) => slide.id),
     [slides]
   );
   React52.useEffect(() => {
-    if ((sliderValues?.length ?? 0) > 0) {
+    if ((sliderValues?.length ?? 0) > 0 && !isPaused) {
       firstFrameTime.current = performance.now();
+      if (pausedProgress.current > 0) {
+        setProgress(pausedProgress.current);
+        pausedProgress.current = 0;
+      }
       frame.current = requestAnimationFrame(animate);
     }
     return () => {
       cancelAnimationFrame(frame.current);
     };
-  }, [sliderValues, active, isFastForward]);
+  }, [sliderValues, active, isFastForward, isPaused]);
+  const togglePause = () => {
+    if (!isPaused) {
+      pausedProgress.current = progress;
+      cancelAnimationFrame(frame.current);
+    }
+    setIsPaused(!isPaused);
+  };
   const animate = (now) => {
     const currentDuration = isFastForward ? fastDuration : duration;
     const elapsedTime = now - firstFrameTime.current;
@@ -19643,26 +19732,40 @@ function CarouselProgressSlider({
           pattern,
           patternOpacity,
           children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-            /* @__PURE__ */ jsx("div", { className: cn("relative min-h-[300px]", imageClassName), children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
-              SliderWrapper,
-              {
-                value: slide.id,
-                className: cn("absolute inset-0", slide.className),
-                children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: slide.image,
-                    alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
-                    className: cn(
-                      "h-full w-full object-cover",
-                      slide.imageClassName
-                    ),
-                    optixFlowConfig
-                  }
-                ) })
-              },
-              slide.id
-            )) }),
+            /* @__PURE__ */ jsxs("div", { className: cn("relative", imageClassName), children: [
+              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
+                SliderWrapper,
+                {
+                  value: slide.id,
+                  className: cn("", slide.className),
+                  children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: slide.image,
+                      alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        slide.imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  ) })
+                },
+                slide.id
+              )),
+              /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  onClick: togglePause,
+                  asButton: true,
+                  variant: "outline",
+                  size: "icon",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full",
+                  "aria-label": isPaused ? "Play" : "Pause",
+                  children: /* @__PURE__ */ jsx(DynamicIcon, { name: isPaused ? "lucide/play" : "lucide/pause", size: 18 })
+                }
+              ) })
+            ] }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -19720,78 +19823,85 @@ function CarouselScrollingFeatureShowcase({
   const [activeFeature, setActiveFeature] = React52.useState(
     features?.[0]?.id ?? ""
   );
-  const containerRef = React52.useRef(null);
-  const { scrollYProgress } = useScroll({
-    target: containerRef,
-    offset: ["start start", "end end"]
-  });
-  const imageOpacity = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
+  const featureRefs = React52.useRef(/* @__PURE__ */ new Map());
   React52.useEffect(() => {
-    const observers = [];
-    features?.forEach((feature) => {
-      const element = document.getElementById(feature.id);
-      if (element) {
-        const observer = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting) {
-                setActiveFeature(feature.id);
-              }
-            });
-          },
-          { threshold: 0.5 }
-        );
-        observer.observe(element);
-        observers.push(observer);
-      }
+    if (!features || features.length === 0) return;
+    const observerOptions = {
+      root: null,
+      rootMargin: "-20% 0px -60% 0px",
+      threshold: 0
+    };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const featureId = entry.target.getAttribute("data-feature-id");
+          if (featureId) {
+            setActiveFeature(featureId);
+          }
+        }
+      });
+    }, observerOptions);
+    featureRefs.current.forEach((element) => {
+      observer.observe(element);
     });
     return () => {
-      observers.forEach((observer) => observer.disconnect());
+      observer.disconnect();
     };
   }, [features]);
   const activeFeatureData = features?.find((f) => f.id === activeFeature);
+  const setFeatureRef = (id) => (el) => {
+    if (el) {
+      featureRefs.current.set(id, el);
+    } else {
+      featureRefs.current.delete(id);
+    }
+  };
   return /* @__PURE__ */ jsx(
     Section,
     {
-      ref: containerRef,
       background,
       spacing,
       className: cn(className),
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("py-16 text-center", headerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
+          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsx("div", { className: cn("aspect-video overflow-hidden rounded-xl bg-muted", imageClassName), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsx(
             motion.div,
             {
-              style: { opacity: imageOpacity },
-              className: cn("aspect-video overflow-hidden rounded-xl", imageClassName),
-              children: activeFeatureData && /* @__PURE__ */ jsx(
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.3 },
+              className: "h-full w-full",
+              children: /* @__PURE__ */ jsx(
                 Img,
                 {
                   src: activeFeatureData.image,
                   alt: typeof activeFeatureData.title === "string" ? activeFeatureData.title : `Feature ${activeFeatureData.id}`,
-                  className: cn("h-full w-full object-cover transition-all duration-500", activeFeatureData.imageClassName),
+                  className: cn("h-full w-full object-cover", activeFeatureData.imageClassName),
                   optixFlowConfig
                 }
               )
-            }
-          ) }) }),
-          /* @__PURE__ */ jsx("div", { className: cn("space-y-32 py-16", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxs(
+            },
+            activeFeatureData.id
+          ) }) }) }) }),
+          /* @__PURE__ */ jsx("div", { className: cn("space-y-24 lg:space-y-32", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxs(
             "div",
             {
-              id: feature.id,
+              ref: setFeatureRef(feature.id),
+              "data-feature-id": feature.id,
               className: cn(
-                "min-h-[50vh] transition-opacity duration-300",
+                "scroll-mt-24 transition-opacity duration-300",
                 activeFeature === feature.id ? "opacity-100" : "opacity-50",
                 feature.className
               ),
               children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(
                   Img,
                   {
                     src: feature.image,