marqy 0.0.9 → 1.0.1

package/.claude/settings.local.json

@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(yarn install:*)",
+      "Bash(node_modules/.bin/astro --version)",
+      "Bash(npx update-browserslist-db@latest)",
+      "Bash(python3 -c \"import json,sys; d=json.load\\(sys.stdin\\); print\\(json.dumps\\(d.get\\('exports', {}\\), indent=2\\)\\)\")",
+      "WebFetch(domain:base-ui.com)",
+      "Bash(yarn add:*)",
+      "Bash(md5 /Users/ndimatteo/code/plugins/marqy/examples/src/components/MarqyPlayground.tsx)"
+    ]
+  }
+}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "markdown-preview-enhanced.codeBlockTheme": "default.css"
+}

package/README.md

@@ -1,28 +1,59 @@
 <p align="center">
-<img src="https://user-images.githubusercontent.com/737188/111051609-54b78580-8422-11eb-8b7a-e85e29382785.png" align="center" height="120" />
+<img src="./examples/public/marqy-logo.svg" align="center" height="40" />
 </p>
 
 <p align="center">
-  <strong>Accessible React Marquees done right</strong><br />
-✨ Synchronizes speeds ✨ uses CSS animations ✨ render react components ✨
+  <strong>High-fidelity loops for modern interfaces</strong><br />
+  under 1kB gzipped // synchronized speeds // CSS-based animations
 </p>
 
+[![npm](https://img.shields.io/npm/v/marqy?style=flat&colorA=000000&colorB=000000
+)](https://www.npmjs.com/package/marqy)
+[![downloads](https://img.shields.io/npm/dm/marqy?style=flat&colorA=000000&colorB=000000
+)](https://www.npmjs.com/package/marqy)
+[![size](https://img.shields.io/bundlephobia/minzip/marqy?style=flat&label=size&colorA=000000&colorB=000000)](https://bundlephobia.com/package/marqy)
+
+# DEMO: [MARQY.PARTY](https://marqy.party)
+
 ## Install
 
-```sh
-npm i marqy
-```
-or using yarn
 ```sh
 yarn add marqy
 ```
 
-## Development
+or using npm
+
+```sh
+npm i marqy
 ```
-yarn dev
+
+## Usage
+
+#### Import React
+```tsx
+import { Marqy } from 'marqy';
+
+<Marqy speed={1} direction="left" pauseOnHover>
+  <span>Your content here</span>
+</Marqy>
 ```
 
-## Build
+#### Import CSS
+```js
+import 'marqy/dist/marqy.css';
 ```
-yarn build
-```
+**or add it manually:** [see marqy.css stylesheet](./marqy.css)
+
+### Properties
+
+| Name           | Type                            | Description                               |
+| -------------- | ------------------------------- | ----------------------------------------- |
+| `speed`        | number **[default: 0.5]**       | Scroll speed multiplier                   |
+| `direction`    | string **[default: 'left']**    | Direction of scroll                       |
+| `pauseOnHover` | boolean **[default: false]**    | Pauses the animation on hover             |
+| `manual`       | boolean **[default: false]**    | Renders without applying CSS animations   |
+| `children`     | React.ReactNode                 | Content to repeat inside the marqy        |
+
+### License
+
+MIT © [Nick DiMatteo](https://www.nickdimatteo.com) + [Mike Wagz](https://www.mikewagz.com)

package/dist/marqy.css

@@ -0,0 +1,131 @@
+[data-marqy] {
+  position: relative;
+  width: 100%;
+}
+
+[data-marqy][data-direction='left'],
+[data-marqy][data-direction='right'] {
+  overflow-x: clip;
+}
+
+[data-marqy][data-direction='up'],
+[data-marqy][data-direction='down'] {
+  overflow-y: clip;
+}
+
+[data-marqy-inner] {
+  display: flex;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+[data-marqy][data-direction='up'] [data-marqy-inner],
+[data-marqy][data-direction='down'] [data-marqy-inner],
+[data-marqy][data-direction='up'] [data-marqy-content],
+[data-marqy][data-direction='down'] [data-marqy-content] {
+  flex-direction: column;
+}
+
+[data-marqy-inner]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-marqy][data-direction='right'] [data-marqy-inner] {
+  justify-content: flex-end;
+}
+
+[data-marqy][data-direction='down'] [data-marqy-inner],
+[data-marqy][data-direction='down'] [data-marqy-content] {
+  justify-content: flex-end;
+}
+
+[data-marqy-content] {
+  display: flex;
+  flex: 1 0 auto;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-play-state: running;
+  will-change: transform;
+}
+
+[data-marqy-static] [data-marqy-content] {
+  animation: none !important;
+}
+
+[data-marqy][data-direction='left'] [data-marqy-content] {
+  animation-name: marqyL;
+}
+
+[data-marqy][data-direction='right'] [data-marqy-content] {
+  animation-name: marqyR;
+}
+
+[data-marqy][data-direction='up'] [data-marqy-content] {
+  animation-name: marqyU;
+}
+
+[data-marqy][data-direction='down'] [data-marqy-content] {
+  animation-name: marqyD;
+}
+
+[data-marqy][data-pause-on-hover]:hover
+  > [data-marqy-inner]
+  > [data-marqy-content] {
+  animation-play-state: paused;
+}
+
+[data-marqy-item] {
+  flex-grow: 0;
+}
+
+@keyframes marqyL {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes marqyR {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes marqyU {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes marqyD {
+  0% {
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  [data-marqy][data-direction='left'] [data-marqy-inner],
+  [data-marqy][data-direction='right'] [data-marqy-inner] {
+    overflow-x: scroll;
+  }
+
+  [data-marqy][data-direction='up'],
+  [data-marqy][data-direction='down'] {
+    overflow-y: scroll;
+  }
+
+  [data-marqy-content] {
+    animation: none !important;
+  }
+}

package/dist/marqy.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-export declare interface MarqyProps {
+export interface MarqyProps extends React.ComponentPropsWithoutRef<'div'> {
     speed?: number;
-    direction?: 'left' | 'right';
+    direction?: 'left' | 'right' | 'up' | 'down';
     pauseOnHover?: boolean;
+    manual?: boolean;
     children: React.ReactNode;
 }
-export declare function Marqy({ speed, direction, pauseOnHover, children, ...rest }: MarqyProps): JSX.Element;
+export declare function Marqy({ speed, direction, pauseOnHover, manual, children, ...rest }: MarqyProps): React.ReactElement;

package/dist/marqy.esm.js

@@ -1,2 +1,2 @@
-import{useState as n,useEffect as r,createElement as e,useRef as t,useCallback as i}from"react";function a(t){var i=t.speed,a=void 0===i?.5:i,o=t.direction,c=void 0===o?"left":o,l=t.pauseOnHover,d=t.children,f=function(n,r){if(null==n)return{};var e,t,i={},a=Object.keys(n);for(t=0;t<a.length;t++)r.indexOf(e=a[t])>=0||(i[e]=n[e]);return i}(t,["speed","direction","pauseOnHover","children"]),v=n(1),s=v[0],m=v[1],y=u(),p=y[0],h=y[1],O=u(),b=O[0],q=O[1];return r(function(){h&&q&&m(Math.ceil(h/q))},[h,q]),e("div",Object.assign({ref:p,"data-marqy":"","data-direction":c,"data-pause-on-hover":l?"":null},f),e("div",{"data-marqy-inner":""},new Array(2).fill(0).map(function(n,r){return e("div",{key:r,"data-marqy-content":"",style:{animationDuration:(null!=q?q:0)*s/(100*a)+"s"}},new Array(s).fill(0).map(function(n,t){var i=0===r&&0===t;return e("div",{key:t,ref:i?b:null,"aria-hidden":!i||null,"data-marqy-item":""},d)}))})))}function u(){var e=n(0),a=e[0],u=e[1],o=n(null),c=o[0],l=o[1],d=t(null),f=i(function(){var n;return null==(n=d.current)?void 0:n.disconnect()},[]),v=i(function(){d.current=new ResizeObserver(function(n){return u(n[0].contentRect.width)}),c&&d.current.observe(c)},[c]);return r(function(){return v(),function(){return f()}},[f,v]),[l,a]}export{a as Marqy};
+import*as e from"react";function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},t.apply(null,arguments)}var n=["speed","direction","pauseOnHover","manual","children"];function r(r){var a=r.speed,u=void 0===a?.5:a,c=r.direction,l=void 0===c?"left":c,o=r.pauseOnHover,d=r.manual,h=void 0!==d&&d,f=r.children,s=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(r,n),v=e.useState(1),m=v[0],w=v[1],p=i(),y=p[0],g=p[1],O=i(),b=O[0],q=O[1],E="up"===l||"down"===l,k=e.useCallback(function(e){return(null!=e?e:0)*m/(100*u)+"s"},[m,u]);return e.useEffect(function(){!E&&g.width&&q.width&&w(Math.ceil(g.width/q.width)),E&&g.height&&q.height&&w(Math.ceil(g.height/q.height))},[E,g,q]),e.createElement("div",t({ref:y,"data-marqy":"","data-direction":l,"data-pause-on-hover":o?"":null},s),e.createElement("div",{"data-marqy-inner":""},new Array(2).fill(0).map(function(n,r){return e.createElement("div",t({key:r,"data-marqy-content":""},h?{"data-marqy-static":k(E?q.height:q.width)}:{style:{animationDuration:k(E?q.height:q.width)}}),new Array(m).fill(0).map(function(t,n){var i=0===r&&0===n;return e.createElement("div",{key:n,ref:i?b:null,"aria-hidden":!i||null,"data-marqy-item":""},f)}))})))}function i(){var t=e.useState({width:0,height:0}),n=t[0],r=t[1],i=e.useRef(null);return[e.useCallback(function(e){var t;null==(t=i.current)||t.disconnect(),e&&(i.current=new ResizeObserver(function(e){var t=e[0];return r({width:t.contentRect.width,height:t.contentRect.height})}),i.current.observe(e))},[]),n]}export{r as Marqy};
 //# sourceMappingURL=marqy.esm.js.map

package/dist/marqy.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"marqy.esm.js","sources":["../src/marqy.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport declare interface MarqyProps {\n  speed?: number;\n  direction?: 'left' | 'right';\n  pauseOnHover?: boolean;\n  children: React.ReactNode;\n}\n\nexport function Marqy({\n  speed = 0.5,\n  direction = 'left',\n  pauseOnHover,\n  children,\n  ...rest\n}: MarqyProps): JSX.Element {\n  const [reps, setReps] = React.useState(1)\n\n  const [container, containerWidth] = useWidth()\n  const [item, itemWidth] = useWidth()\n\n  React.useEffect(() => {\n    if (containerWidth && itemWidth) {\n      setReps(Math.ceil(containerWidth / itemWidth))\n    }\n  }, [containerWidth, itemWidth])\n\n  return (\n    <div\n      ref={container}\n      data-marqy=\"\"\n      data-direction={direction}\n      data-pause-on-hover={pauseOnHover ? '' : null}\n      {...rest}\n    >\n      <div data-marqy-inner=\"\">\n        {new Array(2).fill(0).map((_, clone) => {\n          return (\n            <div\n              key={clone}\n              data-marqy-content=\"\"\n              style={{\n                animationDuration: `${\n                  ((itemWidth ?? 0) * reps) / (100 * speed)\n                }s`,\n              }}\n            >\n              {new Array(reps).fill(0).map((_, rep) => {\n                const isFirstItem = clone === 0 && rep === 0\n                return (\n                  <div\n                    key={rep}\n                    ref={isFirstItem ? item : null}\n                    aria-hidden={!isFirstItem || null}\n                    data-marqy-item=\"\"\n                  >\n                    {children}\n                  </div>\n                )\n              })}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nfunction useWidth() {\n  const [width, setWidth] = React.useState(0)\n  const [node, setNode] = React.useState<HTMLElement | null>(null)\n  const observer = React.useRef<ResizeObserver | null>(null)\n\n  const disconnect = React.useCallback(() => observer.current?.disconnect(), [])\n\n  const observe = React.useCallback(() => {\n    observer.current = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width))\n    if (node) observer.current.observe(node)\n  }, [node])\n\n  React.useEffect(() => {\n    observe()\n    return () => disconnect()\n  }, [disconnect, observe])\n\n  return [setNode, width] as const\n}\n"],"names":["Marqy","speed","direction","pauseOnHover","children","rest","React","reps","setReps","useWidth","container","containerWidth","item","itemWidth","Math","ceil","ref","Array","fill","map","_","clone","key","style","animationDuration","rep","isFirstItem","width","setWidth","node","setNode","observer","disconnect","current","_observer$current","observe","ResizeObserver","contentRect"],"mappings":"yGASgBA,aACdC,MAAAA,aAAQ,SACRC,UAAAA,aAAY,SACZC,IAAAA,aACAC,IAAAA,SACGC,0LAEqBC,EAAe,GAAhCC,OAAMC,SAEuBC,IAA7BC,OAAWC,SACQF,IAAnBG,OAAMC,OAQb,OANAP,EAAgB,WACVK,GAAkBE,GACpBL,EAAQM,KAAKC,KAAKJ,EAAiBE,KAEpC,CAACF,EAAgBE,IAGlBP,uBACEU,IAAKN,eACM,oBACKR,wBACKC,EAAe,GAAK,MACrCE,GAEJC,4BAAsB,IACnB,IAAIW,MAAM,GAAGC,KAAK,GAAGC,IAAI,SAACC,EAAGC,GAC5B,OACEf,SACEgB,IAAKD,uBACc,GACnBE,MAAO,CACLC,yBACIX,EAAAA,EAAa,GAAKN,GAAS,IAAMN,SAItC,IAAIgB,MAAMV,GAAMW,KAAK,GAAGC,IAAI,SAACC,EAAGK,GAC/B,IAAMC,EAAwB,IAAVL,GAAuB,IAARI,EACnC,OACEnB,SACEgB,IAAKG,EACLT,IAAKU,EAAcd,EAAO,oBACZc,GAAe,uBACb,IAEftB,UAYrB,SAASK,UACmBH,EAAe,GAAlCqB,OAAOC,SACUtB,EAAmC,MAApDuB,OAAMC,OACPC,EAAWzB,EAAoC,MAE/C0B,EAAa1B,EAAkB,iCAAMyB,EAASE,gBAATC,EAAkBF,cAAc,IAErEG,EAAU7B,EAAkB,WAChCyB,EAASE,QAAU,IAAIG,eAAe,mBAAaR,OAAeS,YAAYV,SAC1EE,GAAME,EAASE,QAAQE,QAAQN,IAClC,CAACA,IAOJ,OALAvB,EAAgB,WAEd,OADA6B,sBACaH,MACZ,CAACA,EAAYG,IAET,CAACL,EAASH"}
+{"version":3,"file":"marqy.esm.js","sources":["../src/marqy.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport interface MarqyProps extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number\n  direction?: 'left' | 'right' | 'up' | 'down'\n  pauseOnHover?: boolean\n  manual?: boolean\n  children: React.ReactNode\n}\n\nexport function Marqy({\n  speed = 0.5,\n  direction = 'left',\n  pauseOnHover,\n  manual = false,\n  children,\n  ...rest\n}: MarqyProps): React.ReactElement {\n  const [reps, setReps] = React.useState(1)\n\n  const [container, containerDimensions] = useDimensions()\n  const [item, itemDimensions] = useDimensions()\n\n  const isVertical = direction === 'up' || direction === 'down'\n\n  const getAnimationDuration = React.useCallback(\n    (itemDimension: number) => {\n      return `${((itemDimension ?? 0) * reps) / (100 * speed)}s`\n    },\n    [reps, speed]\n  )\n\n  React.useEffect(() => {\n    if (!isVertical && containerDimensions.width && itemDimensions.width) {\n      setReps(Math.ceil(containerDimensions.width / itemDimensions.width))\n    }\n    if (isVertical && containerDimensions.height && itemDimensions.height) {\n      setReps(Math.ceil(containerDimensions.height / itemDimensions.height))\n    }\n  }, [isVertical, containerDimensions, itemDimensions])\n\n  return (\n    <div\n      ref={container}\n      data-marqy=\"\"\n      data-direction={direction}\n      data-pause-on-hover={pauseOnHover ? '' : null}\n      {...rest}\n    >\n      <div data-marqy-inner=\"\">\n        {new Array(2).fill(0).map((_, clone) => (\n          <div\n            key={clone}\n            data-marqy-content=\"\"\n            {...(manual\n              ? { 'data-marqy-static': getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) }\n              : { style: { animationDuration: getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) } }\n            )}\n          >\n            {new Array(reps).fill(0).map((_, rep) => {\n              const isFirstItem = clone === 0 && rep === 0\n              return (\n                <div\n                  key={rep}\n                  ref={isFirstItem ? item : null}\n                  aria-hidden={!isFirstItem || null}\n                  data-marqy-item=\"\"\n                >\n                  {children}\n                </div>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nfunction useDimensions() {\n  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })\n  const observer = React.useRef<ResizeObserver | null>(null)\n\n  const ref = React.useCallback((node: HTMLElement | null) => {\n    observer.current?.disconnect()\n    if (!node) return\n    observer.current = new ResizeObserver(([entry]) =>\n      setDimensions({\n        width: entry.contentRect.width,\n        height: entry.contentRect.height,\n      })\n    )\n    observer.current.observe(node)\n  }, [])\n\n  return [ref, dimensions] as const\n}\n"],"names":["_excluded","Marqy","_ref","_ref$speed","speed","_ref$direction","direction","pauseOnHover","_ref$manual","manual","children","rest","_objectWithoutPropertiesLoose","_React$useState","React","useState","reps","setReps","_useDimensions","useDimensions","container","containerDimensions","_useDimensions2","item","itemDimensions","isVertical","getAnimationDuration","useCallback","itemDimension","useEffect","width","Math","ceil","height","ref","createElement","Array","fill","map","_","clone","_extends","key","style","animationDuration","rep","isFirstItem","_React$useState2","dimensions","setDimensions","observer","useRef","node","_observer$current","current","disconnect","ResizeObserver","_ref2","entry","contentRect","observe"],"mappings":"gPAAA,IAAAA,EAAA,CAAA,QAAA,YAAA,eAAA,SAAA,YAUgB,SAAAC,EAAKC,OAORC,EAAAD,EANXE,MAAAA,OAAQ,IAAHD,EAAG,GAAGA,EAAAE,EAAAH,EACXI,UAAAA,OAAS,IAAAD,EAAG,OAAMA,EAClBE,EAAYL,EAAZK,aAAYC,EAAAN,EACZO,OAAAA,OAAM,IAAAD,GAAQA,EACdE,EAAQR,EAARQ,SACGC,6IAAIC,CAAAV,EAAAF,GAEPa,EAAwBC,EAAMC,SAAS,GAAhCC,EAAIH,EAAA,GAAEI,EAAOJ,EAAA,GAEpBK,EAAyCC,IAAlCC,EAASF,EAAEG,GAAAA,EAAmBH,EACrC,GAAAI,EAA+BH,IAAxBI,EAAID,EAAEE,GAAAA,EAAcF,EAAA,GAErBG,EAA2B,OAAdnB,GAAoC,SAAdA,EAEnCoB,EAAuBZ,EAAMa,YACjC,SAACC,GACC,OAAYA,MAAAA,EAAAA,EAAiB,GAAKZ,GAAS,IAAMZ,GACnD,GAAA,EACA,CAACY,EAAMZ,IAYT,OATAU,EAAMe,UAAU,YACTJ,GAAcJ,EAAoBS,OAASN,EAAeM,OAC7Db,EAAQc,KAAKC,KAAKX,EAAoBS,MAAQN,EAAeM,QAE3DL,GAAcJ,EAAoBY,QAAUT,EAAeS,QAC7DhB,EAAQc,KAAKC,KAAKX,EAAoBY,OAAST,EAAeS,QAElE,EAAG,CAACR,EAAYJ,EAAqBG,IAGnCV,yBACEoB,IAAKd,EACM,aAAA,oBACKd,EAAS,sBACJC,EAAe,GAAK,MACrCI,GAEJG,EAAAqB,cAAA,MAAA,CAAA,mBAAsB,IACnB,IAAIC,MAAM,GAAGC,KAAK,GAAGC,IAAI,SAACC,EAAGC,GAC5B,OAAA1B,EAAAqB,cAAA,MAAAM,EACEC,CAAAA,IAAKF,EAAK,qBACS,IACd/B,EACD,CAAE,oBAAqBiB,EAAqBD,EAAaD,EAAeS,OAAST,EAAeM,QAChG,CAAEa,MAAO,CAAEC,kBAAmBlB,EAAqBD,EAAaD,EAAeS,OAAST,EAAeM,UAG1G,IAAIM,MAAMpB,GAAMqB,KAAK,GAAGC,IAAI,SAACC,EAAGM,GAC/B,IAAMC,EAAwB,IAAVN,GAAuB,IAARK,EACnC,OACE/B,EAAAqB,cAAA,MAAA,CACEO,IAAKG,EACLX,IAAKY,EAAcvB,EAAO,KAAI,eAChBuB,GAAe,KACb,kBAAA,IAEfpC,EAGP,GACI,IAKhB,CAEA,SAASS,IACP,IAAA4B,EAAoCjC,EAAMC,SAAS,CAAEe,MAAO,EAAGG,OAAQ,IAAhEe,EAAUD,EAAEE,GAAAA,EAAaF,KAC1BG,EAAWpC,EAAMqC,OAA8B,MAcrD,MAAO,CAZKrC,EAAMa,YAAY,SAACyB,GAA4BC,IAAAA,EACzDA,OAAAA,EAAAH,EAASI,UAATD,EAAkBE,aACbH,IACLF,EAASI,QAAU,IAAIE,eAAe,SAAAC,OAAEC,EAAKD,EAC3C,GAAA,OAAAR,EAAc,CACZnB,MAAO4B,EAAMC,YAAY7B,MACzBG,OAAQyB,EAAMC,YAAY1B,QAC1B,GAEJiB,EAASI,QAAQM,QAAQR,GAC3B,EAAG,IAEUJ,EACf"}

package/dist/marqy.js

@@ -1,2 +1,2 @@
-var e=require("react");function n(){var n=e.useState(0),t=n[0],r=n[1],a=e.useState(null),u=a[0],i=a[1],c=e.useRef(null),l=e.useCallback(function(){var e;return null==(e=c.current)?void 0:e.disconnect()},[]),o=e.useCallback(function(){c.current=new ResizeObserver(function(e){return r(e[0].contentRect.width)}),u&&c.current.observe(u)},[u]);return e.useEffect(function(){return o(),function(){return l()}},[l,o]),[i,t]}exports.Marqy=function(t){var r=t.speed,a=void 0===r?.5:r,u=t.direction,i=void 0===u?"left":u,c=t.pauseOnHover,l=t.children,o=function(e,n){if(null==e)return{};var t,r,a={},u=Object.keys(e);for(r=0;r<u.length;r++)n.indexOf(t=u[r])>=0||(a[t]=e[t]);return a}(t,["speed","direction","pauseOnHover","children"]),d=e.useState(1),f=d[0],s=d[1],v=n(),m=v[0],y=v[1],p=n(),h=p[0],b=p[1];return e.useEffect(function(){y&&b&&s(Math.ceil(y/b))},[y,b]),e.createElement("div",Object.assign({ref:m,"data-marqy":"","data-direction":i,"data-pause-on-hover":c?"":null},o),e.createElement("div",{"data-marqy-inner":""},new Array(2).fill(0).map(function(n,t){return e.createElement("div",{key:t,"data-marqy-content":"",style:{animationDuration:(null!=b?b:0)*f/(100*a)+"s"}},new Array(f).fill(0).map(function(n,r){var a=0===t&&0===r;return e.createElement("div",{key:r,ref:a?h:null,"aria-hidden":!a||null,"data-marqy-item":""},l)}))})))};
+function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var t=/*#__PURE__*/e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},n.apply(null,arguments)}var r=["speed","direction","pauseOnHover","manual","children"];function a(){var e=t.useState({width:0,height:0}),n=e[0],r=e[1],a=t.useRef(null);return[t.useCallback(function(e){var t;null==(t=a.current)||t.disconnect(),e&&(a.current=new ResizeObserver(function(e){var t=e[0];return r({width:t.contentRect.width,height:t.contentRect.height})}),a.current.observe(e))},[]),n]}exports.Marqy=function(e){var i=e.speed,u=void 0===i?.5:i,c=e.direction,l=void 0===c?"left":c,o=e.pauseOnHover,d=e.manual,h=void 0!==d&&d,f=e.children,s=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,r),v=t.useState(1),y=v[0],m=v[1],p=a(),w=p[0],g=p[1],O=a(),b=O[0],q=O[1],j="up"===l||"down"===l,E=t.useCallback(function(e){return(null!=e?e:0)*y/(100*u)+"s"},[y,u]);return t.useEffect(function(){!j&&g.width&&q.width&&m(Math.ceil(g.width/q.width)),j&&g.height&&q.height&&m(Math.ceil(g.height/q.height))},[j,g,q]),t.createElement("div",n({ref:w,"data-marqy":"","data-direction":l,"data-pause-on-hover":o?"":null},s),t.createElement("div",{"data-marqy-inner":""},new Array(2).fill(0).map(function(e,r){return t.createElement("div",n({key:r,"data-marqy-content":""},h?{"data-marqy-static":E(j?q.height:q.width)}:{style:{animationDuration:E(j?q.height:q.width)}}),new Array(y).fill(0).map(function(e,n){var a=0===r&&0===n;return t.createElement("div",{key:n,ref:a?b:null,"aria-hidden":!a||null,"data-marqy-item":""},f)}))})))};
 //# sourceMappingURL=marqy.js.map

package/dist/marqy.js.map

@@ -1 +1 @@
-{"version":3,"file":"marqy.js","sources":["../src/marqy.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport declare interface MarqyProps {\n  speed?: number;\n  direction?: 'left' | 'right';\n  pauseOnHover?: boolean;\n  children: React.ReactNode;\n}\n\nexport function Marqy({\n  speed = 0.5,\n  direction = 'left',\n  pauseOnHover,\n  children,\n  ...rest\n}: MarqyProps): JSX.Element {\n  const [reps, setReps] = React.useState(1)\n\n  const [container, containerWidth] = useWidth()\n  const [item, itemWidth] = useWidth()\n\n  React.useEffect(() => {\n    if (containerWidth && itemWidth) {\n      setReps(Math.ceil(containerWidth / itemWidth))\n    }\n  }, [containerWidth, itemWidth])\n\n  return (\n    <div\n      ref={container}\n      data-marqy=\"\"\n      data-direction={direction}\n      data-pause-on-hover={pauseOnHover ? '' : null}\n      {...rest}\n    >\n      <div data-marqy-inner=\"\">\n        {new Array(2).fill(0).map((_, clone) => {\n          return (\n            <div\n              key={clone}\n              data-marqy-content=\"\"\n              style={{\n                animationDuration: `${\n                  ((itemWidth ?? 0) * reps) / (100 * speed)\n                }s`,\n              }}\n            >\n              {new Array(reps).fill(0).map((_, rep) => {\n                const isFirstItem = clone === 0 && rep === 0\n                return (\n                  <div\n                    key={rep}\n                    ref={isFirstItem ? item : null}\n                    aria-hidden={!isFirstItem || null}\n                    data-marqy-item=\"\"\n                  >\n                    {children}\n                  </div>\n                )\n              })}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nfunction useWidth() {\n  const [width, setWidth] = React.useState(0)\n  const [node, setNode] = React.useState<HTMLElement | null>(null)\n  const observer = React.useRef<ResizeObserver | null>(null)\n\n  const disconnect = React.useCallback(() => observer.current?.disconnect(), [])\n\n  const observe = React.useCallback(() => {\n    observer.current = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width))\n    if (node) observer.current.observe(node)\n  }, [node])\n\n  React.useEffect(() => {\n    observe()\n    return () => disconnect()\n  }, [disconnect, observe])\n\n  return [setNode, width] as const\n}\n"],"names":["useWidth","React","width","setWidth","node","setNode","observer","disconnect","current","_observer$current","observe","ResizeObserver","contentRect","speed","direction","pauseOnHover","children","rest","reps","setReps","container","containerWidth","item","itemWidth","Math","ceil","ref","Array","fill","map","_","clone","key","style","animationDuration","rep","isFirstItem"],"mappings":"uBAoEA,SAASA,UACmBC,WAAe,GAAlCC,OAAOC,SACUF,WAAmC,MAApDG,OAAMC,OACPC,EAAWL,SAAoC,MAE/CM,EAAaN,cAAkB,iCAAMK,EAASE,gBAATC,EAAkBF,cAAc,IAErEG,EAAUT,cAAkB,WAChCK,EAASE,QAAU,IAAIG,eAAe,mBAAaR,OAAeS,YAAYV,SAC1EE,GAAME,EAASE,QAAQE,QAAQN,IAClC,CAACA,IAOJ,OALAH,YAAgB,WAEd,OADAS,sBACaH,MACZ,CAACA,EAAYG,IAET,CAACL,EAASH,qCA3EjBW,MAAAA,aAAQ,SACRC,UAAAA,aAAY,SACZC,IAAAA,aACAC,IAAAA,SACGC,0LAEqBhB,WAAe,GAAhCiB,OAAMC,SAEuBnB,IAA7BoB,OAAWC,SACQrB,IAAnBsB,OAAMC,OAQb,OANAtB,YAAgB,WACVoB,GAAkBE,GACpBJ,EAAQK,KAAKC,KAAKJ,EAAiBE,KAEpC,CAACF,EAAgBE,IAGlBtB,qCACEyB,IAAKN,eACM,oBACKN,wBACKC,EAAe,GAAK,MACrCE,GAEJhB,0CAAsB,IACnB,IAAI0B,MAAM,GAAGC,KAAK,GAAGC,IAAI,SAACC,EAAGC,GAC5B,OACE9B,uBACE+B,IAAKD,uBACc,GACnBE,MAAO,CACLC,yBACIX,EAAAA,EAAa,GAAKL,GAAS,IAAML,SAItC,IAAIc,MAAMT,GAAMU,KAAK,GAAGC,IAAI,SAACC,EAAGK,GAC/B,IAAMC,EAAwB,IAAVL,GAAuB,IAARI,EACnC,OACElC,uBACE+B,IAAKG,EACLT,IAAKU,EAAcd,EAAO,oBACZc,GAAe,uBACb,IAEfpB"}
+{"version":3,"file":"marqy.js","sources":["../src/marqy.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport interface MarqyProps extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number\n  direction?: 'left' | 'right' | 'up' | 'down'\n  pauseOnHover?: boolean\n  manual?: boolean\n  children: React.ReactNode\n}\n\nexport function Marqy({\n  speed = 0.5,\n  direction = 'left',\n  pauseOnHover,\n  manual = false,\n  children,\n  ...rest\n}: MarqyProps): React.ReactElement {\n  const [reps, setReps] = React.useState(1)\n\n  const [container, containerDimensions] = useDimensions()\n  const [item, itemDimensions] = useDimensions()\n\n  const isVertical = direction === 'up' || direction === 'down'\n\n  const getAnimationDuration = React.useCallback(\n    (itemDimension: number) => {\n      return `${((itemDimension ?? 0) * reps) / (100 * speed)}s`\n    },\n    [reps, speed]\n  )\n\n  React.useEffect(() => {\n    if (!isVertical && containerDimensions.width && itemDimensions.width) {\n      setReps(Math.ceil(containerDimensions.width / itemDimensions.width))\n    }\n    if (isVertical && containerDimensions.height && itemDimensions.height) {\n      setReps(Math.ceil(containerDimensions.height / itemDimensions.height))\n    }\n  }, [isVertical, containerDimensions, itemDimensions])\n\n  return (\n    <div\n      ref={container}\n      data-marqy=\"\"\n      data-direction={direction}\n      data-pause-on-hover={pauseOnHover ? '' : null}\n      {...rest}\n    >\n      <div data-marqy-inner=\"\">\n        {new Array(2).fill(0).map((_, clone) => (\n          <div\n            key={clone}\n            data-marqy-content=\"\"\n            {...(manual\n              ? { 'data-marqy-static': getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) }\n              : { style: { animationDuration: getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) } }\n            )}\n          >\n            {new Array(reps).fill(0).map((_, rep) => {\n              const isFirstItem = clone === 0 && rep === 0\n              return (\n                <div\n                  key={rep}\n                  ref={isFirstItem ? item : null}\n                  aria-hidden={!isFirstItem || null}\n                  data-marqy-item=\"\"\n                >\n                  {children}\n                </div>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nfunction useDimensions() {\n  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })\n  const observer = React.useRef<ResizeObserver | null>(null)\n\n  const ref = React.useCallback((node: HTMLElement | null) => {\n    observer.current?.disconnect()\n    if (!node) return\n    observer.current = new ResizeObserver(([entry]) =>\n      setDimensions({\n        width: entry.contentRect.width,\n        height: entry.contentRect.height,\n      })\n    )\n    observer.current.observe(node)\n  }, [])\n\n  return [ref, dimensions] as const\n}\n"],"names":["_excluded","useDimensions","_React$useState2","React","useState","width","height","dimensions","setDimensions","observer","useRef","useCallback","node","_observer$current","current","disconnect","ResizeObserver","_ref2","entry","contentRect","observe","_ref","_ref$speed","speed","_ref$direction","direction","pauseOnHover","_ref$manual","manual","children","rest","_objectWithoutPropertiesLoose","_React$useState","reps","setReps","_useDimensions","container","containerDimensions","_useDimensions2","item","itemDimensions","isVertical","getAnimationDuration","itemDimension","useEffect","Math","ceil","ref","createElement","Array","fill","map","_","clone","_extends","key","style","animationDuration","rep","isFirstItem"],"mappings":"6gBAAA,IAAAA,EAAA,CAAA,QAAA,YAAA,eAAA,SAAA,YA+EA,SAASC,IACP,IAAAC,EAAoCC,EAAMC,SAAS,CAAEC,MAAO,EAAGC,OAAQ,IAAhEC,EAAUL,EAAEM,GAAAA,EAAaN,KAC1BO,EAAWN,EAAMO,OAA8B,MAcrD,MAAO,CAZKP,EAAMQ,YAAY,SAACC,GAA4BC,IAAAA,EACzDA,OAAAA,EAAAJ,EAASK,UAATD,EAAkBE,aACbH,IACLH,EAASK,QAAU,IAAIE,eAAe,SAAAC,OAAEC,EAAKD,EAC3C,GAAA,OAAAT,EAAc,CACZH,MAAOa,EAAMC,YAAYd,MACzBC,OAAQY,EAAMC,YAAYb,QAC1B,GAEJG,EAASK,QAAQM,QAAQR,GAC3B,EAAG,IAEUL,EACf,eAtFgB,SAAKc,OAORC,EAAAD,EANXE,MAAAA,OAAQ,IAAHD,EAAG,GAAGA,EAAAE,EAAAH,EACXI,UAAAA,OAAS,IAAAD,EAAG,OAAMA,EAClBE,EAAYL,EAAZK,aAAYC,EAAAN,EACZO,OAAAA,OAAM,IAAAD,GAAQA,EACdE,EAAQR,EAARQ,SACGC,6IAAIC,CAAAV,EAAArB,GAEPgC,EAAwB7B,EAAMC,SAAS,GAAhC6B,EAAID,EAAA,GAAEE,EAAOF,EAAA,GAEpBG,EAAyClC,IAAlCmC,EAASD,EAAEE,GAAAA,EAAmBF,EACrC,GAAAG,EAA+BrC,IAAxBsC,EAAID,EAAEE,GAAAA,EAAcF,EAAA,GAErBG,EAA2B,OAAdhB,GAAoC,SAAdA,EAEnCiB,EAAuBvC,EAAMQ,YACjC,SAACgC,GACC,OAAYA,MAAAA,EAAAA,EAAiB,GAAKV,GAAS,IAAMV,GACnD,GAAA,EACA,CAACU,EAAMV,IAYT,OATApB,EAAMyC,UAAU,YACTH,GAAcJ,EAAoBhC,OAASmC,EAAenC,OAC7D6B,EAAQW,KAAKC,KAAKT,EAAoBhC,MAAQmC,EAAenC,QAE3DoC,GAAcJ,EAAoB/B,QAAUkC,EAAelC,QAC7D4B,EAAQW,KAAKC,KAAKT,EAAoB/B,OAASkC,EAAelC,QAElE,EAAG,CAACmC,EAAYJ,EAAqBG,IAGnCrC,yBACE4C,IAAKX,EACM,aAAA,oBACKX,EAAS,sBACJC,EAAe,GAAK,MACrCI,GAEJ3B,EAAA6C,cAAA,MAAA,CAAA,mBAAsB,IACnB,IAAIC,MAAM,GAAGC,KAAK,GAAGC,IAAI,SAACC,EAAGC,GAC5B,OAAAlD,EAAA6C,cAAA,MAAAM,EACEC,CAAAA,IAAKF,EAAK,qBACS,IACdzB,EACD,CAAE,oBAAqBc,EAAqBD,EAAaD,EAAelC,OAASkC,EAAenC,QAChG,CAAEmD,MAAO,CAAEC,kBAAmBf,EAAqBD,EAAaD,EAAelC,OAASkC,EAAenC,UAG1G,IAAI4C,MAAMhB,GAAMiB,KAAK,GAAGC,IAAI,SAACC,EAAGM,GAC/B,IAAMC,EAAwB,IAAVN,GAAuB,IAARK,EACnC,OACEvD,EAAA6C,cAAA,MAAA,CACEO,IAAKG,EACLX,IAAKY,EAAcpB,EAAO,KAAI,eAChBoB,GAAe,KACb,kBAAA,IAEf9B,EAGP,GACI,IAKhB"}

package/dist/marqy.umd.js

@@ -1,2 +1,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e||self).marqy={},e.react)}(this,function(e,n){function t(){var e=n.useState(0),t=e[0],r=e[1],a=n.useState(null),i=a[0],u=a[1],c=n.useRef(null),o=n.useCallback(function(){var e;return null==(e=c.current)?void 0:e.disconnect()},[]),l=n.useCallback(function(){c.current=new ResizeObserver(function(e){return r(e[0].contentRect.width)}),i&&c.current.observe(i)},[i]);return n.useEffect(function(){return l(),function(){return o()}},[o,l]),[u,t]}e.Marqy=function(e){var r=e.speed,a=void 0===r?.5:r,i=e.direction,u=void 0===i?"left":i,c=e.pauseOnHover,o=e.children,l=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(a[t]=e[t]);return a}(e,["speed","direction","pauseOnHover","children"]),f=n.useState(1),d=f[0],s=f[1],v=t(),y=v[0],m=v[1],p=t(),h=p[0],b=p[1];return n.useEffect(function(){m&&b&&s(Math.ceil(m/b))},[m,b]),n.createElement("div",Object.assign({ref:y,"data-marqy":"","data-direction":u,"data-pause-on-hover":c?"":null},l),n.createElement("div",{"data-marqy-inner":""},new Array(2).fill(0).map(function(e,t){return n.createElement("div",{key:t,"data-marqy-content":"",style:{animationDuration:(null!=b?b:0)*d/(100*a)+"s"}},new Array(d).fill(0).map(function(e,r){var a=0===t&&0===r;return n.createElement("div",{key:r,ref:a?h:null,"aria-hidden":!a||null,"data-marqy-item":""},o)}))})))}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).marqy={},e.react)}(this,function(e,t){function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var r=/*#__PURE__*/n(t);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(null,arguments)}var a=["speed","direction","pauseOnHover","manual","children"];function u(){var e=r.useState({width:0,height:0}),t=e[0],n=e[1],i=r.useRef(null);return[r.useCallback(function(e){var t;null==(t=i.current)||t.disconnect(),e&&(i.current=new ResizeObserver(function(e){var t=e[0];return n({width:t.contentRect.width,height:t.contentRect.height})}),i.current.observe(e))},[]),t]}e.Marqy=function(e){var t=e.speed,n=void 0===t?.5:t,c=e.direction,o=void 0===c?"left":c,l=e.pauseOnHover,d=e.manual,f=void 0!==d&&d,h=e.children,s=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,a),v=r.useState(1),p=v[0],y=v[1],m=u(),g=m[0],w=m[1],b=u(),O=b[0],q=b[1],j="up"===o||"down"===o,E=r.useCallback(function(e){return(null!=e?e:0)*p/(100*n)+"s"},[p,n]);return r.useEffect(function(){!j&&w.width&&q.width&&y(Math.ceil(w.width/q.width)),j&&w.height&&q.height&&y(Math.ceil(w.height/q.height))},[j,w,q]),r.createElement("div",i({ref:g,"data-marqy":"","data-direction":o,"data-pause-on-hover":l?"":null},s),r.createElement("div",{"data-marqy-inner":""},new Array(2).fill(0).map(function(e,t){return r.createElement("div",i({key:t,"data-marqy-content":""},f?{"data-marqy-static":E(j?q.height:q.width)}:{style:{animationDuration:E(j?q.height:q.width)}}),new Array(p).fill(0).map(function(e,n){var i=0===t&&0===n;return r.createElement("div",{key:n,ref:i?O:null,"aria-hidden":!i||null,"data-marqy-item":""},h)}))})))}});
 //# sourceMappingURL=marqy.umd.js.map

package/dist/marqy.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"marqy.umd.js","sources":["../src/marqy.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport declare interface MarqyProps {\n  speed?: number;\n  direction?: 'left' | 'right';\n  pauseOnHover?: boolean;\n  children: React.ReactNode;\n}\n\nexport function Marqy({\n  speed = 0.5,\n  direction = 'left',\n  pauseOnHover,\n  children,\n  ...rest\n}: MarqyProps): JSX.Element {\n  const [reps, setReps] = React.useState(1)\n\n  const [container, containerWidth] = useWidth()\n  const [item, itemWidth] = useWidth()\n\n  React.useEffect(() => {\n    if (containerWidth && itemWidth) {\n      setReps(Math.ceil(containerWidth / itemWidth))\n    }\n  }, [containerWidth, itemWidth])\n\n  return (\n    <div\n      ref={container}\n      data-marqy=\"\"\n      data-direction={direction}\n      data-pause-on-hover={pauseOnHover ? '' : null}\n      {...rest}\n    >\n      <div data-marqy-inner=\"\">\n        {new Array(2).fill(0).map((_, clone) => {\n          return (\n            <div\n              key={clone}\n              data-marqy-content=\"\"\n              style={{\n                animationDuration: `${\n                  ((itemWidth ?? 0) * reps) / (100 * speed)\n                }s`,\n              }}\n            >\n              {new Array(reps).fill(0).map((_, rep) => {\n                const isFirstItem = clone === 0 && rep === 0\n                return (\n                  <div\n                    key={rep}\n                    ref={isFirstItem ? item : null}\n                    aria-hidden={!isFirstItem || null}\n                    data-marqy-item=\"\"\n                  >\n                    {children}\n                  </div>\n                )\n              })}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nfunction useWidth() {\n  const [width, setWidth] = React.useState(0)\n  const [node, setNode] = React.useState<HTMLElement | null>(null)\n  const observer = React.useRef<ResizeObserver | null>(null)\n\n  const disconnect = React.useCallback(() => observer.current?.disconnect(), [])\n\n  const observe = React.useCallback(() => {\n    observer.current = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width))\n    if (node) observer.current.observe(node)\n  }, [node])\n\n  React.useEffect(() => {\n    observe()\n    return () => disconnect()\n  }, [disconnect, observe])\n\n  return [setNode, width] as const\n}\n"],"names":["useWidth","React","width","setWidth","node","setNode","observer","disconnect","current","_observer$current","observe","ResizeObserver","contentRect","speed","direction","pauseOnHover","children","rest","reps","setReps","container","containerWidth","item","itemWidth","Math","ceil","ref","Array","fill","map","_","clone","key","style","animationDuration","rep","isFirstItem"],"mappings":"kQAoEA,SAASA,UACmBC,WAAe,GAAlCC,OAAOC,SACUF,WAAmC,MAApDG,OAAMC,OACPC,EAAWL,SAAoC,MAE/CM,EAAaN,cAAkB,iCAAMK,EAASE,gBAATC,EAAkBF,cAAc,IAErEG,EAAUT,cAAkB,WAChCK,EAASE,QAAU,IAAIG,eAAe,mBAAaR,OAAeS,YAAYV,SAC1EE,GAAME,EAASE,QAAQE,QAAQN,IAClC,CAACA,IAOJ,OALAH,YAAgB,WAEd,OADAS,sBACaH,MACZ,CAACA,EAAYG,IAET,CAACL,EAASH,+BA3EjBW,MAAAA,aAAQ,SACRC,UAAAA,aAAY,SACZC,IAAAA,aACAC,IAAAA,SACGC,0LAEqBhB,WAAe,GAAhCiB,OAAMC,SAEuBnB,IAA7BoB,OAAWC,SACQrB,IAAnBsB,OAAMC,OAQb,OANAtB,YAAgB,WACVoB,GAAkBE,GACpBJ,EAAQK,KAAKC,KAAKJ,EAAiBE,KAEpC,CAACF,EAAgBE,IAGlBtB,qCACEyB,IAAKN,eACM,oBACKN,wBACKC,EAAe,GAAK,MACrCE,GAEJhB,0CAAsB,IACnB,IAAI0B,MAAM,GAAGC,KAAK,GAAGC,IAAI,SAACC,EAAGC,GAC5B,OACE9B,uBACE+B,IAAKD,uBACc,GACnBE,MAAO,CACLC,yBACIX,EAAAA,EAAa,GAAKL,GAAS,IAAML,SAItC,IAAIc,MAAMT,GAAMU,KAAK,GAAGC,IAAI,SAACC,EAAGK,GAC/B,IAAMC,EAAwB,IAAVL,GAAuB,IAARI,EACnC,OACElC,uBACE+B,IAAKG,EACLT,IAAKU,EAAcd,EAAO,oBACZc,GAAe,uBACb,IAEfpB"}
+{"version":3,"file":"marqy.umd.js","sources":["../src/marqy.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport interface MarqyProps extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number\n  direction?: 'left' | 'right' | 'up' | 'down'\n  pauseOnHover?: boolean\n  manual?: boolean\n  children: React.ReactNode\n}\n\nexport function Marqy({\n  speed = 0.5,\n  direction = 'left',\n  pauseOnHover,\n  manual = false,\n  children,\n  ...rest\n}: MarqyProps): React.ReactElement {\n  const [reps, setReps] = React.useState(1)\n\n  const [container, containerDimensions] = useDimensions()\n  const [item, itemDimensions] = useDimensions()\n\n  const isVertical = direction === 'up' || direction === 'down'\n\n  const getAnimationDuration = React.useCallback(\n    (itemDimension: number) => {\n      return `${((itemDimension ?? 0) * reps) / (100 * speed)}s`\n    },\n    [reps, speed]\n  )\n\n  React.useEffect(() => {\n    if (!isVertical && containerDimensions.width && itemDimensions.width) {\n      setReps(Math.ceil(containerDimensions.width / itemDimensions.width))\n    }\n    if (isVertical && containerDimensions.height && itemDimensions.height) {\n      setReps(Math.ceil(containerDimensions.height / itemDimensions.height))\n    }\n  }, [isVertical, containerDimensions, itemDimensions])\n\n  return (\n    <div\n      ref={container}\n      data-marqy=\"\"\n      data-direction={direction}\n      data-pause-on-hover={pauseOnHover ? '' : null}\n      {...rest}\n    >\n      <div data-marqy-inner=\"\">\n        {new Array(2).fill(0).map((_, clone) => (\n          <div\n            key={clone}\n            data-marqy-content=\"\"\n            {...(manual\n              ? { 'data-marqy-static': getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) }\n              : { style: { animationDuration: getAnimationDuration(isVertical ? itemDimensions.height : itemDimensions.width) } }\n            )}\n          >\n            {new Array(reps).fill(0).map((_, rep) => {\n              const isFirstItem = clone === 0 && rep === 0\n              return (\n                <div\n                  key={rep}\n                  ref={isFirstItem ? item : null}\n                  aria-hidden={!isFirstItem || null}\n                  data-marqy-item=\"\"\n                >\n                  {children}\n                </div>\n              )\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nfunction useDimensions() {\n  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 })\n  const observer = React.useRef<ResizeObserver | null>(null)\n\n  const ref = React.useCallback((node: HTMLElement | null) => {\n    observer.current?.disconnect()\n    if (!node) return\n    observer.current = new ResizeObserver(([entry]) =>\n      setDimensions({\n        width: entry.contentRect.width,\n        height: entry.contentRect.height,\n      })\n    )\n    observer.current.observe(node)\n  }, [])\n\n  return [ref, dimensions] as const\n}\n"],"names":["_excluded","useDimensions","_React$useState2","React","useState","width","height","dimensions","setDimensions","observer","useRef","useCallback","node","_observer$current","current","disconnect","ResizeObserver","_ref2","entry","contentRect","observe","_ref","_ref$speed","speed","_ref$direction","direction","pauseOnHover","_ref$manual","manual","children","rest","_objectWithoutPropertiesLoose","_React$useState","reps","setReps","_useDimensions","container","containerDimensions","_useDimensions2","item","itemDimensions","isVertical","getAnimationDuration","itemDimension","useEffect","Math","ceil","ref","createElement","Array","fill","map","_","clone","_extends","key","style","animationDuration","rep","isFirstItem"],"mappings":"gwBAAA,IAAAA,EAAA,CAAA,QAAA,YAAA,eAAA,SAAA,YA+EA,SAASC,IACP,IAAAC,EAAoCC,EAAMC,SAAS,CAAEC,MAAO,EAAGC,OAAQ,IAAhEC,EAAUL,EAAEM,GAAAA,EAAaN,KAC1BO,EAAWN,EAAMO,OAA8B,MAcrD,MAAO,CAZKP,EAAMQ,YAAY,SAACC,GAA4BC,IAAAA,EACzDA,OAAAA,EAAAJ,EAASK,UAATD,EAAkBE,aACbH,IACLH,EAASK,QAAU,IAAIE,eAAe,SAAAC,OAAEC,EAAKD,EAC3C,GAAA,OAAAT,EAAc,CACZH,MAAOa,EAAMC,YAAYd,MACzBC,OAAQY,EAAMC,YAAYb,QAC1B,GAEJG,EAASK,QAAQM,QAAQR,GAC3B,EAAG,IAEUL,EACf,SAtFgB,SAAKc,OAORC,EAAAD,EANXE,MAAAA,OAAQ,IAAHD,EAAG,GAAGA,EAAAE,EAAAH,EACXI,UAAAA,OAAS,IAAAD,EAAG,OAAMA,EAClBE,EAAYL,EAAZK,aAAYC,EAAAN,EACZO,OAAAA,OAAM,IAAAD,GAAQA,EACdE,EAAQR,EAARQ,SACGC,6IAAIC,CAAAV,EAAArB,GAEPgC,EAAwB7B,EAAMC,SAAS,GAAhC6B,EAAID,EAAA,GAAEE,EAAOF,EAAA,GAEpBG,EAAyClC,IAAlCmC,EAASD,EAAEE,GAAAA,EAAmBF,EACrC,GAAAG,EAA+BrC,IAAxBsC,EAAID,EAAEE,GAAAA,EAAcF,EAAA,GAErBG,EAA2B,OAAdhB,GAAoC,SAAdA,EAEnCiB,EAAuBvC,EAAMQ,YACjC,SAACgC,GACC,OAAYA,MAAAA,EAAAA,EAAiB,GAAKV,GAAS,IAAMV,GACnD,GAAA,EACA,CAACU,EAAMV,IAYT,OATApB,EAAMyC,UAAU,YACTH,GAAcJ,EAAoBhC,OAASmC,EAAenC,OAC7D6B,EAAQW,KAAKC,KAAKT,EAAoBhC,MAAQmC,EAAenC,QAE3DoC,GAAcJ,EAAoB/B,QAAUkC,EAAelC,QAC7D4B,EAAQW,KAAKC,KAAKT,EAAoB/B,OAASkC,EAAelC,QAElE,EAAG,CAACmC,EAAYJ,EAAqBG,IAGnCrC,yBACE4C,IAAKX,EACM,aAAA,oBACKX,EAAS,sBACJC,EAAe,GAAK,MACrCI,GAEJ3B,EAAA6C,cAAA,MAAA,CAAA,mBAAsB,IACnB,IAAIC,MAAM,GAAGC,KAAK,GAAGC,IAAI,SAACC,EAAGC,GAC5B,OAAAlD,EAAA6C,cAAA,MAAAM,EACEC,CAAAA,IAAKF,EAAK,qBACS,IACdzB,EACD,CAAE,oBAAqBc,EAAqBD,EAAaD,EAAelC,OAASkC,EAAenC,QAChG,CAAEmD,MAAO,CAAEC,kBAAmBf,EAAqBD,EAAaD,EAAelC,OAASkC,EAAenC,UAG1G,IAAI4C,MAAMhB,GAAMiB,KAAK,GAAGC,IAAI,SAACC,EAAGM,GAC/B,IAAMC,EAAwB,IAAVN,GAAuB,IAARK,EACnC,OACEvD,EAAA6C,cAAA,MAAA,CACEO,IAAKG,EACLX,IAAKY,EAAcpB,EAAO,KAAI,eAChBoB,GAAe,KACb,kBAAA,IAEf9B,EAGP,GACI,IAKhB"}

package/examples/.astro/content-assets.mjs

@@ -0,0 +1 @@
+export default new Map();

package/examples/.astro/content-modules.mjs

@@ -0,0 +1 @@
+export default new Map();

package/examples/.astro/content.d.ts

@@ -0,0 +1,154 @@
+declare module 'astro:content' {
+	export interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof DataEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<DataEntryMap[C]>;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+
+	export type ReferenceDataEntry<
+		C extends CollectionKey,
+		E extends keyof DataEntryMap[C] = string,
+	> = {
+		collection: C;
+		id: E;
+	};
+
+	export type ReferenceLiveEntry<C extends keyof LiveContentConfig['collections']> = {
+		collection: C;
+		id: string;
+	};
+
+	export function getCollection<C extends keyof DataEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof DataEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getLiveCollection<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter?: LiveLoaderCollectionFilterType<C>,
+	): Promise<
+		import('astro').LiveDataCollectionResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>
+	>;
+
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		entry: ReferenceDataEntry<C, E>,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? string extends keyof DataEntryMap[C]
+			? Promise<DataEntryMap[C][E]> | undefined
+			: Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getLiveEntry<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter: string | LiveLoaderEntryFilterType<C>,
+	): Promise<import('astro').LiveDataEntryResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof DataEntryMap>(
+		entry: DataEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function reference<
+		C extends
+			| keyof DataEntryMap
+			// Allow generic `string` to avoid excessive type errors in the config
+			// if `dev` is not running to update as you edit.
+			// Invalid collection names will be caught at build time.
+			| (string & {}),
+	>(
+		collection: C,
+	): import('astro/zod').ZodPipe<
+		import('astro/zod').ZodString,
+		import('astro/zod').ZodTransform<
+			C extends keyof DataEntryMap
+				? {
+						collection: C;
+						id: string;
+					}
+				: never,
+			string
+		>
+	>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof DataEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+	type ExtractLoaderConfig<T> = T extends { loader: infer L } ? L : never;
+	type InferLoaderSchema<
+		C extends keyof DataEntryMap,
+		L = ExtractLoaderConfig<ContentConfig['collections'][C]>,
+	> = L extends { schema: import('astro/zod').ZodSchema }
+		? import('astro/zod').infer<L['schema']>
+		: any;
+
+	type DataEntryMap = {
+		
+	};
+
+	type ExtractLoaderTypes<T> = T extends import('astro/loaders').LiveLoader<
+		infer TData,
+		infer TEntryFilter,
+		infer TCollectionFilter,
+		infer TError
+	>
+		? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError }
+		: { data: never; entryFilter: never; collectionFilter: never; error: never };
+	type ExtractEntryFilterType<T> = ExtractLoaderTypes<T>['entryFilter'];
+	type ExtractCollectionFilterType<T> = ExtractLoaderTypes<T>['collectionFilter'];
+	type ExtractErrorType<T> = ExtractLoaderTypes<T>['error'];
+
+	type LiveLoaderDataType<C extends keyof LiveContentConfig['collections']> =
+		LiveContentConfig['collections'][C]['schema'] extends undefined
+			? ExtractDataType<LiveContentConfig['collections'][C]['loader']>
+			: import('astro/zod').infer<
+					Exclude<LiveContentConfig['collections'][C]['schema'], undefined>
+				>;
+	type LiveLoaderEntryFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractEntryFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderCollectionFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractCollectionFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderErrorType<C extends keyof LiveContentConfig['collections']> = ExtractErrorType<
+		LiveContentConfig['collections'][C]['loader']
+	>;
+
+	export type ContentConfig = typeof import("../src/content.config.js");
+	export type LiveContentConfig = never;
+}

package/examples/.astro/data-store.json

@@ -0,0 +1 @@
+[["Map",1,2],"meta::meta",["Map",3,4,5,6,7,8],"astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":{\"backticks\":true,\"closingQuotes\":{\"double\":\"”\",\"single\":\"’\"},\"dashes\":true,\"ellipses\":true,\"openingQuotes\":{\"double\":\"“\",\"single\":\"‘\"},\"quotes\":true}},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"csp\":false,\"actionBodySizeLimit\":1048576,\"serverIslandBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"prerenderConflictBehavior\":\"warn\",\"fonts\":[{\"name\":\"AkkuratMono\",\"cssVariable\":\"--font-akkurat-mono\",\"provider\":{\"name\":\"local\"},\"fallbacks\":[\"monospace\"],\"options\":{\"variants\":[{\"src\":[\"./src/fonts/Akkurat-Mono.woff2\",\"./src/fonts/Akkurat-Mono.woff\"],\"weight\":500,\"style\":\"normal\"},{\"src\":[\"./src/fonts/Akkurat-Mono-Bold.woff\"],\"weight\":700,\"style\":\"normal\"}]}},{\"name\":\"GrtskPeta\",\"cssVariable\":\"--font-grtsk\",\"provider\":{\"name\":\"local\"},\"options\":{\"variants\":[{\"src\":[\"./src/fonts/Grtsk-Peta-Light.woff2\",\"./src/fonts/Grtsk-Peta-Light.woff\"],\"weight\":300,\"style\":\"normal\"},{\"src\":[\"./src/fonts/Grtsk-Peta-Regular.woff2\",\"./src/fonts/Grtsk-Peta-Regular.woff\"],\"weight\":400,\"style\":\"normal\"},{\"src\":[\"./src/fonts/Grtsk-Peta-Medium.woff2\",\"./src/fonts/Grtsk-Peta-Medium.woff\"],\"weight\":500,\"style\":\"normal\"}]}},{\"name\":\"GrtskTera\",\"cssVariable\":\"--font-grtsk-wide\",\"provider\":{\"name\":\"local\"},\"options\":{\"variants\":[{\"src\":[\"./src/fonts/Grtsk-Tera-Medium.woff2\",\"./src/fonts/Grtsk-Tera-Medium.woff\"],\"weight\":500,\"style\":\"normal\"},{\"src\":[\"./src/fonts/Grtsk-Tera-Bold.woff2\",\"./src/fonts/Grtsk-Tera-Bold.woff\"],\"weight\":700,\"style\":\"normal\"}]}}],\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"chromeDevtoolsWorkspace\":false,\"svgo\":false,\"rustCompiler\":false,\"queuedRendering\":{\"enabled\":false}},\"legacy\":{\"collectionsBackwardsCompat\":false}}","astro-version","6.1.8","content-config-digest","2603162b967e798a"]

package/examples/.astro/fonts.d.ts

@@ -0,0 +1,4 @@
+declare module 'astro:assets' {
+	/** @internal */
+	export type CssVariable = (["--font-akkurat-mono","--font-grtsk","--font-grtsk-wide"])[number];
+}

package/examples/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1776792031407
+	}
+}

package/examples/.astro/types.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="astro/client" />
+/// <reference path="content.d.ts" />
+/// <reference path="fonts.d.ts" />

package/examples/.yarnrc

@@ -0,0 +1 @@
+--install.ignore-engines true