@luminescent/ui-qwik 5.0.1 → 5.2.0

package/lib/index.qwik.cjs

@@ -586,6 +586,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
           colors.map((color, i) => {
             return /* @__PURE__ */ jsxRuntime.jsx("button", {
               type: "button",
+              name: color,
               class: {
                 "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] border-2 border-white/30 p-0 hover:border-white": true
               },
@@ -601,6 +602,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
           /* @__PURE__ */ jsxRuntime.jsx("button", {
             type: "button",
             class: "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0.5",
+            name: "Randomize",
             onClick$: async () => {
               const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
               await setColor(color);
@@ -742,6 +744,7 @@ const Nav = qwik.component$(({ fixed, floating, noblur, nohamburger, colorClass
                   name: "end"
                 }),
                 !nohamburger && /* @__PURE__ */ jsxRuntime.jsx("button", {
+                  name: "Navigation Menu",
                   class: "lum-btn lum-bg-transparent p-2 sm:hidden",
                   onClick$: () => menu.value = !menu.value,
                   children: /* @__PURE__ */ jsxRuntime.jsx(Menu, {
@@ -905,12 +908,13 @@ const SelectMenu = qwik.component$((props) => {
     ]
   });
 });
-const SelectMenuRaw = qwik.component$(({ values, class: Class, panelClass = "lum-bg-lum-input-bg", btnClass = "lum-bg-transparent", noblur, customDropdown, hover, align, ...props }) => {
+const SelectMenuRaw = qwik.component$(({ values, class: Class, panelClass = "lum-bg-lum-input-bg", btnClass = "lum-bg-transparent", noblur, nocloseonclick, customDropdown, hover, align, ...props }) => {
   const store = qwik.useStore({
     opened: false,
     value: props.value
   });
   const selectRef = qwik.useSignal();
+  const selected = values?.find((v) => v.value === store.value);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: {
       "relative touch-manipulation": true,
@@ -934,21 +938,26 @@ const SelectMenuRaw = qwik.component$(({ values, class: Class, panelClass = "lum
           "w-full": true,
           ...Class
         },
-        onClick$: () => {
-          if (!hover) store.opened = !store.opened;
+        onClick$: (e, el) => {
+          if (hover) return;
+          store.opened = !store.opened;
+          if (nocloseonclick) return;
+          const listener = (e2) => {
+            if (!store.opened) return document.removeEventListener("click", listener);
+            const path = e2.composedPath();
+            if (path.includes(el)) return;
+            store.opened = false;
+            document.removeEventListener("click", listener);
+          };
+          document.addEventListener("click", listener);
         },
         children: [
           customDropdown && /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
             name: "dropdown"
           }),
-          !customDropdown && /* @__PURE__ */ jsxRuntime.jsxs("span", {
-            children: [
-              values && (values.find((value) => value.value.toString() === store.value)?.name ?? values[0].name),
-              !values && /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
-                name: "dropdown"
-              })
-            ]
-          })
+          !customDropdown && (selected?.name ?? values?.[0]?.name ?? /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+            name: "dropdown"
+          }))
         ]
       }),
       hover && /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -975,7 +984,8 @@ const SelectMenuRaw = qwik.component$(({ values, class: Class, panelClass = "lum
                 "lum-btn rounded-lum-1": true,
                 [btnClass]: true
               },
-              onClick$: () => {
+              onClick$: (e, el) => {
+                el.blur();
                 store.opened = false;
                 const select = selectRef.value;
                 if (select) {
@@ -1027,7 +1037,7 @@ const Sidebar = qwik.component$(({ position, ...props }) => {
     })
   });
 });
-const Toggle = qwik.component$(({ checkbox, round, label, ...props }) => {
+const Toggle = qwik.component$(({ checkbox, round, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "flex touch-manipulation items-center gap-3",
     children: [
@@ -1053,10 +1063,10 @@ const Toggle = qwik.component$(({ checkbox, round, label, ...props }) => {
           })
         ]
       }),
-      label && /* @__PURE__ */ jsxRuntime.jsx("label", {
+      /* @__PURE__ */ jsxRuntime.jsx("label", {
         for: props.id,
-        class: "flex gap-2 text-lum-text select-none",
-        children: label
+        class: "flex gap-2 text-lum-text select-none empty:hidden",
+        children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
       })
     ]
   });

package/lib/index.qwik.mjs

@@ -584,6 +584,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
           colors.map((color, i) => {
             return /* @__PURE__ */ jsx("button", {
               type: "button",
+              name: color,
               class: {
                 "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] border-2 border-white/30 p-0 hover:border-white": true
               },
@@ -599,6 +600,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
           /* @__PURE__ */ jsx("button", {
             type: "button",
             class: "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0.5",
+            name: "Randomize",
             onClick$: async () => {
               const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
               await setColor(color);
@@ -740,6 +742,7 @@ const Nav = component$(({ fixed, floating, noblur, nohamburger, colorClass = "lu
                   name: "end"
                 }),
                 !nohamburger && /* @__PURE__ */ jsx("button", {
+                  name: "Navigation Menu",
                   class: "lum-btn lum-bg-transparent p-2 sm:hidden",
                   onClick$: () => menu.value = !menu.value,
                   children: /* @__PURE__ */ jsx(Menu, {
@@ -903,12 +906,13 @@ const SelectMenu = component$((props) => {
     ]
   });
 });
-const SelectMenuRaw = component$(({ values, class: Class, panelClass = "lum-bg-lum-input-bg", btnClass = "lum-bg-transparent", noblur, customDropdown, hover, align, ...props }) => {
+const SelectMenuRaw = component$(({ values, class: Class, panelClass = "lum-bg-lum-input-bg", btnClass = "lum-bg-transparent", noblur, nocloseonclick, customDropdown, hover, align, ...props }) => {
   const store = useStore({
     opened: false,
     value: props.value
   });
   const selectRef = useSignal();
+  const selected = values?.find((v) => v.value === store.value);
   return /* @__PURE__ */ jsxs("div", {
     class: {
       "relative touch-manipulation": true,
@@ -932,21 +936,26 @@ const SelectMenuRaw = component$(({ values, class: Class, panelClass = "lum-bg-l
           "w-full": true,
           ...Class
         },
-        onClick$: () => {
-          if (!hover) store.opened = !store.opened;
+        onClick$: (e, el) => {
+          if (hover) return;
+          store.opened = !store.opened;
+          if (nocloseonclick) return;
+          const listener = (e2) => {
+            if (!store.opened) return document.removeEventListener("click", listener);
+            const path = e2.composedPath();
+            if (path.includes(el)) return;
+            store.opened = false;
+            document.removeEventListener("click", listener);
+          };
+          document.addEventListener("click", listener);
         },
         children: [
           customDropdown && /* @__PURE__ */ jsx(Slot, {
             name: "dropdown"
           }),
-          !customDropdown && /* @__PURE__ */ jsxs("span", {
-            children: [
-              values && (values.find((value) => value.value.toString() === store.value)?.name ?? values[0].name),
-              !values && /* @__PURE__ */ jsx(Slot, {
-                name: "dropdown"
-              })
-            ]
-          })
+          !customDropdown && (selected?.name ?? values?.[0]?.name ?? /* @__PURE__ */ jsx(Slot, {
+            name: "dropdown"
+          }))
         ]
       }),
       hover && /* @__PURE__ */ jsx("div", {
@@ -973,7 +982,8 @@ const SelectMenuRaw = component$(({ values, class: Class, panelClass = "lum-bg-l
                 "lum-btn rounded-lum-1": true,
                 [btnClass]: true
               },
-              onClick$: () => {
+              onClick$: (e, el) => {
+                el.blur();
                 store.opened = false;
                 const select = selectRef.value;
                 if (select) {
@@ -1025,7 +1035,7 @@ const Sidebar = component$(({ position, ...props }) => {
     })
   });
 });
-const Toggle = component$(({ checkbox, round, label, ...props }) => {
+const Toggle = component$(({ checkbox, round, ...props }) => {
   return /* @__PURE__ */ jsxs("div", {
     class: "flex touch-manipulation items-center gap-3",
     children: [
@@ -1051,10 +1061,10 @@ const Toggle = component$(({ checkbox, round, label, ...props }) => {
           })
         ]
       }),
-      label && /* @__PURE__ */ jsx("label", {
+      /* @__PURE__ */ jsx("label", {
         for: props.id,
-        class: "flex gap-2 text-lum-text select-none",
-        children: label
+        class: "flex gap-2 text-lum-text select-none empty:hidden",
+        children: /* @__PURE__ */ jsx(Slot, {})
       })
     ]
   });

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

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

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

@@ -1,11 +1,10 @@
-import type { JSXOutput, PropsOf } from '@builder.io/qwik';
+import type { PropsOf } from '@builder.io/qwik';
 interface ToggleProps extends Omit<PropsOf<'input'> & {
     type: 'checkbox';
 }, 'class' | 'bind:checked' | 'type' | 'children'> {
     class?: string;
     checkbox?: boolean;
     round?: boolean;
-    label?: string | JSXOutput;
 }
 export declare const Toggle: import("@builder.io/qwik").Component<ToggleProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "5.0.1",
+  "version": "5.2.0",
   "description": "Luminescent UI library - Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -32,25 +32,25 @@
   },
   "devDependencies": {
     "@anuragroy/tailwindcss-animate": "^1.0.6",
-    "@builder.io/qwik": "1.14.1",
-    "@builder.io/qwik-city": "^1.14.1",
-    "@eslint/js": "^9.30.1",
+    "@builder.io/qwik": "1.15.0",
+    "@builder.io/qwik-city": "^1.15.0",
+    "@eslint/js": "^9.32.0",
     "@tailwindcss/vite": "^4.1.11",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^24.0.10",
-    "eslint": "^9.30.1",
-    "eslint-plugin-qwik": "^1.14.1",
+    "@types/node": "^24.1.0",
+    "eslint": "^9.32.0",
+    "eslint-plugin-qwik": "^1.15.0",
     "globals": "^16.3.0",
     "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.13",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "tailwindcss": "4.1.11",
     "typescript": "5.8.3",
-    "typescript-eslint": "^8.35.1",
+    "typescript-eslint": "^8.38.0",
     "vite": "5.4.14",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
-    "@luminescent/ui": "5.0.1"
+    "@luminescent/ui": "5.2.0"
   },
   "scripts": {
     "build": "qwik build",