motion-plus-vue 1.4.0 → 1.5.0-beta.1

package/dist/es/components/Ticker/Ticker.vue.mjs

@@ -1,22 +1,24 @@
-import { defineComponent as le, reactive as re, computed as l, useSlots as ue, ref as fe, watch as ce, createVNode as W, toRef as me, createBlock as I, openBlock as m, unref as u, mergeProps as de, withCtx as _, normalizeStyle as ve, createElementBlock as O, Fragment as R, renderList as V, resolveDynamicComponent as E, isVNode as ge } from "vue";
-import { useMotionValue as B, useTransform as pe, wrap as he, useDomRef as q, useInView as ye, usePageInView as xe, useReducedMotion as we, resize as G, useAnimationFrame as Ie, motion as J, animate as K } from "motion-v";
-import Q from "./TickerItem.vue.mjs";
-import { useFocusNavigation as Le } from "./use-focus-navigation.mjs";
-import { alignAlias as Se, defaultBounds as U } from "./const.mjs";
-import { calcNumClones as Pe } from "./utils/calc-num-clones.mjs";
-import { calcTotalItemLength as be } from "./utils/calc-total-item-length.mjs";
-import { flattenSlots as ze, renderVNode as X } from "../../utils/flatten-slots.mjs";
-import { getCumulativeOffset as ke } from "./utils/get-cumulative-offset.mjs";
-function Ce(v) {
-  return typeof v == "function" || Object.prototype.toString.call(v) === "[object Object]" && !ge(v);
+import { defineComponent as je, reactive as Re, computed as s, ref as Ve, useSlots as Fe, watch as ge, createVNode as z, toRef as Ne, createElementBlock as B, openBlock as p, Fragment as $, renderSlot as Ae, unref as c, mergeProps as Xe, withCtx as J, normalizeStyle as Ye, renderList as K, createBlock as Q, resolveDynamicComponent as me, isVNode as Ge } from "vue";
+import { useMotionValue as P, useTransform as ce, wrap as pe, useDomRef as ve, useInView as We, usePageInView as qe, useReducedMotion as He, resize as he, useAnimationFrame as Je, LayoutGroup as Ke, frame as Qe, animate as v, Motion as Ue, motion as Ze, clamp as et } from "motion-v";
+import ye from "./TickerItem.vue.mjs";
+import { useFocusNavigation as tt } from "./use-focus-navigation.mjs";
+import { defaultPageTransition as nt, defaultFadeTransition as at, alignAlias as ot, defaultBounds as Ie } from "./const.mjs";
+import { calcNumClones as it } from "./utils/calc-num-clones.mjs";
+import { calcTotalItemLength as st } from "./utils/calc-total-item-length.mjs";
+import { flattenSlots as rt, renderVNode as xe } from "../../utils/flatten-slots.mjs";
+import { getLayoutStrategy as U } from "./utils/layout-strategy.mjs";
+import { provideTicker as lt } from "./context.mjs";
+import { findNextItemInset as we } from "../Carousel/utils/find-next-page.mjs";
+import { findPrevItemInset as Pe } from "../Carousel/utils/find-prev-page.mjs";
+function Le(I) {
+  return typeof I == "function" || Object.prototype.toString.call(I) === "[object Object]" && !Ge(I);
 }
-const Ne = /* @__PURE__ */ le({
+const Pt = /* @__PURE__ */ je({
   __name: "Ticker",
   props: {
     axis: {
       default: "x"
     },
-    style: {},
     velocity: {
       default: 50
     },
@@ -36,148 +38,305 @@ const Ne = /* @__PURE__ */ le({
     overflow: {
       type: Boolean,
       default: !1
+    },
+    loop: {
+      type: Boolean,
+      default: !0
+    },
+    safeMargin: {
+      default: 0
+    },
+    fade: {
+      default: 0
+    },
+    fadeTransition: {
+      default: () => at
+    },
+    pageTransition: {
+      default: () => nt
+    },
+    _dragX: {
+      type: [Object, Boolean]
+    },
+    _dragY: {
+      type: [Object, Boolean]
+    },
+    snap: {
+      type: [String, Boolean]
+    },
+    as: {
+      default: "div"
+    },
+    style: {},
+    onDragEnd: {},
+    drag: {
+      type: [Boolean, String]
+    },
+    dragConstraints: {
+      type: [Boolean, Object]
+    },
+    dragMomentum: {
+      type: Boolean
     }
   },
-  setup(v) {
-    const e = v, t = re({
+  setup(I) {
+    const e = I, t = Re({
+      direction: "ltr",
       visibleLength: 0,
       inset: 0,
       totalItemLength: 0,
-      itemPositions: []
-    }), L = l(() => Se[e.align] || e.align), S = ue(), P = l(() => {
-      var n;
-      return ze((n = S.default) == null ? void 0 : n.call(S));
-    }), F = fe(!1), b = B(1), M = B(0), g = l(() => e.offset ?? M), Y = pe(() => he(-t.totalItemLength - e.gap - t.inset, -t.inset, g.value.get())), T = B(0), h = l(() => F.value ? T : Y), f = q(), z = q(), Z = ye(f, {
+      containerLength: 0,
+      itemPositions: [],
+      isMeasured: !1,
+      maxInset: null
+    }), D = s(() => ot[e.align] || e.align), h = s(() => U(e.axis, t.direction).sign), Z = Ve(!1), E = P(1), ee = P(0), d = s(() => e.offset ?? ee), be = ce(() => t.direction === "rtl" ? pe(t.totalItemLength + e.gap + t.inset, t.inset, d.value.get()) : pe(-t.totalItemLength - e.gap - t.inset, -t.inset, d.value.get())), te = P(0), y = s(() => Z.value ? te : e.loop ? be : d.value), g = ve(), _ = ve(), Se = We(g, {
       margin: "100px"
-    }), ee = xe(), y = l(() => Z.value && ee.value), te = we();
-    function k() {
-      if (!f.value || !z.value) return;
-      const n = e.axis === "x" ? "innerWidth" : "innerHeight", o = e.axis === "x" ? "offsetWidth" : "offsetHeight", i = e.axis === "x" ? "offsetLeft" : "offsetTop", s = e.axis === "x" ? "paddingLeft" : "paddingTop", a = f.value, c = z.value.querySelectorAll(".ticker-item");
-      if (!c.length) return;
-      let w = !1;
-      const p = [];
-      for (let r = 0; r < c.length; r++) {
-        const C = c[r];
-        p.push({
-          start: C[i],
-          end: C[i] + C[o]
-        }), (!t.itemPositions[r] || p[r].start !== t.itemPositions[r].start || p[r].end !== t.itemPositions[r].end) && (w = !0);
+    }), Me = qe(), L = s(() => Se.value && Me.value), ke = He(), j = Fe(), x = s(() => {
+      var n;
+      return rt((n = j.default) == null ? void 0 : n.call(j));
+    });
+    function R() {
+      if (!g.value || !_.value) return;
+      const n = window.getComputedStyle(g.value).direction, {
+        measureItem: i,
+        lengthProp: a,
+        viewportLengthProp: o,
+        getCumulativeInset: u
+      } = U(e.axis, n), {
+        safeMargin: l,
+        overflow: f,
+        loop: w
+      } = e, k = r.value === "x" ? "paddingLeft" : "paddingTop", A = r.value === "x" ? "paddingRight" : "paddingBottom", X = g.value, C = _.value.querySelectorAll(".ticker-item");
+      if (!C.length) return;
+      let le = !1;
+      const O = [];
+      for (let T = 0; T < C.length; T++) {
+        const q = i(C[T], X);
+        O.push(q);
+        const H = t.itemPositions[T];
+        (!H || q.start !== H.start || q.end !== H.end) && (le = !0);
       }
-      const A = e.overflow ? window[n] : Math.min(a[o], window[n]), D = be(p), se = window.getComputedStyle(a), ae = parseInt(se[s] ?? "0"), H = e.overflow ? ke(c[0], e.axis) : ae;
-      (A !== t.visibleLength || D !== t.totalItemLength || H !== t.inset || w) && (t.visibleLength = A, t.itemPositions = p, t.totalItemLength = D, t.inset = H);
+      const Y = Math.min(X[a], window[o]);
+      let G = e.overflow ? window[o] : Y;
+      l > 0 && (G += l * 2);
+      const W = st(O), ue = window.getComputedStyle(X), fe = parseInt(ue[k] ?? 0), Ee = parseInt(ue[A] ?? 0), de = f ? u(C[0]) : fe, _e = w === !1 ? Math.max(0, W - Y + fe + Ee) : null;
+      (G !== t.visibleLength || W !== t.totalItemLength || de !== t.inset || t.itemPositions.length !== O.length || le) && (t.direction = n, t.visibleLength = G, t.itemPositions = O, t.totalItemLength = W, t.inset = de, t.containerLength = Y, t.maxInset = _e, t.isMeasured = !0);
     }
-    ce([P, y], (n, o, i) => {
-      if (!y.value || !f.value) return;
-      k();
-      const s = e.overflow ? G(k) : void 0, a = G(f.value, k);
-      i(() => {
-        s == null || s(), a();
+    ge([x, L, () => e.overflow], (n, i, a) => {
+      if (!L.value || !g.value) return;
+      R();
+      const o = e.overflow ? he(R) : void 0, u = he(g.value, R);
+      a(() => {
+        o == null || o(), u();
       });
     }, {
       immediate: !0,
       flush: "post"
     });
-    const x = l(() => t.totalItemLength > 0);
-    Ie((n, o) => {
-      if (x.value && y.value && g.value === M && !te.value) {
-        const i = o / 1e3 * (e.velocity * b.get());
-        g.value.set(g.value.get() - i);
+    const b = s(() => t.totalItemLength > 0);
+    Je((n, i) => {
+      if (b.value && L.value && d.value === ee && !ke.value) {
+        const a = i / 1e3 * (e.velocity * h.value * E.get());
+        d.value.set(d.value.get() - a);
       }
     });
-    const $ = l(() => !x.value || !t.visibleLength ? 0 : Pe(t.visibleLength, t.itemPositions, e.gap)), N = l(() => t.totalItemLength === 0 ? 0 : (t.totalItemLength + e.gap) * ($.value + 1)), ne = l(() => {
+    const ne = s(() => !b.value || !t.visibleLength ? 0 : it(t.visibleLength, t.itemPositions, e.gap)), ae = s(() => t.totalItemLength === 0 ? 0 : (t.totalItemLength + e.gap) * (ne.value + 1)), Ce = s(() => {
+      if (!e.loop) return [];
       const n = [];
-      for (let o = 0; o < $.value; o++)
-        P.value.forEach((i, s) => {
-          let a;
-          const d = t.itemPositions[s], c = (t.totalItemLength + e.gap) * (o + 1), w = d ? {
-            start: d.start + c,
-            end: d.end + c
-          } : U;
-          n.push(W(Q, {
-            key: `clone-${o}-${s}`,
-            offset: h.value,
+      for (let i = 0; i < ne.value; i++) {
+        const a = [];
+        x.value.forEach((u, l) => {
+          let f;
+          const w = t.itemPositions[l], k = (t.totalItemLength + e.gap) * (i + 1), A = w ? {
+            start: w.start + k,
+            end: w.end + k
+          } : Ie;
+          a.push(z(ye, {
+            key: `clone-${i}-${l}`,
+            offset: y.value,
             axis: e.axis,
-            listSize: N.value,
-            cloneIndex: s,
-            bounds: w,
-            inset: t.inset,
-            alignItems: L.value,
-            itemSize: e.itemSize
-          }, Ce(a = X([i])) ? a : {
-            default: () => [a]
+            listSize: ae.value,
+            itemIndex: l,
+            cloneIndex: l,
+            bounds: A,
+            alignItems: D.value,
+            size: e.itemSize,
+            safeMargin: e.safeMargin,
+            numItems: x.value.length
+          }, Le(f = xe([u])) ? f : {
+            default: () => [f]
           }));
         });
+        const o = `ticker-group-${i}`;
+        n.push(z(Ke, {
+          key: o,
+          id: o
+        }, Le(a) ? a : {
+          default: () => [a]
+        }));
+      }
       return n;
-    }), j = me(e, "axis");
-    Le(f, j, T, g, (n) => {
-      F.value = n;
+    }), r = Ne(e, "axis");
+    tt(g, r, te, d, (n) => {
+      Z.value = n;
     });
-    const oe = {
+    const Oe = {
       display: "flex",
       position: "relative"
-    }, ie = l(() => ({
+    }, Te = {
       display: "flex",
       position: "relative",
-      willChange: x.value && y.value ? "transform" : void 0,
+      willChange: "transform",
       listStyleType: "none",
       padding: 0,
       margin: 0,
-      justifyContent: "flex-start",
-      flexDirection: e.axis === "x" ? "row" : "column",
-      gap: `${e.gap}px`,
-      alignItems: L.value,
-      x: e.axis === "x" ? h.value : 0,
-      y: e.axis === "y" ? h.value : 0,
-      opacity: x.value ? 1 : 0,
-      width: "100%",
-      height: "100%",
-      maxHeight: "100%",
-      maxWidth: "100%"
-    }));
-    return (n, o) => (m(), I(u(J).div, de(n.$attrs, {
+      justifyContent: "flex-start"
+    };
+    function oe(n) {
+      return t.maxInset !== null ? et(-t.maxInset, 0, n) : n;
+    }
+    lt({
+      state: t,
+      gap: s(() => e.gap),
+      clampOffset: oe,
+      renderedOffset: y
+    });
+    const S = s(() => e.axis === "x" ? e == null ? void 0 : e._dragX : e == null ? void 0 : e._dragY);
+    let M = null;
+    const V = s(() => t.maxInset !== null ? r.value === "x" ? h.value > 0 ? {
+      left: t.maxInset * -1,
+      right: 0
+    } : {
+      right: t.maxInset,
+      left: 0
+    } : {
+      top: t.maxInset * -1,
+      bottom: 0
+    } : {});
+    function ie() {
+      M && (M.stop(), M = null);
+    }
+    const ze = s(() => !e.onDragEnd && e.drag && S ? () => {
+      S.value.jump(d.value.get()), ie();
+    } : e.onPointerDown), Be = s(() => !e.onDragEnd && e.drag && S ? (n, {
+      velocity: i
+    }) => {
+      const a = d.value.get();
+      ie(), Qe.postRender(() => {
+        let o = a + i[r.value] * (e.snap ? 0.3 : 0.8);
+        if (e.snap)
+          if (i[r.value] < 0)
+            o = -we(-a, t.itemPositions, e.gap, -o);
+          else if (i[r.value] > 0)
+            o = -Pe(-a, t.itemPositions, e.gap, -o, t.containerLength);
+          else {
+            const l = -we(-a, t.itemPositions, e.gap, -a), f = -Pe(-a, t.itemPositions, e.gap, -a, t.containerLength);
+            o = Math.abs(a - l) < Math.abs(a - f) ? l : f;
+          }
+        const u = e.loop ? {} : h.value > 0 ? {
+          max: 0,
+          min: V.value[r.value === "x" ? "left" : "top"]
+        } : {
+          min: 0,
+          max: V.value.right
+        };
+        M = v(S, oe(o * h.value) * h.value, e.snap ? e.pageTransition : {
+          type: "inertia",
+          velocity: i[r.value],
+          modifyTarget: () => o,
+          bounceDamping: 40,
+          bounceStiffness: 400,
+          ...u
+        });
+      });
+    } : e.onDragEnd), F = P(e.loop ? 0 : 1), N = P(0), $e = s(() => U(r.value, t.direction)), se = s(() => typeof e.fade == "number" ? "px" : ""), re = ce(() => `linear-gradient(to ${$e.value.direction}, rgba(0,0,0,${F.get()}) 0px, black ${e.fade}${se.value}, black calc(100% - ${e.fade}${se.value}), rgba(0,0,0,${N.get()}) 100%)`), De = s(() => e.fade ? {
+      maskImage: re,
+      WebkitMaskImage: re
+    } : {}), m = {
+      start: !0,
+      end: !1
+    };
+    return ge(y, (n, i, a) => {
+      const o = (l) => {
+        if (t.maxInset === null) return;
+        const f = t.maxInset * -1;
+        l *= h.value, l < 0 ? m.start && (v(F, 0, e.fadeTransition), m.start = !1) : m.start || (v(F, 1, e.fadeTransition), m.start = !0), l > f ? m.end && (v(N, 0, e.fadeTransition), m.end = !1) : m.end || (v(N, 1, e.fadeTransition), m.end = !0);
+      };
+      let u = () => {
+      };
+      n && (u = n.on("change", o)), a(u);
+    }, {
+      immediate: !0
+    }), (n, i) => (p(), B($, null, [z(c(Ue), Xe(n.$attrs, {
       ref_key: "containerRef",
-      ref: f,
+      ref: g,
+      as: n.as,
       style: {
-        ...oe,
+        overflowX: !n.overflow && r.value === "x" ? "clip" : void 0,
+        overflowY: !n.overflow && r.value === "y" ? "clip" : void 0,
+        ...Oe,
         ...e.style,
-        overflow: e.overflow ? "visible" : "hidden"
+        ...De.value
       },
-      onPointerenter: o[0] || (o[0] = () => {
-        u(K)(u(b), n.hoverFactor);
+      drag: n.drag,
+      _dragX: n._dragX,
+      _dragY: n._dragY,
+      "drag-constraints": V.value,
+      "drag-momentum": n.dragMomentum,
+      onPointerenter: i[0] || (i[0] = () => {
+        c(v)(c(E), n.hoverFactor);
+      }),
+      onPointerleave: i[1] || (i[1] = () => {
+        c(v)(c(E), 1);
       }),
-      onPointerleave: o[1] || (o[1] = () => {
-        u(K)(u(b), 1);
-      })
+      onPointerdown: ze.value,
+      onDragEnd: Be.value
     }), {
-      default: _(() => [W(u(J).ul, {
+      default: J(() => [z(c(Ze).ul, {
         ref_key: "listRef",
-        ref: z,
-        style: ve(ie.value)
+        ref: _,
+        role: "group",
+        style: Ye({
+          ...Te,
+          flexDirection: r.value === "x" ? "row" : "column",
+          gap: `${n.gap}px`,
+          x: r.value === "x" ? y.value : 0,
+          y: r.value === "y" ? y.value : 0,
+          opacity: b.value ? 1 : 0,
+          alignItems: D.value,
+          willChange: b.value && L.value ? "transform" : void 0,
+          width: "100%",
+          height: "100%",
+          maxHeight: "100%",
+          maxWidth: "100%"
+        })
       }, {
-        default: _(() => [(m(!0), O(R, null, V(P.value, (i, s) => (m(), I(Q, {
-          key: `original-${s}`,
-          axis: j.value,
-          offset: h.value,
-          "list-size": N.value,
-          "item-index": s,
-          bounds: t.itemPositions[s] ?? u(U),
-          inset: t.inset,
-          "align-items": L.value,
-          "item-size": n.itemSize
+        default: J(() => [(p(!0), B($, null, K(x.value, (a, o) => (p(), Q(ye, {
+          key: `original-${o}`,
+          axis: r.value,
+          offset: y.value,
+          "list-size": ae.value,
+          "item-index": o,
+          bounds: t.itemPositions[o] ?? c(Ie),
+          "align-items": D.value,
+          size: n.itemSize,
+          reproject: n.loop,
+          "safe-margin": n.safeMargin,
+          "num-items": x.value.length
         }, {
-          default: _(() => [(m(!0), O(R, null, V(u(X)([i]), (a, d) => (m(), I(E(a), {
-            key: d
+          default: J(() => [(p(!0), B($, null, K(c(xe)([a]), (u, l) => (p(), Q(me(u), {
+            key: l
           }))), 128))]),
           _: 2
-        }, 1032, ["axis", "offset", "list-size", "item-index", "bounds", "inset", "align-items", "item-size"]))), 128)), (m(!0), O(R, null, V(ne.value, (i) => (m(), I(E(i), {
-          key: i.key
+        }, 1032, ["axis", "offset", "list-size", "item-index", "bounds", "align-items", "size", "reproject", "safe-margin", "num-items"]))), 128)), (p(!0), B($, null, K(Ce.value, (a) => (p(), Q(me(a), {
+          key: a.key
         }))), 128))]),
         _: 1
       }, 8, ["style"])]),
       _: 1
-    }, 16, ["style"]));
+    }, 16, ["as", "style", "drag", "_dragX", "_dragY", "drag-constraints", "drag-momentum", "onPointerdown", "onDragEnd"]), Ae(n.$slots, "after")], 64));
   }
 });
 export {
-  Ne as default
+  Pt as default
 };

package/dist/es/components/Ticker/TickerItem.vue.mjs

@@ -1,52 +1,84 @@
-import { defineComponent as c, computed as f, createBlock as p, openBlock as x, unref as n, mergeProps as v, withCtx as S, renderSlot as h } from "vue";
-import { useTransform as l, motion as z } from "motion-v";
-import { provideTickerItemContext as I } from "./context.mjs";
-const C = /* @__PURE__ */ c({
+import { defineComponent as z, computed as l, toRefs as b, renderSlot as c, createBlock as S, openBlock as T, unref as B, normalizeProps as w, mergeProps as P, withCtx as _ } from "vue";
+import { useTransform as m, motion as j } from "motion-v";
+import { useTicker as C, provideTickerItem as O } from "./context.mjs";
+import { getLayoutStrategy as L } from "./utils/layout-strategy.mjs";
+const F = /* @__PURE__ */ z({
   __name: "TickerItem",
   props: {
     offset: {},
     axis: {},
-    listSize: {},
-    inset: {},
+    listSize: { default: 0 },
     bounds: {},
+    numItems: { default: 0 },
     itemIndex: {},
     cloneIndex: {},
     alignItems: {},
-    itemSize: { default: "auto" }
+    size: { default: "auto" },
+    safeMargin: {},
+    reproject: { type: Boolean, default: !0 }
   },
-  setup(a) {
-    const t = a, o = l(() => {
-      const e = t.offset.get(), { start: i, end: s } = t.bounds;
-      return !i && !s || !t.listSize ? 0 : e + s <= -t.inset ? t.listSize : 0;
-    }), d = l(() => {
-      const { start: e, end: i } = t.bounds, s = t.offset.get(), u = o.get();
-      return !e && !i || !t.listSize ? 0 : s + e + u;
-    }), r = f(
-      () => t.alignItems === "stretch" ? "100%" : "fit-content"
-    ), m = f(() => t.cloneIndex !== void 0);
-    return I({
-      offset: d
-    }), (e, i) => (x(), p(n(z).li, v(e.$attrs, {
-      class: e.cloneIndex === void 0 ? "ticker-item" : "clone-item",
-      "aria-hidden": m.value ? !0 : void 0,
-      style: {
-        flexGrow: 0,
-        flexShrink: 0,
-        flexBasis: e.itemSize === "fill" ? "100%" : void 0,
-        display: e.itemSize === "fill" ? "flex" : void 0,
-        height: e.axis === "x" ? r.value : void 0,
-        width: e.axis === "y" ? r.value : void 0,
-        x: e.axis === "x" ? n(o) : 0,
-        y: e.axis === "y" ? n(o) : 0
+  setup(p) {
+    const e = p, { state: o } = C(), s = l(() => L(e.axis, o.direction).sign), n = m(() => {
+      if (!e.reproject)
+        return 0;
+      const { offset: t, bounds: i, listSize: r, safeMargin: a } = e, { start: y, end: d } = i;
+      if (!y && !d || !r)
+        return 0;
+      const f = t.get();
+      if (f * s.value + d <= -o.inset - a)
+        return r * s.value;
+      if (a > 0) {
+        const k = o.visibleLength - a - o.inset;
+        if (f * s.value + i.start >= k)
+          return -r * s.value;
       }
-    }), {
-      default: S(() => [
-        h(e.$slots, "default")
+      return 0;
+    }), v = m(() => {
+      const t = e.offset.get(), i = n.get();
+      return !e.bounds.start && !e.bounds.end || !e.listSize ? 0 : t * s.value + e.bounds.start + i * s.value;
+    }), x = l(() => e.cloneIndex === void 0 ? {
+      "aria-hidden": !1,
+      "aria-posinset": e.itemIndex + 1,
+      "aria-setsize": e.numItems
+    } : {
+      "aria-hidden": !0
+    }), u = l(() => {
+      const t = e.size === "fill", i = e.alignItems === "stretch" ? "100%" : "fit-content";
+      return {
+        class: e.cloneIndex === void 0 ? "ticker-item" : "clone-item",
+        style: {
+          flexGrow: 0,
+          flexShrink: 0,
+          position: "relative",
+          flexBasis: t ? "100%" : void 0,
+          display: t ? "grid" : void 0,
+          gridTemplateColumns: t ? "1fr" : void 0,
+          gridTemplateRows: t ? "1fr" : void 0,
+          minWidth: t ? 0 : void 0,
+          minHeight: t ? 0 : void 0,
+          height: e.axis === "x" ? i : void 0,
+          width: e.axis === "y" ? i : void 0,
+          x: e.axis === "x" ? n : 0,
+          y: e.axis === "y" ? n : 0
+        },
+        ...x.value
+      };
+    }), { bounds: g, itemIndex: I, cloneIndex: h } = b(e);
+    return O({
+      offset: v,
+      bounds: g,
+      projection: n,
+      itemIndex: I,
+      cloneIndex: h,
+      props: u
+    }), (t, i) => t.size === "manual" ? c(t.$slots, "default", { key: 0 }) : (T(), S(B(j).li, w(P({ key: 1 }, u.value)), {
+      default: _(() => [
+        c(t.$slots, "default")
       ]),
       _: 3
-    }, 16, ["class", "aria-hidden", "style"]));
+    }, 16));
   }
 });
 export {
-  C as default
+  F as default
 };

package/dist/es/components/Ticker/const.mjs

@@ -1,8 +1,17 @@
-const t = { start: 0, end: 0 }, e = {
+const t = { start: 0, end: 0 }, n = {
   start: "flex-start",
   end: "flex-end"
+}, a = {
+  duration: 0.2,
+  ease: "linear"
+}, e = {
+  type: "spring",
+  stiffness: 400,
+  damping: 40
 };
 export {
-  e as alignAlias,
-  t as defaultBounds
+  n as alignAlias,
+  t as defaultBounds,
+  a as defaultFadeTransition,
+  e as defaultPageTransition
 };

package/dist/es/components/Ticker/context.mjs

@@ -1,6 +1,8 @@
 import { createContext as e } from "motion-v";
-const [o, r] = e("TickerItemContext");
+const [t, o] = e("TickerItemContext"), [c, i] = e("TickerInfo");
 export {
-  r as provideTickerItemContext,
-  o as useTickerItemContext
+  i as provideTicker,
+  o as provideTickerItem,
+  c as useTicker,
+  t as useTickerItem
 };

package/dist/es/components/Ticker/utils/layout-strategy.mjs

@@ -0,0 +1,57 @@
+function d(t, e, f, r, a) {
+  return {
+    sign: 1,
+    direction: a,
+    lengthProp: e,
+    viewportLengthProp: f,
+    paddingStartProp: r,
+    measureItem: (n) => ({
+      start: n[t],
+      end: n[t] + n[e]
+    }),
+    getCumulativeInset: (n) => {
+      let s = 0, o = n;
+      for (; o; )
+        s += o[t], o = o.offsetParent;
+      return s;
+    }
+  };
+}
+const g = d(
+  "offsetLeft",
+  "offsetWidth",
+  "innerWidth",
+  "paddingLeft",
+  "right"
+), u = d(
+  "offsetTop",
+  "offsetHeight",
+  "innerHeight",
+  "paddingTop",
+  "bottom"
+);
+function i(t, e) {
+  return ((e == null ? void 0 : e.offsetWidth) ?? window.innerWidth) - (t.offsetLeft + t.offsetWidth);
+}
+const h = {
+  ...g,
+  sign: -1,
+  direction: "left",
+  paddingStartProp: "paddingRight",
+  measureItem: (t, e) => {
+    const f = t.offsetWidth, r = i(t, e);
+    return { start: r, end: r + f };
+  },
+  getCumulativeInset: (t) => {
+    let e = 0, f = t;
+    for (; f; )
+      e += i(f, f.offsetParent), f = f.offsetParent;
+    return e;
+  }
+};
+function l(t, e) {
+  return t === "y" ? u : e === "ltr" ? g : h;
+}
+export {
+  l as getLayoutStrategy
+};