scroll-system 1.2.1 → 1.3.1

package/dist/components/ControlledView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControlledView.d.ts","sourceRoot":"","sources":["../../components/ControlledView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,mBAAmB,EAAwB,MAAM,UAAU,CAAC;AAE1E,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,SAAc,EACd,eAAwB,EACxB,mBAA2B,EAC3B,UAAkB,EAClB,WAAkB,EAClB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,mBAAmB,2CAqErB;AAMD,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM;;;;;eAc5B,MAAM,GAAG,MAAM;EAI/B"}
+{"version":3,"file":"ControlledView.d.ts","sourceRoot":"","sources":["../../components/ControlledView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,mBAAmB,EAAwB,MAAM,UAAU,CAAC;AAE1E,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,SAAc,EACd,eAAwB,EACxB,mBAA2B,EAC3B,UAAkB,EAClB,WAAkB,EAClB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,mBAAmB,2CA+ErB;AAMD,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM;;;;;eAc5B,MAAM,GAAG,MAAM;EAI/B"}

package/dist/components/FullView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FullView.d.ts","sourceRoot":"","sources":["../../components/FullView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,UAAU,CAAC;AAE9D;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,QAAQ,EACR,SAAc,EACd,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,aAAa,2CAyCf"}
+{"version":3,"file":"FullView.d.ts","sourceRoot":"","sources":["../../components/FullView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,UAAU,CAAC;AAE9D;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,QAAQ,EACR,SAAc,EACd,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,aAAa,2CAwCf"}

package/dist/components/ScrollContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../../components/ScrollContainer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAqBH,OAAO,KAAK,EAAE,oBAAoB,EAAmC,MAAM,UAAU,CAAC;AAEtF,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAc,EACd,kBAAgD,EAChD,gBAA4C,EAC5C,YAAY,EACZ,aAAa,EAEb,cAAsB,EACtB,eAAuB,EACvB,UAAe,EAEf,oBAA2B,EAC3B,qBAA4B,EAE5B,iBAAyB,EAEzB,WAAwB,EAExB,oBAA4B,EAC5B,UAAU,EACV,aAAa,EACb,UAAU,EACV,cAAsB,EACtB,OAAc,GACf,EAAE,oBAAoB,2CA6KtB"}
+{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../../components/ScrollContainer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAqBH,OAAO,KAAK,EAAE,oBAAoB,EAAmC,MAAM,UAAU,CAAC;AAEtF,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAc,EACd,kBAAgD,EAChD,gBAA4C,EAC5C,YAAY,EACZ,aAAa,EAEb,cAAsB,EACtB,eAAuB,EACvB,UAAe,EAEf,oBAA2B,EAC3B,qBAA4B,EAE5B,iBAAyB,EAEzB,WAAwB,EAExB,oBAA4B,EAC5B,UAAU,EACV,aAAa,EACb,UAAU,EACV,cAAsB,EACtB,OAAc,GACf,EAAE,oBAAoB,2CAuLtB"}

package/dist/components/ScrollLockedView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollLockedView.d.ts","sourceRoot":"","sources":["../../components/ScrollLockedView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,KAAK,EAAE,qBAAqB,EAAuB,MAAM,UAAU,CAAC;AAE3E,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,QAAQ,EACR,SAAc,EACd,eAA4B,EAC5B,kBAAyB,EACzB,mBAAuC,EACvC,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,qBAAqB,2CAmGvB"}
+{"version":3,"file":"ScrollLockedView.d.ts","sourceRoot":"","sources":["../../components/ScrollLockedView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,KAAK,EAAE,qBAAqB,EAAuB,MAAM,UAAU,CAAC;AAE3E,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,QAAQ,EACR,SAAc,EACd,eAA4B,EAC5B,kBAAyB,EACzB,mBAAuC,EACvC,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,qBAAqB,2CAkHvB"}

package/dist/index.js

@@ -333,7 +333,7 @@ function useWheelHandler() {
       const activeView = state.views[state.activeIndex];
       if (activeView?.capability === "internal") {
         const scrollContainer = document.querySelector(
-          `[data-view-type="scroll-locked"][data-active="true"] > div`
+          `[data-view-type="scroll-locked"][data-active="true"] [data-scrollable="true"]`
         );
         if (scrollContainer) {
           const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
@@ -381,7 +381,7 @@ function canNavigateFromScrollPosition(direction) {
     return true;
   }
   const scrollContainer = document.querySelector(
-    `[data-view-type="scroll-locked"][data-active="true"] > div`
+    `[data-view-type="scroll-locked"][data-active="true"] [data-scrollable="true"]`
   );
   if (!scrollContainer) {
     return true;
@@ -1183,10 +1183,20 @@ function ScrollContainer({
     "div",
     {
       ref: containerRef,
-      className: `scroll-container fixed inset-0 overflow-hidden w-screen h-screen ${className}`,
+      className: `scroll-container ${className}`,
       role: "main",
       "aria-label": "Scroll container",
       "data-auto-scrolling": autoScrollState.isPlaying,
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: "hidden",
+        width: "100vw",
+        height: "100vh"
+      },
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "scroll-wrapper", style: wrapperStyle, children })
     }
   ) });
@@ -1302,14 +1312,13 @@ function FullView({
     "section",
     {
       id,
-      className: `
-        full-view
-        relative
-        w-full h-screen
-        overflow-hidden
-        ${isActive ? "is-active" : ""}
-        ${className}
-      `,
+      className: `full-view ${isActive ? "is-active" : ""} ${className}`,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100vh",
+        overflow: "hidden"
+      },
       "data-view-type": "full",
       "data-view-index": index,
       "data-view-active": isActive,
@@ -1442,20 +1451,35 @@ function ScrollLockedView({
     }
     wasActive.current = isActive;
   }, [isActive, lastNavigationDirection, scrollResetBehavior, scrollDirection]);
-  const scrollClasses = scrollDirection === "vertical" ? "overflow-y-auto overflow-x-hidden" : "overflow-x-auto overflow-y-hidden";
+  const scrollStyles = scrollDirection === "vertical" ? { overflowY: "auto", overflowX: "hidden" } : { overflowX: "auto", overflowY: "hidden" };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
       id,
-      className: `relative w-full h-screen ${className}`,
+      className: `scroll-locked-view ${className}`,
       "data-view-type": "scroll-locked",
       "data-active": isActive ? "true" : "false",
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100vh",
+        overflow: "hidden"
+      },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref: scrollRef,
-          className: `w-full h-full ${scrollClasses} no-scrollbar`,
-          style: { scrollbarWidth: "none" },
+          className: "no-scrollbar",
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            scrollbarWidth: "none",
+            touchAction: scrollDirection === "vertical" ? "pan-y" : "pan-x",
+            ...scrollStyles
+          },
           "data-scrollable": "true",
           children
         }
@@ -1507,29 +1531,39 @@ function ControlledView({
     const lockState = canProceed ? "unlocked" : "locked";
     setExplicitLock(id, lockState);
   }, [id, canProceed, setExplicitLock]);
-  const overflowClasses = react.useMemo(() => {
-    if (!allowInternalScroll) return "overflow-hidden";
+  const overflowStyles = react.useMemo(() => {
+    if (!allowInternalScroll) return { overflow: "hidden" };
     switch (scrollDirection) {
       case "vertical":
-        return "overflow-y-auto overflow-x-hidden";
+        return { overflowY: "auto", overflowX: "hidden" };
       case "horizontal":
-        return "overflow-x-auto overflow-y-hidden";
+        return { overflowX: "auto", overflowY: "hidden" };
       default:
-        return "overflow-auto";
+        return { overflow: "auto" };
     }
   }, [allowInternalScroll, scrollDirection]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
       id,
-      className: `relative w-full h-screen ${isActive ? "z-10" : "z-0"} ${className}`,
+      className: `controlled-view ${className}`,
       "data-view-type": "controlled",
       "data-active": isActive,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100vh",
+        zIndex: isActive ? 10 : 0
+      },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref: scrollRef,
-          className: `w-full h-full ${overflowClasses}`,
+          style: {
+            width: "100%",
+            height: "100%",
+            ...overflowStyles
+          },
           children
         }
       )

package/dist/index.mjs

@@ -331,7 +331,7 @@ function useWheelHandler() {
       const activeView = state.views[state.activeIndex];
       if (activeView?.capability === "internal") {
         const scrollContainer = document.querySelector(
-          `[data-view-type="scroll-locked"][data-active="true"] > div`
+          `[data-view-type="scroll-locked"][data-active="true"] [data-scrollable="true"]`
         );
         if (scrollContainer) {
           const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
@@ -379,7 +379,7 @@ function canNavigateFromScrollPosition(direction) {
     return true;
   }
   const scrollContainer = document.querySelector(
-    `[data-view-type="scroll-locked"][data-active="true"] > div`
+    `[data-view-type="scroll-locked"][data-active="true"] [data-scrollable="true"]`
   );
   if (!scrollContainer) {
     return true;
@@ -1181,10 +1181,20 @@ function ScrollContainer({
     "div",
     {
       ref: containerRef,
-      className: `scroll-container fixed inset-0 overflow-hidden w-screen h-screen ${className}`,
+      className: `scroll-container ${className}`,
       role: "main",
       "aria-label": "Scroll container",
       "data-auto-scrolling": autoScrollState.isPlaying,
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: "hidden",
+        width: "100vw",
+        height: "100vh"
+      },
       children: /* @__PURE__ */ jsx("div", { className: "scroll-wrapper", style: wrapperStyle, children })
     }
   ) });
@@ -1300,14 +1310,13 @@ function FullView({
     "section",
     {
       id,
-      className: `
-        full-view
-        relative
-        w-full h-screen
-        overflow-hidden
-        ${isActive ? "is-active" : ""}
-        ${className}
-      `,
+      className: `full-view ${isActive ? "is-active" : ""} ${className}`,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100vh",
+        overflow: "hidden"
+      },
       "data-view-type": "full",
       "data-view-index": index,
       "data-view-active": isActive,
@@ -1440,20 +1449,35 @@ function ScrollLockedView({
     }
     wasActive.current = isActive;
   }, [isActive, lastNavigationDirection, scrollResetBehavior, scrollDirection]);
-  const scrollClasses = scrollDirection === "vertical" ? "overflow-y-auto overflow-x-hidden" : "overflow-x-auto overflow-y-hidden";
+  const scrollStyles = scrollDirection === "vertical" ? { overflowY: "auto", overflowX: "hidden" } : { overflowX: "auto", overflowY: "hidden" };
   return /* @__PURE__ */ jsx(
     "section",
     {
       id,
-      className: `relative w-full h-screen ${className}`,
+      className: `scroll-locked-view ${className}`,
       "data-view-type": "scroll-locked",
       "data-active": isActive ? "true" : "false",
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100vh",
+        overflow: "hidden"
+      },
       children: /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollRef,
-          className: `w-full h-full ${scrollClasses} no-scrollbar`,
-          style: { scrollbarWidth: "none" },
+          className: "no-scrollbar",
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            scrollbarWidth: "none",
+            touchAction: scrollDirection === "vertical" ? "pan-y" : "pan-x",
+            ...scrollStyles
+          },
           "data-scrollable": "true",
           children
         }
@@ -1505,29 +1529,39 @@ function ControlledView({
     const lockState = canProceed ? "unlocked" : "locked";
     setExplicitLock(id, lockState);
   }, [id, canProceed, setExplicitLock]);
-  const overflowClasses = useMemo(() => {
-    if (!allowInternalScroll) return "overflow-hidden";
+  const overflowStyles = useMemo(() => {
+    if (!allowInternalScroll) return { overflow: "hidden" };
     switch (scrollDirection) {
       case "vertical":
-        return "overflow-y-auto overflow-x-hidden";
+        return { overflowY: "auto", overflowX: "hidden" };
       case "horizontal":
-        return "overflow-x-auto overflow-y-hidden";
+        return { overflowX: "auto", overflowY: "hidden" };
       default:
-        return "overflow-auto";
+        return { overflow: "auto" };
     }
   }, [allowInternalScroll, scrollDirection]);
   return /* @__PURE__ */ jsx(
     "section",
     {
       id,
-      className: `relative w-full h-screen ${isActive ? "z-10" : "z-0"} ${className}`,
+      className: `controlled-view ${className}`,
       "data-view-type": "controlled",
       "data-active": isActive,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100vh",
+        zIndex: isActive ? 10 : 0
+      },
       children: /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollRef,
-          className: `w-full h-full ${overflowClasses}`,
+          style: {
+            width: "100%",
+            height: "100%",
+            ...overflowStyles
+          },
           children
         }
       )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scroll-system",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "description": "TikTok-style vertical scroll system with snap views, touch physics, and accessibility features",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",