@haventmet/carousel 1.0.0 → 1.0.1

package/README.md

@@ -1,69 +1,62 @@
-![Blossom Carousel](./public/cover.jpg)
+# Blossom Core
 
-# Blossom Carousel
-
-<p>
-<a href="https://www.npmjs.com/package/@numbered/carousel/core"><img src="https://img.shields.io/npm/v/@numbered/carousel/core.svg?color=%23c1a8e2"></a>
-<a href="https://bundlephobia.com/package/@numbered/carousel/core"><img src="https://img.shields.io/bundlephobia/minzip/@numbered/carousel/core?color=%238ab4f8&label=gzip%20size"></a>
-</p>
-
-The native-first carousel enhanced with drag support.
-
-➥ [www.blossom-carousel.com](http://www.blossom-carousel.com)
-
-## Why Blossom?
-
-<ul style="list-style: none; padding: 0;">
-<li>🥇 <strong>Native scrolling</strong>: Full performance and accessibility.</li>
-<li>🚀 <strong>Dragging</strong>: Custom physics-based dragging for all pointer types.</li>
-<li>✨ <strong>No abstraction</strong>: use all native web API's.</li>
-<li>💡 <strong>Configure with CSS</strong>: Works with native scroll-snap, position sticky and scroll-driven animations.</li>
-<li>🪶 <strong>0kb on touch devices</strong>: Blossom only loads when a fine pointer device is detected.</li>
-<li>🧱 <strong>Works with major frameworks</strong>: Components for React, Vue, Svelte and Web Components.</li>
-</ul>
+A native-scroll-first carousel for the web.
 
 ## Installation
 
-### React
-
-[React Docs](./packages/react)
+Add the blossom-carousel package to your project.
 
 ```bash
-npm install @numbered/carousel/react
+npm install @numbered/carousel/core
 ```
 
-### Vue
+Then, create a Blossom instance and initialize it.
 
-[Vue Docs](./packages/vue)
+```js
+import { Blossom } from "@numbered/carousel/core";
+import "@numbered/carousel/core/style.css";
 
-```bash
-npm install @numbered/carousel/vue
+const element = document.querySelector("#my-carousel-element");
+// prepare the Blossom carousel
+const blossom = Blossom(element);
+// initialize whenever you want
+blossom.init();
 ```
 
-### Svelte
+## Lazy loading
 
-[Svelte Docs](./packages/svelte)
+Load Blossom only when needed.
 
-```bash
-npm install @numbered/carousel/svelte
-```
+```js
+const hasMouse = window.matchMedia(
+  "(hover: hover) and (pointer: fine)"
+).matches;
 
-### Web Component
+// We don't need Blossom's engine on touch devices
+if (!hasMouse) return;
 
-[Web Component Docs](./packages/web)
+const { Blossom } = await import("@numbered/carousel/core");
 
-```bash
-npm install @numbered/carousel/web
+const element = document.querySelector("#my-carousel-element");
+const blossom = Blossom(element);
+blossom.init();
 ```
 
-### Core
+### Destroy
 
-[Core Docs](./packages/core)
+Destroy the Blossom instance when you no longer need it to free up resources.
 
-```bash
-npm install @numbered/carousel/core
+```js
+blossom.destroy();
 ```
 
+### Get started in your favorite framework:
+
+- [React](https://www.npmjs.com/package/@numbered/carousel/react)
+- [Vue](https://www.npmjs.com/package/@numbered/carousel/vue)
+- [Svelte](https://www.npmjs.com/package/@numbered/carousel/svelte)
+- [Web Component](https://www.npmjs.com/package/@numbered/carousel/web)
+
 ## Examples
 
 - [Simple](https://www.blossom-carousel.com/docs/examples#simple)

package/dist/carousel.css

@@ -0,0 +1 @@
+[blossom-carousel]{display:inline-block;white-space:nowrap;overflow-x:auto;overflow-y:clip;scroll-behavior:smooth;overscroll-behavior-x:contain;list-style-type:none;inline-size:100%;max-inline-size:100vw;box-sizing:border-box}[blossom-carousel][has-repeat=true]{scroll-padding-inline:50%!important;padding-inline:50%!important}[blossom-carousel]>*{display:inline-block;white-space:initial;vertical-align:top}[blossom-carousel] *{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}[blossom-carousel].blossom-dragging>*{pointer-events:none}

package/dist/carousel.d.ts

@@ -0,0 +1,17 @@
+interface HasOverflow {
+    x: boolean;
+    y: boolean;
+}
+export interface CarouselOptions {
+    repeat?: boolean;
+}
+export declare const Blossom: (scroller: HTMLElement, options: CarouselOptions) => {
+    init: () => void;
+    snap: boolean;
+    hasOverflow: HasOverflow;
+    currentIndex: () => number;
+    next: () => void;
+    prev: () => void;
+    destroy: () => void;
+};
+export {};

package/dist/carousel.js

@@ -0,0 +1,387 @@
+const $t = (i, r) => {
+  let U = !0;
+  const _ = { x: 0, y: 0 }, d = { x: 0, y: 0 }, m = { x: 0, y: 0 }, P = new Proxy(
+    { x: 0, y: 0 },
+    {
+      set(t, n, e) {
+        if (!X) {
+          if (t[n] === e) return !0;
+          t[n] = e, (t.x >= 10 || t.y >= 10) && E(!0);
+        }
+        return !0;
+      }
+    }
+  ), f = new Proxy(
+    { x: !1, y: !1 },
+    {
+      set(t, n, e) {
+        return t[n] === e || (t[n] = e, t.x || t.y ? (i.setAttribute("has-overflow", "true"), i.addEventListener("touchstart", F, { passive: !1 }), i.addEventListener("pointerdown", F, { passive: !1 }), i.addEventListener("wheel", ft, { passive: !1 })) : (i.removeAttribute("has-overflow"), i.removeEventListener("touchstart", F), i.removeEventListener("pointerdown", F), i.removeEventListener("wheel", ft))), !0;
+      }
+    }
+  ), p = new Proxy(
+    { value: 0, onChange: null },
+    {
+      set(t, n, e) {
+        if (t[n] === e) return !0;
+        if (t[n] = e, n === "value") {
+          const a = new CustomEvent("change", {
+            bubbles: !0,
+            detail: { index: e }
+          });
+          i == null || i.dispatchEvent(a);
+        }
+        return !0;
+      }
+    }
+  );
+  let K = 300, y = null, b = !1, A = 300, g = 300, st = 300, at = 300;
+  const rt = 0, V = { start: 0, end: 0 };
+  let J = 0, w = [], x = [], Q = [];
+  const S = [];
+  let B = [], I = null, T = null, lt = !1, ot = !1, X = !0, Y, c = 1;
+  function Pt() {
+    i == null || i.setAttribute("blossom-carousel", "true"), B = Array.from(i.children), window.addEventListener("keydown", dt), i.addEventListener("scroll", ut), c = i.closest('[dir="rtl"]') ? -1 : 1;
+    const { scrollSnapType: t } = window.getComputedStyle(i);
+    lt = t !== "none", i.style.setProperty("--snap-type", t), i.setAttribute("has-repeat", r != null && r.repeat ? "true" : "false"), ot = window.matchMedia("(hover: hover) and (pointer: fine)").matches, X = !ot && !(r != null && r.repeat), X || (i.style.scrollSnapType = "none"), Y = Dt((e) => {
+      (e === i || i.contains(e)) && E(!1);
+    }), I = new ResizeObserver(ct);
+    const n = i.parentElement;
+    n && i.clientWidth === n.clientWidth ? I.observe(n) : I.observe(i), T = new MutationObserver(Tt), T.observe(i, {
+      attributes: !1,
+      childList: !0,
+      subtree: !1
+    });
+  }
+  function At() {
+    i.removeAttribute("blossom-carousel"), I == null || I.disconnect(), T == null || T.disconnect(), y && cancelAnimationFrame(y), window.removeEventListener("keydown", dt), i.removeEventListener("scroll", ut), Y == null || Y();
+  }
+  function ct() {
+    if (!i) return;
+    E(!1);
+    for (let e = 0; e < x.length; e++) {
+      const s = x[e];
+      s.style.translate = "";
+    }
+    A = i.scrollWidth, g = i.clientWidth, st = i.scrollHeight, at = i.clientHeight;
+    const t = window.getComputedStyle(i);
+    f.x = // !hasTouch &&
+    A > g && ["auto", "scroll"].includes(t.getPropertyValue("overflow-x")), f.y = // !hasTouch &&
+    st > at && ["auto", "scroll"].includes(t.getPropertyValue("overflow-y")), Number.parseInt(t.paddingInlineStart, 10), Number.parseInt(t.paddingInlineEnd, 10), V.start = Number.parseInt(t.scrollPaddingInlineStart, 10) || 0, V.end = Number.parseInt(t.scrollPaddingInlineEnd, 10) || 0, c = i.closest('[dir="rtl"]') ? -1 : 1, J = Number.parseInt(t.gap, 10) || Number.parseInt(t.columnGap, 10) || 0, K = (A - g - rt + J) * c;
+    const n = lt ? kt(i) : { points: [], elements: [], alignments: [] };
+    w = n.points, x = n.elements, Q = n.alignments, d.x = l.x = w[p.value], i.scrollTo({ left: l.x, behavior: "instant" }), r != null && r.repeat && Z();
+  }
+  function Tt() {
+    ct();
+  }
+  function kt(t) {
+    const n = [];
+    let e = 0;
+    const s = (o) => {
+      if (e++, e > 100) return;
+      const z = window.getComputedStyle(o).scrollSnapAlign;
+      if (z !== "none") {
+        n.push({
+          align: z,
+          el: o
+        });
+        return;
+      }
+      const R = o.children;
+      if (R.length !== 0)
+        for (const D of R)
+          s(D);
+    };
+    s(t);
+    const a = t.getBoundingClientRect(), u = n.map(({ el: o, align: L }) => {
+      const z = o.getBoundingClientRect(), R = o.clientWidth, D = z.left - a.left + t.scrollLeft;
+      let G = null;
+      switch (L) {
+        case "start":
+          G = D - V.start;
+          break;
+        case "end":
+          G = D + R - g + V.end;
+          break;
+        case "center":
+          G = D + R * 0.5 - g / 2;
+          break;
+      }
+      return { position: G, element: o, align: L };
+    }), v = [], h = /* @__PURE__ */ new Set();
+    for (const o of u)
+      o.position !== null && !h.has(o.position) && (h.add(o.position), v.push({ position: o.position, element: o.element, align: o.align }));
+    return {
+      points: v.map((o) => o.position),
+      elements: v.map((o) => o.element),
+      alignments: v.map((o) => o.align)
+    };
+  }
+  function ut() {
+    if (b || !i) return;
+    if (C || (l.x = d.x = i.scrollLeft), r != null && r.repeat) {
+      Z(), it();
+      return;
+    }
+    const t = i.scrollLeft, n = Lt();
+    if (t < 0) {
+      const e = t * -1;
+      et(e);
+    } else if (t > n) {
+      const e = t * -1 + n;
+      et(e);
+    }
+    it();
+  }
+  const l = {
+    x: 0,
+    y: 0
+  };
+  function Ct() {
+    window.addEventListener("pointermove", H, { passive: !0 }), window.addEventListener("touchmove", H, { passive: !0 }), window.addEventListener("pointerup", O, { passive: !0 }), window.addEventListener("touchend", O, { passive: !0 });
+  }
+  function Wt() {
+    window.removeEventListener("pointermove", H), window.removeEventListener("touchmove", H), window.removeEventListener("pointerup", O), window.removeEventListener("touchend", O);
+  }
+  function F(t) {
+    var s, a;
+    if (!i) return;
+    const n = "touches" in t ? (s = t.touches[0]) == null ? void 0 : s.clientX : t.clientX, e = "touches" in t ? (a = t.touches[0]) == null ? void 0 : a.clientY : t.clientY;
+    f.x && wt("x", n), f.y && wt("y", e), P.x = 0, b = !0, Ct();
+  }
+  function H(t) {
+    var s, a;
+    const n = "touches" in t ? (s = t.touches[0]) == null ? void 0 : s.clientX : t.clientX, e = "touches" in t ? (a = t.touches[0]) == null ? void 0 : a.clientY : t.clientY;
+    f.x && xt("x", n), f.y && xt("y", e), (P.x > 2 || P.y > 2) && i.classList.add("blossom-dragging");
+  }
+  function O() {
+    Wt(), b = !1, i.classList.remove("blossom-dragging"), !(P.x <= 10) && (f.x && (m.x *= 2), f.y && (m.y *= 2), Nt());
+  }
+  function ft(t) {
+    if (Math.abs(t.deltaX) > Math.abs(t.deltaY)) {
+      if (E(!1), b || !i) return;
+      f.x && (l.x = i.scrollLeft), f.y && (l.y = i.scrollTop);
+    }
+  }
+  function dt(t) {
+    ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(t.key) && E(!1);
+  }
+  function Nt() {
+    let t;
+    if (r != null && r.repeat && x.length > 0) {
+      const n = w.length;
+      if (n >= 2) {
+        const e = (p.value % n + n) % n, s = m.x * c >= 0 ? 1 : -1, a = (e + s + n) % n;
+        t = Yt(a, s);
+      } else
+        t = yt({ axis: "x" });
+    } else if (!(r != null && r.repeat) && x.length) {
+      const n = St();
+      t = bt(yt({ axis: "x" }), n.min, n.max);
+    }
+    t !== void 0 && It(t);
+  }
+  const $ = [], j = /* @__PURE__ */ new Map();
+  function Z() {
+    if (!i) return;
+    const t = N();
+    if (t === 0) return;
+    l.x >= K ? (l.x -= t, d.x -= t, C || i.scrollTo({ left: l.x, behavior: "instant" })) : l.x <= rt && (l.x += t, d.x += t, C || i.scrollTo({ left: l.x, behavior: "instant" }));
+    const n = l.x;
+    j.clear(), $.length = w.length;
+    for (let e = 0; e < x.length; e++) {
+      const s = x[e], a = w[e] ?? 0, u = Q[e] ?? "start", v = u === "start" ? 0 : u === "end" ? (g - s.clientWidth) / 2 : (-g + s.clientWidth) / 2, h = (n - a + v) / t, L = Math.round(h + (m.x >= 0 ? 1e-3 : -1e-3)) * t;
+      s.style.translate = `${L}px 0`, j.set(s, L), $[e] = a + L;
+    }
+    for (let e = 0; e < B.length; e++) {
+      const s = B[e];
+      if (j.has(s)) continue;
+      let a = 0;
+      for (let u = e - 1; u >= 0; u--) {
+        const v = B[u], h = j.get(v);
+        if (h !== void 0) {
+          a = h;
+          break;
+        }
+      }
+      s.style.translate = `${a}px 0`;
+    }
+    S.length = 0;
+    for (let e = 0; e < $.length; e++) S.push($[e]);
+  }
+  const k = 0.72, ht = 0.12;
+  let C = !1;
+  function E(t) {
+    i && (t && !C ? (tt = performance.now(), f.x && (d.x = i.scrollLeft), f.y && (d.y = i.scrollTop), y || (y = requestAnimationFrame(mt))) : !t && y && (cancelAnimationFrame(y), y = null), C = t, U = !t, i.setAttribute("has-snap", U ? "true" : "false"));
+  }
+  let q = 0, tt = 0;
+  function mt(t) {
+    y = requestAnimationFrame(mt), q = t - tt, i && (f.x && pt("x"), f.y && pt("y"), r != null && r.repeat ? Z() : Rt(Et(l.x, 2)), W = !0, i.scrollTo({
+      left: l.x,
+      top: l.y,
+      behavior: "instant"
+    }), it(), tt = t);
+  }
+  let M = 0;
+  function Rt(t) {
+    if (!i) return;
+    const n = K;
+    let e = 0;
+    if (t * c <= 0 ? e = b ? t * -0.2 : 0 : t * c > n * c && (e = b ? (t - n) * -0.2 : 0), M = nt(M, e, b ? 0.8 : ht, q), Math.abs(M) > 0.01) {
+      if (et(M).defaultPrevented) return;
+      i.style.transform = `translateX(${Et(M, 3)}px)`;
+      return;
+    }
+    i.style.transform = "", M = 0;
+  }
+  function et(t) {
+    const n = new CustomEvent("overscroll", {
+      bubbles: !0,
+      cancelable: !0,
+      detail: { left: t }
+    });
+    return i == null || i.dispatchEvent(n), n;
+  }
+  let W = !1;
+  const vt = i.scrollTo.bind(i);
+  i.scrollTo = (t, n) => {
+    W === !0 || E(!1), W = !1, typeof t == "number" ? vt(t, n ?? 0) : vt(t);
+  };
+  const gt = i.scrollBy.bind(i);
+  i.scrollBy = (t, n) => {
+    W === !0 || E(!1), W = !1, typeof t == "number" ? gt(t, n ?? 0) : gt(t);
+  };
+  function Dt(t) {
+    const n = [], e = Element.prototype.scrollIntoView;
+    return e && (Element.prototype.scrollIntoView = function(s) {
+      t(this, "scrollIntoView", [s]), e.call(this, s);
+    }, n.push(() => {
+      Element.prototype.scrollIntoView = e;
+    })), () => n.forEach((s) => {
+      s();
+    });
+  }
+  function wt(t, n) {
+    const e = t === "x" ? "scrollLeft" : "scrollTop";
+    l[t] = i[e], d[t] = i[e], _[t] = n, m[t] = 0;
+  }
+  function xt(t, n) {
+    const e = _[t] - n;
+    d[t] += e, m[t] += e, _[t] = n, P[t] += Math.abs(e);
+  }
+  function pt(t) {
+    m[t] *= k, b ? l[t] = nt(l[t], d[t], k, q) : (d[t] += m[t], l[t] = nt(l[t], d[t], ht, q));
+  }
+  function Vt({ axis: t = "x" }) {
+    return d[t] + m[t] / (1 - k);
+  }
+  function yt({ axis: t = "x" }) {
+    const n = Vt({ axis: t });
+    return (S.length ? S : w).reduce((s, a) => Math.abs(a - n) < Math.abs(s - n) ? a : s);
+  }
+  function Bt(t, n, e) {
+    return (1 - e) * t + e * n;
+  }
+  function nt(t, n, e, s) {
+    return Bt(t, n, 1 - Math.exp(Math.log(1 - e) * (s / 16.666666666666668)));
+  }
+  function bt(t, n, e) {
+    return t < n ? n : t > e ? e : t;
+  }
+  function Et(t, n = 0) {
+    const e = 10 ** n;
+    return Math.round(t * e) / e;
+  }
+  function N() {
+    return A - g + J;
+  }
+  function Lt() {
+    return A - g;
+  }
+  function St() {
+    const t = Lt();
+    return {
+      min: Math.min(t * c, 0),
+      max: Math.max(t * c, 0)
+    };
+  }
+  function Xt(t, n) {
+    const e = N();
+    if (e <= 0) return t;
+    const s = Math.round((n - t) / e);
+    return t + s * e;
+  }
+  function It(t, n) {
+    if (t === void 0 || Number.isNaN(t)) return;
+    E(!0), d.x = l.x;
+    let e = t - l.x;
+    if (r != null && r.repeat) {
+      const a = N();
+      a > 0 && (e = e - Math.round(e / a) * a, n === 1 && e * c <= 0 && (e += a * c), n === -1 && e * c >= 0 && (e -= a * c));
+    }
+    const s = e * (1 - k) * (1 / k);
+    m.x = s;
+  }
+  function Yt(t, n) {
+    const e = w[t] ?? 0, s = Xt(e, l.x), a = N();
+    if (a <= 0) return s;
+    const u = s - l.x;
+    return n === 1 && u * c <= 0 ? s + a * c : n === -1 && u * c >= 0 ? s - a * c : s;
+  }
+  function Ft() {
+    const t = r != null && r.repeat && S.length ? S : w;
+    if (!t.length) return 0;
+    const n = i.scrollLeft;
+    let e = 0, s = Math.abs(t[0] - n);
+    for (let a = 1; a < t.length; a++) {
+      const u = Math.abs(t[a] - n);
+      u < s && (s = u, e = a);
+    }
+    return e;
+  }
+  function it() {
+    const t = Ft();
+    p.value !== t && (p.value = t);
+  }
+  function Mt(t) {
+    if (x.length <= 1) return;
+    const n = w, e = r != null && r.repeat ? (p.value + t + n.length) % n.length : t === 1 ? Math.min(p.value + 1, n.length - 1) : Math.max(p.value - 1, 0);
+    if (X) {
+      const a = Q[e] ?? "start";
+      x[e].scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: a
+      });
+      return;
+    }
+    let s;
+    if (r != null && r.repeat && n.length >= 2) {
+      const a = N(), u = n[e], v = a > 0 ? Math.round((l.x - u) / a) : 0;
+      let h = u + v * a;
+      const o = h - l.x;
+      t === 1 && o * c <= 0 && (h += a * c), t === -1 && o * c >= 0 && (h -= a * c), s = h;
+    } else {
+      const a = St();
+      s = bt(n[e], a.min, a.max);
+    }
+    It(s, t);
+  }
+  function Ht() {
+    Mt(1);
+  }
+  function Ot() {
+    Mt(-1);
+  }
+  return {
+    init: Pt,
+    snap: U,
+    hasOverflow: f,
+    currentIndex: () => p.value,
+    next: Ht,
+    prev: Ot,
+    destroy: At
+  };
+};
+export {
+  $t as Blossom
+};

package/dist/carousel.umd.cjs

@@ -0,0 +1 @@
+(function(S,T){typeof exports=="object"&&typeof module<"u"?T(exports):typeof define=="function"&&define.amd?define(["exports"],T):(S=typeof globalThis<"u"?globalThis:S||self,T(S.BlossomCarousel={}))})(this,function(S){"use strict";const T=(i,o)=>{let K=!0;const J={x:0,y:0},d={x:0,y:0},m={x:0,y:0},A=new Proxy({x:0,y:0},{set(e,n,t){if(!F){if(e[n]===t)return!0;e[n]=t,(e.x>=10||e.y>=10)&&E(!0)}return!0}}),f=new Proxy({x:!1,y:!1},{set(e,n,t){return e[n]===t||(e[n]=t,e.x||e.y?(i.setAttribute("has-overflow","true"),i.addEventListener("touchstart",H,{passive:!1}),i.addEventListener("pointerdown",H,{passive:!1}),i.addEventListener("wheel",he,{passive:!1})):(i.removeAttribute("has-overflow"),i.removeEventListener("touchstart",H),i.removeEventListener("pointerdown",H),i.removeEventListener("wheel",he))),!0}}),x=new Proxy({value:0,onChange:null},{set(e,n,t){if(e[n]===t)return!0;if(e[n]=t,n==="value"){const a=new CustomEvent("change",{bubbles:!0,detail:{index:t}});i==null||i.dispatchEvent(a)}return!0}});let Q=300,y=null,b=!1,k=300,g=300,oe=300,le=300;const re=0,X={start:0,end:0};let Z=0,p=[],w=[],ee=[];const M=[];let Y=[],I=null,C=null,ce=!1,ue=!1,F=!0,j,c=1;function Ae(){i==null||i.setAttribute("blossom-carousel","true"),Y=Array.from(i.children),window.addEventListener("keydown",me),i.addEventListener("scroll",de),c=i.closest('[dir="rtl"]')?-1:1;const{scrollSnapType:e}=window.getComputedStyle(i);ce=e!=="none",i.style.setProperty("--snap-type",e),i.setAttribute("has-repeat",o!=null&&o.repeat?"true":"false"),ue=window.matchMedia("(hover: hover) and (pointer: fine)").matches,F=!ue&&!(o!=null&&o.repeat),F||(i.style.scrollSnapType="none"),j=Ve(t=>{(t===i||i.contains(t))&&E(!1)}),I=new ResizeObserver(fe);const n=i.parentElement;n&&i.clientWidth===n.clientWidth?I.observe(n):I.observe(i),C=new MutationObserver(Ce),C.observe(i,{attributes:!1,childList:!0,subtree:!1})}function ke(){i.removeAttribute("blossom-carousel"),I==null||I.disconnect(),C==null||C.disconnect(),y&&cancelAnimationFrame(y),window.removeEventListener("keydown",me),i.removeEventListener("scroll",de),j==null||j()}function fe(){if(!i)return;E(!1);for(let t=0;t<w.length;t++){const s=w[t];s.style.translate=""}k=i.scrollWidth,g=i.clientWidth,oe=i.scrollHeight,le=i.clientHeight;const e=window.getComputedStyle(i);f.x=k>g&&["auto","scroll"].includes(e.getPropertyValue("overflow-x")),f.y=oe>le&&["auto","scroll"].includes(e.getPropertyValue("overflow-y")),Number.parseInt(e.paddingInlineStart,10),Number.parseInt(e.paddingInlineEnd,10),X.start=Number.parseInt(e.scrollPaddingInlineStart,10)||0,X.end=Number.parseInt(e.scrollPaddingInlineEnd,10)||0,c=i.closest('[dir="rtl"]')?-1:1,Z=Number.parseInt(e.gap,10)||Number.parseInt(e.columnGap,10)||0,Q=(k-g-re+Z)*c;const n=ce?We(i):{points:[],elements:[],alignments:[]};p=n.points,w=n.elements,ee=n.alignments,d.x=l.x=p[x.value],i.scrollTo({left:l.x,behavior:"instant"}),o!=null&&o.repeat&&te()}function Ce(){fe()}function We(e){const n=[];let t=0;const s=r=>{if(t++,t>100)return;const U=window.getComputedStyle(r).scrollSnapAlign;if(U!=="none"){n.push({align:U,el:r});return}const D=r.children;if(D.length!==0)for(const V of D)s(V)};s(e);const a=e.getBoundingClientRect(),u=n.map(({el:r,align:L})=>{const U=r.getBoundingClientRect(),D=r.clientWidth,V=U.left-a.left+e.scrollLeft;let _=null;switch(L){case"start":_=V-X.start;break;case"end":_=V+D-g+X.end;break;case"center":_=V+D*.5-g/2;break}return{position:_,element:r,align:L}}),v=[],h=new Set;for(const r of u)r.position!==null&&!h.has(r.position)&&(h.add(r.position),v.push({position:r.position,element:r.element,align:r.align}));return{points:v.map(r=>r.position),elements:v.map(r=>r.element),alignments:v.map(r=>r.align)}}function de(){if(b||!i)return;if(B||(l.x=d.x=i.scrollLeft),o!=null&&o.repeat){te(),ae();return}const e=i.scrollLeft,n=Me();if(e<0){const t=e*-1;ie(t)}else if(e>n){const t=e*-1+n;ie(t)}ae()}const l={x:0,y:0};function Be(){window.addEventListener("pointermove",O,{passive:!0}),window.addEventListener("touchmove",O,{passive:!0}),window.addEventListener("pointerup",$,{passive:!0}),window.addEventListener("touchend",$,{passive:!0})}function Ne(){window.removeEventListener("pointermove",O),window.removeEventListener("touchmove",O),window.removeEventListener("pointerup",$),window.removeEventListener("touchend",$)}function H(e){var s,a;if(!i)return;const n="touches"in e?(s=e.touches[0])==null?void 0:s.clientX:e.clientX,t="touches"in e?(a=e.touches[0])==null?void 0:a.clientY:e.clientY;f.x&&xe("x",n),f.y&&xe("y",t),A.x=0,b=!0,Be()}function O(e){var s,a;const n="touches"in e?(s=e.touches[0])==null?void 0:s.clientX:e.clientX,t="touches"in e?(a=e.touches[0])==null?void 0:a.clientY:e.clientY;f.x&&ye("x",n),f.y&&ye("y",t),(A.x>2||A.y>2)&&i.classList.add("blossom-dragging")}function $(){Ne(),b=!1,i.classList.remove("blossom-dragging"),!(A.x<=10)&&(f.x&&(m.x*=2),f.y&&(m.y*=2),Re())}function he(e){if(Math.abs(e.deltaX)>Math.abs(e.deltaY)){if(E(!1),b||!i)return;f.x&&(l.x=i.scrollLeft),f.y&&(l.y=i.scrollTop)}}function me(e){["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)&&E(!1)}function Re(){let e;if(o!=null&&o.repeat&&w.length>0){const n=p.length;if(n>=2){const t=(x.value%n+n)%n,s=m.x*c>=0?1:-1,a=(t+s+n)%n;e=je(a,s)}else e=Ee({axis:"x"})}else if(!(o!=null&&o.repeat)&&w.length){const n=Ie();e=Le(Ee({axis:"x"}),n.min,n.max)}e!==void 0&&Pe(e)}const q=[],z=new Map;function te(){if(!i)return;const e=R();if(e===0)return;l.x>=Q?(l.x-=e,d.x-=e,B||i.scrollTo({left:l.x,behavior:"instant"})):l.x<=re&&(l.x+=e,d.x+=e,B||i.scrollTo({left:l.x,behavior:"instant"}));const n=l.x;z.clear(),q.length=p.length;for(let t=0;t<w.length;t++){const s=w[t],a=p[t]??0,u=ee[t]??"start",v=u==="start"?0:u==="end"?(g-s.clientWidth)/2:(-g+s.clientWidth)/2,h=(n-a+v)/e,L=Math.round(h+(m.x>=0?.001:-.001))*e;s.style.translate=`${L}px 0`,z.set(s,L),q[t]=a+L}for(let t=0;t<Y.length;t++){const s=Y[t];if(z.has(s))continue;let a=0;for(let u=t-1;u>=0;u--){const v=Y[u],h=z.get(v);if(h!==void 0){a=h;break}}s.style.translate=`${a}px 0`}M.length=0;for(let t=0;t<q.length;t++)M.push(q[t])}const W=.72,ve=.12;let B=!1;function E(e){i&&(e&&!B?(ne=performance.now(),f.x&&(d.x=i.scrollLeft),f.y&&(d.y=i.scrollTop),y||(y=requestAnimationFrame(ge))):!e&&y&&(cancelAnimationFrame(y),y=null),B=e,K=!e,i.setAttribute("has-snap",K?"true":"false"))}let G=0,ne=0;function ge(e){y=requestAnimationFrame(ge),G=e-ne,i&&(f.x&&be("x"),f.y&&be("y"),o!=null&&o.repeat?te():De(Se(l.x,2)),N=!0,i.scrollTo({left:l.x,top:l.y,behavior:"instant"}),ae(),ne=e)}let P=0;function De(e){if(!i)return;const n=Q;let t=0;if(e*c<=0?t=b?e*-.2:0:e*c>n*c&&(t=b?(e-n)*-.2:0),P=se(P,t,b?.8:ve,G),Math.abs(P)>.01){if(ie(P).defaultPrevented)return;i.style.transform=`translateX(${Se(P,3)}px)`;return}i.style.transform="",P=0}function ie(e){const n=new CustomEvent("overscroll",{bubbles:!0,cancelable:!0,detail:{left:e}});return i==null||i.dispatchEvent(n),n}let N=!1;const pe=i.scrollTo.bind(i);i.scrollTo=(e,n)=>{N===!0||E(!1),N=!1,typeof e=="number"?pe(e,n??0):pe(e)};const we=i.scrollBy.bind(i);i.scrollBy=(e,n)=>{N===!0||E(!1),N=!1,typeof e=="number"?we(e,n??0):we(e)};function Ve(e){const n=[],t=Element.prototype.scrollIntoView;return t&&(Element.prototype.scrollIntoView=function(s){e(this,"scrollIntoView",[s]),t.call(this,s)},n.push(()=>{Element.prototype.scrollIntoView=t})),()=>n.forEach(s=>{s()})}function xe(e,n){const t=e==="x"?"scrollLeft":"scrollTop";l[e]=i[t],d[e]=i[t],J[e]=n,m[e]=0}function ye(e,n){const t=J[e]-n;d[e]+=t,m[e]+=t,J[e]=n,A[e]+=Math.abs(t)}function be(e){m[e]*=W,b?l[e]=se(l[e],d[e],W,G):(d[e]+=m[e],l[e]=se(l[e],d[e],ve,G))}function Xe({axis:e="x"}){return d[e]+m[e]/(1-W)}function Ee({axis:e="x"}){const n=Xe({axis:e});return(M.length?M:p).reduce((s,a)=>Math.abs(a-n)<Math.abs(s-n)?a:s)}function Ye(e,n,t){return(1-t)*e+t*n}function se(e,n,t,s){return Ye(e,n,1-Math.exp(Math.log(1-t)*(s/16.666666666666668)))}function Le(e,n,t){return e<n?n:e>t?t:e}function Se(e,n=0){const t=10**n;return Math.round(e*t)/t}function R(){return k-g+Z}function Me(){return k-g}function Ie(){const e=Me();return{min:Math.min(e*c,0),max:Math.max(e*c,0)}}function Fe(e,n){const t=R();if(t<=0)return e;const s=Math.round((n-e)/t);return e+s*t}function Pe(e,n){if(e===void 0||Number.isNaN(e))return;E(!0),d.x=l.x;let t=e-l.x;if(o!=null&&o.repeat){const a=R();a>0&&(t=t-Math.round(t/a)*a,n===1&&t*c<=0&&(t+=a*c),n===-1&&t*c>=0&&(t-=a*c))}const s=t*(1-W)*(1/W);m.x=s}function je(e,n){const t=p[e]??0,s=Fe(t,l.x),a=R();if(a<=0)return s;const u=s-l.x;return n===1&&u*c<=0?s+a*c:n===-1&&u*c>=0?s-a*c:s}function He(){const e=o!=null&&o.repeat&&M.length?M:p;if(!e.length)return 0;const n=i.scrollLeft;let t=0,s=Math.abs(e[0]-n);for(let a=1;a<e.length;a++){const u=Math.abs(e[a]-n);u<s&&(s=u,t=a)}return t}function ae(){const e=He();x.value!==e&&(x.value=e)}function Te(e){if(w.length<=1)return;const n=p,t=o!=null&&o.repeat?(x.value+e+n.length)%n.length:e===1?Math.min(x.value+1,n.length-1):Math.max(x.value-1,0);if(F){const a=ee[t]??"start";w[t].scrollIntoView({behavior:"smooth",block:"nearest",inline:a});return}let s;if(o!=null&&o.repeat&&n.length>=2){const a=R(),u=n[t],v=a>0?Math.round((l.x-u)/a):0;let h=u+v*a;const r=h-l.x;e===1&&r*c<=0&&(h+=a*c),e===-1&&r*c>=0&&(h-=a*c),s=h}else{const a=Ie();s=Le(n[t],a.min,a.max)}Pe(s,e)}function Oe(){Te(1)}function $e(){Te(-1)}return{init:Ae,snap:K,hasOverflow:f,currentIndex:()=>x.value,next:Oe,prev:$e,destroy:ke}};S.Blossom=T,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Blossom, type CarouselOptions } from './carousel';

package/package.json

@@ -1,33 +1,45 @@
 {
 	"name": "@haventmet/carousel",
-	"version": "1.0.0",
-	"private": false,
+	"version": "1.0.1",
 	"author": "Loris",
 	"license": "MIT",
 	"description": "A native-scroll-first carousel component for the web.",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/loris-numbered/carousel.git"
+		"url": "git+https://github.com/loris-numbered/carousel"
 	},
 	"bugs": {
 		"url": "https://github.com/loris-numbered/carousel/issues"
 	},
-	"main": "index.js",
+	"homepage": "https://www.blossom-carousel.com",
+	"type": "module",
+	"files": [
+		"dist"
+	],
+	"main": "dist/carousel.umd.cjs",
+	"module": "dist/carousel.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/carousel.js",
+			"require": "./dist/carousel.umd.cjs"
+		},
+		"./style.css": "./dist/carousel.css"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
 	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"dev": "pnpm --filter @haventmet/carousel-dev dev",
-		"dev:vue": "pnpm --filter @haventmet/carousel-vue dev",
-		"dev:react": "pnpm --filter @haventmet/carousel-react dev",
-		"dev:svelte": "pnpm --filter @haventmet/carousel-svelte dev",
-		"dev:web": "pnpm --filter @haventmet/carousel-web dev",
-		"dev:alpine": "pnpm --filter @haventmet/carousel-alpine dev"
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
 	},
-	"workspaces": [
-		"packages/*"
-	],
 	"devDependencies": {
-		"biome": "^0.3.3",
-		"turbo": "^2.5.0"
+		"tsup": "^6.0.0"
 	},
-	"packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748"
+	"dependencies": {
+		"vite": "^6.3.3",
+		"vite-plugin-dts": "^4.5.3"
+	}
 }

package/.mcp.json

@@ -1,8 +0,0 @@
-{
-	"mcpServers": {
-		"chrome-devtools": {
-			"command": "bunx",
-			"args": ["chrome-devtools-mcp@latest"]
-		}
-	}
-}