@digital-b2c/coreui-kit 0.3.6 → 0.4.0

package/dist/index.cjs

@@ -3,6 +3,9 @@
 var clsx3 = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 var React52 = require('react');
+var gsap = require('gsap');
+var ScrollTrigger = require('gsap/ScrollTrigger');
+var react = require('@gsap/react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -508,7 +511,8 @@ var BrandsStrip = ({
   const [show, setShow] = React52.useState(false);
   const { is } = useViewPort_default();
   const isTabletBelow = is("tablet", "below");
-  const shouldAnimate = !title && animate;
+  console.log(title);
+  const shouldAnimate = title === void 0 && animate;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -853,40 +857,11 @@ var ContactModuleTitle = ({ children }) => {
 var ContactModuleSubtitle = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
-function useIntersectionObserver({
-  animateOnce = false,
-  options = {}
-} = {}) {
-  const observeRef = React52.useRef(null);
-  const [isVisible, setIsVisible] = React52.useState(false);
-  if (typeof IntersectionObserver === "undefined") {
-    console.warn("IntersectionObserver is not supported in this browser.");
-    return { observeRef, isVisible: true };
-  }
-  React52.useEffect(() => {
-    const currentRef = observeRef.current;
-    if (!currentRef) return;
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      setIsVisible(entry.isIntersecting);
-      if (entry.isIntersecting && animateOnce) {
-        observer.disconnect();
-      }
-    }, options);
-    observer.observe(currentRef);
-    return () => {
-      observer.disconnect();
-    };
-  }, [observeRef, animateOnce, options]);
-  return { observeRef, isVisible };
-}
 
 // src/widgets/ContactModule/ContactModule.module.scss
 var ContactModule_module_default = {
   "contact-module": "ContactModule_module_contact-module",
   blur: "ContactModule_module_blur",
-  "blur--hidden": "ContactModule_module_blur--hidden",
   container: "ContactModule_module_container",
   wrapper: "ContactModule_module_wrapper",
   content: "ContactModule_module_content",
@@ -896,6 +871,9 @@ var ContactModule_module_default = {
   image: "ContactModule_module_image",
   cta: "ContactModule_module_cta"
 };
+if (typeof window !== "undefined") {
+  gsap.gsap.registerPlugin(ScrollTrigger.ScrollTrigger, react.useGSAP);
+}
 var ContactModule = ({
   className,
   children,
@@ -907,24 +885,51 @@ var ContactModule = ({
   animateBlur = true
 }) => {
   var _a, _b;
-  const { observeRef, isVisible } = useIntersectionObserver({
-    animateOnce: true,
-    options: { threshold: 0.8 }
-  });
+  const containerRef = React52.useRef(null);
+  const blurRef = React52.useRef(null);
   const slots = resolveCompoundSlots(children, {
     title: ContactModuleTitle,
     subtitle: ContactModuleSubtitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: observeRef, className: clsx3__default.default(ContactModule_module_default["contact-module"], className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  react.useGSAP(
+    () => {
+      if (!blurred || !animateBlur) return;
+      const revealProxy = { percentage: 0 };
+      gsap.gsap.to(revealProxy, {
+        percentage: 150,
+        scrollTrigger: {
+          trigger: containerRef.current,
+          start: "top+=90% bottom",
+          once: true
+        },
+        duration: 2,
+        ease: "power2.inOut",
+        onUpdate: () => {
+          if (blurRef.current) {
+            const mask = `radial-gradient(circle at center, transparent ${revealProxy.percentage - 30}%, black ${revealProxy.percentage}%)`;
+            blurRef.current.style.maskImage = mask;
+            blurRef.current.style.webkitMaskImage = mask;
+          }
+        },
+        onComplete: () => {
+          if (blurRef.current) blurRef.current.style.display = "none";
+        }
+      });
+    },
+    { scope: containerRef, dependencies: [blurred, animateBlur] }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: clsx3__default.default(ContactModule_module_default["contact-module"], className), children: [
+    blurred && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: clsx3__default.default({
-          [ContactModule_module_default.blur]: blurred,
-          [ContactModule_module_default["blur--hidden"]]: blurred && animateBlur && isVisible
-        })
+        ref: blurRef,
+        className: ContactModule_module_default.blur,
+        style: {
+          maskImage: "radial-gradient(circle at center, transparent -30%, black 0%)",
+          WebkitMaskImage: "radial-gradient(circle at center, transparent -30%, black 0%)"
+        }
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: ContactModule_module_default.container, children: [
@@ -983,7 +988,8 @@ var HeroBanner_module_default = {
   brandsStrip: "HeroBanner_module_brandsStrip",
   backgroundImage: "HeroBanner_module_backgroundImage",
   scrollDown: "HeroBanner_module_scrollDown",
-  arrow: "HeroBanner_module_arrow"
+  arrow: "HeroBanner_module_arrow",
+  mainHeroBanner: "HeroBanner_module_mainHeroBanner"
 };
 var HeroBanner = ({
   className,
@@ -1332,6 +1338,34 @@ var Teaser5050WithCta2 = Object.assign(Teaser5050WithCta, {
   Title: Teaser5050WithCtaTitle,
   Subtitle: Teaser5050WithCtaSubtitle
 });
+function useIntersectionObserver({
+  animateOnce = false,
+  options = {}
+} = {}) {
+  const observeRef = React52.useRef(null);
+  const [isVisible, setIsVisible] = React52.useState(false);
+  if (typeof IntersectionObserver === "undefined") {
+    console.warn("IntersectionObserver is not supported in this browser.");
+    return { observeRef, isVisible: true };
+  }
+  React52.useEffect(() => {
+    const currentRef = observeRef.current;
+    if (!currentRef) return;
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      setIsVisible(entry.isIntersecting);
+      if (entry.isIntersecting && animateOnce) {
+        observer.disconnect();
+      }
+    }, options);
+    observer.observe(currentRef);
+    return () => {
+      observer.disconnect();
+    };
+  }, [observeRef, animateOnce, options]);
+  return { observeRef, isVisible };
+}
 
 exports.Anchor = Anchor;
 exports.BrandsStrip = BrandsStrip;