@opensite/ui 0.7.7 → 0.7.8

package/dist/carousel-scrolling-feature-showcase.cjs

@@ -430,78 +430,85 @@ function CarouselScrollingFeatureShowcase({
   const [activeFeature, setActiveFeature] = React3__namespace.useState(
     features?.[0]?.id ?? ""
   );
-  const containerRef = React3__namespace.useRef(null);
-  const { scrollYProgress } = framerMotion.useScroll({
-    target: containerRef,
-    offset: ["start start", "end end"]
-  });
-  const imageOpacity = framerMotion.useTransform(scrollYProgress, [0, 0.1], [0, 1]);
+  const featureRefs = React3__namespace.useRef(/* @__PURE__ */ new Map());
   React3__namespace.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__ */ jsxRuntime.jsx(
     Section,
     {
-      ref: containerRef,
       background,
       spacing,
       className: cn(className),
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-16 text-center", headerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-video overflow-hidden rounded-xl bg-muted", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
-              style: { opacity: imageOpacity },
-              className: cn("aspect-video overflow-hidden rounded-xl", imageClassName),
-              children: activeFeatureData && /* @__PURE__ */ jsxRuntime.jsx(
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.3 },
+              className: "h-full w-full",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
                 img.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__ */ jsxRuntime.jsx("div", { className: cn("space-y-32 py-16", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            },
+            activeFeatureData.id
+          ) }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-24 lg:space-y-32", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
                   img.Img,
                   {
                     src: feature.image,

package/dist/carousel-scrolling-feature-showcase.js

@@ -1,7 +1,7 @@
 "use client";
 import * as React3 from 'react';
 import React3__default from 'react';
-import { useScroll, useTransform, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -409,78 +409,85 @@ function CarouselScrollingFeatureShowcase({
   const [activeFeature, setActiveFeature] = React3.useState(
     features?.[0]?.id ?? ""
   );
-  const containerRef = React3.useRef(null);
-  const { scrollYProgress } = useScroll({
-    target: containerRef,
-    offset: ["start start", "end end"]
-  });
-  const imageOpacity = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
+  const featureRefs = React3.useRef(/* @__PURE__ */ new Map());
   React3.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,