@luminescent/ui-qwik 5.0.1-6 → 5.0.1

package/lib/index.qwik.cjs

@@ -683,7 +683,7 @@ const Menu = qwik.component$(({ size, ...props }) => {
     ]
   });
 });
-const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
+const Nav = qwik.component$(({ fixed, floating, noblur, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
   const menu = qwik.useSignal(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", {
     ...props,
@@ -696,28 +696,23 @@ const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-b
     children: [
       !nohamburger && /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: {
-          "absolute top-full flex w-full flex-col items-center px-2 motion-safe:transition-all sm:hidden": true,
+          "absolute top-full lum-card motion-safe:transition-all sm:hidden max-w-7xl gap-2 px-2 py-4": true,
+          "w-[calc(100%-theme(spacing.8))] mx-4": floating,
+          "w-[calc(100%-theme(spacing.4))] mx-2": !floating,
           "mt-2": menu.value,
-          "pointer-events-none opacity-0": !menu.value,
-          "before:backdrop-blur-lg": !colorClass.includes("transparent"),
-          'before:absolute before:-z-10 before:h-full before:w-full before:rounded-lum before:drop-shadow-xl before:content-[""]': true
+          "pointer-events-none opacity-0 -mt-2 scale-95": !menu.value,
+          "backdrop-blur-lg": !noblur,
+          [colorClass]: true
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: {
-            [colorClass]: true,
-            "flex w-full max-w-7xl flex-col gap-2 rounded-lum border px-2 py-4 motion-safe:transition-all": true
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
-            name: "mobile"
-          })
+        children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+          name: "mobile"
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: {
           [colorClass]: !floating,
           "!border-x-0 !border-t-0": !floating,
-          "before:backdrop-blur-lg": !colorClass.includes("transparent") && !floating,
-          'before:absolute before:-z-10 before:h-full before:w-full before:drop-shadow-xl before:content-[""]': !floating,
+          "backdrop-blur-lg": !noblur && !floating,
           "relative mx-2 mt-2": floating
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -725,8 +720,7 @@ const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-b
             "mx-auto flex w-full max-w-7xl justify-evenly px-2": true,
             [colorClass]: floating,
             "rounded-lum border": floating,
-            "before:backdrop-blur-lg": !colorClass.includes("transparent") && floating,
-            'before:absolute before:-z-10 before:h-full before:w-full before:max-w-7xl before:rounded-lum before:drop-shadow-xl before:content-[""]': floating
+            "backdrop-blur-lg": !noblur && floating
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -911,7 +905,7 @@ const SelectMenu = qwik.component$((props) => {
     ]
   });
 });
-const SelectMenuRaw = qwik.component$(({ values, class: Class, customDropdown, hover, align, ...props }) => {
+const SelectMenuRaw = qwik.component$(({ values, class: Class, panelClass = "lum-bg-lum-input-bg", btnClass = "lum-bg-transparent", noblur, customDropdown, hover, align, ...props }) => {
   const store = qwik.useStore({
     opened: false,
     value: props.value
@@ -957,40 +951,46 @@ const SelectMenuRaw = qwik.component$(({ values, class: Class, customDropdown, h
           })
         ]
       }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
+      hover && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "h-2 absolute w-full"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
         class: {
-          "absolute z-[1000] pt-2 transition-all ease-out": true,
+          "absolute z-[1000] mt-2 transition-all ease-out": true,
+          "backdrop-blur-lg": !noblur,
+          "lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all": true,
           "left-0": align === "left",
           "right-0": align === "right",
           "left-1/2 -translate-x-1/2": align === "center",
           "pointer-events-none scale-95 opacity-0": !store.opened,
           "duration-300 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-hover:duration-75": hover,
-          "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
+          "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true,
+          [panelClass]: true
         },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          class: "lum-bg-lum-input-bg lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all",
-          children: [
-            values?.map(({ name, value }, i) => {
-              return /* @__PURE__ */ jsxRuntime.jsx("button", {
-                type: "button",
-                class: "lum-btn lum-bg-transparent rounded-lum-1",
-                onClick$: () => {
-                  store.opened = false;
-                  const select = selectRef.value;
-                  if (select) {
-                    select.value = value.toString();
-                    select.dispatchEvent(new Event("change"));
-                  }
-                  store.value = value.toString();
-                },
-                children: name
-              }, i);
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
-              name: "extra-buttons"
-            })
-          ]
-        })
+        children: [
+          values?.map(({ name, value }, i) => {
+            return /* @__PURE__ */ jsxRuntime.jsx("button", {
+              type: "button",
+              class: {
+                "lum-btn rounded-lum-1": true,
+                [btnClass]: true
+              },
+              onClick$: () => {
+                store.opened = false;
+                const select = selectRef.value;
+                if (select) {
+                  select.value = value.toString();
+                  select.dispatchEvent(new Event("change"));
+                }
+                store.value = value.toString();
+              },
+              children: name
+            }, i);
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+            name: "extra-buttons"
+          })
+        ]
       })
     ]
   });

package/lib/index.qwik.mjs

@@ -681,7 +681,7 @@ const Menu = component$(({ size, ...props }) => {
     ]
   });
 });
-const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
+const Nav = component$(({ fixed, floating, noblur, nohamburger, colorClass = "lum-bg-lum-card-bg", ...props }) => {
   const menu = useSignal(false);
   return /* @__PURE__ */ jsxs("nav", {
     ...props,
@@ -694,28 +694,23 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-lum
     children: [
       !nohamburger && /* @__PURE__ */ jsx("div", {
         class: {
-          "absolute top-full flex w-full flex-col items-center px-2 motion-safe:transition-all sm:hidden": true,
+          "absolute top-full lum-card motion-safe:transition-all sm:hidden max-w-7xl gap-2 px-2 py-4": true,
+          "w-[calc(100%-theme(spacing.8))] mx-4": floating,
+          "w-[calc(100%-theme(spacing.4))] mx-2": !floating,
           "mt-2": menu.value,
-          "pointer-events-none opacity-0": !menu.value,
-          "before:backdrop-blur-lg": !colorClass.includes("transparent"),
-          'before:absolute before:-z-10 before:h-full before:w-full before:rounded-lum before:drop-shadow-xl before:content-[""]': true
+          "pointer-events-none opacity-0 -mt-2 scale-95": !menu.value,
+          "backdrop-blur-lg": !noblur,
+          [colorClass]: true
         },
-        children: /* @__PURE__ */ jsx("div", {
-          class: {
-            [colorClass]: true,
-            "flex w-full max-w-7xl flex-col gap-2 rounded-lum border px-2 py-4 motion-safe:transition-all": true
-          },
-          children: /* @__PURE__ */ jsx(Slot, {
-            name: "mobile"
-          })
+        children: /* @__PURE__ */ jsx(Slot, {
+          name: "mobile"
         })
       }),
       /* @__PURE__ */ jsx("div", {
         class: {
           [colorClass]: !floating,
           "!border-x-0 !border-t-0": !floating,
-          "before:backdrop-blur-lg": !colorClass.includes("transparent") && !floating,
-          'before:absolute before:-z-10 before:h-full before:w-full before:drop-shadow-xl before:content-[""]': !floating,
+          "backdrop-blur-lg": !noblur && !floating,
           "relative mx-2 mt-2": floating
         },
         children: /* @__PURE__ */ jsxs("div", {
@@ -723,8 +718,7 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-lum
             "mx-auto flex w-full max-w-7xl justify-evenly px-2": true,
             [colorClass]: floating,
             "rounded-lum border": floating,
-            "before:backdrop-blur-lg": !colorClass.includes("transparent") && floating,
-            'before:absolute before:-z-10 before:h-full before:w-full before:max-w-7xl before:rounded-lum before:drop-shadow-xl before:content-[""]': floating
+            "backdrop-blur-lg": !noblur && floating
           },
           children: [
             /* @__PURE__ */ jsx("div", {
@@ -909,7 +903,7 @@ const SelectMenu = component$((props) => {
     ]
   });
 });
-const SelectMenuRaw = component$(({ values, class: Class, customDropdown, hover, align, ...props }) => {
+const SelectMenuRaw = component$(({ values, class: Class, panelClass = "lum-bg-lum-input-bg", btnClass = "lum-bg-transparent", noblur, customDropdown, hover, align, ...props }) => {
   const store = useStore({
     opened: false,
     value: props.value
@@ -955,40 +949,46 @@ const SelectMenuRaw = component$(({ values, class: Class, customDropdown, hover,
           })
         ]
       }),
-      /* @__PURE__ */ jsx("div", {
+      hover && /* @__PURE__ */ jsx("div", {
+        class: "h-2 absolute w-full"
+      }),
+      /* @__PURE__ */ jsxs("div", {
         class: {
-          "absolute z-[1000] pt-2 transition-all ease-out": true,
+          "absolute z-[1000] mt-2 transition-all ease-out": true,
+          "backdrop-blur-lg": !noblur,
+          "lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all": true,
           "left-0": align === "left",
           "right-0": align === "right",
           "left-1/2 -translate-x-1/2": align === "center",
           "pointer-events-none scale-95 opacity-0": !store.opened,
           "duration-300 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-hover:duration-75": hover,
-          "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
+          "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true,
+          [panelClass]: true
         },
-        children: /* @__PURE__ */ jsxs("div", {
-          class: "lum-bg-lum-input-bg lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all",
-          children: [
-            values?.map(({ name, value }, i) => {
-              return /* @__PURE__ */ jsx("button", {
-                type: "button",
-                class: "lum-btn lum-bg-transparent rounded-lum-1",
-                onClick$: () => {
-                  store.opened = false;
-                  const select = selectRef.value;
-                  if (select) {
-                    select.value = value.toString();
-                    select.dispatchEvent(new Event("change"));
-                  }
-                  store.value = value.toString();
-                },
-                children: name
-              }, i);
-            }),
-            /* @__PURE__ */ jsx(Slot, {
-              name: "extra-buttons"
-            })
-          ]
-        })
+        children: [
+          values?.map(({ name, value }, i) => {
+            return /* @__PURE__ */ jsx("button", {
+              type: "button",
+              class: {
+                "lum-btn rounded-lum-1": true,
+                [btnClass]: true
+              },
+              onClick$: () => {
+                store.opened = false;
+                const select = selectRef.value;
+                if (select) {
+                  select.value = value.toString();
+                  select.dispatchEvent(new Event("change"));
+                }
+                store.value = value.toString();
+              },
+              children: name
+            }, i);
+          }),
+          /* @__PURE__ */ jsx(Slot, {
+            name: "extra-buttons"
+          })
+        ]
       })
     ]
   });

package/lib-types/components/elements/Nav.d.ts

@@ -5,6 +5,7 @@ interface NavProps extends Omit<PropsOf<'nav'>, 'class'> {
     };
     fixed?: boolean;
     floating?: boolean;
+    noblur?: boolean;
     nohamburger?: boolean;
     colorClass?: string;
 }

package/lib-types/components/elements/SelectMenu.d.ts

@@ -3,6 +3,9 @@ interface SelectMenuProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
     class?: {
         [key: string]: boolean;
     };
+    panelClass?: string;
+    btnClass?: string;
+    noblur?: boolean;
     customDropdown?: boolean;
     hover?: boolean;
     align?: 'left' | 'right' | 'center';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "5.0.1-6",
+  "version": "5.0.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": "5.0.1-6"
+    "@luminescent/ui": "5.0.1"
   },
   "scripts": {
     "build": "qwik build",