@xhub-reels/sdk 0.2.14 → 0.2.15

package/dist/index.cjs

@@ -3011,15 +3011,18 @@ var DEFAULT_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
 var DEFAULT_DIRECTION = "up";
 var DEFAULT_Z_INDEX = 1e3;
 var DEFAULT_PREWARM_FORWARD = 2;
+var RESTING_TRANSFORM = "translate(0, 0)";
 function offscreenTransform(direction) {
   switch (direction) {
     case "down":
-      return "translateY(-100%)";
+      return "translate(0, -100%)";
+    case "right-to-left":
+      return "translate(100%, 0)";
     case "fade":
-      return "translateY(0)";
+      return RESTING_TRANSFORM;
     case "up":
     default:
-      return "translateY(100%)";
+      return "translate(0, 100%)";
   }
 }
 function prefersReducedMotion() {
@@ -3102,7 +3105,7 @@ function ReelsModal({
     const reduce = prefersReducedMotion();
     const enter = phase === "opening";
     const offscreen2 = offscreenTransform(direction);
-    const panelFrames = direction === "fade" ? enter ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }] : enter ? [{ transform: offscreen2 }, { transform: "translateY(0)" }] : [{ transform: "translateY(0)" }, { transform: offscreen2 }];
+    const panelFrames = direction === "fade" ? enter ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }] : enter ? [{ transform: offscreen2 }, { transform: RESTING_TRANSFORM }] : [{ transform: RESTING_TRANSFORM }, { transform: offscreen2 }];
     const backdropFrames = enter ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }];
     const animDuration = reduce ? 0 : duration;
     let cancelled = false;
@@ -3128,7 +3131,7 @@ function ReelsModal({
       if (cancelled) return;
       if (enter) {
         if (direction === "fade") panel.style.opacity = "1";
-        else panel.style.transform = "translateY(0)";
+        else panel.style.transform = RESTING_TRANSFORM;
         if (backdrop) backdrop.style.opacity = "1";
       } else {
         if (direction === "fade") panel.style.opacity = "0";
@@ -3210,7 +3213,7 @@ function ReelsModal({
   if (!target) return null;
   const enterStart = phase === "opening";
   const offscreen = offscreenTransform(direction);
-  const panelInitialTransform = direction === "fade" ? "translateY(0)" : enterStart ? offscreen : "translateY(0)";
+  const panelInitialTransform = direction === "fade" ? RESTING_TRANSFORM : enterStart ? offscreen : RESTING_TRANSFORM;
   const panelInitialOpacity = direction === "fade" ? enterStart ? 0 : 1 : 1;
   const backdropInitialOpacity = enterStart ? 0 : 1;
   const rootStyle = {

package/dist/index.d.cts

@@ -955,11 +955,15 @@ interface ReelsModalAnimationConfig {
     easing?: string;
     /**
      * Panel travel direction:
-     * - 'up'   (default): slides up from the bottom edge (bottom-sheet drawer)
-     * - 'down': slides down from the top edge
-     * - 'fade': no translate, opacity only
+     * - 'up'            (default): slides up from the bottom edge (bottom-sheet drawer).
+     *   Exit: slides down back to the bottom edge.
+     * - 'down':          slides down from the top edge. Exit: slides up.
+     * - 'right-to-left': slides in from the right edge (motion goes right→left).
+     *   Exit: slides back out to the right edge (motion goes left→right) — the
+     *   panel returns to where it came from, like a side drawer.
+     * - 'fade':          no translate, opacity only.
      */
-    direction?: 'up' | 'down' | 'fade';
+    direction?: 'up' | 'down' | 'right-to-left' | 'fade';
 }
 /** State handed to render-prop customisation callbacks. */
 interface ReelsModalRenderState {

package/dist/index.d.ts

@@ -955,11 +955,15 @@ interface ReelsModalAnimationConfig {
     easing?: string;
     /**
      * Panel travel direction:
-     * - 'up'   (default): slides up from the bottom edge (bottom-sheet drawer)
-     * - 'down': slides down from the top edge
-     * - 'fade': no translate, opacity only
+     * - 'up'            (default): slides up from the bottom edge (bottom-sheet drawer).
+     *   Exit: slides down back to the bottom edge.
+     * - 'down':          slides down from the top edge. Exit: slides up.
+     * - 'right-to-left': slides in from the right edge (motion goes right→left).
+     *   Exit: slides back out to the right edge (motion goes left→right) — the
+     *   panel returns to where it came from, like a side drawer.
+     * - 'fade':          no translate, opacity only.
      */
-    direction?: 'up' | 'down' | 'fade';
+    direction?: 'up' | 'down' | 'right-to-left' | 'fade';
 }
 /** State handed to render-prop customisation callbacks. */
 interface ReelsModalRenderState {

package/dist/index.js

@@ -3005,15 +3005,18 @@ var DEFAULT_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
 var DEFAULT_DIRECTION = "up";
 var DEFAULT_Z_INDEX = 1e3;
 var DEFAULT_PREWARM_FORWARD = 2;
+var RESTING_TRANSFORM = "translate(0, 0)";
 function offscreenTransform(direction) {
   switch (direction) {
     case "down":
-      return "translateY(-100%)";
+      return "translate(0, -100%)";
+    case "right-to-left":
+      return "translate(100%, 0)";
     case "fade":
-      return "translateY(0)";
+      return RESTING_TRANSFORM;
     case "up":
     default:
-      return "translateY(100%)";
+      return "translate(0, 100%)";
   }
 }
 function prefersReducedMotion() {
@@ -3096,7 +3099,7 @@ function ReelsModal({
     const reduce = prefersReducedMotion();
     const enter = phase === "opening";
     const offscreen2 = offscreenTransform(direction);
-    const panelFrames = direction === "fade" ? enter ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }] : enter ? [{ transform: offscreen2 }, { transform: "translateY(0)" }] : [{ transform: "translateY(0)" }, { transform: offscreen2 }];
+    const panelFrames = direction === "fade" ? enter ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }] : enter ? [{ transform: offscreen2 }, { transform: RESTING_TRANSFORM }] : [{ transform: RESTING_TRANSFORM }, { transform: offscreen2 }];
     const backdropFrames = enter ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }];
     const animDuration = reduce ? 0 : duration;
     let cancelled = false;
@@ -3122,7 +3125,7 @@ function ReelsModal({
       if (cancelled) return;
       if (enter) {
         if (direction === "fade") panel.style.opacity = "1";
-        else panel.style.transform = "translateY(0)";
+        else panel.style.transform = RESTING_TRANSFORM;
         if (backdrop) backdrop.style.opacity = "1";
       } else {
         if (direction === "fade") panel.style.opacity = "0";
@@ -3204,7 +3207,7 @@ function ReelsModal({
   if (!target) return null;
   const enterStart = phase === "opening";
   const offscreen = offscreenTransform(direction);
-  const panelInitialTransform = direction === "fade" ? "translateY(0)" : enterStart ? offscreen : "translateY(0)";
+  const panelInitialTransform = direction === "fade" ? RESTING_TRANSFORM : enterStart ? offscreen : RESTING_TRANSFORM;
   const panelInitialOpacity = direction === "fade" ? enterStart ? 0 : 1 : 1;
   const backdropInitialOpacity = enterStart ? 0 : 1;
   const rootStyle = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhub-reels/sdk",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "High-performance Short Video / Reels SDK for React — optimized for Flutter WebView",
   "license": "MIT",
   "type": "module",