gsap-react-marquee 0.2.2 → 0.2.3

package/dist/index.d.ts

@@ -27,7 +27,7 @@ declare const cn: (...inputs: ClassValue[]) => string;
 declare const getEffectiveBackgroundColor: (el: HTMLElement) => string;
 declare const setupContainerStyles: (containerMarquee: HTMLElement, marquees: HTMLElement[], marqueesChildren: HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
 declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => number;
-declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, props: GSAPReactMarqueeProps) => string | number;
+declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => string | number;
 declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, draggableTrigger: HTMLElement | HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
 
 export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getEffectiveBackgroundColor, getMinWidth, setupContainerStyles };

package/dist/index.esm.css

@@ -0,0 +1 @@
+.gsap-react-marquee-container:after{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);left:0}.gsap-react-marquee-container:after,.gsap-react-marquee-container:before{content:"";height:100%;pointer-events:none;position:absolute;top:0;width:15%;z-index:10}.gsap-react-marquee-container:before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);right:0}.gsap-react-marquee{flex:1;height:max-content;width:auto}.gsap-react-marquee,.gsap-react-marquee-content{display:flex;line-height:100%;white-space:preserve nowrap}.gsap-react-marquee-content{overflow:hidden;width:max-content}

package/dist/index.esm.js

@@ -1 +1 @@
-import e,{forwardRef as t,useRef as r,useState as n,useLayoutEffect as a,useMemo as o}from"react";import{useGSAP as i}from"@gsap/react";import l from"gsap";import{Draggable as s,InertiaPlugin as c,Observer as u}from"gsap/all";import{clsx as f}from"clsx";import{twMerge as p}from"tailwind-merge";var d,m,y={exports:{}},g={},h={};"production"===process.env.NODE_ENV?y.exports=function(){if(d)return g;d=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var a=null;if(void 0!==n&&(a=""+n),void 0!==r.key&&(a=""+r.key),"key"in r)for(var o in n={},r)"key"!==o&&(n[o]=r[o]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:a,ref:void 0!==r?r:null,props:n}}return g.Fragment=t,g.jsx=r,g.jsxs=r,g}():y.exports=(m||(m=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===j?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case d:return"Fragment";case y:return"Profiler";case m:return"StrictMode";case w:return"Suspense";case x:return"SuspenseList";case _:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case p:return"Portal";case v:return(e.displayName||"Context")+".Provider";case g:return(e._context.displayName||"Context")+".Consumer";case b:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case S:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,a="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),r(e)}}function a(e){if(e===d)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===k)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function i(){var e=t(this.type);return C[e]||(C[e]=!0),void 0!==(e=this.props.ref)?e:null}function l(e,r,a,o,l,u,p,d){var m,y=r.children;if(void 0!==y)if(o){if(T(y)){for(o=0;o<y.length;o++)s(y[o]);Object.freeze&&Object.freeze(y)}}else s(y);if(O.call(r,"key")){y=t(e);var g=Object.keys(r).filter(function(e){return"key"!==e});o=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",R[y+o]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",R[y+o]=!0)}if(y=null,void 0!==a&&(n(a),y=""+a),function(e){if(O.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),y=""+r.key),"key"in r)for(var h in a={},r)"key"!==h&&(a[h]=r[h]);else a=r;return y&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(a,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,a,o,l,s){return r=o.ref,e={$$typeof:f,type:e,key:t,props:o,_owner:a},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,y,u,0,null===(m=N.A)?null:m.getOwner(),a,p,d)}function s(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var c,u=e,f=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),v=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),j=Symbol.for("react.client.reference"),N=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,T=Array.isArray,P=console.createTask?console.createTask:function(){return null},C={},E=(u={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(u,o)(),q=P(a(o)),R={};h.Fragment=d,h.jsx=function(e,t,r,n,o){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!1,0,o,i?Error("react-stack-top-frame"):E,i?P(a(e)):q)},h.jsxs=function(e,t,r,n,o){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!0,0,o,i?Error("react-stack-top-frame"):E,i?P(a(e)):q)}}()),h);var v=y.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.gsap-react-marquee-container:after{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);left:0}.gsap-react-marquee-container:after,.gsap-react-marquee-container:before{content:"";height:100%;pointer-events:none;position:absolute;top:0;width:15%;z-index:10}.gsap-react-marquee-container:before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);right:0}.gsap-react-marquee{flex:1;height:max-content;width:auto}.gsap-react-marquee,.gsap-react-marquee-content{display:flex;line-height:100%;white-space:preserve nowrap}.gsap-react-marquee-content{overflow:hidden;width:max-content}');const b=(...e)=>p(f(e)),w=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},x=(e,t,r,n,a)=>{const{spacing:o=16,alignRotationWithY:i=!1}=a;if(l.set(e,{gap:`${o}px`,rotate:n?90:"0"}),n){const t=e.parentNode;l.set(e,{width:t.offsetHeight}),l.set(r,{overflow:"visible"})}if(i&&t.length>0){const n=t[0].offsetHeight;l.set(e,{alignItems:"center"}),l.set(r,{rotate:-90,x:(e.offsetWidth-o)/2-o,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),l.set(t,{height:e.offsetWidth-o})}},S=(e,t,r,n)=>{if(!n.fill)return 1;const a=r?window.innerHeight:t;return e<a?Math.ceil(a/e):1},k=(e,t,r,n)=>{const{fill:a=!1,alignRotationWithY:o=!1}=n;return a?"auto":o&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":`${t}px`},_=(e,t,r,n,a,o,i)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:p=!1,alignRotationWithY:d=!1}=i,m=[],y=[],g=e.length-1;l.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(l.getProperty(t,"width","px")));return y[e]=parseFloat(String(l.getProperty(t,"x","px")))/r*100+Number(l.getProperty(t,"xPercent")),y[e]}}),l.set(e,{x:0});const h=e[g].offsetLeft+y[g]/100*m[g]-t+e[g].offsetWidth+c;if(e.forEach((e,n)=>{const a=y[n]/100*m[n],o=e.offsetLeft+a-t,i=d?o+e.offsetHeight-c:o+m[n];r.to(e,{xPercent:(a-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(a-i+h)/m[n]*100},{xPercent:y[n],duration:(a-i+h-a)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(p)return void r.pause();r.progress(1).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let v;if("function"==typeof s&&i.draggable){v=document.createElement("div");const e=l.utils.wrap(0,1);let t,i;const c=()=>{const n=o?u.startY-u.y:u.startX-u.x;r.progress(e(i+n*t))},u=s.create(v,{trigger:a,type:o?"y":"x",onPress(){l.killTweensOf(r),r.pause(),i=r.progress(),t=1/h,l.set(v,{x:i/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(p)return void r.pause();r.progress(r.progress()).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};l.registerPlugin(i,u,c,s);const j=t((e,t)=>{const{children:s,className:c,dir:f="left",loop:p=-1,paused:d=!1,fill:m=!1,followScrollDir:y=!1,scrollSpeed:g=2.5,gradient:h=!1,gradientColor:j=null,pauseOnHover:N=!1}=e,O=r(null),T=t||O,P=r(null),[C,E]=n(1),[q,R]=n(null);a(()=>{if(!h||!(null==T?void 0:T.current))return;const e=w(T.current);R(e)},[h]);const A="up"===f||"down"===f,$="down"===f||"right"===f;i((t,r)=>{if(!(null==P?void 0:P.current)||!T.current||!r)return;const n=null==T?void 0:T.current,a=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),o=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content")),i=P.current;if(!i||!o)return;const s=l.timeline({paused:d,repeat:p,defaults:{ease:"none"},onReverseComplete(){s.totalTime(s.rawTime()+100*s.duration())}});x(n,a,o,A,e);const c=n.offsetWidth,f=o[0].offsetWidth,h=o[0].offsetLeft;let v=null;const b=Math.min(4,Math.max(1.1,g));E(S(f,c,A,e));const w=l.utils.toArray(i.children).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);l.set(a,{minWidth:k(o,w,c,e),flex:m?"0 0 auto":"1"}),_(m?o:a,h,s,$,a,A,e),y&&(v=u.create({onChangeY(e){let t=b*($?-1:1);e.deltaY<0&&(t*=-1),l.timeline({defaults:{ease:"none"}}).to(s,{timeScale:t*b,duration:.2,overwrite:!0}).to(s,{timeScale:t/b,duration:1},"+=0.3")}}));const j=r(()=>{s.timeScale(0)}),O=r(()=>{s.timeScale(1)});return N&&(n.addEventListener("mouseenter",j),n.addEventListener("mouseleave",O)),()=>{n.removeEventListener("mouseenter",j),n.removeEventListener("mouseleave",O),s.kill(),null==v||v.kill()}},{dependencies:[C,f,p,d,m,y,g,h,j,N]});const W=o(()=>!Number.isFinite(C)||C<=0?null:Array.from({length:C},(e,t)=>v.jsx("div",{className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})},t)),[C,c,s]);return v.jsxs("div",{ref:T,style:{"--gradient-color":j||(h&&q?q:"transparent")},className:b("gsap-react-marquee-container"),children:[v.jsx("div",{ref:P,className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})}),W]})});j.displayName="GSAPReactMarquee";export{S as calculateDuplicates,b as cn,_ as coreAnimation,j as default,w as getEffectiveBackgroundColor,k as getMinWidth,x as setupContainerStyles};
+import e,{forwardRef as t,useRef as r,useState as n,useLayoutEffect as a,useMemo as o}from"react";import{useGSAP as i}from"@gsap/react";import l from"gsap";import{Draggable as s,InertiaPlugin as c,Observer as u}from"gsap/all";import{clsx as f}from"clsx";import{twMerge as p}from"tailwind-merge";var d,m,y={exports:{}},g={},h={};"production"===process.env.NODE_ENV?y.exports=function(){if(d)return g;d=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var a=null;if(void 0!==n&&(a=""+n),void 0!==r.key&&(a=""+r.key),"key"in r)for(var o in n={},r)"key"!==o&&(n[o]=r[o]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:a,ref:void 0!==r?r:null,props:n}}return g.Fragment=t,g.jsx=r,g.jsxs=r,g}():y.exports=(m||(m=1,"production"!==process.env.NODE_ENV&&function(){function t(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===j?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case d:return"Fragment";case y:return"Profiler";case m:return"StrictMode";case x:return"Suspense";case w:return"SuspenseList";case _:return"Activity"}if("object"==typeof e)switch(e.tag,e.$$typeof){case p:return"Portal";case v:return(e.displayName||"Context")+".Provider";case g:return(e._context.displayName||"Context")+".Consumer";case b:var r=e.render;return(e=e.displayName)||(e=""!==(e=r.displayName||r.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case S:return null!==(r=e.displayName||null)?r:t(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return t(e(r))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch(e){t=!0}if(t){var n=(t=console).error,a="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),r(e)}}function a(e){if(e===d)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===k)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function i(){var e=t(this.type);return C[e]||(C[e]=!0),void 0!==(e=this.props.ref)?e:null}function l(e,r,a,o,l,u,p,d){var m,y=r.children;if(void 0!==y)if(o){if(T(y)){for(o=0;o<y.length;o++)s(y[o]);Object.freeze&&Object.freeze(y)}}else s(y);if(O.call(r,"key")){y=t(e);var g=Object.keys(r).filter(function(e){return"key"!==e});o=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",R[y+o]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",R[y+o]=!0)}if(y=null,void 0!==a&&(n(a),y=""+a),function(e){if(O.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(n(r.key),y=""+r.key),"key"in r)for(var h in a={},r)"key"!==h&&(a[h]=r[h]);else a=r;return y&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(a,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,a,o,l,s){return r=o.ref,e={$$typeof:f,type:e,key:t,props:o,_owner:a},null!==(void 0!==r?r:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,y,u,0,null===(m=N.A)?null:m.getOwner(),a,p,d)}function s(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var c,u=e,f=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),v=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),x=Symbol.for("react.suspense"),w=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),_=Symbol.for("react.activity"),j=Symbol.for("react.client.reference"),N=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,T=Array.isArray,P=console.createTask?console.createTask:function(){return null},C={},E=(u={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(u,o)(),q=P(a(o)),R={};h.Fragment=d,h.jsx=function(e,t,r,n,o){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!1,0,o,i?Error("react-stack-top-frame"):E,i?P(a(e)):q)},h.jsxs=function(e,t,r,n,o){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!0,0,o,i?Error("react-stack-top-frame"):E,i?P(a(e)):q)}}()),h);var v=y.exports;!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.gsap-react-marquee-container{display:flex;overflow:hidden;white-space:preserve nowrap;width:100%}.gsap-react-marquee-container:after{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);left:0}.gsap-react-marquee-container:after,.gsap-react-marquee-container:before{content:"";height:100%;pointer-events:none;position:absolute;top:0;width:15%;z-index:10}.gsap-react-marquee-container:before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--gradient-color) 75%);right:0}.gsap-react-marquee{flex:1;height:max-content;width:auto}.gsap-react-marquee,.gsap-react-marquee-content{display:flex;line-height:100%;white-space:preserve nowrap}.gsap-react-marquee-content{overflow:hidden;width:max-content}');const b=(...e)=>p(f(e)),x=e=>{let t=e;for(;t;){const e=window.getComputedStyle(t).backgroundColor;if(e&&"rgba(0, 0, 0, 0)"!==e&&"transparent"!==e)return e;t=t.parentElement}return"transparent"},w=(e,t,r,n,a)=>{const{spacing:o=16,alignRotationWithY:i=!1}=a;if(l.set(e,{gap:`${o}px`,rotate:n?90:"0"}),n){const t=e.parentNode;l.set(e,{width:t.offsetHeight}),l.set(r,{overflow:"visible"})}if(i&&t.length>0){const n=t[0].offsetHeight;l.set(e,{alignItems:"center"}),l.set(r,{rotate:-90,x:(e.offsetWidth-o)/2-o,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),l.set(t,{height:e.offsetWidth-o})}},S=(e,t,r,n)=>{if(!n.fill)return 1;const a=r?window.innerHeight:t;return e<a?Math.ceil(a/e):1},k=(e,t,r,n,a)=>{const{fill:o=!1,alignRotationWithY:i=!1}=a;return o&&n&&i?`${e[0].offsetHeight}px`:o?"auto":i&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":`${t}px`},_=(e,t,r,n,a,o,i)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:p=!1,alignRotationWithY:d=!1}=i,m=[],y=[],g=e.length-1;l.set(e,{xPercent:(e,t)=>{const r=m[e]=parseFloat(String(l.getProperty(t,"width","px")));return y[e]=parseFloat(String(l.getProperty(t,"x","px")))/r*100+Number(l.getProperty(t,"xPercent")),y[e]}}),l.set(e,{x:0});const h=e[g].offsetLeft+y[g]/100*m[g]-t+e[g].offsetWidth+c;if(e.forEach((e,n)=>{const a=y[n]/100*m[n],o=e.offsetLeft+a-t,i=d?o+e.offsetHeight-c:o+m[n];r.to(e,{xPercent:(a-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(a-i+h)/m[n]*100},{xPercent:y[n],duration:(a-i+h-a)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(p)return void r.pause();r.progress(1).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}let v;if("function"==typeof s&&i.draggable){v=document.createElement("div");const e=l.utils.wrap(0,1);let t,i;const c=()=>{const n=o?u.startY-u.y:u.startX-u.x;r.progress(e(i+n*t))},u=s.create(v,{trigger:a,type:o?"y":"x",onPress(){l.killTweensOf(r),r.pause(),i=r.progress(),t=1/h,l.set(v,{x:i/-t})},onDrag:c,onThrowUpdate:c,overshootTolerance:0,inertia:!0,onThrowComplete:()=>{if(n){if(p)return void r.pause();r.progress(r.progress()).pause(),l.delayedCall(f,()=>{r.reverse(),r.eventCallback("onReverseComplete",()=>{r.totalTime(r.rawTime()+100*r.duration())})})}else r.play()}})[0]}};l.registerPlugin(i,u,c,s);const j=t((e,t)=>{const{children:s,className:c,dir:f="left",loop:p=-1,paused:d=!1,fill:m=!1,followScrollDir:y=!1,scrollSpeed:g=2.5,gradient:h=!1,gradientColor:j=null,pauseOnHover:N=!1,alignRotationWithY:O=!1,spacing:T=16,speed:P=100}=e,C=r(null),E=t||C,q=r(null),[R,A]=n(1),[$,W]=n(null);a(()=>{if(!h||!(null==E?void 0:E.current))return;const e=x(E.current);W(e)},[h]);const L="up"===f||"down"===f,F="down"===f||"right"===f;i((t,r)=>{if(!(null==q?void 0:q.current)||!E.current||!r)return;const n=null==E?void 0:E.current,a=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),o=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));if(!q.current||!o)return;const i=l.timeline({paused:d,repeat:p,defaults:{ease:"none"},onReverseComplete(){i.totalTime(i.rawTime()+100*i.duration())}});w(n,a,o,L,e);const s=n.offsetWidth,c=o[0].offsetWidth,f=o[0].offsetLeft;let h=null;const v=Math.min(4,Math.max(1.1,g));A(S(c,s,L,e));const b=l.utils.toArray(a).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);l.set(a,{minWidth:k(o,b,s,L,e),flex:m?"0 0 auto":"1"}),_(m?o:a,f,i,F,a,L,e),y&&(h=u.create({onChangeY(e){let t=v*(F?-1:1);e.deltaY<0&&(t*=-1),l.timeline({defaults:{ease:"none"}}).to(i,{timeScale:t*v,duration:.2,overwrite:!0}).to(i,{timeScale:t/v,duration:1},"+=0.3")}}));const x=r(()=>{i.timeScale(0)}),j=r(()=>{i.timeScale(1)});return N&&(n.addEventListener("mouseenter",x),n.addEventListener("mouseleave",j)),()=>{n.removeEventListener("mouseenter",x),n.removeEventListener("mouseleave",j),i.kill(),null==h||h.kill()}},{dependencies:[R,f,p,d,m,y,g,h,j,N,O,T,P],revertOnUpdate:!0});const H=o(()=>!Number.isFinite(R)||R<=0?null:Array.from({length:R},(e,t)=>v.jsx("div",{className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})},t)),[R,c,s]);return v.jsxs("div",{ref:E,style:{"--gradient-color":j||(h&&$?$:"transparent")},className:b("gsap-react-marquee-container"),children:[v.jsx("div",{ref:q,className:b("gsap-react-marquee"),children:v.jsx("div",{className:b("gsap-react-marquee-content",c),children:s})}),H]})});j.displayName="GSAPReactMarquee";export{S as calculateDuplicates,b as cn,_ as coreAnimation,j as default,x as getEffectiveBackgroundColor,k as getMinWidth,w as setupContainerStyles};