gsap-react-marquee 0.2.3 → 0.2.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 David Domenico Piscopo
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 David Domenico Piscopo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,48 +1,87 @@
-# GSAP React Marquee
-
-A high-performance React marquee component powered by GSAP animations.
-
-## Installation
-
-```bash
-npm install gsap-react-marquee
-# or
-yarn add gsap-react-marquee
-# or
-pnpm add gsap-react-marquee
-```
-
-## Usage
-
-```tsx
-import Marquee from "gsap-react-marquee";
-
-function App() {
-  return (
-    <Marquee dir="right" speed={100} fill={true} spacing={16}>
-      <div>Hello world</div>
-    </Marquee>
-  );
-}
-```
-
-## Props
-
-| Prop                 | Type                                  | Default   | Description                                                                             |
-| -------------------- | ------------------------------------- | --------- | --------------------------------------------------------------------------------------- |
-| `children`           | `ReactNode`                           | –         | Content to render inside the marquee                                                    |
-| `className`          | `string`                              | –         | Additional CSS classes for styling                                                      |
-| `dir`                | `"right" \| "left" \| "up" \| "down"` | `"right"` | Direction of the marquee movement                                                       |
-| `loop`               | `number`                              | `-1`      | Number of loops (`-1` = infinite)                                                       |
-| `paused`             | `boolean`                             | `false`   | Whether the marquee animation should be paused                                          |
-| `alignRotationWithY` | `boolean`                             | `false`   | Correctly orients (rotates) the content along Y axis (⚠️ avoid with `"left"`/`"right"`) |
-| `delay`              | `number`                              | `0`       | Delay before the animation starts                                                       |
-| `speed`              | `number`                              | `100`     | Speed of the marquee animation in px/s                                                  |
-| `fill`               | `boolean`                             | `false`   | Whether the marquee should continuously fill the space                                  |
-| `pauseOnHover`       | `boolean`                             | `false`   | Pause the marquee when hovering                                                         |
-| `gradient`           | `boolean`                             | `false`   | Enable gradient overlay                                                                 |
-| `gradientColor`      | `string`                              | –         | Color of the gradient if enabled                                                        |
-| `spacing`            | `number`                              | `16`      | Spacing between repeated elements in px                                                 |
-| `draggable`          | `boolean`                             | `false`   | Enable dragging to scroll manually                                                      |
-| `followScrollDir`    | `boolean`                             | `false`   | Sync marquee with page scroll direction                                                 |
-| `scrollSpeed`        | `number`                              | `2.5`     | Speed factor when syncing with page scroll                                              |
+# GSAP React Marquee
+
+A high-performance React marquee component powered by GSAP animations with intelligent container detection and seamless looping.
+
+## Installation
+
+```bash
+npm install gsap-react-marquee
+# or
+yarn add gsap-react-marquee
+# or
+pnpm add gsap-react-marquee
+```
+
+## Usage
+
+```tsx
+import Marquee from "gsap-react-marquee";
+
+function App() {
+  return (
+    <Marquee dir="right" speed={100} fill={true} spacing={16}>
+      <div>Hello world</div>
+    </Marquee>
+  );
+}
+```
+
+## Features
+
+- **Intelligent Container Detection**: Automatically detects whether containers have fixed dimensions or adapt to content, preventing recursive expansion loops
+- **Seamless Looping**: Advanced duplicate calculation ensures smooth infinite scrolling without gaps
+- **High Performance**: Built with GSAP for optimal animation performance
+- **Responsive Design**: Adapts to different screen sizes and container dimensions
+- **Multiple Directions**: Support for horizontal (left/right) and vertical (up/down) scrolling
+- **Interactive Controls**: Optional draggable interface and scroll synchronization
+- **TypeScript Support**: Full type safety and IntelliSense support
+
+## Props
+
+| Prop                 | Type                                  | Default  | Description                                                                             |
+| -------------------- | ------------------------------------- | -------- | --------------------------------------------------------------------------------------- |
+| `children`           | `ReactNode`                           | –        | Content to render inside the marquee                                                    |
+| `className`          | `string`                              | –        | Additional CSS classes for styling                                                      |
+| `dir`                | `"right" \| "left" \| "up" \| "down"` | `"left"` | Direction of the marquee movement                                                       |
+| `loop`               | `number`                              | `-1`     | Number of loops (`-1` = infinite)                                                       |
+| `paused`             | `boolean`                             | `false`  | Whether the marquee animation should be paused                                          |
+| `alignRotationWithY` | `boolean`                             | `false`  | Correctly orients (rotates) the content along Y axis (⚠️ avoid with `"left"`/`"right"`) |
+| `delay`              | `number`                              | `0`      | Delay before the animation starts                                                       |
+| `speed`              | `number`                              | `100`    | Speed of the marquee animation in px/s                                                  |
+| `fill`               | `boolean`                             | `false`  | Whether the marquee should continuously fill the space                                  |
+| `pauseOnHover`       | `boolean`                             | `false`  | Pause the marquee when hovering                                                         |
+| `gradient`           | `boolean`                             | `false`  | Enable gradient overlay                                                                 |
+| `gradientColor`      | `string`                              | –        | Color of the gradient if enabled                                                        |
+| `spacing`            | `number`                              | `16`     | Spacing between repeated elements in px                                                 |
+| `draggable`          | `boolean`                             | `false`  | Enable dragging to scroll manually                                                      |
+| `followScrollDir`    | `boolean`                             | `false`  | Sync marquee with page scroll direction                                                 |
+| `scrollSpeed`        | `number`                              | `2.5`    | Speed factor when syncing with page scroll                                              |
+
+## Advanced Features
+
+### Intelligent Container Detection
+
+The component now automatically detects container dimensions to prevent recursive expansion:
+
+- **Fixed Width Containers**: Uses container dimensions for optimal duplicate calculation
+- **Auto-Width Containers**: Falls back to viewport dimensions to prevent layout loops
+- **Safety Limits**: Maximum of 15 duplicates to prevent performance issues
+- **Development Logging**: Debug information in development mode
+
+### Seamless Looping Algorithm
+
+Enhanced duplicate calculation ensures perfect infinite scrolling:
+
+- **Smart Target Width**: Intelligently determines the space to fill
+- **Gap Prevention**: Calculates exact duplicates needed to eliminate visual gaps
+- **Performance Optimized**: Minimal DOM elements for maximum performance
+
+## Changelog
+
+### v0.2.4
+
+- ✨ Added intelligent container detection to prevent recursive expansion
+- 🚀 Enhanced duplicate calculation algorithm for better performance
+- 🔧 Improved seamless looping with smarter target width calculation
+- 📝 Added comprehensive debug logging for development
+- 🛡️ Added safety limits to prevent extreme duplicate scenarios

package/dist/index.cjs.js

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

package/dist/index.d.ts

@@ -26,9 +26,11 @@ declare const GSAPReactMarquee: react.ForwardRefExoticComponent<GSAPReactMarquee
 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 hasDefinedWidth: (element: HTMLElement) => boolean;
+declare const getTargetWidth: (containerElement: HTMLElement, isVertical: boolean) => number;
+declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps, containerElement?: HTMLElement) => 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 };
+export { calculateDuplicates, cn, coreAnimation, GSAPReactMarquee as default, getEffectiveBackgroundColor, getMinWidth, getTargetWidth, hasDefinedWidth, setupContainerStyles };
 export type { GSAPReactMarqueeProps };

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 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};
+import e,{forwardRef as t,useRef as r,useState as n,useLayoutEffect as o,useMemo as a}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 d}from"tailwind-merge";var p,m,y={exports:{}},g={},h={};"production"===process.env.NODE_ENV?y.exports=function(){if(p)return g;p=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function r(t,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var a in n={},r)"key"!==a&&(n[a]=r[a]);else n=r;return r=n.ref,{$$typeof:e,type:t,key:o,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 p: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 d: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,o="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.",o),r(e)}}function o(e){if(e===p)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===k)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function i(){var e=t(this.type);return P[e]||(P[e]=!0),void 0!==(e=this.props.ref)?e:null}function l(e,r,o,a,l,u,d,p){var m,y=r.children;if(void 0!==y)if(a){if(T(y)){for(a=0;a<y.length;a++)s(y[a]);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});a=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",R[y+a]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",R[y+a]=!0)}if(y=null,void 0!==o&&(n(o),y=""+o),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 o={},r)"key"!==h&&(o[h]=r[h]);else o=r;return y&&function(e){function t(){c||(c=!0)}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e&&(e.displayName||e.name)),function(e,t,r,n,o,a,l,s){return r=a.ref,e={$$typeof:f,type:e,key:t,props:a,_owner:o},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(),o,d,p)}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"),d=Symbol.for("react.portal"),p=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,C=console.createTask?console.createTask:function(){return null},P={},E=(u={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(u,a)(),q=C(o(a)),R={};h.Fragment=p,h.jsx=function(e,t,r,n,a){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!1,0,a,i?Error("react-stack-top-frame"):E,i?C(o(e)):q)},h.jsxs=function(e,t,r,n,a){var i=1e4>N.recentlyCreatedOwnerStacks++;return l(e,t,r,!0,0,a,i?Error("react-stack-top-frame"):E,i?C(o(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],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.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)=>d(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,o)=>{const{spacing:a=16,alignRotationWithY:i=!1}=o;if(l.set(e,{gap:`${a}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-a)/2-a,display:"flex",flexWrap:"wrap",width:n,wordBreak:"break-all",whiteSpace:"break-spaces"}),l.set(t,{height:e.offsetWidth-a})}},S=e=>{if(e.style.width&&"auto"!==e.style.width)return!0;const t=window.getComputedStyle(e).width;if("auto"===t||!t)return!1;const r=e.parentElement;if(r){const e=window.getComputedStyle(r);if("100%"===t&&"auto"===e.width)return!1}return!0},k=(e,t)=>S(e)?t?e.offsetHeight:e.offsetWidth:t?window.innerHeight:window.innerWidth,_=(e,t,r,n,o)=>{if(!n.fill)return 1;let a;a=o?k(o,r):t>0?r?window.innerHeight:t:r?window.innerHeight:window.innerWidth;const i=e<a?Math.ceil(a/e):1;return Math.min(i,15)},j=(e,t,r,n,o)=>{const{fill:a=!1,alignRotationWithY:i=!1}=o;return a&&n&&i?`${e[0].offsetHeight}px`:a?"auto":i&&e.length>0?`${e[0].offsetHeight}px`:t<r?"100%":`${t}px`},N=(e,t,r,n,o,a,i)=>{const{spacing:c=16,speed:u=100,delay:f=0,paused:d=!1,alignRotationWithY:p=!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 o=y[n]/100*m[n],a=e.offsetLeft+o-t,i=p?a+e.offsetHeight-c:a+m[n];r.to(e,{xPercent:(o-i)/m[n]*100,duration:i/u},0).fromTo(e,{xPercent:(o-i+h)/m[n]*100},{xPercent:y[n],duration:(o-i+h-o)/u,immediateRender:!1},i/u)}),r.delay(f),n){if(d)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=a?u.startY-u.y:u.startX-u.x;r.progress(e(i+n*t))},u=s.create(v,{trigger:o,type:a?"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(d)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 O=t((e,t)=>{const{children:s,className:c,dir:f="left",loop:d=-1,paused:p=!1,fill:m=!1,followScrollDir:y=!1,scrollSpeed:g=2.5,gradient:h=!1,gradientColor:S=null,pauseOnHover:k=!1,alignRotationWithY:O=!1,spacing:T=16,speed:C=100}=e,P=r(null),E=t||P,q=r(null),[R,W]=n(1),[A,$]=n(null);o(()=>{if(!h||!(null==E?void 0:E.current))return;const e=w(E.current);$(e)},[h]);const H="up"===f||"down"===f,L="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,o=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee")),a=l.utils.toArray(n.querySelectorAll(".gsap-react-marquee .gsap-react-marquee-content"));if(!q.current||!a)return;const i=l.timeline({paused:p,repeat:d,defaults:{ease:"none"},onReverseComplete(){i.totalTime(i.rawTime()+100*i.duration())}});x(n,o,a,H,e);const s=n.offsetWidth,c=a[0].offsetWidth,f=a[0].offsetLeft;let h=null;const v=Math.min(4,Math.max(1.1,g));W(_(c,s,H,e,n));const b=l.utils.toArray(o).map(e=>e.offsetWidth).reduce((e,t)=>e+t,0);l.set(o,{minWidth:j(a,b,s,H,e),flex:m?"0 0 auto":"1"}),N(m?a:o,f,i,L,o,H,e),y&&(h=u.create({onChangeY(e){let t=v*(L?-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 w=r(()=>{i.timeScale(0)}),S=r(()=>{i.timeScale(L?-1:1)});return k&&(n.addEventListener("mouseenter",w),n.addEventListener("mouseleave",S)),()=>{n.removeEventListener("mouseenter",w),n.removeEventListener("mouseleave",S),i.kill(),null==h||h.kill()}},{dependencies:[R,f,d,p,m,y,g,h,S,k,O,T,C],revertOnUpdate:!0});const F=a(()=>!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":S||(h&&A?A:"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})}),F]})});O.displayName="GSAPReactMarquee";export{_ as calculateDuplicates,b as cn,N as coreAnimation,O as default,w as getEffectiveBackgroundColor,j as getMinWidth,k as getTargetWidth,S as hasDefinedWidth,x as setupContainerStyles};

package/dist/types/components/gsap-react-marquee.styles.d.ts

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

package/dist/types/components/gsap-reactmarquee.utils.d.ts

@@ -3,6 +3,8 @@ import type { GSAPReactMarqueeProps } from "./gsap-react-marquee.type";
 export declare const cn: (...inputs: ClassValue[]) => string;
 export declare const getEffectiveBackgroundColor: (el: HTMLElement) => string;
 export declare const setupContainerStyles: (containerMarquee: HTMLElement, marquees: HTMLElement[], marqueesChildren: HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;
-export declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => number;
+export declare const hasDefinedWidth: (element: HTMLElement) => boolean;
+export declare const getTargetWidth: (containerElement: HTMLElement, isVertical: boolean) => number;
+export declare const calculateDuplicates: (marqueeChildrenWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps, containerElement?: HTMLElement) => number;
 export declare const getMinWidth: (marqueesChildren: HTMLElement[], totalWidth: number, containerMarqueeWidth: number, isVertical: boolean, props: GSAPReactMarqueeProps) => string | number;
 export declare const coreAnimation: (elementsToAnimate: HTMLElement[], startX: number, tl: gsap.core.Timeline, isReverse: boolean, draggableTrigger: HTMLElement | HTMLElement[], isVertical: boolean, props: GSAPReactMarqueeProps) => void;

package/package.json

@@ -1,72 +1,72 @@
-{
-  "name": "gsap-react-marquee",
-  "author": "David Domenico Piscopo",
-  "description": "A high-performance React marquee component powered by GSAP",
-  "license": "MIT",
-  "version": "0.2.3",
-  "type": "module",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "rollup -c",
-    "build:watch": "rollup -c -w",
-    "prepare": "npm run build"
-  },
-  "keywords": [
-    "react",
-    "marquee",
-    "gsap",
-    "animation",
-    "scroll",
-    "infinite",
-    "component",
-    "typescript"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/daviddpi/gsap-react-marquee.git"
-  },
-  "bugs": {
-    "url": "https://github.com/daviddpi/gsap-react-marquee/issues"
-  },
-  "homepage": "https://github.com/daviddpi/gsap-react-marquee#readme",
-  "peerDependencies": {
-    "@gsap/react": "^2.1.1",
-    "clsx": "^2.1.0",
-    "gsap": "^3.12.0",
-    "react": ">=18",
-    "react-dom": ">=18",
-    "tailwind-merge": "^2.2.0"
-  },
-  "devDependencies": {
-    "@gsap/react": "^2.1.1",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "clsx": "^2.1.1",
-    "rollup": "^4.18.0",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-postcss": "^4.0.2",
-    "tailwind-merge": "^2.3.0",
-    "tslib": "^2.8.1",
-    "typescript": "^5.5.2"
-  },
-  "dependencies": {
-    "@rollup/plugin-terser": "^0.4.4"
-  }
-}
+{
+  "name": "gsap-react-marquee",
+  "author": "David Domenico Piscopo",
+  "description": "A high-performance React marquee component powered by GSAP",
+  "license": "MIT",
+  "version": "0.2.4",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "marquee",
+    "gsap",
+    "animation",
+    "scroll",
+    "infinite",
+    "component",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daviddpi/gsap-react-marquee.git"
+  },
+  "bugs": {
+    "url": "https://github.com/daviddpi/gsap-react-marquee/issues"
+  },
+  "homepage": "https://github.com/daviddpi/gsap-react-marquee#readme",
+  "peerDependencies": {
+    "@gsap/react": "^2.1.1",
+    "clsx": "^2.1.0",
+    "gsap": "^3.12.0",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@gsap/react": "^2.1.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "clsx": "^2.1.1",
+    "rollup": "^4.18.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwind-merge": "^2.3.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.5.2"
+  },
+  "dependencies": {
+    "@rollup/plugin-terser": "^0.4.4"
+  }
+}

package/dist/components/gsap-react-marquee.d.ts

@@ -1,4 +0,0 @@
-import "./gsap-react-marquee.style.css";
-import type { GSAPReactMarqueeProps } from "./gsap-react-marquee.type";
-declare const GSAPReactMarquee: import("react").ForwardRefExoticComponent<GSAPReactMarqueeProps & import("react").RefAttributes<HTMLDivElement>>;
-export default GSAPReactMarquee;

package/dist/components/gsap-react-marquee.type.d.ts

@@ -1,92 +0,0 @@
-import type { ReactNode } from "react";
-export type GSAPReactMarqueeProps = {
-    /** Content to render inside the marquee */
-    children: ReactNode;
-    /** Additional CSS classes for styling */
-    className?: string;
-    /**
-     * @description Direction of the marquee movement
-     * @type {"right" | "left" | "up" | "down"}
-     * @default "right"
-     */
-    dir?: "right" | "left" | "up" | "down";
-    /**
-     * @description The number of times the marquee should loop, -1 is equivalent to infinite
-     * @type {number}
-     * @default -1
-     */
-    loop?: number;
-    /**
-     * @description Whether the marquee animation should be paused
-     * @type {boolean}
-     * @default false
-     */
-    paused?: boolean;
-    /**
-     * @description Correctly orients (rotates) the content with respect to the Y axis.
-     * Useful for vertical movement ("up" | "down") to keep items upright via rotation fix.
-     * @issue ⚠️ Not recommended to use together with "left" or "right" direction, as it may cause layout issues.
-     * @type {boolean}
-     * @default false
-     */
-    alignRotationWithY?: boolean;
-    /**
-     * @description Delay before the animation starts
-     * @type {number}
-     * @default 0
-     */
-    delay?: number;
-    /**
-     * @description Speed of the marquee animation in px/s
-     * @type {number}
-     * @default 100
-     */
-    speed?: number;
-    /**
-     * @description Whether the marquee should continuously fill the space
-     * @type {boolean}
-     * @default false
-     */
-    fill?: boolean;
-    /**
-     * @description Pause the marquee when hovering
-     * @type {boolean}
-     * @default false
-     */
-    pauseOnHover?: boolean;
-    /**
-     * @description Enable gradient overlay
-     * @type {boolean}
-     * @default false
-     */
-    gradient?: boolean;
-    /**
-     * @description Color of the gradient if enabled
-     * @type {string}
-     */
-    gradientColor?: string;
-    /**
-     * @description Spacing between repeated elements in px
-     * @type {number}
-     * @default 16
-     */
-    spacing?: number;
-    /**
-     * @description Enable dragging to scroll manually
-     * @type {boolean}
-     * @default false
-     */
-    draggable?: boolean;
-    /**
-     * @description Whether to sync with page scroll direction
-     * @type {boolean}
-     * @default false
-     */
-    followScrollDir?: boolean;
-    /**
-     * @description Speed factor when syncing with page scroll, max value is 4
-     * @type {number}
-     * @default 2.5
-     */
-    scrollSpeed?: number;
-};