@luminescent/ui-qwik 6.2.0 → 6.2.1

package/lib/index.qwik.cjs

@@ -1083,12 +1083,17 @@ const Toggle = qwik.component$(({ checkbox, round, ...props }) => {
 });
 const Hoverable = {
   onMouseMove$: (e, el) => {
-    const mousex = e.clientX - el.getBoundingClientRect().left;
-    const mousey = e.clientY - el.getBoundingClientRect().top;
-    el.style.transform = `perspective(500px) rotateX(${(mousey / el.clientHeight - 0.5) * 10}deg) rotateY(${(mousex / el.clientWidth - 0.5) * 10}deg)`;
+    const rect = el.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const rotateX = (mouseY / rect.height - 0.5) * -10;
+    const rotateY = (mouseX / rect.width - 0.5) * 10;
+    el.style.transition = "transform 0.05s ease-out";
+    el.style.transform = `perspective(500px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
   },
-  onMouseLeave$: (e, el) => {
-    el.style.transform = "rotateX(0deg) rotateY(0deg)";
+  onMouseLeave$: (_e, el) => {
+    el.style.transition = "transform 0.3s ease-out";
+    el.style.transform = "perspective(500px) rotateX(0deg) rotateY(0deg)";
   }
 };
 const LogoBirdflop = qwik.component$(({ confused, fillGradient, size, ...props }) => {

package/lib/index.qwik.mjs

@@ -1081,12 +1081,17 @@ const Toggle = component$(({ checkbox, round, ...props }) => {
 });
 const Hoverable = {
   onMouseMove$: (e, el) => {
-    const mousex = e.clientX - el.getBoundingClientRect().left;
-    const mousey = e.clientY - el.getBoundingClientRect().top;
-    el.style.transform = `perspective(500px) rotateX(${(mousey / el.clientHeight - 0.5) * 10}deg) rotateY(${(mousex / el.clientWidth - 0.5) * 10}deg)`;
+    const rect = el.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const rotateX = (mouseY / rect.height - 0.5) * -10;
+    const rotateY = (mouseX / rect.width - 0.5) * 10;
+    el.style.transition = "transform 0.05s ease-out";
+    el.style.transform = `perspective(500px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
   },
-  onMouseLeave$: (e, el) => {
-    el.style.transform = "rotateX(0deg) rotateY(0deg)";
+  onMouseLeave$: (_e, el) => {
+    el.style.transition = "transform 0.3s ease-out";
+    el.style.transform = "perspective(500px) rotateX(0deg) rotateY(0deg)";
   }
 };
 const LogoBirdflop = component$(({ confused, fillGradient, size, ...props }) => {

package/lib-types/components/functions.d.ts

@@ -1,4 +1,4 @@
 export declare const Hoverable: {
     readonly onMouseMove$: (e: MouseEvent, el: HTMLElement) => void;
-    readonly onMouseLeave$: (e: MouseEvent, el: HTMLElement) => void;
+    readonly onMouseLeave$: (_e: MouseEvent, el: HTMLElement) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "description": "Luminescent UI library - Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -50,7 +50,7 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
-    "@luminescent/ui": "6.2.0"
+    "@luminescent/ui": "6.2.1"
   },
   "scripts": {
     "build": "qwik build",