motionrail 0.6.2 → 0.7.0

package/extensions/dots/dist/dots.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"dots.es.js","names":["dotsContainer: HTMLDivElement | null","dots: HTMLButtonElement[]"],"sources":["../src/dots.ts"],"sourcesContent":["import { MotionRail } from \"motionrail\";\nimport type { MotionRailExtension, MotionRailState } from \"motionrail\";\nimport \"./style.css\";\n\nexport function Dots(par?: {\n  showIndex?: boolean;\n  log?: boolean;\n}): MotionRailExtension {\n  let dotsContainer: HTMLDivElement | null = null;\n  const dots: HTMLButtonElement[] = [];\n  const {\n    showIndex = false,\n    log = false,\n  } = par || {};\n\n  return {\n    name: \"DotsExtension\",\n    onInit(motionRail: MotionRail, state: MotionRailState) {\n      const { totalItems } = state;\n\n      if (totalItems === 0) {\n        return;\n      }\n\n      dotsContainer = document.createElement(\"div\");\n\n      dotsContainer.className = \"motionrail-dots\";\n\n      for (let i = 0; i < totalItems; i++) {\n        const dot = document.createElement(\"button\");\n        dot.className = \"motionrail-dot\";\n        dot.setAttribute(\"aria-label\", `Go to item ${i + 1}`);\n\n        if (showIndex) {\n          dot.textContent = (i + 1).toString();\n        }\n\n        dot.addEventListener(\"click\", () => {\n          motionRail.scrollToIndex(i);\n        });\n\n        dots.push(dot);\n        dotsContainer.appendChild(dot);\n      }\n\n      motionRail.element.appendChild(dotsContainer);\n    },\n    onUpdate(_motionRail: MotionRail, state: MotionRailState) {\n      const { visibleItemIndexes, totalItems } = state;\n      if (!dotsContainer) return;\n\n      if (!totalItems) {\n        dotsContainer.style.display = \"none\";\n        return;\n      }\n\n      dotsContainer.style.removeProperty(\"display\");\n\n      dots.forEach((dot, index) => {\n        if (visibleItemIndexes.includes(index)) {\n          dot.classList.add(\"motionrail-dot-active\");\n        } else {\n          dot.classList.remove(\"motionrail-dot-active\");\n        }\n      });\n\n      if (visibleItemIndexes.length > 0) {\n        const firstActiveDot = dots[visibleItemIndexes[0]];\n        if (firstActiveDot) {\n          const containerWidth = dotsContainer.offsetWidth;\n          const dotLeft = firstActiveDot.offsetLeft;\n          const dotWidth = firstActiveDot.offsetWidth;\n          const scrollPosition = dotLeft - containerWidth / 2 + dotWidth / 2;\n\n          dotsContainer.scrollTo({\n            left: scrollPosition,\n            behavior: \"smooth\",\n          });\n        }\n      }\n\n      if (log) {\n        console.log(\"DotsExtension updated\", state);\n      }\n    },\n    onDestroy(_motionRail: MotionRail, _state: MotionRailState) {\n      dotsContainer?.remove();\n      dots.length = 0;\n    },\n  };\n}\n"],"mappings":";AAIA,SAAgB,KAAK,GAGG;CACtB,IAAIA,IAAuC,MACrCC,IAA4B,EAAE,EAC9B,EACJ,eAAY,IACZ,SAAM,OACJ,KAAO,EAAE;AAEb,QAAO;EACL,MAAM;EACN,OAAO,GAAwB,GAAwB;GACrD,IAAM,EAAE,kBAAe;AAEnB,aAAe,GAMnB;IAFA,IAAgB,SAAS,cAAc,MAAM,EAE7C,EAAc,YAAY;AAE1B,SAAK,IAAI,IAAI,GAAG,IAAI,GAAY,KAAK;KACnC,IAAM,IAAM,SAAS,cAAc,SAAS;AAa5C,KAZA,EAAI,YAAY,kBAChB,EAAI,aAAa,cAAc,cAAc,IAAI,IAAI,EAEjD,MACF,EAAI,eAAe,IAAI,GAAG,UAAU,GAGtC,EAAI,iBAAiB,eAAe;AAClC,QAAW,cAAc,EAAE;OAC3B,EAEF,EAAK,KAAK,EAAI,EACd,EAAc,YAAY,EAAI;;AAGhC,MAAW,QAAQ,YAAY,EAAc;;;EAE/C,SAAS,GAAyB,GAAwB;GACxD,IAAM,EAAE,uBAAoB,kBAAe;AACtC,UAEL;QAAI,CAAC,GAAY;AACf,OAAc,MAAM,UAAU;AAC9B;;AAaF,QAVA,EAAc,MAAM,eAAe,UAAU,EAE7C,EAAK,SAAS,GAAK,MAAU;AAC3B,KAAI,EAAmB,SAAS,EAAM,GACpC,EAAI,UAAU,IAAI,wBAAwB,GAE1C,EAAI,UAAU,OAAO,wBAAwB;MAE/C,EAEE,EAAmB,SAAS,GAAG;KACjC,IAAM,IAAiB,EAAK,EAAmB;AAC/C,SAAI,GAAgB;MAClB,IAAM,IAAiB,EAAc,aAC/B,IAAU,EAAe,YACzB,IAAW,EAAe,aAC1B,IAAiB,IAAU,IAAiB,IAAI,IAAW;AAEjE,QAAc,SAAS;OACrB,MAAM;OACN,UAAU;OACX,CAAC;;;AAIN,IAAI,KACF,QAAQ,IAAI,yBAAyB,EAAM;;;EAG/C,UAAU,GAAyB,GAAyB;AAE1D,GADA,GAAe,QAAQ,EACvB,EAAK,SAAS;;EAEjB"}
+{"version":3,"file":"dots.es.js","names":["dotsContainer: HTMLDivElement | null","dots: HTMLButtonElement[]"],"sources":["../src/dots.ts"],"sourcesContent":["import { MotionRail } from \"motionrail\";\nimport type { MotionRailExtension, MotionRailState } from \"motionrail\";\nimport \"./style.css\";\n\nexport function Dots(par?: {\n  showIndex?: boolean;\n  log?: boolean;\n}): MotionRailExtension {\n  let dotsContainer: HTMLDivElement | null = null;\n  const dots: HTMLButtonElement[] = [];\n  const { showIndex = false, log = false } = par || {};\n\n  return {\n    name: \"DotsExtension\",\n    onInit(motionRail: MotionRail, state: MotionRailState) {\n      const { totalItems } = state;\n\n      if (totalItems === 0) {\n        return;\n      }\n\n      dotsContainer = document.createElement(\"div\");\n\n      dotsContainer.className = \"motionrail-dots\";\n\n      for (let i = 0; i < totalItems; i++) {\n        const dot = document.createElement(\"button\");\n        dot.className = \"motionrail-dot\";\n        dot.setAttribute(\"aria-label\", `Go to item ${i + 1}`);\n\n        if (showIndex) {\n          dot.textContent = (i + 1).toString();\n        }\n\n        dot.addEventListener(\"click\", () => {\n          motionRail.scrollToIndex(i);\n        });\n\n        dots.push(dot);\n        dotsContainer.appendChild(dot);\n      }\n\n      motionRail.element.appendChild(dotsContainer);\n    },\n    onUpdate(_motionRail: MotionRail, state: MotionRailState) {\n      const { visibleItemIndexes, totalItems } = state;\n      if (!dotsContainer) return;\n\n      if (!totalItems) {\n        dotsContainer.style.display = \"none\";\n        return;\n      }\n\n      dotsContainer.style.removeProperty(\"display\");\n\n      dots.forEach((dot, index) => {\n        if (visibleItemIndexes.includes(index)) {\n          dot.classList.add(\"motionrail-dot-active\");\n        } else {\n          dot.classList.remove(\"motionrail-dot-active\");\n        }\n      });\n\n      if (visibleItemIndexes.length > 0) {\n        const firstActiveDot = dots[visibleItemIndexes[0]];\n        if (firstActiveDot) {\n          const containerWidth = dotsContainer.offsetWidth;\n          const dotLeft = firstActiveDot.offsetLeft;\n          const dotWidth = firstActiveDot.offsetWidth;\n          const scrollPosition = dotLeft - containerWidth / 2 + dotWidth / 2;\n\n          dotsContainer.scrollTo({\n            left: scrollPosition,\n            behavior: \"smooth\",\n          });\n        }\n      }\n\n      if (log) {\n        console.log(\"DotsExtension updated\", state);\n      }\n    },\n    onDestroy(_motionRail: MotionRail, _state: MotionRailState) {\n      dotsContainer?.remove();\n      dots.length = 0;\n    },\n  };\n}\n"],"mappings":";AAIA,SAAgB,KAAK,GAGG;CACtB,IAAIA,IAAuC,MACrCC,IAA4B,EAAE,EAC9B,EAAE,eAAY,IAAO,SAAM,OAAU,KAAO,EAAE;AAEpD,QAAO;EACL,MAAM;EACN,OAAO,GAAwB,GAAwB;GACrD,IAAM,EAAE,kBAAe;AAEnB,aAAe,GAMnB;IAFA,IAAgB,SAAS,cAAc,MAAM,EAE7C,EAAc,YAAY;AAE1B,SAAK,IAAI,IAAI,GAAG,IAAI,GAAY,KAAK;KACnC,IAAM,IAAM,SAAS,cAAc,SAAS;AAa5C,KAZA,EAAI,YAAY,kBAChB,EAAI,aAAa,cAAc,cAAc,IAAI,IAAI,EAEjD,MACF,EAAI,eAAe,IAAI,GAAG,UAAU,GAGtC,EAAI,iBAAiB,eAAe;AAClC,QAAW,cAAc,EAAE;OAC3B,EAEF,EAAK,KAAK,EAAI,EACd,EAAc,YAAY,EAAI;;AAGhC,MAAW,QAAQ,YAAY,EAAc;;;EAE/C,SAAS,GAAyB,GAAwB;GACxD,IAAM,EAAE,uBAAoB,kBAAe;AACtC,UAEL;QAAI,CAAC,GAAY;AACf,OAAc,MAAM,UAAU;AAC9B;;AAaF,QAVA,EAAc,MAAM,eAAe,UAAU,EAE7C,EAAK,SAAS,GAAK,MAAU;AAC3B,KAAI,EAAmB,SAAS,EAAM,GACpC,EAAI,UAAU,IAAI,wBAAwB,GAE1C,EAAI,UAAU,OAAO,wBAAwB;MAE/C,EAEE,EAAmB,SAAS,GAAG;KACjC,IAAM,IAAiB,EAAK,EAAmB;AAC/C,SAAI,GAAgB;MAClB,IAAM,IAAiB,EAAc,aAC/B,IAAU,EAAe,YACzB,IAAW,EAAe,aAC1B,IAAiB,IAAU,IAAiB,IAAI,IAAW;AAEjE,QAAc,SAAS;OACrB,MAAM;OACN,UAAU;OACX,CAAC;;;AAIN,IAAI,KACF,QAAQ,IAAI,yBAAyB,EAAM;;;EAG/C,UAAU,GAAyB,GAAyB;AAE1D,GADA,GAAe,QAAQ,EACvB,EAAK,SAAS;;EAEjB"}

package/extensions/dots/dist/dots.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"dots.umd.js","names":["dotsContainer: HTMLDivElement | null","dots: HTMLButtonElement[]"],"sources":["../src/dots.ts"],"sourcesContent":["import { MotionRail } from \"motionrail\";\nimport type { MotionRailExtension, MotionRailState } from \"motionrail\";\nimport \"./style.css\";\n\nexport function Dots(par?: {\n  showIndex?: boolean;\n  log?: boolean;\n}): MotionRailExtension {\n  let dotsContainer: HTMLDivElement | null = null;\n  const dots: HTMLButtonElement[] = [];\n  const {\n    showIndex = false,\n    log = false,\n  } = par || {};\n\n  return {\n    name: \"DotsExtension\",\n    onInit(motionRail: MotionRail, state: MotionRailState) {\n      const { totalItems } = state;\n\n      if (totalItems === 0) {\n        return;\n      }\n\n      dotsContainer = document.createElement(\"div\");\n\n      dotsContainer.className = \"motionrail-dots\";\n\n      for (let i = 0; i < totalItems; i++) {\n        const dot = document.createElement(\"button\");\n        dot.className = \"motionrail-dot\";\n        dot.setAttribute(\"aria-label\", `Go to item ${i + 1}`);\n\n        if (showIndex) {\n          dot.textContent = (i + 1).toString();\n        }\n\n        dot.addEventListener(\"click\", () => {\n          motionRail.scrollToIndex(i);\n        });\n\n        dots.push(dot);\n        dotsContainer.appendChild(dot);\n      }\n\n      motionRail.element.appendChild(dotsContainer);\n    },\n    onUpdate(_motionRail: MotionRail, state: MotionRailState) {\n      const { visibleItemIndexes, totalItems } = state;\n      if (!dotsContainer) return;\n\n      if (!totalItems) {\n        dotsContainer.style.display = \"none\";\n        return;\n      }\n\n      dotsContainer.style.removeProperty(\"display\");\n\n      dots.forEach((dot, index) => {\n        if (visibleItemIndexes.includes(index)) {\n          dot.classList.add(\"motionrail-dot-active\");\n        } else {\n          dot.classList.remove(\"motionrail-dot-active\");\n        }\n      });\n\n      if (visibleItemIndexes.length > 0) {\n        const firstActiveDot = dots[visibleItemIndexes[0]];\n        if (firstActiveDot) {\n          const containerWidth = dotsContainer.offsetWidth;\n          const dotLeft = firstActiveDot.offsetLeft;\n          const dotWidth = firstActiveDot.offsetWidth;\n          const scrollPosition = dotLeft - containerWidth / 2 + dotWidth / 2;\n\n          dotsContainer.scrollTo({\n            left: scrollPosition,\n            behavior: \"smooth\",\n          });\n        }\n      }\n\n      if (log) {\n        console.log(\"DotsExtension updated\", state);\n      }\n    },\n    onDestroy(_motionRail: MotionRail, _state: MotionRailState) {\n      dotsContainer?.remove();\n      dots.length = 0;\n    },\n  };\n}\n"],"mappings":"2QAIA,SAAgB,EAAK,EAGG,CACtB,IAAIA,EAAuC,KACrCC,EAA4B,EAAE,CAC9B,CACJ,YAAY,GACZ,MAAM,IACJ,GAAO,EAAE,CAEb,MAAO,CACL,KAAM,gBACN,OAAO,EAAwB,EAAwB,CACrD,GAAM,CAAE,cAAe,EAEnB,OAAe,EAMnB,CAFA,EAAgB,SAAS,cAAc,MAAM,CAE7C,EAAc,UAAY,kBAE1B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAY,IAAK,CACnC,IAAM,EAAM,SAAS,cAAc,SAAS,CAC5C,EAAI,UAAY,iBAChB,EAAI,aAAa,aAAc,cAAc,EAAI,IAAI,CAEjD,IACF,EAAI,aAAe,EAAI,GAAG,UAAU,EAGtC,EAAI,iBAAiB,YAAe,CAClC,EAAW,cAAc,EAAE,EAC3B,CAEF,EAAK,KAAK,EAAI,CACd,EAAc,YAAY,EAAI,CAGhC,EAAW,QAAQ,YAAY,EAAc,GAE/C,SAAS,EAAyB,EAAwB,CACxD,GAAM,CAAE,qBAAoB,cAAe,EACtC,KAEL,IAAI,CAAC,EAAY,CACf,EAAc,MAAM,QAAU,OAC9B,OAaF,GAVA,EAAc,MAAM,eAAe,UAAU,CAE7C,EAAK,SAAS,EAAK,IAAU,CACvB,EAAmB,SAAS,EAAM,CACpC,EAAI,UAAU,IAAI,wBAAwB,CAE1C,EAAI,UAAU,OAAO,wBAAwB,EAE/C,CAEE,EAAmB,OAAS,EAAG,CACjC,IAAM,EAAiB,EAAK,EAAmB,IAC/C,GAAI,EAAgB,CAClB,IAAM,EAAiB,EAAc,YAC/B,EAAU,EAAe,WACzB,EAAW,EAAe,YAC1B,EAAiB,EAAU,EAAiB,EAAI,EAAW,EAEjE,EAAc,SAAS,CACrB,KAAM,EACN,SAAU,SACX,CAAC,EAIF,GACF,QAAQ,IAAI,wBAAyB,EAAM,GAG/C,UAAU,EAAyB,EAAyB,CAC1D,GAAe,QAAQ,CACvB,EAAK,OAAS,GAEjB"}
+{"version":3,"file":"dots.umd.js","names":["dotsContainer: HTMLDivElement | null","dots: HTMLButtonElement[]"],"sources":["../src/dots.ts"],"sourcesContent":["import { MotionRail } from \"motionrail\";\nimport type { MotionRailExtension, MotionRailState } from \"motionrail\";\nimport \"./style.css\";\n\nexport function Dots(par?: {\n  showIndex?: boolean;\n  log?: boolean;\n}): MotionRailExtension {\n  let dotsContainer: HTMLDivElement | null = null;\n  const dots: HTMLButtonElement[] = [];\n  const { showIndex = false, log = false } = par || {};\n\n  return {\n    name: \"DotsExtension\",\n    onInit(motionRail: MotionRail, state: MotionRailState) {\n      const { totalItems } = state;\n\n      if (totalItems === 0) {\n        return;\n      }\n\n      dotsContainer = document.createElement(\"div\");\n\n      dotsContainer.className = \"motionrail-dots\";\n\n      for (let i = 0; i < totalItems; i++) {\n        const dot = document.createElement(\"button\");\n        dot.className = \"motionrail-dot\";\n        dot.setAttribute(\"aria-label\", `Go to item ${i + 1}`);\n\n        if (showIndex) {\n          dot.textContent = (i + 1).toString();\n        }\n\n        dot.addEventListener(\"click\", () => {\n          motionRail.scrollToIndex(i);\n        });\n\n        dots.push(dot);\n        dotsContainer.appendChild(dot);\n      }\n\n      motionRail.element.appendChild(dotsContainer);\n    },\n    onUpdate(_motionRail: MotionRail, state: MotionRailState) {\n      const { visibleItemIndexes, totalItems } = state;\n      if (!dotsContainer) return;\n\n      if (!totalItems) {\n        dotsContainer.style.display = \"none\";\n        return;\n      }\n\n      dotsContainer.style.removeProperty(\"display\");\n\n      dots.forEach((dot, index) => {\n        if (visibleItemIndexes.includes(index)) {\n          dot.classList.add(\"motionrail-dot-active\");\n        } else {\n          dot.classList.remove(\"motionrail-dot-active\");\n        }\n      });\n\n      if (visibleItemIndexes.length > 0) {\n        const firstActiveDot = dots[visibleItemIndexes[0]];\n        if (firstActiveDot) {\n          const containerWidth = dotsContainer.offsetWidth;\n          const dotLeft = firstActiveDot.offsetLeft;\n          const dotWidth = firstActiveDot.offsetWidth;\n          const scrollPosition = dotLeft - containerWidth / 2 + dotWidth / 2;\n\n          dotsContainer.scrollTo({\n            left: scrollPosition,\n            behavior: \"smooth\",\n          });\n        }\n      }\n\n      if (log) {\n        console.log(\"DotsExtension updated\", state);\n      }\n    },\n    onDestroy(_motionRail: MotionRail, _state: MotionRailState) {\n      dotsContainer?.remove();\n      dots.length = 0;\n    },\n  };\n}\n"],"mappings":"2QAIA,SAAgB,EAAK,EAGG,CACtB,IAAIA,EAAuC,KACrCC,EAA4B,EAAE,CAC9B,CAAE,YAAY,GAAO,MAAM,IAAU,GAAO,EAAE,CAEpD,MAAO,CACL,KAAM,gBACN,OAAO,EAAwB,EAAwB,CACrD,GAAM,CAAE,cAAe,EAEnB,OAAe,EAMnB,CAFA,EAAgB,SAAS,cAAc,MAAM,CAE7C,EAAc,UAAY,kBAE1B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAY,IAAK,CACnC,IAAM,EAAM,SAAS,cAAc,SAAS,CAC5C,EAAI,UAAY,iBAChB,EAAI,aAAa,aAAc,cAAc,EAAI,IAAI,CAEjD,IACF,EAAI,aAAe,EAAI,GAAG,UAAU,EAGtC,EAAI,iBAAiB,YAAe,CAClC,EAAW,cAAc,EAAE,EAC3B,CAEF,EAAK,KAAK,EAAI,CACd,EAAc,YAAY,EAAI,CAGhC,EAAW,QAAQ,YAAY,EAAc,GAE/C,SAAS,EAAyB,EAAwB,CACxD,GAAM,CAAE,qBAAoB,cAAe,EACtC,KAEL,IAAI,CAAC,EAAY,CACf,EAAc,MAAM,QAAU,OAC9B,OAaF,GAVA,EAAc,MAAM,eAAe,UAAU,CAE7C,EAAK,SAAS,EAAK,IAAU,CACvB,EAAmB,SAAS,EAAM,CACpC,EAAI,UAAU,IAAI,wBAAwB,CAE1C,EAAI,UAAU,OAAO,wBAAwB,EAE/C,CAEE,EAAmB,OAAS,EAAG,CACjC,IAAM,EAAiB,EAAK,EAAmB,IAC/C,GAAI,EAAgB,CAClB,IAAM,EAAiB,EAAc,YAC/B,EAAU,EAAe,WACzB,EAAW,EAAe,YAC1B,EAAiB,EAAU,EAAiB,EAAI,EAAW,EAEjE,EAAc,SAAS,CACrB,KAAM,EACN,SAAU,SACX,CAAC,EAIF,GACF,QAAQ,IAAI,wBAAyB,EAAM,GAG/C,UAAU,EAAyB,EAAyB,CAC1D,GAAe,QAAQ,CACvB,EAAK,OAAS,GAEjB"}

package/frameworks/preact/dist/main.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from "preact";
 import { type MotionRailOptions } from "motionrail";
-export interface MotionRailProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'ref'> {
+export interface MotionRailProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "ref"> {
     options?: MotionRailOptions;
 }
 declare function MotionRailPreact({ options, ...divProps }: MotionRailProps): JSX.Element;

package/frameworks/preact/dist/preact.es.js

@@ -3,18 +3,21 @@ import { MotionRail } from "motionrail";
 import { jsx } from "preact/jsx-runtime";
 function MotionRailPreact({ options: i, ...a }) {
 	let o = useRef(null), s = useRef(null), { children: c, ...l } = a || {};
-	return useEffect(() => {
+	useEffect(() => {
 		if (o.current) return s.current = new MotionRail(o.current, i || {}), () => {
 			s.current &&= (s.current.destroy(), null);
 		};
 	}, [i]), useEffect(() => {
 		s.current && s.current.update();
-	}, [c]), /* @__PURE__ */ jsx("div", {
+	}, [c]);
+	let u = i?.containerName ? { containerName: i.containerName } : void 0;
+	return /* @__PURE__ */ jsx("div", {
 		ref: o,
 		"data-motionrail": !0,
 		...l,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-motionrail-scrollable": !0,
+			style: u,
 			children: /* @__PURE__ */ jsx("div", {
 				"data-motionrail-grid": !0,
 				children: c

package/frameworks/preact/dist/preact.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"preact.es.js","names":[],"sources":["../src/lib/main.tsx"],"sourcesContent":["import { useEffect, useRef } from \"preact/hooks\";\nimport type { JSX } from \"preact\";\nimport {\n  MotionRail as MotionRailClass,\n  type MotionRailOptions,\n} from \"motionrail\";\n\nexport interface MotionRailProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'ref'> {\n  options?: MotionRailOptions;\n}\n\nfunction MotionRailPreact({ options, ...divProps }: MotionRailProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const motionRailRef = useRef<MotionRailClass | null>(null);\n  const { children, ...restDivProps } = divProps || {};\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    motionRailRef.current = new MotionRailClass(\n      containerRef.current,\n      options || {},\n    );\n\n    return () => {\n      if (motionRailRef.current) {\n        motionRailRef.current.destroy();\n        motionRailRef.current = null;\n      }\n    };\n  }, [options]);\n\n  useEffect(() => {\n    if (motionRailRef.current) {\n      motionRailRef.current.update();\n    }\n  }, [children]);\n\n  return (\n    <div ref={containerRef} data-motionrail {...restDivProps}>\n      <div data-motionrail-scrollable>\n        <div data-motionrail-grid>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport { MotionRailPreact as MotionRail };\n"],"mappings":";;;AAWA,SAAS,iBAAiB,EAAE,YAAS,GAAG,KAA6B;CACnE,IAAM,IAAe,OAAuB,KAAK,EAC3C,IAAgB,OAA+B,KAAK,EACpD,EAAE,aAAU,GAAG,MAAiB,KAAY,EAAE;AAwBpD,QAtBA,gBAAgB;AACT,QAAa,QAOlB,QALA,EAAc,UAAU,IAAI,WAC1B,EAAa,SACb,KAAW,EAAE,CACd,QAEY;AACX,GAEE,EAAc,aADd,EAAc,QAAQ,SAAS,EACP;;IAG3B,CAAC,EAAQ,CAAC,EAEb,gBAAgB;AACd,EAAI,EAAc,WAChB,EAAc,QAAQ,QAAQ;IAE/B,CAAC,EAAS,CAAC,EAGZ,oBAAC,OAAA;EAAI,KAAK;EAAc,mBAAA;EAAgB,GAAI;YAC1C,oBAAC,OAAA;GAAI,8BAAA;aACH,oBAAC,OAAA;IAAI,wBAAA;IAAsB;KAAe;IACtC;GACF"}
+{"version":3,"file":"preact.es.js","names":[],"sources":["../src/lib/main.tsx"],"sourcesContent":["import { useEffect, useRef } from \"preact/hooks\";\nimport type { JSX } from \"preact\";\nimport {\n  MotionRail as MotionRailClass,\n  type MotionRailOptions,\n} from \"motionrail\";\n\nexport interface MotionRailProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"ref\"\n> {\n  options?: MotionRailOptions;\n}\n\nfunction MotionRailPreact({ options, ...divProps }: MotionRailProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const motionRailRef = useRef<MotionRailClass | null>(null);\n  const { children, ...restDivProps } = divProps || {};\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    motionRailRef.current = new MotionRailClass(\n      containerRef.current,\n      options || {},\n    );\n\n    return () => {\n      if (motionRailRef.current) {\n        motionRailRef.current.destroy();\n        motionRailRef.current = null;\n      }\n    };\n  }, [options]);\n\n  useEffect(() => {\n    if (motionRailRef.current) {\n      motionRailRef.current.update();\n    }\n  }, [children]);\n\n  // Compute style for scrollable div\n  const scrollableStyle = options?.containerName\n    ? { containerName: options.containerName }\n    : undefined;\n  return (\n    <div ref={containerRef} data-motionrail {...restDivProps}>\n      <div data-motionrail-scrollable style={scrollableStyle}>\n        <div data-motionrail-grid>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport { MotionRailPreact as MotionRail };\n"],"mappings":";;;AAcA,SAAS,iBAAiB,EAAE,YAAS,GAAG,KAA6B;CACnE,IAAM,IAAe,OAAuB,KAAK,EAC3C,IAAgB,OAA+B,KAAK,EACpD,EAAE,aAAU,GAAG,MAAiB,KAAY,EAAE;AAkBpD,CAhBA,gBAAgB;AACT,QAAa,QAOlB,QALA,EAAc,UAAU,IAAI,WAC1B,EAAa,SACb,KAAW,EAAE,CACd,QAEY;AACX,GAEE,EAAc,aADd,EAAc,QAAQ,SAAS,EACP;;IAG3B,CAAC,EAAQ,CAAC,EAEb,gBAAgB;AACd,EAAI,EAAc,WAChB,EAAc,QAAQ,QAAQ;IAE/B,CAAC,EAAS,CAAC;CAGd,IAAM,IAAkB,GAAS,gBAC7B,EAAE,eAAe,EAAQ,eAAe,GACxC,KAAA;AACJ,QACE,oBAAC,OAAA;EAAI,KAAK;EAAc,mBAAA;EAAgB,GAAI;YAC1C,oBAAC,OAAA;GAAI,8BAAA;GAA2B,OAAO;aACrC,oBAAC,OAAA;IAAI,wBAAA;IAAsB;KAAe;IACtC;GACF"}

package/frameworks/preact/dist/preact.umd.js

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`preact/hooks`),require(`motionrail`),require(`preact/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`preact/hooks`,`motionrail`,`preact/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailPreact={},e.PreactHooks,e.MotionRail,e.PreactJSXRuntime))})(this,function(e,t,n,r){function i({options:e,...i}){let a=(0,t.useRef)(null),o=(0,t.useRef)(null),{children:s,...c}=i||{};return(0,t.useEffect)(()=>{if(a.current)return o.current=new n.MotionRail(a.current,e||{}),()=>{o.current&&=(o.current.destroy(),null)}},[e]),(0,t.useEffect)(()=>{o.current&&o.current.update()},[s]),(0,r.jsx)(`div`,{ref:a,"data-motionrail":!0,...c,children:(0,r.jsx)(`div`,{"data-motionrail-scrollable":!0,children:(0,r.jsx)(`div`,{"data-motionrail-grid":!0,children:s})})})}e.MotionRail=i});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`preact/hooks`),require(`motionrail`),require(`preact/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`preact/hooks`,`motionrail`,`preact/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailPreact={},e.PreactHooks,e.MotionRail,e.PreactJSXRuntime))})(this,function(e,t,n,r){function i({options:e,...i}){let a=(0,t.useRef)(null),o=(0,t.useRef)(null),{children:s,...c}=i||{};(0,t.useEffect)(()=>{if(a.current)return o.current=new n.MotionRail(a.current,e||{}),()=>{o.current&&=(o.current.destroy(),null)}},[e]),(0,t.useEffect)(()=>{o.current&&o.current.update()},[s]);let l=e?.containerName?{containerName:e.containerName}:void 0;return(0,r.jsx)(`div`,{ref:a,"data-motionrail":!0,...c,children:(0,r.jsx)(`div`,{"data-motionrail-scrollable":!0,style:l,children:(0,r.jsx)(`div`,{"data-motionrail-grid":!0,children:s})})})}e.MotionRail=i});
 //# sourceMappingURL=preact.umd.js.map

package/frameworks/preact/dist/preact.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"preact.umd.js","names":[],"sources":["../src/lib/main.tsx"],"sourcesContent":["import { useEffect, useRef } from \"preact/hooks\";\nimport type { JSX } from \"preact\";\nimport {\n  MotionRail as MotionRailClass,\n  type MotionRailOptions,\n} from \"motionrail\";\n\nexport interface MotionRailProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'ref'> {\n  options?: MotionRailOptions;\n}\n\nfunction MotionRailPreact({ options, ...divProps }: MotionRailProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const motionRailRef = useRef<MotionRailClass | null>(null);\n  const { children, ...restDivProps } = divProps || {};\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    motionRailRef.current = new MotionRailClass(\n      containerRef.current,\n      options || {},\n    );\n\n    return () => {\n      if (motionRailRef.current) {\n        motionRailRef.current.destroy();\n        motionRailRef.current = null;\n      }\n    };\n  }, [options]);\n\n  useEffect(() => {\n    if (motionRailRef.current) {\n      motionRailRef.current.update();\n    }\n  }, [children]);\n\n  return (\n    <div ref={containerRef} data-motionrail {...restDivProps}>\n      <div data-motionrail-scrollable>\n        <div data-motionrail-grid>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport { MotionRailPreact as MotionRail };\n"],"mappings":"4YAWA,SAAS,EAAiB,CAAE,UAAS,GAAG,GAA6B,CACnE,IAAM,GAAA,EAAA,EAAA,QAAsC,KAAK,CAC3C,GAAA,EAAA,EAAA,QAA+C,KAAK,CACpD,CAAE,WAAU,GAAG,GAAiB,GAAY,EAAE,CAwBpD,OAtBA,EAAA,EAAA,eAAgB,CACT,KAAa,QAOlB,MALA,GAAc,QAAU,IAAI,EAAA,WAC1B,EAAa,QACb,GAAW,EAAE,CACd,KAEY,CACX,AAEE,EAAc,WADd,EAAc,QAAQ,SAAS,CACP,QAG3B,CAAC,EAAQ,CAAC,EAEb,EAAA,EAAA,eAAgB,CACV,EAAc,SAChB,EAAc,QAAQ,QAAQ,EAE/B,CAAC,EAAS,CAAC,EAGZ,EAAA,EAAA,KAAC,MAAA,CAAI,IAAK,EAAc,kBAAA,GAAgB,GAAI,YAC1C,EAAA,EAAA,KAAC,MAAA,CAAI,6BAAA,aACH,EAAA,EAAA,KAAC,MAAA,CAAI,uBAAA,GAAsB,YAAe,EACtC,EACF"}
+{"version":3,"file":"preact.umd.js","names":[],"sources":["../src/lib/main.tsx"],"sourcesContent":["import { useEffect, useRef } from \"preact/hooks\";\nimport type { JSX } from \"preact\";\nimport {\n  MotionRail as MotionRailClass,\n  type MotionRailOptions,\n} from \"motionrail\";\n\nexport interface MotionRailProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"ref\"\n> {\n  options?: MotionRailOptions;\n}\n\nfunction MotionRailPreact({ options, ...divProps }: MotionRailProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const motionRailRef = useRef<MotionRailClass | null>(null);\n  const { children, ...restDivProps } = divProps || {};\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    motionRailRef.current = new MotionRailClass(\n      containerRef.current,\n      options || {},\n    );\n\n    return () => {\n      if (motionRailRef.current) {\n        motionRailRef.current.destroy();\n        motionRailRef.current = null;\n      }\n    };\n  }, [options]);\n\n  useEffect(() => {\n    if (motionRailRef.current) {\n      motionRailRef.current.update();\n    }\n  }, [children]);\n\n  // Compute style for scrollable div\n  const scrollableStyle = options?.containerName\n    ? { containerName: options.containerName }\n    : undefined;\n  return (\n    <div ref={containerRef} data-motionrail {...restDivProps}>\n      <div data-motionrail-scrollable style={scrollableStyle}>\n        <div data-motionrail-grid>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport { MotionRailPreact as MotionRail };\n"],"mappings":"4YAcA,SAAS,EAAiB,CAAE,UAAS,GAAG,GAA6B,CACnE,IAAM,GAAA,EAAA,EAAA,QAAsC,KAAK,CAC3C,GAAA,EAAA,EAAA,QAA+C,KAAK,CACpD,CAAE,WAAU,GAAG,GAAiB,GAAY,EAAE,EAEpD,EAAA,EAAA,eAAgB,CACT,KAAa,QAOlB,MALA,GAAc,QAAU,IAAI,EAAA,WAC1B,EAAa,QACb,GAAW,EAAE,CACd,KAEY,CACX,AAEE,EAAc,WADd,EAAc,QAAQ,SAAS,CACP,QAG3B,CAAC,EAAQ,CAAC,EAEb,EAAA,EAAA,eAAgB,CACV,EAAc,SAChB,EAAc,QAAQ,QAAQ,EAE/B,CAAC,EAAS,CAAC,CAGd,IAAM,EAAkB,GAAS,cAC7B,CAAE,cAAe,EAAQ,cAAe,CACxC,IAAA,GACJ,OACE,EAAA,EAAA,KAAC,MAAA,CAAI,IAAK,EAAc,kBAAA,GAAgB,GAAI,YAC1C,EAAA,EAAA,KAAC,MAAA,CAAI,6BAAA,GAA2B,MAAO,YACrC,EAAA,EAAA,KAAC,MAAA,CAAI,uBAAA,GAAsB,YAAe,EACtC,EACF"}

package/frameworks/qwik/lib/main.qwik.cjs

@@ -3,16 +3,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const motionrail = require("motionrail");
-const MotionRail = qwik.component$(({ options, ...divProps }) => {
+const MotionRail = qwik.component$((props) => {
+  const { options, ...divProps } = props;
+  const { onChange, ...restOptions } = options || {};
   const containerRef = qwik.useSignal();
   const motionRailRef = qwik.useSignal(null);
-  const optionsStore = qwik.useStore({
-    value: void 0
-  });
-  optionsStore.value = options;
   qwik.useVisibleTask$(({ cleanup }) => {
     if (!containerRef.value) return;
-    motionRailRef.value = new motionrail.MotionRail(containerRef.value, qwik.noSerialize(optionsStore.value) || {});
+    motionRailRef.value = new motionrail.MotionRail(containerRef.value, restOptions);
+    if (onChange && motionRailRef.value) {
+      motionRailRef.value.setOnChange(onChange);
+    }
     cleanup(() => {
       if (motionRailRef.value) {
         motionRailRef.value.destroy();
@@ -20,12 +21,16 @@ const MotionRail = qwik.component$(({ options, ...divProps }) => {
       }
     });
   });
+  const scrollableStyle = options?.containerName ? {
+    containerName: options.containerName
+  } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: containerRef,
     "data-motionrail": true,
     ...divProps,
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
       "data-motionrail-scrollable": true,
+      style: scrollableStyle,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
         "data-motionrail-grid": true,
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})

package/frameworks/qwik/lib/main.qwik.mjs

@@ -1,16 +1,17 @@
 import { jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, useSignal, useStore, useVisibleTask$, noSerialize, Slot } from "@builder.io/qwik";
+import { component$, useSignal, useVisibleTask$, Slot } from "@builder.io/qwik";
 import { MotionRail as MotionRail$1 } from "motionrail";
-const MotionRail = component$(({ options, ...divProps }) => {
+const MotionRail = component$((props) => {
+  const { options, ...divProps } = props;
+  const { onChange, ...restOptions } = options || {};
   const containerRef = useSignal();
   const motionRailRef = useSignal(null);
-  const optionsStore = useStore({
-    value: void 0
-  });
-  optionsStore.value = options;
   useVisibleTask$(({ cleanup }) => {
     if (!containerRef.value) return;
-    motionRailRef.value = new MotionRail$1(containerRef.value, noSerialize(optionsStore.value) || {});
+    motionRailRef.value = new MotionRail$1(containerRef.value, restOptions);
+    if (onChange && motionRailRef.value) {
+      motionRailRef.value.setOnChange(onChange);
+    }
     cleanup(() => {
       if (motionRailRef.value) {
         motionRailRef.value.destroy();
@@ -18,12 +19,16 @@ const MotionRail = component$(({ options, ...divProps }) => {
       }
     });
   });
+  const scrollableStyle = options?.containerName ? {
+    containerName: options.containerName
+  } : void 0;
   return /* @__PURE__ */ jsx("div", {
     ref: containerRef,
     "data-motionrail": true,
     ...divProps,
     children: /* @__PURE__ */ jsx("div", {
       "data-motionrail-scrollable": true,
+      style: scrollableStyle,
       children: /* @__PURE__ */ jsx("div", {
         "data-motionrail-grid": true,
         children: /* @__PURE__ */ jsx(Slot, {})

package/frameworks/qwik/lib-types/entry.dev.d.ts

@@ -0,0 +1,2 @@
+import { type RenderOptions } from "@builder.io/qwik";
+export default function (opts: RenderOptions): Promise<import("@builder.io/qwik").RenderResult>;

package/frameworks/qwik/lib-types/entry.ssr.d.ts

@@ -0,0 +1,14 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import { type RenderToStreamOptions } from "@builder.io/qwik/server";
+export default function (opts: RenderToStreamOptions): Promise<import("@builder.io/qwik/server").RenderToStreamResult>;

package/frameworks/qwik/lib-types/index.d.ts

@@ -1 +1 @@
-export { MotionRail } from './main';
+export { MotionRail } from "./main";

package/frameworks/qwik/lib-types/main.d.ts

@@ -1,4 +1,4 @@
-import { type MotionRailOptions } from "motionrail";
+import type { MotionRailOptions } from "motionrail";
 export interface MotionRailProps {
     options?: MotionRailOptions;
 }

package/frameworks/qwik/lib-types/root.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("@builder.io/qwik").JSXOutput;
+export default _default;

package/frameworks/react/dist/react.es.js

@@ -1,27 +1,28 @@
 "use client";
 import { useEffect, useRef } from "react";
 import { MotionRail } from "motionrail";
-import { jsx } from "react/jsx-runtime";
-function MotionRailReact({ options: i, ref: a, divRef: o, ...s }) {
-	let c = useRef(null), l = useRef(null), { children: u, ...d } = s || {};
+import { Fragment, jsx } from "react/jsx-runtime";
+function MotionRailReact({ options: a, ref: o, divRef: s, ...c }) {
+	let l = useRef(null), u = useRef(null), { children: d, ...f } = c || {};
 	return useEffect(() => {
-		if (c.current) return l.current = new MotionRail(c.current, i || {}), a && (a.current = l.current), o && (o.current = c.current), () => {
-			l.current &&= (l.current.destroy(), null);
+		if (l.current) return u.current = new MotionRail(l.current, a || {}), o && (o.current = u.current), s && (s.current = l.current), () => {
+			u.current &&= (u.current.destroy(), null);
 		};
-	}, [i]), useEffect(() => {
-		l.current && l.current.update();
-	}, [u]), /* @__PURE__ */ jsx("div", {
-		ref: c,
+	}, [a]), useEffect(() => {
+		u.current && u.current.update();
+	}, [d]), /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+		ref: l,
 		"data-motionrail": !0,
-		...d,
+		...f,
 		children: /* @__PURE__ */ jsx("div", {
 			"data-motionrail-scrollable": !0,
+			style: { containerName: a?.containerName },
 			children: /* @__PURE__ */ jsx("div", {
 				"data-motionrail-grid": !0,
-				children: u
+				children: d
 			})
 		})
-	});
+	}) });
 }
 export { MotionRailReact as MotionRail };
 

package/frameworks/react/dist/react.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.es.js","names":[],"sources":["../src/main.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type MutableRefObject } from \"react\";\nimport {\n  MotionRail as MotionRailClass,\n  type MotionRailOptions,\n} from \"motionrail\";\n\nexport interface MotionRailProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: MutableRefObject<MotionRailClass | null>;\n  divRef?: MutableRefObject<HTMLDivElement | null>;\n  options?: MotionRailOptions;\n}\n\nfunction MotionRailReact({ options, ref, divRef, ...divProps }: MotionRailProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const motionRailRef = useRef<MotionRailClass | null>(null);\n  const { children, ...restDivProps } = divProps || {};\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    motionRailRef.current = new MotionRailClass(\n      containerRef.current,\n      options || {},\n    );\n    if (ref) {\n      ref.current = motionRailRef.current;\n    }\n\n    if (divRef) {\n      divRef.current = containerRef.current;\n    }\n\n    return () => {\n      if (motionRailRef.current) {\n        motionRailRef.current.destroy();\n        motionRailRef.current = null;\n      }\n    };\n  }, [options]);\n\n  useEffect(() => {\n    if (motionRailRef.current) {\n      motionRailRef.current.update();\n    }\n  }, [children]);\n\n  return (\n    <div ref={containerRef} data-motionrail {...restDivProps}>\n      <div data-motionrail-scrollable>\n        <div data-motionrail-grid>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport { MotionRailReact as MotionRail };\n"],"mappings":";;;;AAcA,SAAS,gBAAgB,EAAE,YAAS,QAAK,WAAQ,GAAG,KAA6B;CAC/E,IAAM,IAAe,OAAuB,KAAK,EAC3C,IAAgB,OAA+B,KAAK,EACpD,EAAE,aAAU,GAAG,MAAiB,KAAY,EAAE;AA+BpD,QA7BA,gBAAgB;AACT,QAAa,QAclB,QAZA,EAAc,UAAU,IAAI,WAC1B,EAAa,SACb,KAAW,EAAE,CACd,EACG,MACF,EAAI,UAAU,EAAc,UAG1B,MACF,EAAO,UAAU,EAAa,gBAGnB;AACX,GAEE,EAAc,aADd,EAAc,QAAQ,SAAS,EACP;;IAG3B,CAAC,EAAQ,CAAC,EAEb,gBAAgB;AACd,EAAI,EAAc,WAChB,EAAc,QAAQ,QAAQ;IAE/B,CAAC,EAAS,CAAC,EAGZ,oBAAC,OAAA;EAAI,KAAK;EAAc,mBAAA;EAAgB,GAAI;YAC1C,oBAAC,OAAA;GAAI,8BAAA;aACH,oBAAC,OAAA;IAAI,wBAAA;IAAsB;KAAe;IACtC;GACF"}
+{"version":3,"file":"react.es.js","names":[],"sources":["../src/main.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type MutableRefObject } from \"react\";\nimport {\n  MotionRail as MotionRailClass,\n  type MotionRailOptions,\n} from \"motionrail\";\n\nexport interface MotionRailProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: MutableRefObject<MotionRailClass | null>;\n  divRef?: MutableRefObject<HTMLDivElement | null>;\n  options?: MotionRailOptions;\n}\n\nfunction MotionRailReact({\n  options,\n  ref,\n  divRef,\n  ...divProps\n}: MotionRailProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const motionRailRef = useRef<MotionRailClass | null>(null);\n  const { children, ...restDivProps } = divProps || {};\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    motionRailRef.current = new MotionRailClass(\n      containerRef.current,\n      options || {},\n    );\n    if (ref) {\n      ref.current = motionRailRef.current;\n    }\n\n    if (divRef) {\n      divRef.current = containerRef.current;\n    }\n\n    return () => {\n      if (motionRailRef.current) {\n        motionRailRef.current.destroy();\n        motionRailRef.current = null;\n      }\n    };\n  }, [options]);\n\n  useEffect(() => {\n    if (motionRailRef.current) {\n      motionRailRef.current.update();\n    }\n  }, [children]);\n\n  return (\n    <>\n      <div ref={containerRef} data-motionrail {...restDivProps}>\n        <div\n          data-motionrail-scrollable\n          style={{ containerName: options?.containerName }}\n        >\n          <div data-motionrail-grid>{children}</div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport { MotionRailReact as MotionRail };\n"],"mappings":";;;;AAcA,SAAS,gBAAgB,EACvB,YACA,QACA,WACA,GAAG,KACe;CAClB,IAAM,IAAe,OAAuB,KAAK,EAC3C,IAAgB,OAA+B,KAAK,EACpD,EAAE,aAAU,GAAG,MAAiB,KAAY,EAAE;AA+BpD,QA7BA,gBAAgB;AACT,QAAa,QAclB,QAZA,EAAc,UAAU,IAAI,WAC1B,EAAa,SACb,KAAW,EAAE,CACd,EACG,MACF,EAAI,UAAU,EAAc,UAG1B,MACF,EAAO,UAAU,EAAa,gBAGnB;AACX,GAEE,EAAc,aADd,EAAc,QAAQ,SAAS,EACP;;IAG3B,CAAC,EAAQ,CAAC,EAEb,gBAAgB;AACd,EAAI,EAAc,WAChB,EAAc,QAAQ,QAAQ;IAE/B,CAAC,EAAS,CAAC,EAGZ,oBAAA,UAAA,EAAA,UACE,oBAAC,OAAA;EAAI,KAAK;EAAc,mBAAA;EAAgB,GAAI;YAC1C,oBAAC,OAAA;GACC,8BAAA;GACA,OAAO,EAAE,eAAe,GAAS,eAAe;aAEhD,oBAAC,OAAA;IAAI,wBAAA;IAAsB;KAAe;IACtC;GACF,EAAA,CACL"}

package/frameworks/react/dist/react.umd.js

@@ -1,2 +1,2 @@
-"use client";(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`motionrail`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`motionrail`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailReact={},e.React,e.MotionRail,e.React))})(this,function(e,t,n,r){function i({options:e,ref:i,divRef:a,...o}){let s=(0,t.useRef)(null),c=(0,t.useRef)(null),{children:l,...u}=o||{};return(0,t.useEffect)(()=>{if(s.current)return c.current=new n.MotionRail(s.current,e||{}),i&&(i.current=c.current),a&&(a.current=s.current),()=>{c.current&&=(c.current.destroy(),null)}},[e]),(0,t.useEffect)(()=>{c.current&&c.current.update()},[l]),(0,r.jsx)(`div`,{ref:s,"data-motionrail":!0,...u,children:(0,r.jsx)(`div`,{"data-motionrail-scrollable":!0,children:(0,r.jsx)(`div`,{"data-motionrail-grid":!0,children:l})})})}e.MotionRail=i});
+"use client";(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`motionrail`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`motionrail`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailReact={},e.React,e.MotionRail,e.React))})(this,function(e,t,n,r){function i({options:e,ref:i,divRef:a,...o}){let s=(0,t.useRef)(null),c=(0,t.useRef)(null),{children:l,...u}=o||{};return(0,t.useEffect)(()=>{if(s.current)return c.current=new n.MotionRail(s.current,e||{}),i&&(i.current=c.current),a&&(a.current=s.current),()=>{c.current&&=(c.current.destroy(),null)}},[e]),(0,t.useEffect)(()=>{c.current&&c.current.update()},[l]),(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(`div`,{ref:s,"data-motionrail":!0,...u,children:(0,r.jsx)(`div`,{"data-motionrail-scrollable":!0,style:{containerName:e?.containerName},children:(0,r.jsx)(`div`,{"data-motionrail-grid":!0,children:l})})})})}e.MotionRail=i});
 //# sourceMappingURL=react.umd.js.map

package/frameworks/react/dist/react.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.umd.js","names":[],"sources":["../src/main.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type MutableRefObject } from \"react\";\nimport {\n  MotionRail as MotionRailClass,\n  type MotionRailOptions,\n} from \"motionrail\";\n\nexport interface MotionRailProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: MutableRefObject<MotionRailClass | null>;\n  divRef?: MutableRefObject<HTMLDivElement | null>;\n  options?: MotionRailOptions;\n}\n\nfunction MotionRailReact({ options, ref, divRef, ...divProps }: MotionRailProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const motionRailRef = useRef<MotionRailClass | null>(null);\n  const { children, ...restDivProps } = divProps || {};\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    motionRailRef.current = new MotionRailClass(\n      containerRef.current,\n      options || {},\n    );\n    if (ref) {\n      ref.current = motionRailRef.current;\n    }\n\n    if (divRef) {\n      divRef.current = containerRef.current;\n    }\n\n    return () => {\n      if (motionRailRef.current) {\n        motionRailRef.current.destroy();\n        motionRailRef.current = null;\n      }\n    };\n  }, [options]);\n\n  useEffect(() => {\n    if (motionRailRef.current) {\n      motionRailRef.current.update();\n    }\n  }, [children]);\n\n  return (\n    <div ref={containerRef} data-motionrail {...restDivProps}>\n      <div data-motionrail-scrollable>\n        <div data-motionrail-grid>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport { MotionRailReact as MotionRail };\n"],"mappings":"uXAcA,SAAS,EAAgB,CAAE,UAAS,MAAK,SAAQ,GAAG,GAA6B,CAC/E,IAAM,GAAA,EAAA,EAAA,QAAsC,KAAK,CAC3C,GAAA,EAAA,EAAA,QAA+C,KAAK,CACpD,CAAE,WAAU,GAAG,GAAiB,GAAY,EAAE,CA+BpD,OA7BA,EAAA,EAAA,eAAgB,CACT,KAAa,QAclB,MAZA,GAAc,QAAU,IAAI,EAAA,WAC1B,EAAa,QACb,GAAW,EAAE,CACd,CACG,IACF,EAAI,QAAU,EAAc,SAG1B,IACF,EAAO,QAAU,EAAa,aAGnB,CACX,AAEE,EAAc,WADd,EAAc,QAAQ,SAAS,CACP,QAG3B,CAAC,EAAQ,CAAC,EAEb,EAAA,EAAA,eAAgB,CACV,EAAc,SAChB,EAAc,QAAQ,QAAQ,EAE/B,CAAC,EAAS,CAAC,EAGZ,EAAA,EAAA,KAAC,MAAA,CAAI,IAAK,EAAc,kBAAA,GAAgB,GAAI,YAC1C,EAAA,EAAA,KAAC,MAAA,CAAI,6BAAA,aACH,EAAA,EAAA,KAAC,MAAA,CAAI,uBAAA,GAAsB,YAAe,EACtC,EACF"}
+{"version":3,"file":"react.umd.js","names":[],"sources":["../src/main.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, type MutableRefObject } from \"react\";\nimport {\n  MotionRail as MotionRailClass,\n  type MotionRailOptions,\n} from \"motionrail\";\n\nexport interface MotionRailProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: MutableRefObject<MotionRailClass | null>;\n  divRef?: MutableRefObject<HTMLDivElement | null>;\n  options?: MotionRailOptions;\n}\n\nfunction MotionRailReact({\n  options,\n  ref,\n  divRef,\n  ...divProps\n}: MotionRailProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const motionRailRef = useRef<MotionRailClass | null>(null);\n  const { children, ...restDivProps } = divProps || {};\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    motionRailRef.current = new MotionRailClass(\n      containerRef.current,\n      options || {},\n    );\n    if (ref) {\n      ref.current = motionRailRef.current;\n    }\n\n    if (divRef) {\n      divRef.current = containerRef.current;\n    }\n\n    return () => {\n      if (motionRailRef.current) {\n        motionRailRef.current.destroy();\n        motionRailRef.current = null;\n      }\n    };\n  }, [options]);\n\n  useEffect(() => {\n    if (motionRailRef.current) {\n      motionRailRef.current.update();\n    }\n  }, [children]);\n\n  return (\n    <>\n      <div ref={containerRef} data-motionrail {...restDivProps}>\n        <div\n          data-motionrail-scrollable\n          style={{ containerName: options?.containerName }}\n        >\n          <div data-motionrail-grid>{children}</div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nexport { MotionRailReact as MotionRail };\n"],"mappings":"uXAcA,SAAS,EAAgB,CACvB,UACA,MACA,SACA,GAAG,GACe,CAClB,IAAM,GAAA,EAAA,EAAA,QAAsC,KAAK,CAC3C,GAAA,EAAA,EAAA,QAA+C,KAAK,CACpD,CAAE,WAAU,GAAG,GAAiB,GAAY,EAAE,CA+BpD,OA7BA,EAAA,EAAA,eAAgB,CACT,KAAa,QAclB,MAZA,GAAc,QAAU,IAAI,EAAA,WAC1B,EAAa,QACb,GAAW,EAAE,CACd,CACG,IACF,EAAI,QAAU,EAAc,SAG1B,IACF,EAAO,QAAU,EAAa,aAGnB,CACX,AAEE,EAAc,WADd,EAAc,QAAQ,SAAS,CACP,QAG3B,CAAC,EAAQ,CAAC,EAEb,EAAA,EAAA,eAAgB,CACV,EAAc,SAChB,EAAc,QAAQ,QAAQ,EAE/B,CAAC,EAAS,CAAC,EAGZ,EAAA,EAAA,KAAA,EAAA,SAAA,CAAA,UACE,EAAA,EAAA,KAAC,MAAA,CAAI,IAAK,EAAc,kBAAA,GAAgB,GAAI,YAC1C,EAAA,EAAA,KAAC,MAAA,CACC,6BAAA,GACA,MAAO,CAAE,cAAe,GAAS,cAAe,WAEhD,EAAA,EAAA,KAAC,MAAA,CAAI,uBAAA,GAAsB,YAAe,EACtC,EACF,CAAA,CACL"}

package/frameworks/solid/dist/dev.js

@@ -1,4 +1,4 @@
-import { template, use, spread, insert } from 'solid-js/web';
+import { template, use, spread, insert, effect, style } from 'solid-js/web';
 import { children, onMount, createEffect, onCleanup } from 'solid-js';
 import { MotionRail } from 'motionrail';
 
@@ -24,12 +24,21 @@ function MotionRailSolid(props) {
       motionRailInstance = null;
     }
   });
+  const {
+    options,
+    children: children$1,
+    ...restProps
+  } = props;
+  const scrollableStyle = options?.containerName ? {
+    containerName: options.containerName
+  } : void 0;
   return (() => {
     var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
     var _ref$ = containerRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
-    spread(_el$, props, false, true);
+    spread(_el$, restProps, false, true);
     insert(_el$3, resolved);
+    effect((_$p) => style(_el$2, scrollableStyle, _$p));
     return _el$;
   })();
 }

package/frameworks/solid/dist/dev.jsx

@@ -1,18 +1,13 @@
 // src/index.tsx
 import { onMount, onCleanup, createEffect, children as resolveChildren } from "solid-js";
-import {
-  MotionRail as MotionRailClass
-} from "motionrail";
+import { MotionRail as MotionRailClass } from "motionrail";
 function MotionRailSolid(props) {
   let containerRef;
   let motionRailInstance = null;
   const resolved = resolveChildren(() => props.children);
   onMount(() => {
     if (!containerRef) return;
-    motionRailInstance = new MotionRailClass(
-      containerRef,
-      props.options || {}
-    );
+    motionRailInstance = new MotionRailClass(containerRef, props.options || {});
   });
   createEffect(() => {
     resolved();
@@ -26,8 +21,10 @@ function MotionRailSolid(props) {
       motionRailInstance = null;
     }
   });
-  return <div ref={containerRef} data-motionrail {...props}>
-      <div data-motionrail-scrollable>
+  const { options, children, ...restProps } = props;
+  const scrollableStyle = options?.containerName ? { containerName: options.containerName } : void 0;
+  return <div ref={containerRef} data-motionrail {...restProps}>
+      <div data-motionrail-scrollable style={scrollableStyle}>
         <div data-motionrail-grid>{resolved()}</div>
       </div>
     </div>;

package/frameworks/solid/dist/index.js

@@ -1,4 +1,4 @@
-import { template, use, spread, insert } from 'solid-js/web';
+import { template, use, spread, insert, effect, style } from 'solid-js/web';
 import { children, onMount, createEffect, onCleanup } from 'solid-js';
 import { MotionRail } from 'motionrail';
 
@@ -24,12 +24,21 @@ function MotionRailSolid(props) {
       motionRailInstance = null;
     }
   });
+  const {
+    options,
+    children: children$1,
+    ...restProps
+  } = props;
+  const scrollableStyle = options?.containerName ? {
+    containerName: options.containerName
+  } : void 0;
   return (() => {
     var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
     var _ref$ = containerRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
-    spread(_el$, props, false, true);
+    spread(_el$, restProps, false, true);
     insert(_el$3, resolved);
+    effect((_$p) => style(_el$2, scrollableStyle, _$p));
     return _el$;
   })();
 }

package/frameworks/solid/dist/index.jsx

@@ -1,18 +1,13 @@
 // src/index.tsx
 import { onMount, onCleanup, createEffect, children as resolveChildren } from "solid-js";
-import {
-  MotionRail as MotionRailClass
-} from "motionrail";
+import { MotionRail as MotionRailClass } from "motionrail";
 function MotionRailSolid(props) {
   let containerRef;
   let motionRailInstance = null;
   const resolved = resolveChildren(() => props.children);
   onMount(() => {
     if (!containerRef) return;
-    motionRailInstance = new MotionRailClass(
-      containerRef,
-      props.options || {}
-    );
+    motionRailInstance = new MotionRailClass(containerRef, props.options || {});
   });
   createEffect(() => {
     resolved();
@@ -26,8 +21,10 @@ function MotionRailSolid(props) {
       motionRailInstance = null;
     }
   });
-  return <div ref={containerRef} data-motionrail {...props}>
-      <div data-motionrail-scrollable>
+  const { options, children, ...restProps } = props;
+  const scrollableStyle = options?.containerName ? { containerName: options.containerName } : void 0;
+  return <div ref={containerRef} data-motionrail {...restProps}>
+      <div data-motionrail-scrollable style={scrollableStyle}>
         <div data-motionrail-grid>{resolved()}</div>
       </div>
     </div>;

package/frameworks/svelte/dist/index.d.ts

@@ -1,2 +1,2 @@
-import Svelte from "./svelte.svelte";
+import Svelte from './svelte.svelte';
 export { Svelte as MotionRail };

package/frameworks/svelte/dist/index.js

@@ -1,2 +1,2 @@
-import Svelte from "./svelte.svelte";
+import Svelte from './svelte.svelte';
 export { Svelte as MotionRail };

package/frameworks/svelte/dist/svelte.svelte

@@ -1,61 +1,64 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
-  import { MotionRail as MotionRailClass } from "motionrail";
-  import type { MotionRailOptions } from "motionrail";
-
-  export let options: MotionRailOptions = {};
-  export let instance: MotionRailClass | null = null;
-  export let container: HTMLDivElement | undefined = undefined;
-
-  let containerRef: HTMLDivElement;
-  let motionRailInstance: MotionRailClass | null = null;
-  let slotObserver: MutationObserver | null = null;
-
-  $: instance = motionRailInstance;
-  $: container = containerRef;
-
-  onMount(() => {
-    if (!containerRef) return;
-
-    motionRailInstance = new MotionRailClass(containerRef, options);
-
-    const gridElement = containerRef.querySelector('[data-motionrail-grid]');
-    if (gridElement) {
-      slotObserver = new MutationObserver(() => {
-        if (motionRailInstance) {
-          motionRailInstance.update();
-        }
-      });
-      slotObserver.observe(gridElement, {
-        childList: true,
-        subtree: true,
-      });
-    }
-  });
-
-  $: if (motionRailInstance && options) {
-    if (containerRef) {
-      motionRailInstance.destroy();
-      motionRailInstance = new MotionRailClass(containerRef, options);
-    }
-  }
-
-  onDestroy(() => {
-    if (slotObserver) {
-      slotObserver.disconnect();
-      slotObserver = null;
-    }
-    if (motionRailInstance) {
-      motionRailInstance.destroy();
-      motionRailInstance = null;
-    }
-  });
+	import { onMount, onDestroy } from 'svelte';
+	import { MotionRail as MotionRailClass } from 'motionrail';
+	import type { MotionRailOptions } from 'motionrail';
+
+	export let options: MotionRailOptions = {};
+	export let instance: MotionRailClass | null = null;
+	export let container: HTMLDivElement | undefined = undefined;
+
+	let containerRef: HTMLDivElement;
+	let motionRailInstance: MotionRailClass | null = null;
+	let slotObserver: MutationObserver | null = null;
+
+	$: instance = motionRailInstance;
+	$: container = containerRef;
+
+	onMount(() => {
+		if (!containerRef) return;
+
+		motionRailInstance = new MotionRailClass(containerRef, options);
+
+		const gridElement = containerRef.querySelector('[data-motionrail-grid]');
+		if (gridElement) {
+			slotObserver = new MutationObserver(() => {
+				if (motionRailInstance) {
+					motionRailInstance.update();
+				}
+			});
+			slotObserver.observe(gridElement, {
+				childList: true,
+				subtree: true
+			});
+		}
+	});
+
+	$: if (motionRailInstance && options) {
+		if (containerRef) {
+			motionRailInstance.destroy();
+			motionRailInstance = new MotionRailClass(containerRef, options);
+		}
+	}
+
+	onDestroy(() => {
+		if (slotObserver) {
+			slotObserver.disconnect();
+			slotObserver = null;
+		}
+		if (motionRailInstance) {
+			motionRailInstance.destroy();
+			motionRailInstance = null;
+		}
+	});
 </script>
 
 <div bind:this={containerRef} data-motionrail {...$$restProps}>
-  <div data-motionrail-scrollable>
-    <div data-motionrail-grid>
-      <slot />
-    </div>
-  </div>
+	<div
+		data-motionrail-scrollable
+		style={options?.containerName ? `container-name: ${options.containerName};` : undefined}
+	>
+		<div data-motionrail-grid>
+			<slot />
+		</div>
+	</div>
 </div>

package/frameworks/svelte/dist/svelte.svelte.d.ts

@@ -1,5 +1,5 @@
-import { MotionRail as MotionRailClass } from "motionrail";
-import type { MotionRailOptions } from "motionrail";
+import { MotionRail as MotionRailClass } from 'motionrail';
+import type { MotionRailOptions } from 'motionrail';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;