motionrail 0.2.0 → 0.3.0

package/dist/disclose-version-Duk-5pp6.js

@@ -0,0 +1 @@
+typeof window < "u" && ((window.__svelte ??= {}).v ??= /* @__PURE__ */ new Set()).add("5");

package/dist/extensions/dots/style.css

@@ -1 +1 @@
-.motionrail-dots{z-index:10;scrollbar-width:none;-ms-overflow-style:none;background:#0000004d;border-radius:24px;gap:8px;width:fit-content;max-width:calc(100% - 32px);margin:16px auto 0;padding:8px 12px;display:flex;position:relative;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%)}.motionrail-dots::-webkit-scrollbar{display:none}.motionrail-dot{--dot-size:44px;--dot-font-size:14px;min-width:var(--dot-size);min-height:var(--dot-size);width:var(--dot-size);height:var(--dot-size);color:#fff;cursor:pointer;font-size:var(--dot-font-size);background:#ffffff4d;border:2px solid #ffffff80;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;transition:all .3s;display:flex}.motionrail-dot:hover{background:#ffffff80;border-color:#fffc;scale:1.1}.motionrail-dot:active{scale:.95}.motionrail-dot-active{color:#000;background:#ffffffe6;border-color:#fff}.motionrail-dot-active:hover{background:#fff}
+.motionrail-dots{--dot-size:34px;--dot-font-size:12px;z-index:10;scrollbar-width:none;-ms-overflow-style:none;background:#0000004d;border-radius:24px;gap:8px;width:fit-content;max-width:calc(100% - 32px);margin:16px auto 0;padding:8px 12px;display:flex;position:relative;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%)}.motionrail-dots::-webkit-scrollbar{display:none}.motionrail-dot{min-width:var(--dot-size);min-height:var(--dot-size);width:var(--dot-size);height:var(--dot-size);color:#fff;cursor:pointer;font-size:var(--dot-font-size);background:#ffffff4d;border:2px solid #ffffff80;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;transition:all .3s;display:flex}.motionrail-dot:hover{background:#ffffff80;border-color:#fffc;scale:1.1}.motionrail-dot:active{scale:.95}.motionrail-dot-active{color:#000;background:#ffffffe6;border-color:#fff}.motionrail-dot-active:hover{background:#fff}

package/dist/extensions/dots.js

@@ -1,6 +1,6 @@
 import "../motionrail-DsLqZe8W.js";
 function Dots(e) {
-	let t = document.createElement("div"), n = [], { showIndex: r = !1, dotSize: i = 44, fontSize: a = 14, log: o = !1 } = e || {};
+	let t = document.createElement("div"), n = [], { showIndex: r = !1, dotSize: i = 34, fontSize: a = 12, log: o = !1 } = e || {};
 	return {
 		name: "DotsExtension",
 		onInit(e, o) {

package/dist/extensions/dots.umd.cjs

@@ -1,2 +1,2 @@
 (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailDots={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motionrail-scrollable]::-webkit-scrollbar{display:none}[data-motionrail]{position:relative}[data-motionrail] [data-motionrail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motionrail] [data-motionrail-scrollable]:active{cursor:grabbing}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]>*{pointer-events:none;scroll-snap-align:start}
-/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{showIndex:r=!1,dotSize:i=44,fontSize:a=14,log:o=!1}=e||{};return{name:`DotsExtension`,onInit(e,o){let{totalItems:s}=o;if(s!==0){t.className=`motionrail-dots`,t.style.setProperty(`--dot-size`,`${i}px`),t.style.setProperty(`--dot-font-size`,`${a}px`);for(let i=0;i<s;i++){let a=document.createElement(`button`);a.className=`motionrail-dot`,a.setAttribute(`aria-label`,`Go to item ${i+1}`),r&&(a.textContent=(i+1).toString()),a.addEventListener(`click`,()=>{e.scrollToIndex(i)}),n.push(a),t.appendChild(a)}e.element.appendChild(t)}},onUpdate(e,r){let{visibleItemIndexes:i,totalItems:a}=r;if(!a){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{i.includes(t)?e.classList.add(`motionrail-dot-active`):e.classList.remove(`motionrail-dot-active`)}),i.length>0){let e=n[i[0]];if(e){let n=t.offsetWidth,r=e.offsetLeft,i=e.offsetWidth,a=r-n/2+i/2;t.scrollTo({left:a,behavior:`smooth`})}}o&&console.log(`DotsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Dots=n});
+/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{showIndex:r=!1,dotSize:i=34,fontSize:a=12,log:o=!1}=e||{};return{name:`DotsExtension`,onInit(e,o){let{totalItems:s}=o;if(s!==0){t.className=`motionrail-dots`,t.style.setProperty(`--dot-size`,`${i}px`),t.style.setProperty(`--dot-font-size`,`${a}px`);for(let i=0;i<s;i++){let a=document.createElement(`button`);a.className=`motionrail-dot`,a.setAttribute(`aria-label`,`Go to item ${i+1}`),r&&(a.textContent=(i+1).toString()),a.addEventListener(`click`,()=>{e.scrollToIndex(i)}),n.push(a),t.appendChild(a)}e.element.appendChild(t)}},onUpdate(e,r){let{visibleItemIndexes:i,totalItems:a}=r;if(!a){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{i.includes(t)?e.classList.add(`motionrail-dot-active`):e.classList.remove(`motionrail-dot-active`)}),i.length>0){let e=n[i[0]];if(e){let n=t.offsetWidth,r=e.offsetLeft,i=e.offsetWidth,a=r-n/2+i/2;t.scrollTo({left:a,behavior:`smooth`})}}o&&console.log(`DotsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Dots=n});

package/dist/svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from "svelte";
+import type { MotionRailOptions } from "./lib/types";
+
+export interface SvelteProps {
+  options?: MotionRailOptions;
+  getInstance?: () => any;
+  getContainer?: () => HTMLElement | undefined;
+  children?: any;
+}
+
+declare const Svelte: Component<SvelteProps>;
+export default Svelte;

package/dist/svelte.js

@@ -1,59 +1,59 @@
 import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
-import { C as reset, S as push, T as enable_legacy_mode_flag, _ as child, a as bind_this, c as slot, d as from_html, f as deep_read_state, h as legacy_pre_effect_reset, i as init, m as legacy_pre_effect, n as prop, o as bind_prop, p as get, s as attribute_effect, t as legacy_rest_props, u as append, v as mutable_source, x as pop, y as set } from "./client-pmAKFFi-.js";
+import "./disclose-version-Duk-5pp6.js";
+import * as $ from "svelte/internal/client";
 import { onDestroy, onMount } from "svelte";
-enable_legacy_mode_flag();
-var root = from_html("<div><div data-motionrail-scrollable=\"\"><div data-motionrail-grid=\"\"><!></div></div></div>");
-function Svelte(S, C) {
-	let w = legacy_rest_props(legacy_rest_props(C, [
+var root = $.from_html("<div><div data-motionrail-scrollable=\"\"><div data-motionrail-grid=\"\"><!></div></div></div>");
+function Svelte(a, o) {
+	let s = $.legacy_rest_props(o, [
 		"children",
 		"$$slots",
 		"$$events",
 		"$$legacy"
-	]), [
+	]), c = $.legacy_rest_props(s, [
 		"getInstance",
 		"getContainer",
 		"options",
 		"instance",
 		"container"
 	]);
-	push(C, !1);
-	let T = prop(C, "options", 24, () => ({})), E = prop(C, "instance", 12, null), D = prop(C, "container", 12, void 0), O = mutable_source(), k = mutable_source(null), A = null;
-	function j() {
-		return get(k);
+	$.push(o, !1);
+	let l = $.prop(o, "options", 24, () => ({})), u = $.prop(o, "instance", 12, null), d = $.prop(o, "container", 12, void 0), f = $.mutable_source(), p = $.mutable_source(null), m = null;
+	function h() {
+		return $.get(p);
 	}
-	function M() {
-		return get(O);
+	function g() {
+		return $.get(f);
 	}
 	onMount(() => {
-		if (!get(O)) return;
-		set(k, new MotionRail(get(O), T()));
-		let x = get(O).querySelector("[data-motionrail-grid]");
-		x && (A = new MutationObserver(() => {
-			get(k) && get(k).update();
-		}), A.observe(x, {
+		if (!$.get(f)) return;
+		$.set(p, new MotionRail($.get(f), l()));
+		let i = $.get(f).querySelector("[data-motionrail-grid]");
+		i && (m = new MutationObserver(() => {
+			$.get(p) && $.get(p).update();
+		}), m.observe(i, {
 			childList: !0,
 			subtree: !0
 		}));
 	}), onDestroy(() => {
-		A &&= (A.disconnect(), null), get(k) && (get(k).destroy(), set(k, null));
-	}), legacy_pre_effect(() => (get(k), deep_read_state(T()), get(O), MotionRail), () => {
-		get(k) && T() && get(O) && (get(k).destroy(), set(k, new MotionRail(get(O), T())));
-	}), legacy_pre_effect(() => get(k), () => {
-		E(get(k));
-	}), legacy_pre_effect(() => get(O), () => {
-		D(get(O));
-	}), legacy_pre_effect_reset();
-	var N = {
-		getInstance: j,
-		getContainer: M
+		m &&= (m.disconnect(), null), $.get(p) && ($.get(p).destroy(), $.set(p, null));
+	}), $.legacy_pre_effect(() => ($.get(p), $.deep_read_state(l()), $.get(f), MotionRail), () => {
+		$.get(p) && l() && $.get(f) && ($.get(p).destroy(), $.set(p, new MotionRail($.get(f), l())));
+	}), $.legacy_pre_effect(() => $.get(p), () => {
+		u($.get(p));
+	}), $.legacy_pre_effect(() => $.get(f), () => {
+		d($.get(f));
+	}), $.legacy_pre_effect_reset();
+	var _ = {
+		getInstance: h,
+		getContainer: g
 	};
-	init();
-	var P = root();
-	attribute_effect(P, () => ({
+	$.init();
+	var v = root();
+	$.attribute_effect(v, () => ({
 		"data-motionrail": !0,
-		...w
+		...c
 	}));
-	var F = child(P), I = child(F);
-	return slot(child(I), C, "default", {}, null), reset(I), reset(F), reset(P), bind_this(P, (r) => set(O, r), () => get(O)), append(S, P), bind_prop(C, "getInstance", j), bind_prop(C, "getContainer", M), pop(N);
+	var y = $.child(v), b = $.child(y), x = $.child(b);
+	return $.slot(x, o, "default", {}, null), $.reset(b), $.reset(y), $.reset(v), $.bind_this(v, (e) => $.set(f, e), () => $.get(f)), $.append(a, v), $.bind_prop(o, "getInstance", h), $.bind_prop(o, "getContainer", g), $.pop(_);
 }
 export { Svelte as default };

package/dist/svelte5.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from "svelte";
+import type { MotionRailOptions } from "./lib/types";
+
+export interface Svelte5Props {
+  options?: MotionRailOptions;
+  getInstance?: () => any;
+  getContainer?: () => HTMLElement | undefined;
+  children?: any;
+}
+
+declare const Svelte5: Component<Svelte5Props>;
+export default Svelte5;

package/dist/svelte5.js

@@ -1,10 +1,11 @@
 import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
-import { C as reset, S as push, _ as child, a as bind_this, b as state, d as from_html, g as user_effect, l as snippet, n as prop, p as get, r as rest_props, s as attribute_effect, u as append, w as noop, x as pop, y as set } from "./client-pmAKFFi-.js";
+import "./disclose-version-Duk-5pp6.js";
+import * as $ from "svelte/internal/client";
 import { onMount } from "svelte";
-var root = from_html("<div><div data-motionrail-scrollable=\"\"><div data-motionrail-grid=\"\"><!></div></div></div>");
-function Svelte5(v, y) {
-	push(y, !0);
-	let b = prop(y, "options", 19, () => ({})), x = prop(y, "instance", 15), S = prop(y, "container", 15), C = rest_props(y, [
+var root = $.from_html("<div><div data-motionrail-scrollable=\"\"><div data-motionrail-grid=\"\"><!></div></div></div>");
+function Svelte5(i, a) {
+	$.push(a, !0);
+	let o = $.prop(a, "options", 19, () => ({})), s = $.prop(a, "instance", 15), c = $.prop(a, "container", 15), l = $.rest_props(a, [
 		"$$slots",
 		"$$events",
 		"$$legacy",
@@ -12,42 +13,42 @@ function Svelte5(v, y) {
 		"children",
 		"instance",
 		"container"
-	]), w = state(void 0), T = state(null), E = state(null);
-	user_effect(() => {
-		x(get(T));
-	}), user_effect(() => {
-		S(get(w));
+	]), u = $.state(void 0), d = $.state(null), f = $.state(null);
+	$.user_effect(() => {
+		s($.get(d));
+	}), $.user_effect(() => {
+		c($.get(u));
 	});
-	function D() {
-		return get(T);
+	function p() {
+		return $.get(d);
 	}
-	function O() {
-		return get(w);
+	function m() {
+		return $.get(u);
 	}
 	onMount(() => {
-		if (!get(w)) return;
-		set(T, new MotionRail(get(w), b()), !0);
-		let _ = get(w).querySelector("[data-motionrail-grid]");
-		return _ && (set(E, new MutationObserver(() => {
-			get(T) && get(T).update();
-		}), !0), get(E).observe(_, {
+		if (!$.get(u)) return;
+		$.set(d, new MotionRail($.get(u), o()), !0);
+		let r = $.get(u).querySelector("[data-motionrail-grid]");
+		return r && ($.set(f, new MutationObserver(() => {
+			$.get(d) && $.get(d).update();
+		}), !0), $.get(f).observe(r, {
 			childList: !0,
 			subtree: !0
 		})), () => {
-			get(E) && (get(E).disconnect(), set(E, null)), get(T) && (get(T).destroy(), set(T, null));
+			$.get(f) && ($.get(f).disconnect(), $.set(f, null)), $.get(d) && ($.get(d).destroy(), $.set(d, null));
 		};
-	}), user_effect(() => {
-		get(T) && get(w) && (get(T).destroy(), set(T, new MotionRail(get(w), b()), !0));
+	}), $.user_effect(() => {
+		$.get(d) && $.get(u) && ($.get(d).destroy(), $.set(d, new MotionRail($.get(u), o()), !0));
 	});
-	var k = {
-		getInstance: D,
-		getContainer: O
-	}, A = root();
-	attribute_effect(A, () => ({
+	var h = {
+		getInstance: p,
+		getContainer: m
+	}, g = root();
+	$.attribute_effect(g, () => ({
 		"data-motionrail": !0,
-		...C
+		...l
 	}));
-	var j = child(A), M = child(j);
-	return snippet(child(M), () => y.children ?? noop), reset(M), reset(j), reset(A), bind_this(A, (e) => set(w, e), () => get(w)), append(v, A), pop(k);
+	var _ = $.child(g), v = $.child(_), y = $.child(v);
+	return $.snippet(y, () => a.children ?? $.noop), $.reset(v), $.reset(_), $.reset(g), $.bind_this(g, (e) => $.set(u, e), () => $.get(u)), $.append(i, g), $.pop(h);
 }
 export { Svelte5 as default };

package/dist/vue.d.ts

@@ -0,0 +1,13 @@
+import type { DefineComponent } from "vue";
+import type { MotionRailOptions } from "./lib/types";
+
+export interface VueProps {
+  options?: MotionRailOptions;
+}
+
+export type VueEmits = {
+  mounted: (instance: any, container: HTMLElement) => void;
+};
+
+declare const Vue: DefineComponent<VueProps, {}, {}, {}, {}, {}, {}, VueEmits>;
+export default Vue;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "motionrail",
-  "version": "0.2.0",
-  "description": "A lightweight carousel library with momentum-based scrolling, snap alignment, and responsive breakpoints",
+  "version": "0.3.0",
+  "description": "A lightweight carousel library for modern web applications",
   "type": "module",
   "module": "./dist/motionrail.js",
   "types": "./dist/motionrail.d.ts",
@@ -26,7 +26,7 @@
     "./extensions/thumbnails": {
       "import": "./dist/extensions/thumbnails.js",
       "require": "./dist/extensions/thumbnails.umd.cjs",
-      "types": "./dist/extensions/thumbnails.d.ts"
+      "types": "./dist/extensions/thumbnails/main.d.ts"
     },
     "./extensions/thumbnails/style.css": "./dist/extensions/thumbnails/style.css",
     "./extensions/logger": {
@@ -65,7 +65,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "npm run build:es && npm run build:umd",
+    "build": "npm run build:es && npm run build:umd && npm run copy:types",
     "build:es": "vite build && tsc",
     "build:umd": "npm run build:umd:main && npm run build:umd:arrows && npm run build:umd:dots && npm run build:umd:thumbnails && npm run build:umd:logger",
     "build:umd:main": "BUILD_UMD=true ENTRY_PATH=src/motionrail.ts LIB_NAME=MotionRail FILE_NAME=motionrail.umd vite build",
@@ -73,6 +73,7 @@
     "build:umd:dots": "BUILD_UMD=true ENTRY_PATH=src/extensions/dots/main.ts LIB_NAME=MotionRailDots FILE_NAME=extensions/dots.umd vite build",
     "build:umd:thumbnails": "BUILD_UMD=true ENTRY_PATH=src/extensions/thumbnails/main.ts LIB_NAME=MotionRailThumbnails FILE_NAME=extensions/thumbnails.umd vite build",
     "build:umd:logger": "BUILD_UMD=true ENTRY_PATH=src/extensions/logger.ts LIB_NAME=MotionRailLogger FILE_NAME=extensions/logger.umd vite build",
+    "copy:types": "cpr src/svelte.d.ts dist/svelte.d.ts -o && cpr src/svelte5.d.ts dist/svelte5.d.ts -o && cpr src/vue.d.ts dist/vue.d.ts -o",
     "preview": "vite preview",
     "prepare": "husky"
   },
@@ -86,6 +87,7 @@
     "@types/node": "^25.0.8",
     "@types/react": "^19.2.8",
     "@vitejs/plugin-vue": "^6.0.3",
+    "cpr": "^3.0.1",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "prettier": "^3.7.4",
@@ -99,7 +101,7 @@
   "peerDependencies": {
     "react": "^19.2.3",
     "solid-js": "^1.9.10",
-    "vue": "^3.5.13",
-    "svelte": "^5.19.2"
+    "svelte": "^5.19.2",
+    "vue": "^3.5.13"
   }
 }