@opensite/ui 0.7.7 → 0.7.8

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';
@@ -18483,7 +18483,8 @@ function CarouselGalleryThumbnails({
   background = "white",
   spacing = "xl",
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideMediaBrightness = "50"
 }) {
   const [currentIndex, setCurrentIndex] = React52.useState(0);
   const prevSlide = React52.useCallback(() => {
@@ -18537,7 +18538,11 @@ function CarouselGalleryThumbnails({
                 {
                   src: image.src,
                   alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
-                  className: cn("h-full w-full object-cover", image.imageClassName),
+                  className: cn(
+                    "h-full w-full object-cover",
+                    BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                    image.imageClassName
+                  ),
                   optixFlowConfig
                 }
               )
@@ -18648,7 +18653,7 @@ 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 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 +18689,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 +18704,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"
               }
             )
           ] }),
@@ -18718,20 +18723,20 @@ 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-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),
               "aria-label": "Scroll left",
               asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
             }
           ),
           !isAtEnd && /* @__PURE__ */ jsx(
             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-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),
               "aria-label": "Scroll right",
               asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
             }
           )
         ] })
@@ -18787,7 +18792,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 +18860,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 +18873,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 +19009,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 +19193,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 +19243,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 +19251,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 +19371,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 +19387,7 @@ function CarouselProductFeatureShowcase({
         },
         index
       );
-    });
+    }) });
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -19421,9 +19432,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 +19443,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 +19531,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 +19568,7 @@ function CarouselProgressSlider({
   subheading,
   slides,
   slidesSlot,
-  duration = 5e3,
+  duration = 8e3,
   fastDuration = 400,
   vertical = false,
   className,
@@ -19576,22 +19587,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 +19667,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 +19758,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",