marqy 1.0.3 → 1.1.0

package/dist/core-COOoOGpB.js

@@ -0,0 +1,21 @@
+function r(t, e) {
+  return e > 0 ? Math.ceil(t / e) : 1;
+}
+function i(t, e, n) {
+  return `${(t ?? 0) * e / (100 * n)}s`;
+}
+function o(t, e) {
+  const n = new ResizeObserver(
+    ([c]) => e({
+      width: c.contentRect.width,
+      height: c.contentRect.height
+    })
+  );
+  return n.observe(t), () => n.disconnect();
+}
+export {
+  r as a,
+  o as b,
+  i as c
+};
+//# sourceMappingURL=core-COOoOGpB.js.map

package/dist/core-COOoOGpB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-COOoOGpB.js","sources":["../src/core.ts"],"sourcesContent":["export type MarqyDirection = 'left' | 'right' | 'up' | 'down'\n\nexport interface MarqyDimensions {\n  width: number\n  height: number\n}\n\nexport function calcReps(containerSize: number, itemSize: number): number {\n  return itemSize > 0 ? Math.ceil(containerSize / itemSize) : 1\n}\n\nexport function calcAnimationDuration(\n  itemDimension: number,\n  reps: number,\n  speed: number\n): string {\n  return `${((itemDimension ?? 0) * reps) / (100 * speed)}s`\n}\n\nexport function createResizeObserver(\n  node: Element,\n  callback: (dims: MarqyDimensions) => void\n): () => void {\n  const ro = new ResizeObserver(([entry]) =>\n    callback({\n      width: entry.contentRect.width,\n      height: entry.contentRect.height,\n    })\n  )\n  ro.observe(node)\n  return () => ro.disconnect()\n}\n"],"names":["calcReps","containerSize","itemSize","calcAnimationDuration","itemDimension","reps","speed","createResizeObserver","node","callback","ro","entry"],"mappings":"AAOO,SAASA,EAASC,GAAuBC,GAA0B;AACxE,SAAOA,IAAW,IAAI,KAAK,KAAKD,IAAgBC,CAAQ,IAAI;AAC9D;AAEO,SAASC,EACdC,GACAC,GACAC,GACQ;AACR,SAAO,IAAKF,KAAiB,KAAKC,KAAS,MAAMC,EAAM;AACzD;AAEO,SAASC,EACdC,GACAC,GACY;AACZ,QAAMC,IAAK,IAAI;AAAA,IAAe,CAAC,CAACC,CAAK,MACnCF,EAAS;AAAA,MACP,OAAOE,EAAM,YAAY;AAAA,MACzB,QAAQA,EAAM,YAAY;AAAA,IAAA,CAC3B;AAAA,EAAA;AAEH,SAAAD,EAAG,QAAQF,CAAI,GACR,MAAME,EAAG,WAAA;AAClB;"}

package/dist/core-CuZGUfsl.cjs

@@ -0,0 +1,2 @@
+"use strict";function r(t,e){return e>0?Math.ceil(t/e):1}function i(t,e,c){return`${(t??0)*e/(100*c)}s`}function s(t,e){const c=new ResizeObserver(([n])=>e({width:n.contentRect.width,height:n.contentRect.height}));return c.observe(t),()=>c.disconnect()}exports.calcAnimationDuration=i;exports.calcReps=r;exports.createResizeObserver=s;
+//# sourceMappingURL=core-CuZGUfsl.cjs.map

package/dist/core-CuZGUfsl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-CuZGUfsl.cjs","sources":["../src/core.ts"],"sourcesContent":["export type MarqyDirection = 'left' | 'right' | 'up' | 'down'\n\nexport interface MarqyDimensions {\n  width: number\n  height: number\n}\n\nexport function calcReps(containerSize: number, itemSize: number): number {\n  return itemSize > 0 ? Math.ceil(containerSize / itemSize) : 1\n}\n\nexport function calcAnimationDuration(\n  itemDimension: number,\n  reps: number,\n  speed: number\n): string {\n  return `${((itemDimension ?? 0) * reps) / (100 * speed)}s`\n}\n\nexport function createResizeObserver(\n  node: Element,\n  callback: (dims: MarqyDimensions) => void\n): () => void {\n  const ro = new ResizeObserver(([entry]) =>\n    callback({\n      width: entry.contentRect.width,\n      height: entry.contentRect.height,\n    })\n  )\n  ro.observe(node)\n  return () => ro.disconnect()\n}\n"],"names":["calcReps","containerSize","itemSize","calcAnimationDuration","itemDimension","reps","speed","createResizeObserver","node","callback","ro","entry"],"mappings":"aAOO,SAASA,EAASC,EAAuBC,EAA0B,CACxE,OAAOA,EAAW,EAAI,KAAK,KAAKD,EAAgBC,CAAQ,EAAI,CAC9D,CAEO,SAASC,EACdC,EACAC,EACAC,EACQ,CACR,MAAO,IAAKF,GAAiB,GAAKC,GAAS,IAAMC,EAAM,GACzD,CAEO,SAASC,EACdC,EACAC,EACY,CACZ,MAAMC,EAAK,IAAI,eAAe,CAAC,CAACC,CAAK,IACnCF,EAAS,CACP,MAAOE,EAAM,YAAY,MACzB,OAAQA,EAAM,YAAY,MAAA,CAC3B,CAAA,EAEH,OAAAD,EAAG,QAAQF,CAAI,EACR,IAAME,EAAG,WAAA,CAClB"}

package/dist/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./react.cjs.js");exports.Marqy=e.Marqy;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.d.ts

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

package/dist/index.esm.js

@@ -0,0 +1,5 @@
+import { Marqy as a } from "./react.esm.js";
+export {
+  a as Marqy
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/marqy.css

@@ -1,3 +1,7 @@
+marqy-loop {
+  display: block;
+}
+
 [data-marqy] {
   position: relative;
   width: 100%;

package/dist/react.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),v=require("react"),d=require("./core-CuZGUfsl.cjs");function D(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(i,e,a.get?a:{enumerable:!0,get:()=>t[e]})}}return i.default=t,Object.freeze(i)}const r=D(v);function O({speed:t=.5,direction:i="left",pauseOnHover:e,manual:a=!1,children:o,...u}){const[h,f]=r.useState(1),[j,s]=w(),[q,n]=w(),c=i==="up"||i==="down",m=r.useCallback(g=>d.calcAnimationDuration(g,h,t),[h,t]);return r.useEffect(()=>{!c&&s.width&&n.width&&f(d.calcReps(s.width,n.width)),c&&s.height&&n.height&&f(d.calcReps(s.height,n.height))},[c,s,n]),l.jsx("div",{ref:j,"data-marqy":"","data-direction":i,"data-pause-on-hover":e?"":null,...u,children:l.jsx("div",{"data-marqy-inner":"",children:new Array(2).fill(0).map((g,y)=>l.jsx("div",{"data-marqy-content":"",...a?{"data-marqy-static":m(c?n.height:n.width)}:{style:{animationDuration:m(c?n.height:n.width)}},children:new Array(h).fill(0).map((R,p)=>{const b=y===0&&p===0;return l.jsx("div",{ref:b?q:null,"aria-hidden":!b||void 0,"data-marqy-item":"",children:o},p)})},y))})})}function w(){const[t,i]=r.useState({width:0,height:0}),e=r.useRef(null);return[r.useCallback(o=>{var u;(u=e.current)==null||u.call(e),o&&(e.current=d.createResizeObserver(o,i))},[]),t]}exports.Marqy=O;
+//# sourceMappingURL=react.cjs.js.map

package/dist/react.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.cjs.js","sources":["../src/react/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  type MarqyDirection,\n  type MarqyDimensions,\n  calcReps,\n  calcAnimationDuration,\n  createResizeObserver,\n} from '../core'\n\nexport type { MarqyDirection }\n\nexport interface MarqyProps extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number\n  direction?: MarqyDirection\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) => calcAnimationDuration(itemDimension, reps, speed),\n    [reps, speed]\n  )\n\n  React.useEffect(() => {\n    if (!isVertical && containerDimensions.width && itemDimensions.width) {\n      setReps(calcReps(containerDimensions.width, itemDimensions.width))\n    }\n    if (isVertical && containerDimensions.height && itemDimensions.height) {\n      setReps(calcReps(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 || undefined}\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<MarqyDimensions>({ width: 0, height: 0 })\n  const cleanupRef = React.useRef<(() => void) | null>(null)\n\n  const ref = React.useCallback((node: HTMLElement | null) => {\n    cleanupRef.current?.()\n    if (!node) return\n    cleanupRef.current = createResizeObserver(node, setDimensions)\n  }, [])\n\n  return [ref, dimensions] as const\n}\n"],"names":["Marqy","speed","direction","pauseOnHover","manual","children","rest","reps","setReps","React","container","containerDimensions","useDimensions","item","itemDimensions","isVertical","getAnimationDuration","itemDimension","calcAnimationDuration","calcReps","jsx","_","clone","rep","isFirstItem","dimensions","setDimensions","cleanupRef","node","_a","createResizeObserver"],"mappings":"mcAmBO,SAASA,EAAM,CACpB,MAAAC,EAAQ,GACR,UAAAC,EAAY,OACZ,aAAAC,EACA,OAAAC,EAAS,GACT,SAAAC,EACA,GAAGC,CACL,EAAmC,CACjC,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAM,SAAS,CAAC,EAElC,CAACC,EAAWC,CAAmB,EAAIC,EAAA,EACnC,CAACC,EAAMC,CAAc,EAAIF,EAAA,EAEzBG,EAAab,IAAc,MAAQA,IAAc,OAEjDc,EAAuBP,EAAM,YAChCQ,GAA0BC,EAAAA,sBAAsBD,EAAeV,EAAMN,CAAK,EAC3E,CAACM,EAAMN,CAAK,CAAA,EAGdQ,OAAAA,EAAM,UAAU,IAAM,CAChB,CAACM,GAAcJ,EAAoB,OAASG,EAAe,OAC7DN,EAAQW,EAAAA,SAASR,EAAoB,MAAOG,EAAe,KAAK,CAAC,EAE/DC,GAAcJ,EAAoB,QAAUG,EAAe,QAC7DN,EAAQW,EAAAA,SAASR,EAAoB,OAAQG,EAAe,MAAM,CAAC,CAEvE,EAAG,CAACC,EAAYJ,EAAqBG,CAAc,CAAC,EAGlDM,EAAAA,IAAC,MAAA,CACC,IAAKV,EACL,aAAW,GACX,iBAAgBR,EAChB,sBAAqBC,EAAe,GAAK,KACxC,GAAGG,EAEJ,SAAAc,EAAAA,IAAC,MAAA,CAAI,mBAAiB,GACnB,aAAI,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACC,EAAGC,IAC5BF,EAAAA,IAAC,MAAA,CAEC,qBAAmB,GAClB,GAAIhB,EACD,CAAE,oBAAqBY,EAAqBD,EAAaD,EAAe,OAASA,EAAe,KAAK,CAAA,EACrG,CAAE,MAAO,CAAE,kBAAmBE,EAAqBD,EAAaD,EAAe,OAASA,EAAe,KAAK,EAAE,EAGjH,SAAA,IAAI,MAAMP,CAAI,EAAE,KAAK,CAAC,EAAE,IAAI,CAACc,EAAGE,IAAQ,CACvC,MAAMC,EAAcF,IAAU,GAAKC,IAAQ,EAC3C,OACEH,EAAAA,IAAC,MAAA,CAEC,IAAKI,EAAcX,EAAO,KAC1B,cAAa,CAACW,GAAe,OAC7B,kBAAgB,GAEf,SAAAnB,CAAA,EALIkB,CAAA,CAQX,CAAC,CAAA,EAnBID,CAAA,CAqBR,CAAA,CACH,CAAA,CAAA,CAGN,CAEA,SAASV,GAAgB,CACvB,KAAM,CAACa,EAAYC,CAAa,EAAIjB,EAAM,SAA0B,CAAE,MAAO,EAAG,OAAQ,EAAG,EACrFkB,EAAalB,EAAM,OAA4B,IAAI,EAQzD,MAAO,CANKA,EAAM,YAAamB,GAA6B,QAC1DC,EAAAF,EAAW,UAAX,MAAAE,EAAA,KAAAF,GACKC,IACLD,EAAW,QAAUG,uBAAqBF,EAAMF,CAAa,EAC/D,EAAG,CAAA,CAAE,EAEQD,CAAU,CACzB"}

package/dist/react.d.ts

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

package/dist/react.esm.js

@@ -0,0 +1,60 @@
+import { jsx as h } from "react/jsx-runtime";
+import * as e from "react";
+import { c as b, a as p, b as A } from "./core-COOoOGpB.js";
+function C({
+  speed: s = 0.5,
+  direction: a = "left",
+  pauseOnHover: i,
+  manual: d = !1,
+  children: o,
+  ...c
+}) {
+  const [m, u] = e.useState(1), [D, n] = v(), [q, t] = v(), r = a === "up" || a === "down", l = e.useCallback(
+    (f) => b(f, m, s),
+    [m, s]
+  );
+  return e.useEffect(() => {
+    !r && n.width && t.width && u(p(n.width, t.width)), r && n.height && t.height && u(p(n.height, t.height));
+  }, [r, n, t]), /* @__PURE__ */ h(
+    "div",
+    {
+      ref: D,
+      "data-marqy": "",
+      "data-direction": a,
+      "data-pause-on-hover": i ? "" : null,
+      ...c,
+      children: /* @__PURE__ */ h("div", { "data-marqy-inner": "", children: new Array(2).fill(0).map((f, w) => /* @__PURE__ */ h(
+        "div",
+        {
+          "data-marqy-content": "",
+          ...d ? { "data-marqy-static": l(r ? t.height : t.width) } : { style: { animationDuration: l(r ? t.height : t.width) } },
+          children: new Array(m).fill(0).map((R, y) => {
+            const g = w === 0 && y === 0;
+            return /* @__PURE__ */ h(
+              "div",
+              {
+                ref: g ? q : null,
+                "aria-hidden": !g || void 0,
+                "data-marqy-item": "",
+                children: o
+              },
+              y
+            );
+          })
+        },
+        w
+      )) })
+    }
+  );
+}
+function v() {
+  const [s, a] = e.useState({ width: 0, height: 0 }), i = e.useRef(null);
+  return [e.useCallback((o) => {
+    var c;
+    (c = i.current) == null || c.call(i), o && (i.current = A(o, a));
+  }, []), s];
+}
+export {
+  C as Marqy
+};
+//# sourceMappingURL=react.esm.js.map

package/dist/react.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.esm.js","sources":["../src/react/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  type MarqyDirection,\n  type MarqyDimensions,\n  calcReps,\n  calcAnimationDuration,\n  createResizeObserver,\n} from '../core'\n\nexport type { MarqyDirection }\n\nexport interface MarqyProps extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number\n  direction?: MarqyDirection\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) => calcAnimationDuration(itemDimension, reps, speed),\n    [reps, speed]\n  )\n\n  React.useEffect(() => {\n    if (!isVertical && containerDimensions.width && itemDimensions.width) {\n      setReps(calcReps(containerDimensions.width, itemDimensions.width))\n    }\n    if (isVertical && containerDimensions.height && itemDimensions.height) {\n      setReps(calcReps(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 || undefined}\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<MarqyDimensions>({ width: 0, height: 0 })\n  const cleanupRef = React.useRef<(() => void) | null>(null)\n\n  const ref = React.useCallback((node: HTMLElement | null) => {\n    cleanupRef.current?.()\n    if (!node) return\n    cleanupRef.current = createResizeObserver(node, setDimensions)\n  }, [])\n\n  return [ref, dimensions] as const\n}\n"],"names":["Marqy","speed","direction","pauseOnHover","manual","children","rest","reps","setReps","React","container","containerDimensions","useDimensions","item","itemDimensions","isVertical","getAnimationDuration","itemDimension","calcAnimationDuration","calcReps","jsx","_","clone","rep","isFirstItem","dimensions","setDimensions","cleanupRef","node","_a","createResizeObserver"],"mappings":";;;AAmBO,SAASA,EAAM;AAAA,EACpB,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,cAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,GAAGC;AACL,GAAmC;AACjC,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAM,SAAS,CAAC,GAElC,CAACC,GAAWC,CAAmB,IAAIC,EAAA,GACnC,CAACC,GAAMC,CAAc,IAAIF,EAAA,GAEzBG,IAAab,MAAc,QAAQA,MAAc,QAEjDc,IAAuBP,EAAM;AAAA,IACjC,CAACQ,MAA0BC,EAAsBD,GAAeV,GAAMN,CAAK;AAAA,IAC3E,CAACM,GAAMN,CAAK;AAAA,EAAA;AAGd,SAAAQ,EAAM,UAAU,MAAM;AACpB,IAAI,CAACM,KAAcJ,EAAoB,SAASG,EAAe,SAC7DN,EAAQW,EAASR,EAAoB,OAAOG,EAAe,KAAK,CAAC,GAE/DC,KAAcJ,EAAoB,UAAUG,EAAe,UAC7DN,EAAQW,EAASR,EAAoB,QAAQG,EAAe,MAAM,CAAC;AAAA,EAEvE,GAAG,CAACC,GAAYJ,GAAqBG,CAAc,CAAC,GAGlD,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKV;AAAA,MACL,cAAW;AAAA,MACX,kBAAgBR;AAAA,MAChB,uBAAqBC,IAAe,KAAK;AAAA,MACxC,GAAGG;AAAA,MAEJ,UAAA,gBAAAc,EAAC,OAAA,EAAI,oBAAiB,IACnB,cAAI,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACC,GAAGC,MAC5B,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,sBAAmB;AAAA,UAClB,GAAIhB,IACD,EAAE,qBAAqBY,EAAqBD,IAAaD,EAAe,SAASA,EAAe,KAAK,EAAA,IACrG,EAAE,OAAO,EAAE,mBAAmBE,EAAqBD,IAAaD,EAAe,SAASA,EAAe,KAAK,IAAE;AAAA,UAGjH,UAAA,IAAI,MAAMP,CAAI,EAAE,KAAK,CAAC,EAAE,IAAI,CAACc,GAAGE,MAAQ;AACvC,kBAAMC,IAAcF,MAAU,KAAKC,MAAQ;AAC3C,mBACE,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,KAAKI,IAAcX,IAAO;AAAA,gBAC1B,eAAa,CAACW,KAAe;AAAA,gBAC7B,mBAAgB;AAAA,gBAEf,UAAAnB;AAAA,cAAA;AAAA,cALIkB;AAAA,YAAA;AAAA,UAQX,CAAC;AAAA,QAAA;AAAA,QAnBID;AAAA,MAAA,CAqBR,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAASV,IAAgB;AACvB,QAAM,CAACa,GAAYC,CAAa,IAAIjB,EAAM,SAA0B,EAAE,OAAO,GAAG,QAAQ,GAAG,GACrFkB,IAAalB,EAAM,OAA4B,IAAI;AAQzD,SAAO,CANKA,EAAM,YAAY,CAACmB,MAA6B;;AAE1D,KADAC,IAAAF,EAAW,YAAX,QAAAE,EAAA,KAAAF,IACKC,MACLD,EAAW,UAAUG,EAAqBF,GAAMF,CAAa;AAAA,EAC/D,GAAG,CAAA,CAAE,GAEQD,CAAU;AACzB;"}

package/dist/svelte.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("svelte/internal/disclose-version");const z=require("svelte/internal/client"),p=require("./core-CuZGUfsl.cjs");function x(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const i in a)if(i!=="default"){const n=Object.getOwnPropertyDescriptor(a,i);Object.defineProperty(t,i,n.get?n:{enumerable:!0,get:()=>a[i]})}}return t.default=a,Object.freeze(t)}const e=x(z);var M=e.from_html('<div data-marqy-item=""><!></div>'),H=e.from_html("<div></div>"),P=e.from_html('<div><div data-marqy-inner=""></div></div>');function R(a,t){e.push(t,!0);let i=e.prop(t,"speed",3,.5),n=e.prop(t,"direction",3,"left"),O=e.prop(t,"pauseOnHover",3,!1),q=e.prop(t,"manual",3,!1),w=e.rest_props(t,["$$slots","$$events","$$legacy","speed","direction","pauseOnHover","manual","children"]),l=e.state(null),v=e.state(e.proxy({width:0,height:0})),o=e.state(e.proxy({width:0,height:0})),h=e.state(1);const m=e.derived(()=>n()==="up"||n()==="down"),y=e.derived(()=>p.calcAnimationDuration(e.get(m)?e.get(o).height:e.get(o).width,e.get(h),i()));e.user_effect(()=>{if(e.get(l))return p.createResizeObserver(e.get(l),r=>{e.set(v,r,!0)})}),e.user_effect(()=>{const r=e.get(m)?e.get(v).height:e.get(v).width,d=e.get(m)?e.get(o).height:e.get(o).width;e.set(h,p.calcReps(r,d),!0)});function _(r,d){return d?{destroy:p.createResizeObserver(r,f=>{e.set(o,f,!0)})}:{}}var c=P();e.attribute_effect(c,()=>({"data-marqy":"","data-direction":n(),"data-pause-on-hover":O()?"":void 0,...w}));var b=e.child(c);e.each(b,20,()=>[0,1],e.index,(r,d)=>{var s=H();e.attribute_effect(s,()=>({"data-marqy-content":"",...q()?{"data-marqy-static":e.get(y)}:{style:`animation-duration: ${e.get(y)}`}})),e.each(s,21,()=>Array.from({length:e.get(h)},(f,g)=>g),e.index,(f,g)=>{var u=M(),D=e.child(u);e.snippet(D,()=>t.children),e.reset(u),e.action(u,(S,j)=>_==null?void 0:_(S,j),()=>d===0&&e.get(g)===0),e.template_effect(()=>e.set_attribute(u,"aria-hidden",!(d===0&&e.get(g)===0)||void 0)),e.append(f,u)}),e.reset(s),e.append(r,s)}),e.reset(b),e.reset(c),e.bind_this(c,r=>e.set(l,r),()=>e.get(l)),e.append(a,c),e.pop()}exports.Marqy=R;
+//# sourceMappingURL=svelte.cjs.js.map

package/dist/svelte.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.cjs.js","sources":["../src/svelte/Marqy.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import {\n    type MarqyDirection,\n    calcReps,\n    calcAnimationDuration,\n    createResizeObserver,\n  } from '../core'\n  import type { Snippet } from 'svelte'\n\n  interface Props {\n    speed?: number\n    direction?: MarqyDirection\n    pauseOnHover?: boolean\n    manual?: boolean\n    children: Snippet\n    [key: string]: unknown\n  }\n\n  let {\n    speed = 0.5,\n    direction = 'left' as MarqyDirection,\n    pauseOnHover = false,\n    manual = false,\n    children,\n    ...rest\n  }: Props = $props()\n\n  let containerEl = $state<HTMLElement | null>(null)\n  let containerDims = $state({ width: 0, height: 0 })\n  let itemDims = $state({ width: 0, height: 0 })\n  let reps = $state(1)\n\n  const isVertical = $derived(direction === 'up' || direction === 'down')\n\n  const animationDuration = $derived(\n    calcAnimationDuration(\n      isVertical ? itemDims.height : itemDims.width,\n      reps,\n      speed\n    )\n  )\n\n  $effect(() => {\n    if (!containerEl) return\n    return createResizeObserver(containerEl, (d) => {\n      containerDims = d\n    })\n  })\n\n  $effect(() => {\n    const cSize = isVertical ? containerDims.height : containerDims.width\n    const iSize = isVertical ? itemDims.height : itemDims.width\n    reps = calcReps(cSize, iSize)\n  })\n\n  function observeFirstItem(node: HTMLElement, isFirst: boolean) {\n    if (!isFirst) return {}\n    const cleanup = createResizeObserver(node, (d) => {\n      itemDims = d\n    })\n    return { destroy: cleanup }\n  }\n</script>\n\n<div\n  bind:this={containerEl}\n  data-marqy=\"\"\n  data-direction={direction}\n  data-pause-on-hover={pauseOnHover ? '' : undefined}\n  {...rest}\n>\n  <div data-marqy-inner=\"\">\n    {#each [0, 1] as clone}\n      <div\n        data-marqy-content=\"\"\n        {...manual\n          ? { 'data-marqy-static': animationDuration }\n          : { style: `animation-duration: ${animationDuration}` }}\n      >\n        {#each Array.from({ length: reps }, (_, i) => i) as rep}\n          <div\n            use:observeFirstItem={clone === 0 && rep === 0}\n            aria-hidden={!(clone === 0 && rep === 0) || undefined}\n            data-marqy-item=\"\"\n          >\n            {@render children()}\n          </div>\n        {/each}\n      </div>\n    {/each}\n  </div>\n</div>\n"],"names":["speed","direction","pauseOnHover","manual","rest","$","$$props","containerEl","containerDims","itemDims","reps","isVertical","animationDuration","calcAnimationDuration","createResizeObserver","d","cSize","iSize","calcReps","observeFirstItem","node","isFirst","div","root","div_1","clone","div_2","root_1","_","i","rep","div_3","root_2","$$value"],"mappings":"goBAAA,cAmBI,IAAAA,qBAAQ,EAAG,EACXC,yBAAY,MAAM,EAClBC,4BAAe,EAAK,EACpBC,sBAAS,EAAK,EAEXC,EAAIC,EAAA,WAAAC,EAAA,0FAGLC,EAAcF,EAAA,MAA2B,IAAI,EAC7CG,EAAgBH,QAAMA,EAAA,MAAA,CAAG,MAAO,EAAG,OAAQ,CAAC,CAAA,CAAA,EAC5CI,EAAWJ,QAAMA,EAAA,MAAA,CAAG,MAAO,EAAG,OAAQ,CAAC,CAAA,CAAA,EACvCK,EAAOL,EAAA,MAAO,CAAC,EAEb,MAAAM,gBAAsBV,EAAS,IAAK,MAAQA,EAAS,IAAK,MAAM,EAEhEW,EAAiBP,EAAA,QAAA,IACrBQ,EAAAA,sBAAqBR,EAAA,IACnBM,CAAU,QAAGF,CAAQ,EAAC,OAAMJ,EAAA,IAAGI,CAAQ,EAAC,MAAKJ,EAAA,IAC7CK,CAAI,EACJV,EAAK,CAAA,CAAA,EAITK,EAAA,gBAAc,UACPE,CAAW,EACT,OAAAO,EAAAA,qBAAoBT,EAAA,IAACE,CAAW,EAAGQ,GAAM,CAC9CV,EAAA,IAAAG,EAAgBO,EAAC,EAAA,CACnB,CAAC,CACH,CAAC,EAEDV,EAAA,gBAAc,CACN,MAAAW,QAAQL,CAAU,EAAGN,EAAA,IAAAG,CAAa,EAAC,OAASH,EAAA,IAAAG,CAAa,EAAC,MAC1DS,EAAKZ,EAAA,IAAGM,CAAU,EAAAN,EAAA,IAAGI,CAAQ,EAAC,OAAMJ,EAAA,IAAGI,CAAQ,EAAC,MACtDJ,EAAA,IAAAK,EAAOQ,EAAAA,SAASF,EAAOC,CAAK,EAAA,EAAA,CAC9B,CAAC,EAEQ,SAAAE,EAAiBC,EAAmBC,EAAkB,QACxDA,EAII,CAAA,QAHOP,EAAAA,qBAAqBM,EAAOL,GAAM,CAChDV,EAAA,IAAAI,EAAWM,EAAC,EAAA,CACd,CAAC,CACwB,EAJb,CAAA,CAKd,KAGDO,EAAGC,EAAA,qBAAHD,EAAG,KAAA,kCAGcrB,EAAS,wBACJC,IAAe,GAAK,UACrCE,KAEH,IAAAoB,UAPFF,CAAG,EAODjB,EAAA,KAAAmB,EAAG,GAAA,IAAA,CACM,EAAG,CAAC,aAAKC,IAAK,KACnBC,EAAGC,EAAA,qBAAHD,EAAG,KAAA,4BAEEvB,EAAM,EACJ,CAAA,0BAAqBS,CAAiB,CAAA,EACtC,CAAA,mCAA8BA,CAAiB,CAAA,EAAA,KAJtDP,EAAA,KAAAqB,EAAG,GAAA,IAMK,MAAM,MAAO,OAAMrB,EAAA,IAAEK,CAAI,GAAA,CAAKkB,EAAGC,IAAMA,CAAC,aAAKC,IAAG,KACpDC,EAAGC,EAAA,YAAHD,CAAG,sCAAHA,CAAG,EAAH1B,EAAA,OAAA0B,mCACuBN,IAAU,GAACpB,EAAA,IAAIyB,CAAG,IAAK,CAAC,wCAD/CC,EAAG,cAAA,EAEaN,IAAU,SAAKK,CAAG,IAAK,IAAM,MAAS,CAAA,aAFtDC,CAAG,YAPPL,CAAG,aAAHA,CAAG,YAFPF,CAAG,UAPLF,CAAG,cAAHA,EAAGW,GAAA5B,EAAA,IACSE,EAAW0B,CAAA,EAAA,IAAA5B,EAAA,IAAXE,CAAW,CAAA,aADvBe,CAAG,SAFI"}

package/dist/svelte.d.ts

@@ -0,0 +1,7 @@
+import { SvelteComponent as Marqy } from 'svelte';
+
+export { Marqy }
+
+export declare type MarqyDirection = 'left' | 'right' | 'up' | 'down';
+
+export { }

package/dist/svelte.esm.js

@@ -0,0 +1,54 @@
+import "svelte/internal/disclose-version";
+import * as e from "svelte/internal/client";
+import { c as H, b as _, a as A } from "./core-COOoOGpB.js";
+var R = e.from_html('<div data-marqy-item=""><!></div>'), S = e.from_html("<div></div>"), E = e.from_html('<div><div data-marqy-inner=""></div></div>');
+function j(y, a) {
+  e.push(a, !0);
+  let q = e.prop(a, "speed", 3, 0.5), l = e.prop(a, "direction", 3, "left"), w = e.prop(a, "pauseOnHover", 3, !1), b = e.prop(a, "manual", 3, !1), x = e.rest_props(a, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "speed",
+    "direction",
+    "pauseOnHover",
+    "manual",
+    "children"
+  ]), s = e.state(null), h = e.state(e.proxy({ width: 0, height: 0 })), r = e.state(e.proxy({ width: 0, height: 0 })), m = e.state(1);
+  const p = e.derived(() => l() === "up" || l() === "down"), f = e.derived(() => H(e.get(p) ? e.get(r).height : e.get(r).width, e.get(m), q()));
+  e.user_effect(() => {
+    if (e.get(s))
+      return _(e.get(s), (t) => {
+        e.set(h, t, !0);
+      });
+  }), e.user_effect(() => {
+    const t = e.get(p) ? e.get(h).height : e.get(h).width, i = e.get(p) ? e.get(r).height : e.get(r).width;
+    e.set(m, A(t, i), !0);
+  });
+  function v(t, i) {
+    return i ? { destroy: _(t, (c) => {
+      e.set(r, c, !0);
+    }) } : {};
+  }
+  var n = E();
+  e.attribute_effect(n, () => ({
+    "data-marqy": "",
+    "data-direction": l(),
+    "data-pause-on-hover": w() ? "" : void 0,
+    ...x
+  }));
+  var g = e.child(n);
+  e.each(g, 20, () => [0, 1], e.index, (t, i) => {
+    var d = S();
+    e.attribute_effect(d, () => ({
+      "data-marqy-content": "",
+      ...b() ? { "data-marqy-static": e.get(f) } : { style: `animation-duration: ${e.get(f)}` }
+    })), e.each(d, 21, () => Array.from({ length: e.get(m) }, (c, u) => u), e.index, (c, u) => {
+      var o = R(), D = e.child(o);
+      e.snippet(D, () => a.children), e.reset(o), e.action(o, (O, z) => v == null ? void 0 : v(O, z), () => i === 0 && e.get(u) === 0), e.template_effect(() => e.set_attribute(o, "aria-hidden", !(i === 0 && e.get(u) === 0) || void 0)), e.append(c, o);
+    }), e.reset(d), e.append(t, d);
+  }), e.reset(g), e.reset(n), e.bind_this(n, (t) => e.set(s, t), () => e.get(s)), e.append(y, n), e.pop();
+}
+export {
+  j as Marqy
+};
+//# sourceMappingURL=svelte.esm.js.map

package/dist/svelte.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.esm.js","sources":["../src/svelte/Marqy.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import {\n    type MarqyDirection,\n    calcReps,\n    calcAnimationDuration,\n    createResizeObserver,\n  } from '../core'\n  import type { Snippet } from 'svelte'\n\n  interface Props {\n    speed?: number\n    direction?: MarqyDirection\n    pauseOnHover?: boolean\n    manual?: boolean\n    children: Snippet\n    [key: string]: unknown\n  }\n\n  let {\n    speed = 0.5,\n    direction = 'left' as MarqyDirection,\n    pauseOnHover = false,\n    manual = false,\n    children,\n    ...rest\n  }: Props = $props()\n\n  let containerEl = $state<HTMLElement | null>(null)\n  let containerDims = $state({ width: 0, height: 0 })\n  let itemDims = $state({ width: 0, height: 0 })\n  let reps = $state(1)\n\n  const isVertical = $derived(direction === 'up' || direction === 'down')\n\n  const animationDuration = $derived(\n    calcAnimationDuration(\n      isVertical ? itemDims.height : itemDims.width,\n      reps,\n      speed\n    )\n  )\n\n  $effect(() => {\n    if (!containerEl) return\n    return createResizeObserver(containerEl, (d) => {\n      containerDims = d\n    })\n  })\n\n  $effect(() => {\n    const cSize = isVertical ? containerDims.height : containerDims.width\n    const iSize = isVertical ? itemDims.height : itemDims.width\n    reps = calcReps(cSize, iSize)\n  })\n\n  function observeFirstItem(node: HTMLElement, isFirst: boolean) {\n    if (!isFirst) return {}\n    const cleanup = createResizeObserver(node, (d) => {\n      itemDims = d\n    })\n    return { destroy: cleanup }\n  }\n</script>\n\n<div\n  bind:this={containerEl}\n  data-marqy=\"\"\n  data-direction={direction}\n  data-pause-on-hover={pauseOnHover ? '' : undefined}\n  {...rest}\n>\n  <div data-marqy-inner=\"\">\n    {#each [0, 1] as clone}\n      <div\n        data-marqy-content=\"\"\n        {...manual\n          ? { 'data-marqy-static': animationDuration }\n          : { style: `animation-duration: ${animationDuration}` }}\n      >\n        {#each Array.from({ length: reps }, (_, i) => i) as rep}\n          <div\n            use:observeFirstItem={clone === 0 && rep === 0}\n            aria-hidden={!(clone === 0 && rep === 0) || undefined}\n            data-marqy-item=\"\"\n          >\n            {@render children()}\n          </div>\n        {/each}\n      </div>\n    {/each}\n  </div>\n</div>\n"],"names":["speed","direction","pauseOnHover","manual","rest","$","$$props","containerEl","containerDims","itemDims","reps","isVertical","animationDuration","calcAnimationDuration","createResizeObserver","d","cSize","iSize","calcReps","observeFirstItem","node","isFirst","div","root","div_1","clone","div_2","root_1","_","i","rep","div_3","root_2","$$value"],"mappings":";;;;iBAAA;;AAmBI,MAAAA,0BAAQ,GAAG,GACXC,8BAAY,MAAM,GAClBC,iCAAe,EAAK,GACpBC,2BAAS,EAAK,GAEXC,IAAIC,EAAA,WAAAC,GAAA;AAAA;;;;;;;;MAGLC,IAAcF,EAAA,MAA2B,IAAI,GAC7CG,IAAgBH,QAAMA,EAAA,MAAA,EAAG,OAAO,GAAG,QAAQ,EAAC,CAAA,CAAA,GAC5CI,IAAWJ,QAAMA,EAAA,MAAA,EAAG,OAAO,GAAG,QAAQ,EAAC,CAAA,CAAA,GACvCK,IAAOL,EAAA,MAAO,CAAC;AAEb,QAAAM,oBAAsBV,EAAS,MAAK,QAAQA,EAAS,MAAK,MAAM,GAEhEW,IAAiBP,EAAA,QAAA,MACrBQ,EAAqBR,EAAA,IACnBM,CAAU,UAAGF,CAAQ,EAAC,SAAMJ,EAAA,IAAGI,CAAQ,EAAC,OAAKJ,EAAA,IAC7CK,CAAI,GACJV,EAAK,CAAA,CAAA;AAIT,EAAAK,EAAA,kBAAc;cACPE,CAAW;AACT,aAAAO,EAAoBT,EAAA,IAACE,CAAW,GAAA,CAAGQ,MAAM;AAC9C,QAAAV,EAAA,IAAAG,GAAgBO,GAAC,EAAA;AAAA,MACnB,CAAC;AAAA,EACH,CAAC,GAEDV,EAAA,kBAAc;AACN,UAAAW,UAAQL,CAAU,IAAGN,EAAA,IAAAG,CAAa,EAAC,SAASH,EAAA,IAAAG,CAAa,EAAC,OAC1DS,IAAKZ,EAAA,IAAGM,CAAU,IAAAN,EAAA,IAAGI,CAAQ,EAAC,SAAMJ,EAAA,IAAGI,CAAQ,EAAC;AACtD,IAAAJ,EAAA,IAAAK,GAAOQ,EAASF,GAAOC,CAAK,GAAA,EAAA;AAAA,EAC9B,CAAC;AAEQ,WAAAE,EAAiBC,GAAmBC,GAAkB;WACxDA,IAII,EAAA,SAHOP,EAAqBM,GAAI,CAAGL,MAAM;AAChD,MAAAV,EAAA,IAAAI,GAAWM,GAAC,EAAA;AAAA,IACd,CAAC,EACwB,IAJb,CAAA;AAAA,EAKd;MAGDO,IAAGC,EAAA;qBAAHD,GAAG,OAAA;AAAA;sBAGcrB,EAAS;AAAA,2BACJC,MAAe,KAAK;AAAA,OACrCE;AAAA;AAEH,MAAAoB,YAPFF,CAAG;AAOD,EAAAjB,EAAA,KAAAmB,GAAG,IAAA,MAAA,CACM,GAAG,CAAC,gBAAKC,MAAK;QACnBC,IAAGC,EAAA;uBAAHD,GAAG,OAAA;AAAA;SAEEvB,EAAM,IACJ,EAAA,2BAAqBS,CAAiB,EAAA,IACtC,EAAA,oCAA8BA,CAAiB,CAAA,GAAA;AAAA,SAJtDP,EAAA,KAAAqB,GAAG,IAAA,MAMK,MAAM,OAAO,QAAMrB,EAAA,IAAEK,CAAI,KAAA,CAAKkB,GAAGC,MAAMA,CAAC,gBAAKC,MAAG;UACpDC,IAAGC,EAAA,eAAHD,CAAG;8CAAHA,CAAG,GAAH1B,EAAA,OAAA0B,iDACuBN,MAAU,KAACpB,EAAA,IAAIyB,CAAG,MAAK,CAAC,2CAD/CC,GAAG,eAAA,EAEaN,MAAU,WAAKK,CAAG,MAAK,MAAM,MAAS,CAAA,eAFtDC,CAAG;AAAA,gBAPPL,CAAG,eAAHA,CAAG;AAAA,cAFPF,CAAG,WAPLF,CAAG,eAAHA,GAAG,CAAAW,MAAA5B,EAAA,IACSE,GAAW0B,CAAA,GAAA,MAAA5B,EAAA,IAAXE,CAAW,CAAA,eADvBe,CAAG;AAFI;"}

package/dist/vanilla.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./core-CuZGUfsl.cjs"),o=2,h=class h extends HTMLElement{constructor(){super(...arguments),this._cleanupContainer=null,this._cleanupItem=null,this._containerDims={width:0,height:0},this._itemDims={width:0,height:0},this._reps=1,this._inner=null,this._slotHTML=""}get _speed(){return parseFloat(this.getAttribute("speed")??"0.5")}get _direction(){return this.getAttribute("direction")??"left"}get _pauseOnHover(){return this.hasAttribute("pause-on-hover")}get _manual(){return this.hasAttribute("manual")}get _isVertical(){return this._direction==="up"||this._direction==="down"}connectedCallback(){this._slotHTML=this.innerHTML,this._render(),this._observeResize()}disconnectedCallback(){this._cleanup()}attributeChangedCallback(){this._inner&&this._update()}_render(){this.setAttribute("data-marqy",""),this.setAttribute("data-direction",this._direction),this._pauseOnHover?this.setAttribute("data-pause-on-hover",""):this.removeAttribute("data-pause-on-hover"),this._inner=document.createElement("div"),this._inner.setAttribute("data-marqy-inner","");for(let t=0;t<o;t++){const e=document.createElement("div");e.setAttribute("data-marqy-content",""),this._inner.appendChild(e)}this.innerHTML="",this.appendChild(this._inner),this._buildItems()}_buildItems(){if(!this._inner)return;this._inner.querySelectorAll("[data-marqy-content]").forEach((e,i)=>{e.innerHTML="";for(let s=0;s<this._reps;s++){const a=document.createElement("div");a.setAttribute("data-marqy-item",""),(i!==0||s!==0)&&a.setAttribute("aria-hidden","true"),a.innerHTML=this._slotHTML,e.appendChild(a)}}),this._applyDuration()}_observeResize(){var e,i;(e=this._cleanupContainer)==null||e.call(this),this._cleanupContainer=r.createResizeObserver(this,s=>{this._containerDims=s,this._recalc()});const t=this.querySelector("[data-marqy-item]");t&&((i=this._cleanupItem)==null||i.call(this),this._cleanupItem=r.createResizeObserver(t,s=>{this._itemDims=s,this._recalc()}))}_recalc(){const t=this._isVertical?this._containerDims.height:this._containerDims.width,e=this._isVertical?this._itemDims.height:this._itemDims.width,i=r.calcReps(t,e);i!==this._reps?(this._reps=i,this._buildItems(),this._reObserveItem()):this._applyDuration()}_reObserveItem(){var e;(e=this._cleanupItem)==null||e.call(this);const t=this.querySelector("[data-marqy-item]");t&&(this._cleanupItem=r.createResizeObserver(t,i=>{this._itemDims=i,this._recalc()}))}_applyDuration(){if(!this._inner)return;const t=r.calcAnimationDuration(this._isVertical?this._itemDims.height:this._itemDims.width,this._reps,this._speed);this._inner.querySelectorAll("[data-marqy-content]").forEach(i=>{this._manual?(i.setAttribute("data-marqy-static",t),i.style.animationDuration=""):(i.removeAttribute("data-marqy-static"),i.style.animationDuration=t)})}_update(){this.setAttribute("data-direction",this._direction),this._pauseOnHover?this.setAttribute("data-pause-on-hover",""):this.removeAttribute("data-pause-on-hover"),this._applyDuration()}_cleanup(){var t,e;(t=this._cleanupContainer)==null||t.call(this),(e=this._cleanupItem)==null||e.call(this),this._cleanupContainer=null,this._cleanupItem=null}};h.observedAttributes=["speed","direction","pause-on-hover","manual"];let n=h;customElements.get("marqy-loop")||customElements.define("marqy-loop",n);exports.Marqy=n;exports.MarqyElement=n;
+//# sourceMappingURL=vanilla.cjs.js.map

package/dist/vanilla.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vanilla.cjs.js","sources":["../src/vanilla/index.ts"],"sourcesContent":["import {\n  type MarqyDirection,\n  calcReps,\n  calcAnimationDuration,\n  createResizeObserver,\n} from '../core'\n\nexport type { MarqyDirection }\n\nconst CLONES = 2\n\nexport class MarqyElement extends HTMLElement {\n  static observedAttributes = ['speed', 'direction', 'pause-on-hover', 'manual']\n\n  private _cleanupContainer: (() => void) | null = null\n  private _cleanupItem: (() => void) | null = null\n  private _containerDims = { width: 0, height: 0 }\n  private _itemDims = { width: 0, height: 0 }\n  private _reps = 1\n  private _inner: HTMLElement | null = null\n  private _slotHTML = ''\n\n  private get _speed() {\n    return parseFloat(this.getAttribute('speed') ?? '0.5')\n  }\n\n  private get _direction(): MarqyDirection {\n    return (this.getAttribute('direction') as MarqyDirection) ?? 'left'\n  }\n\n  private get _pauseOnHover() {\n    return this.hasAttribute('pause-on-hover')\n  }\n\n  private get _manual() {\n    return this.hasAttribute('manual')\n  }\n\n  private get _isVertical() {\n    return this._direction === 'up' || this._direction === 'down'\n  }\n\n  connectedCallback() {\n    this._slotHTML = this.innerHTML\n    this._render()\n    this._observeResize()\n  }\n\n  disconnectedCallback() {\n    this._cleanup()\n  }\n\n  attributeChangedCallback() {\n    if (this._inner) this._update()\n  }\n\n  private _render() {\n    this.setAttribute('data-marqy', '')\n    this.setAttribute('data-direction', this._direction)\n    if (this._pauseOnHover) {\n      this.setAttribute('data-pause-on-hover', '')\n    } else {\n      this.removeAttribute('data-pause-on-hover')\n    }\n\n    this._inner = document.createElement('div')\n    this._inner.setAttribute('data-marqy-inner', '')\n\n    for (let clone = 0; clone < CLONES; clone++) {\n      const content = document.createElement('div')\n      content.setAttribute('data-marqy-content', '')\n      this._inner.appendChild(content)\n    }\n\n    this.innerHTML = ''\n    this.appendChild(this._inner)\n    this._buildItems()\n  }\n\n  private _buildItems() {\n    if (!this._inner) return\n    const contents = this._inner.querySelectorAll<HTMLElement>('[data-marqy-content]')\n    contents.forEach((content, clone) => {\n      content.innerHTML = ''\n      for (let rep = 0; rep < this._reps; rep++) {\n        const item = document.createElement('div')\n        item.setAttribute('data-marqy-item', '')\n        if (clone !== 0 || rep !== 0) item.setAttribute('aria-hidden', 'true')\n        item.innerHTML = this._slotHTML\n        content.appendChild(item)\n      }\n    })\n    this._applyDuration()\n  }\n\n  private _observeResize() {\n    this._cleanupContainer?.()\n    this._cleanupContainer = createResizeObserver(this, (d) => {\n      this._containerDims = d\n      this._recalc()\n    })\n\n    const firstItem = this.querySelector<HTMLElement>('[data-marqy-item]')\n    if (firstItem) {\n      this._cleanupItem?.()\n      this._cleanupItem = createResizeObserver(firstItem, (d) => {\n        this._itemDims = d\n        this._recalc()\n      })\n    }\n  }\n\n  private _recalc() {\n    const cSize = this._isVertical ? this._containerDims.height : this._containerDims.width\n    const iSize = this._isVertical ? this._itemDims.height : this._itemDims.width\n    const newReps = calcReps(cSize, iSize)\n    if (newReps !== this._reps) {\n      this._reps = newReps\n      this._buildItems()\n      this._reObserveItem()\n    } else {\n      this._applyDuration()\n    }\n  }\n\n  private _reObserveItem() {\n    this._cleanupItem?.()\n    const firstItem = this.querySelector<HTMLElement>('[data-marqy-item]')\n    if (firstItem) {\n      this._cleanupItem = createResizeObserver(firstItem, (d) => {\n        this._itemDims = d\n        this._recalc()\n      })\n    }\n  }\n\n  private _applyDuration() {\n    if (!this._inner) return\n    const duration = calcAnimationDuration(\n      this._isVertical ? this._itemDims.height : this._itemDims.width,\n      this._reps,\n      this._speed\n    )\n    const contents = this._inner.querySelectorAll<HTMLElement>('[data-marqy-content]')\n    contents.forEach((content) => {\n      if (this._manual) {\n        content.setAttribute('data-marqy-static', duration)\n        content.style.animationDuration = ''\n      } else {\n        content.removeAttribute('data-marqy-static')\n        content.style.animationDuration = duration\n      }\n    })\n  }\n\n  private _update() {\n    this.setAttribute('data-direction', this._direction)\n    if (this._pauseOnHover) {\n      this.setAttribute('data-pause-on-hover', '')\n    } else {\n      this.removeAttribute('data-pause-on-hover')\n    }\n    this._applyDuration()\n  }\n\n  private _cleanup() {\n    this._cleanupContainer?.()\n    this._cleanupItem?.()\n    this._cleanupContainer = null\n    this._cleanupItem = null\n  }\n}\n\nif (!customElements.get('marqy-loop')) {\n  customElements.define('marqy-loop', MarqyElement)\n}\n\nexport { MarqyElement as Marqy }\n"],"names":["CLONES","_MarqyElement","clone","content","rep","item","_a","createResizeObserver","d","firstItem","_b","cSize","iSize","newReps","calcReps","duration","calcAnimationDuration","MarqyElement"],"mappings":"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"}

package/dist/vanilla.d.ts

@@ -0,0 +1,32 @@
+export declare type MarqyDirection = 'left' | 'right' | 'up' | 'down';
+
+declare class MarqyElement extends HTMLElement {
+    static observedAttributes: string[];
+    private _cleanupContainer;
+    private _cleanupItem;
+    private _containerDims;
+    private _itemDims;
+    private _reps;
+    private _inner;
+    private _slotHTML;
+    private get _speed();
+    private get _direction();
+    private get _pauseOnHover();
+    private get _manual();
+    private get _isVertical();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private _render;
+    private _buildItems;
+    private _observeResize;
+    private _recalc;
+    private _reObserveItem;
+    private _applyDuration;
+    private _update;
+    private _cleanup;
+}
+export { MarqyElement as Marqy }
+export { MarqyElement }
+
+export { }

package/dist/vanilla.esm.js

@@ -0,0 +1,96 @@
+import { b as r, c as o, a as c } from "./core-COOoOGpB.js";
+const u = 2, h = class h extends HTMLElement {
+  constructor() {
+    super(...arguments), this._cleanupContainer = null, this._cleanupItem = null, this._containerDims = { width: 0, height: 0 }, this._itemDims = { width: 0, height: 0 }, this._reps = 1, this._inner = null, this._slotHTML = "";
+  }
+  get _speed() {
+    return parseFloat(this.getAttribute("speed") ?? "0.5");
+  }
+  get _direction() {
+    return this.getAttribute("direction") ?? "left";
+  }
+  get _pauseOnHover() {
+    return this.hasAttribute("pause-on-hover");
+  }
+  get _manual() {
+    return this.hasAttribute("manual");
+  }
+  get _isVertical() {
+    return this._direction === "up" || this._direction === "down";
+  }
+  connectedCallback() {
+    this._slotHTML = this.innerHTML, this._render(), this._observeResize();
+  }
+  disconnectedCallback() {
+    this._cleanup();
+  }
+  attributeChangedCallback() {
+    this._inner && this._update();
+  }
+  _render() {
+    this.setAttribute("data-marqy", ""), this.setAttribute("data-direction", this._direction), this._pauseOnHover ? this.setAttribute("data-pause-on-hover", "") : this.removeAttribute("data-pause-on-hover"), this._inner = document.createElement("div"), this._inner.setAttribute("data-marqy-inner", "");
+    for (let t = 0; t < u; t++) {
+      const e = document.createElement("div");
+      e.setAttribute("data-marqy-content", ""), this._inner.appendChild(e);
+    }
+    this.innerHTML = "", this.appendChild(this._inner), this._buildItems();
+  }
+  _buildItems() {
+    if (!this._inner) return;
+    this._inner.querySelectorAll("[data-marqy-content]").forEach((e, i) => {
+      e.innerHTML = "";
+      for (let s = 0; s < this._reps; s++) {
+        const n = document.createElement("div");
+        n.setAttribute("data-marqy-item", ""), (i !== 0 || s !== 0) && n.setAttribute("aria-hidden", "true"), n.innerHTML = this._slotHTML, e.appendChild(n);
+      }
+    }), this._applyDuration();
+  }
+  _observeResize() {
+    var e, i;
+    (e = this._cleanupContainer) == null || e.call(this), this._cleanupContainer = r(this, (s) => {
+      this._containerDims = s, this._recalc();
+    });
+    const t = this.querySelector("[data-marqy-item]");
+    t && ((i = this._cleanupItem) == null || i.call(this), this._cleanupItem = r(t, (s) => {
+      this._itemDims = s, this._recalc();
+    }));
+  }
+  _recalc() {
+    const t = this._isVertical ? this._containerDims.height : this._containerDims.width, e = this._isVertical ? this._itemDims.height : this._itemDims.width, i = c(t, e);
+    i !== this._reps ? (this._reps = i, this._buildItems(), this._reObserveItem()) : this._applyDuration();
+  }
+  _reObserveItem() {
+    var e;
+    (e = this._cleanupItem) == null || e.call(this);
+    const t = this.querySelector("[data-marqy-item]");
+    t && (this._cleanupItem = r(t, (i) => {
+      this._itemDims = i, this._recalc();
+    }));
+  }
+  _applyDuration() {
+    if (!this._inner) return;
+    const t = o(
+      this._isVertical ? this._itemDims.height : this._itemDims.width,
+      this._reps,
+      this._speed
+    );
+    this._inner.querySelectorAll("[data-marqy-content]").forEach((i) => {
+      this._manual ? (i.setAttribute("data-marqy-static", t), i.style.animationDuration = "") : (i.removeAttribute("data-marqy-static"), i.style.animationDuration = t);
+    });
+  }
+  _update() {
+    this.setAttribute("data-direction", this._direction), this._pauseOnHover ? this.setAttribute("data-pause-on-hover", "") : this.removeAttribute("data-pause-on-hover"), this._applyDuration();
+  }
+  _cleanup() {
+    var t, e;
+    (t = this._cleanupContainer) == null || t.call(this), (e = this._cleanupItem) == null || e.call(this), this._cleanupContainer = null, this._cleanupItem = null;
+  }
+};
+h.observedAttributes = ["speed", "direction", "pause-on-hover", "manual"];
+let a = h;
+customElements.get("marqy-loop") || customElements.define("marqy-loop", a);
+export {
+  a as Marqy,
+  a as MarqyElement
+};
+//# sourceMappingURL=vanilla.esm.js.map

package/dist/vanilla.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vanilla.esm.js","sources":["../src/vanilla/index.ts"],"sourcesContent":["import {\n  type MarqyDirection,\n  calcReps,\n  calcAnimationDuration,\n  createResizeObserver,\n} from '../core'\n\nexport type { MarqyDirection }\n\nconst CLONES = 2\n\nexport class MarqyElement extends HTMLElement {\n  static observedAttributes = ['speed', 'direction', 'pause-on-hover', 'manual']\n\n  private _cleanupContainer: (() => void) | null = null\n  private _cleanupItem: (() => void) | null = null\n  private _containerDims = { width: 0, height: 0 }\n  private _itemDims = { width: 0, height: 0 }\n  private _reps = 1\n  private _inner: HTMLElement | null = null\n  private _slotHTML = ''\n\n  private get _speed() {\n    return parseFloat(this.getAttribute('speed') ?? '0.5')\n  }\n\n  private get _direction(): MarqyDirection {\n    return (this.getAttribute('direction') as MarqyDirection) ?? 'left'\n  }\n\n  private get _pauseOnHover() {\n    return this.hasAttribute('pause-on-hover')\n  }\n\n  private get _manual() {\n    return this.hasAttribute('manual')\n  }\n\n  private get _isVertical() {\n    return this._direction === 'up' || this._direction === 'down'\n  }\n\n  connectedCallback() {\n    this._slotHTML = this.innerHTML\n    this._render()\n    this._observeResize()\n  }\n\n  disconnectedCallback() {\n    this._cleanup()\n  }\n\n  attributeChangedCallback() {\n    if (this._inner) this._update()\n  }\n\n  private _render() {\n    this.setAttribute('data-marqy', '')\n    this.setAttribute('data-direction', this._direction)\n    if (this._pauseOnHover) {\n      this.setAttribute('data-pause-on-hover', '')\n    } else {\n      this.removeAttribute('data-pause-on-hover')\n    }\n\n    this._inner = document.createElement('div')\n    this._inner.setAttribute('data-marqy-inner', '')\n\n    for (let clone = 0; clone < CLONES; clone++) {\n      const content = document.createElement('div')\n      content.setAttribute('data-marqy-content', '')\n      this._inner.appendChild(content)\n    }\n\n    this.innerHTML = ''\n    this.appendChild(this._inner)\n    this._buildItems()\n  }\n\n  private _buildItems() {\n    if (!this._inner) return\n    const contents = this._inner.querySelectorAll<HTMLElement>('[data-marqy-content]')\n    contents.forEach((content, clone) => {\n      content.innerHTML = ''\n      for (let rep = 0; rep < this._reps; rep++) {\n        const item = document.createElement('div')\n        item.setAttribute('data-marqy-item', '')\n        if (clone !== 0 || rep !== 0) item.setAttribute('aria-hidden', 'true')\n        item.innerHTML = this._slotHTML\n        content.appendChild(item)\n      }\n    })\n    this._applyDuration()\n  }\n\n  private _observeResize() {\n    this._cleanupContainer?.()\n    this._cleanupContainer = createResizeObserver(this, (d) => {\n      this._containerDims = d\n      this._recalc()\n    })\n\n    const firstItem = this.querySelector<HTMLElement>('[data-marqy-item]')\n    if (firstItem) {\n      this._cleanupItem?.()\n      this._cleanupItem = createResizeObserver(firstItem, (d) => {\n        this._itemDims = d\n        this._recalc()\n      })\n    }\n  }\n\n  private _recalc() {\n    const cSize = this._isVertical ? this._containerDims.height : this._containerDims.width\n    const iSize = this._isVertical ? this._itemDims.height : this._itemDims.width\n    const newReps = calcReps(cSize, iSize)\n    if (newReps !== this._reps) {\n      this._reps = newReps\n      this._buildItems()\n      this._reObserveItem()\n    } else {\n      this._applyDuration()\n    }\n  }\n\n  private _reObserveItem() {\n    this._cleanupItem?.()\n    const firstItem = this.querySelector<HTMLElement>('[data-marqy-item]')\n    if (firstItem) {\n      this._cleanupItem = createResizeObserver(firstItem, (d) => {\n        this._itemDims = d\n        this._recalc()\n      })\n    }\n  }\n\n  private _applyDuration() {\n    if (!this._inner) return\n    const duration = calcAnimationDuration(\n      this._isVertical ? this._itemDims.height : this._itemDims.width,\n      this._reps,\n      this._speed\n    )\n    const contents = this._inner.querySelectorAll<HTMLElement>('[data-marqy-content]')\n    contents.forEach((content) => {\n      if (this._manual) {\n        content.setAttribute('data-marqy-static', duration)\n        content.style.animationDuration = ''\n      } else {\n        content.removeAttribute('data-marqy-static')\n        content.style.animationDuration = duration\n      }\n    })\n  }\n\n  private _update() {\n    this.setAttribute('data-direction', this._direction)\n    if (this._pauseOnHover) {\n      this.setAttribute('data-pause-on-hover', '')\n    } else {\n      this.removeAttribute('data-pause-on-hover')\n    }\n    this._applyDuration()\n  }\n\n  private _cleanup() {\n    this._cleanupContainer?.()\n    this._cleanupItem?.()\n    this._cleanupContainer = null\n    this._cleanupItem = null\n  }\n}\n\nif (!customElements.get('marqy-loop')) {\n  customElements.define('marqy-loop', MarqyElement)\n}\n\nexport { MarqyElement as Marqy }\n"],"names":["CLONES","_MarqyElement","clone","content","rep","item","_a","createResizeObserver","d","firstItem","_b","cSize","iSize","newReps","calcReps","duration","calcAnimationDuration","MarqyElement"],"mappings":"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"}

package/dist/vue.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("./core-CuZGUfsl.cjs"),p=["data-direction","data-pause-on-hover"],k={"data-marqy-inner":""},B=["aria-hidden"],q=e.defineComponent({__name:"Marqy",props:{speed:{default:.5},direction:{default:"left"},pauseOnHover:{type:Boolean,default:!1},manual:{type:Boolean,default:!1}},setup(i){const s=i,h=e.ref(null),y=e.ref(null),l=e.ref({width:0,height:0}),n=e.ref({width:0,height:0}),v=e.ref(1),d=e.computed(()=>s.direction==="up"||s.direction==="down"),g=e.computed(()=>u.calcAnimationDuration(d.value?n.value.height:n.value.width,v.value,s.speed));let a=null,r=null;return e.watch(h,t=>{a==null||a(),a=null,t&&(a=u.createResizeObserver(t,o=>{l.value=o}))}),e.watch(y,t=>{r==null||r(),r=null,t&&(r=u.createResizeObserver(t,o=>{n.value=o}))}),e.watch([l,n,d],()=>{const t=d.value?l.value.height:l.value.width,o=d.value?n.value.height:n.value.width;v.value=u.calcReps(t,o)}),e.onUnmounted(()=>{a==null||a(),r==null||r()}),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref_key:"containerRef",ref:h,"data-marqy":"","data-direction":i.direction,"data-pause-on-hover":i.pauseOnHover?"":void 0},t.$attrs),[e.createElementVNode("div",k,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList([0,1],f=>e.createElementVNode("div",e.mergeProps({key:f,"data-marqy-content":""},{ref_for:!0},i.manual?{"data-marqy-static":g.value}:{style:`animation-duration: ${g.value}`}),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Array.from({length:v.value},(c,m)=>m),c=>(e.openBlock(),e.createElementBlock("div",{key:c,ref_for:!0,ref:m=>{f===0&&c===0&&(y.value=m)},"aria-hidden":!(f===0&&c===0)||void 0,"data-marqy-item":""},[e.renderSlot(t.$slots,"default")],8,B))),128))],16)),64))])],16,p))}});exports.Marqy=q;
+//# sourceMappingURL=vue.cjs.js.map

package/dist/vue.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.cjs.js","sources":["../src/vue/Marqy.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, watch, onUnmounted } from 'vue'\nimport {\n  type MarqyDirection,\n  calcReps,\n  calcAnimationDuration,\n  createResizeObserver,\n} from '../core'\n\ninterface Props {\n  speed?: number\n  direction?: MarqyDirection\n  pauseOnHover?: boolean\n  manual?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  speed: 0.5,\n  direction: 'left',\n  pauseOnHover: false,\n  manual: false,\n})\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst itemRef = ref<HTMLElement | null>(null)\nconst containerDims = ref({ width: 0, height: 0 })\nconst itemDims = ref({ width: 0, height: 0 })\nconst reps = ref(1)\n\nconst isVertical = computed(\n  () => props.direction === 'up' || props.direction === 'down'\n)\n\nconst animationDuration = computed(() =>\n  calcAnimationDuration(\n    isVertical.value ? itemDims.value.height : itemDims.value.width,\n    reps.value,\n    props.speed\n  )\n)\n\nlet cleanupContainer: (() => void) | null = null\nlet cleanupItem: (() => void) | null = null\n\nwatch(containerRef, (el) => {\n  cleanupContainer?.()\n  cleanupContainer = null\n  if (el) cleanupContainer = createResizeObserver(el, (d) => { containerDims.value = d })\n})\n\nwatch(itemRef, (el) => {\n  cleanupItem?.()\n  cleanupItem = null\n  if (el) cleanupItem = createResizeObserver(el, (d) => { itemDims.value = d })\n})\n\nwatch([containerDims, itemDims, isVertical], () => {\n  const cSize = isVertical.value ? containerDims.value.height : containerDims.value.width\n  const iSize = isVertical.value ? itemDims.value.height : itemDims.value.width\n  reps.value = calcReps(cSize, iSize)\n})\n\nonUnmounted(() => {\n  cleanupContainer?.()\n  cleanupItem?.()\n})\n</script>\n\n<template>\n  <div\n    ref=\"containerRef\"\n    data-marqy=\"\"\n    :data-direction=\"direction\"\n    :data-pause-on-hover=\"pauseOnHover ? '' : undefined\"\n    v-bind=\"$attrs\"\n  >\n    <div data-marqy-inner=\"\">\n      <div\n        v-for=\"clone in [0, 1]\"\n        :key=\"clone\"\n        data-marqy-content=\"\"\n        v-bind=\"\n          manual\n            ? { 'data-marqy-static': animationDuration }\n            : { style: `animation-duration: ${animationDuration}` }\n        \"\n      >\n        <div\n          v-for=\"rep in Array.from({ length: reps }, (_, i) => i)\"\n          :key=\"rep\"\n          :ref=\"(el) => { if (clone === 0 && rep === 0) itemRef = el as HTMLElement | null }\"\n          :aria-hidden=\"!(clone === 0 && rep === 0) || undefined\"\n          data-marqy-item=\"\"\n        >\n          <slot />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","containerRef","ref","itemRef","containerDims","itemDims","reps","isVertical","computed","animationDuration","calcAnimationDuration","cleanupContainer","cleanupItem","watch","el","createResizeObserver","d","cSize","iSize","calcReps","onUnmounted","_openBlock","_createElementBlock","_mergeProps","$attrs","_createElementVNode","_hoisted_2","_Fragment","_renderList","clone","_","i","rep","_renderSlot","_ctx"],"mappings":"0YAgBA,MAAMA,EAAQC,EAORC,EAAeC,EAAAA,IAAwB,IAAI,EAC3CC,EAAUD,EAAAA,IAAwB,IAAI,EACtCE,EAAgBF,EAAAA,IAAI,CAAE,MAAO,EAAG,OAAQ,EAAG,EAC3CG,EAAWH,EAAAA,IAAI,CAAE,MAAO,EAAG,OAAQ,EAAG,EACtCI,EAAOJ,EAAAA,IAAI,CAAC,EAEZK,EAAaC,EAAAA,SACjB,IAAMT,EAAM,YAAc,MAAQA,EAAM,YAAc,MAAA,EAGlDU,EAAoBD,EAAAA,SAAS,IACjCE,EAAAA,sBACEH,EAAW,MAAQF,EAAS,MAAM,OAASA,EAAS,MAAM,MAC1DC,EAAK,MACLP,EAAM,KAAA,CACR,EAGF,IAAIY,EAAwC,KACxCC,EAAmC,KAEvCC,OAAAA,QAAMZ,EAAea,GAAO,CAC1BH,GAAA,MAAAA,IACAA,EAAmB,KACfG,IAAIH,EAAmBI,EAAAA,qBAAqBD,EAAKE,GAAM,CAAEZ,EAAc,MAAQY,CAAE,CAAC,EACxF,CAAC,EAEDH,QAAMV,EAAUW,GAAO,CACrBF,GAAA,MAAAA,IACAA,EAAc,KACVE,IAAIF,EAAcG,EAAAA,qBAAqBD,EAAKE,GAAM,CAAEX,EAAS,MAAQW,CAAE,CAAC,EAC9E,CAAC,EAEDH,EAAAA,MAAM,CAACT,EAAeC,EAAUE,CAAU,EAAG,IAAM,CACjD,MAAMU,EAAQV,EAAW,MAAQH,EAAc,MAAM,OAASA,EAAc,MAAM,MAC5Ec,EAAQX,EAAW,MAAQF,EAAS,MAAM,OAASA,EAAS,MAAM,MACxEC,EAAK,MAAQa,WAASF,EAAOC,CAAK,CACpC,CAAC,EAEDE,EAAAA,YAAY,IAAM,CAChBT,GAAA,MAAAA,IACAC,GAAA,MAAAA,GACF,CAAC,UAICS,YAAA,EAAAC,qBA6BM,MA7BNC,EAAAA,WA6BM,SA5BA,eAAJ,IAAItB,EACJ,aAAW,GACV,iBAAgBD,EAAA,UAChB,sBAAqBA,EAAA,aAAY,GAAQ,MAAA,EAClCwB,EAAAA,MAAM,EAAA,CAEdC,EAAAA,mBAqBM,MArBNC,EAqBM,gBApBJJ,qBAmBMK,EAAAA,SAAA,KAAAC,aAlBY,CAAA,EAAA,CAAA,EAATC,GADTJ,EAAAA,mBAmBM,MAnBNF,EAAAA,WAmBM,CAjBH,IAAKM,EACN,qBAAmB,EAAA,eACA7B,EAAA,4BAA4CS,EAAA,KAAA,gCAAkEA,EAAA,KAAiB,EAAA,CAAA,IAMlJY,EAAAA,UAAA,EAAA,EAAAC,EAAAA,mBAQMK,EAAAA,SAAA,KAAAC,EAAAA,WAPU,MAAM,KAAI,CAAA,OAAWtB,EAAA,KAAA,EAAI,CAAKwB,EAAGC,IAAMA,CAAC,EAA/CC,kBADTV,EAAAA,mBAQM,MAAA,CANH,IAAKU,aACL,IAAMlB,GAAE,CAAWe,OAAeG,IAAG,MAAQ,MAAUlB,EAAE,EACzD,cAAW,EAAIe,IAAK,GAAUG,QAAc,OAC7C,kBAAgB,EAAA,GAEhBC,aAAQC,EAAA,OAAA,SAAA,CAAA"}

package/dist/vue.d.ts

@@ -0,0 +1,45 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+
+declare const __VLS_component: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+speed: number;
+direction: MarqyDirection;
+pauseOnHover: boolean;
+manual: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const Marqy: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare type MarqyDirection = 'left' | 'right' | 'up' | 'down';
+
+declare interface Props {
+    speed?: number;
+    direction?: MarqyDirection;
+    pauseOnHover?: boolean;
+    manual?: boolean;
+}
+
+export { }

package/dist/vue.esm.js

@@ -0,0 +1,70 @@
+import { defineComponent as z, ref as r, computed as q, watch as y, onUnmounted as O, openBlock as u, createElementBlock as c, mergeProps as w, createElementVNode as k, Fragment as R, renderList as B, renderSlot as S } from "vue";
+import { c as $, b as D, a as b } from "./core-COOoOGpB.js";
+const A = ["data-direction", "data-pause-on-hover"], E = { "data-marqy-inner": "" }, H = ["aria-hidden"], F = /* @__PURE__ */ z({
+  __name: "Marqy",
+  props: {
+    speed: { default: 0.5 },
+    direction: { default: "left" },
+    pauseOnHover: { type: Boolean, default: !1 },
+    manual: { type: Boolean, default: !1 }
+  },
+  setup(o) {
+    const v = o, p = r(null), g = r(null), d = r({ width: 0, height: 0 }), i = r({ width: 0, height: 0 }), f = r(1), l = q(
+      () => v.direction === "up" || v.direction === "down"
+    ), _ = q(
+      () => $(
+        l.value ? i.value.height : i.value.width,
+        f.value,
+        v.speed
+      )
+    );
+    let t = null, a = null;
+    return y(p, (e) => {
+      t == null || t(), t = null, e && (t = D(e, (n) => {
+        d.value = n;
+      }));
+    }), y(g, (e) => {
+      a == null || a(), a = null, e && (a = D(e, (n) => {
+        i.value = n;
+      }));
+    }), y([d, i, l], () => {
+      const e = l.value ? d.value.height : d.value.width, n = l.value ? i.value.height : i.value.width;
+      f.value = b(e, n);
+    }), O(() => {
+      t == null || t(), a == null || a();
+    }), (e, n) => (u(), c("div", w({
+      ref_key: "containerRef",
+      ref: p,
+      "data-marqy": "",
+      "data-direction": o.direction,
+      "data-pause-on-hover": o.pauseOnHover ? "" : void 0
+    }, e.$attrs), [
+      k("div", E, [
+        (u(), c(R, null, B([0, 1], (m) => k("div", w(
+          {
+            key: m,
+            "data-marqy-content": ""
+          },
+          { ref_for: !0 },
+          o.manual ? { "data-marqy-static": _.value } : { style: `animation-duration: ${_.value}` }
+        ), [
+          (u(!0), c(R, null, B(Array.from({ length: f.value }, (s, h) => h), (s) => (u(), c("div", {
+            key: s,
+            ref_for: !0,
+            ref: (h) => {
+              m === 0 && s === 0 && (g.value = h);
+            },
+            "aria-hidden": !(m === 0 && s === 0) || void 0,
+            "data-marqy-item": ""
+          }, [
+            S(e.$slots, "default")
+          ], 8, H))), 128))
+        ], 16)), 64))
+      ])
+    ], 16, A));
+  }
+});
+export {
+  F as Marqy
+};
+//# sourceMappingURL=vue.esm.js.map