@luminescent/ui-qwik 6.1.2 → 6.2.1

package/lib/index.qwik.cjs

@@ -685,8 +685,18 @@ const Menu = qwik.component$(({ size, ...props }) => {
     ]
   });
 });
-const Nav = qwik.component$(({ fixed, floating, noblur, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
+const Nav = qwik.component$(({ fixed, floating, noblur, nohamburger, nodismiss, colorClass = "lum-bg-lum-card-bg", ...props }) => {
   const menu = qwik.useSignal(false);
+  qwik.useTask$(({ track }) => {
+    track(() => menu.value);
+    if (menu.value && !nodismiss) {
+      const onClick = () => {
+        menu.value = false;
+        window.removeEventListener("click", onClick);
+      };
+      window.addEventListener("click", onClick);
+    }
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", {
     ...props,
     class: {
@@ -1073,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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot, useStore, $, useSignal, useStyles$ } from "@builder.io/qwik";
+import { component$, Slot, useStore, $, useSignal, useTask$, useStyles$ } from "@builder.io/qwik";
 const Link = component$(({ size, ...props }) => {
   return /* @__PURE__ */ jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -683,8 +683,18 @@ const Menu = component$(({ size, ...props }) => {
     ]
   });
 });
-const Nav = component$(({ fixed, floating, noblur, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
+const Nav = component$(({ fixed, floating, noblur, nohamburger, nodismiss, colorClass = "lum-bg-lum-card-bg", ...props }) => {
   const menu = useSignal(false);
+  useTask$(({ track }) => {
+    track(() => menu.value);
+    if (menu.value && !nodismiss) {
+      const onClick = () => {
+        menu.value = false;
+        window.removeEventListener("click", onClick);
+      };
+      window.addEventListener("click", onClick);
+    }
+  });
   return /* @__PURE__ */ jsxs("nav", {
     ...props,
     class: {
@@ -1071,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/elements/Nav.d.ts

@@ -7,6 +7,7 @@ interface NavProps extends Omit<PropsOf<'nav'>, 'class'> {
     floating?: boolean;
     noblur?: boolean;
     nohamburger?: boolean;
+    nodismiss?: boolean;
     colorClass?: string;
 }
 export declare const Nav: import("@builder.io/qwik").Component<NavProps>;

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.1.2",
+  "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.1.2"
+    "@luminescent/ui": "6.2.1"
   },
   "scripts": {
     "build": "qwik build",