@betterstore/react 0.3.20 → 0.3.22

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.3.22
+
+### Patch Changes
+
+- bug fixes variables bug
+
+## 0.3.21
+
+### Patch Changes
+
+- bug fixes
+
 ## 0.3.20
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -8234,12 +8234,10 @@ class JSAnimation extends WithPromise {
          * This method is bound to the instance to fix a pattern where
          * animation.stop is returned as a reference from a useEffect.
          */
-        this.stop = (sync = true) => {
-            if (sync) {
-                const { motionValue } = this.options;
-                if (motionValue && motionValue.updatedAt !== time.now()) {
-                    this.tick(time.now());
-                }
+        this.stop = () => {
+            const { motionValue } = this.options;
+            if (motionValue && motionValue.updatedAt !== time.now()) {
+                this.tick(time.now());
             }
             this.isStopped = true;
             if (this.state === "idle")
@@ -12122,7 +12120,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             this.resumingFrom = this.resumeFrom;
                             this.resumingFrom.resumingFrom = undefined;
                         }
-                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                         const animationOptions = {
                             ...getValueTransition(layoutTransition, "layout"),
                             onPlay: onLayoutAnimationStart,
@@ -12134,6 +12131,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             animationOptions.type = false;
                         }
                         this.startAnimation(animationOptions);
+                        /**
+                         * Set animation origin after starting animation to avoid layout jump
+                         * caused by stopping previous layout animation
+                         */
+                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                     }
                     else {
                         /**
@@ -12857,8 +12859,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         startAnimation(options) {
             this.notifyListeners("animationStart");
-            this.currentAnimation?.stop(false);
-            this.resumingFrom?.currentAnimation?.stop(false);
+            this.currentAnimation?.stop();
+            this.resumingFrom?.currentAnimation?.stop();
             if (this.pendingAnimation) {
                 cancelFrame(this.pendingAnimation);
                 this.pendingAnimation = undefined;
@@ -12907,7 +12909,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         finishAnimation() {
             if (this.currentAnimation) {
                 this.mixTargetDelta && this.mixTargetDelta(animationTarget);
-                this.currentAnimation.stop(false);
+                this.currentAnimation.stop();
             }
             this.completeAnimation();
         }
@@ -13172,7 +13174,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         // Only run on root
         resetTree() {
-            this.root.nodes.forEach((node) => node.currentAnimation?.stop(false));
+            this.root.nodes.forEach((node) => node.currentAnimation?.stop());
             this.root.nodes.forEach(clearMeasurements);
             this.root.sharedNodes.clear();
         }

package/dist/index.mjs

@@ -8211,12 +8211,10 @@ class JSAnimation extends WithPromise {
          * This method is bound to the instance to fix a pattern where
          * animation.stop is returned as a reference from a useEffect.
          */
-        this.stop = (sync = true) => {
-            if (sync) {
-                const { motionValue } = this.options;
-                if (motionValue && motionValue.updatedAt !== time.now()) {
-                    this.tick(time.now());
-                }
+        this.stop = () => {
+            const { motionValue } = this.options;
+            if (motionValue && motionValue.updatedAt !== time.now()) {
+                this.tick(time.now());
             }
             this.isStopped = true;
             if (this.state === "idle")
@@ -12099,7 +12097,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             this.resumingFrom = this.resumeFrom;
                             this.resumingFrom.resumingFrom = undefined;
                         }
-                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                         const animationOptions = {
                             ...getValueTransition(layoutTransition, "layout"),
                             onPlay: onLayoutAnimationStart,
@@ -12111,6 +12108,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             animationOptions.type = false;
                         }
                         this.startAnimation(animationOptions);
+                        /**
+                         * Set animation origin after starting animation to avoid layout jump
+                         * caused by stopping previous layout animation
+                         */
+                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
                     }
                     else {
                         /**
@@ -12834,8 +12836,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         startAnimation(options) {
             this.notifyListeners("animationStart");
-            this.currentAnimation?.stop(false);
-            this.resumingFrom?.currentAnimation?.stop(false);
+            this.currentAnimation?.stop();
+            this.resumingFrom?.currentAnimation?.stop();
             if (this.pendingAnimation) {
                 cancelFrame(this.pendingAnimation);
                 this.pendingAnimation = undefined;
@@ -12884,7 +12886,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         finishAnimation() {
             if (this.currentAnimation) {
                 this.mixTargetDelta && this.mixTargetDelta(animationTarget);
-                this.currentAnimation.stop(false);
+                this.currentAnimation.stop();
             }
             this.completeAnimation();
         }
@@ -13149,7 +13151,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         // Only run on root
         resetTree() {
-            this.root.nodes.forEach((node) => node.currentAnimation?.stop(false));
+            this.root.nodes.forEach((node) => node.currentAnimation?.stop());
             this.root.nodes.forEach(clearMeasurements);
             this.root.sharedNodes.clear();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.3.20",
+  "version": "0.3.22",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {
@@ -19,7 +19,7 @@
   "author": "Better Store",
   "license": "MIT",
   "devDependencies": {
-    "@betterstore/sdk": "^0.3.66",
+    "@betterstore/sdk": "^0.3.75",
     "@changesets/cli": "^2.28.1",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",

package/tailwind.config.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: "betterstore-",
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  corePlugins: {
+    preflight: false, // Disable Tailwind's base styles to prevent conflicts
+  },
+  important: true, // This ensures your styles take precedence
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  // Prefix all CSS variables to prevent leakage
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  // This ensures all CSS variables are prefixed
+  darkMode: "class",
+  // Custom prefix for CSS variables
+  cssVariables: {
+    prefix: "betterstore-",
+  },
+};