@luminescent/ui-qwik 4.1.1 → 4.2.2

package/lib/index.qwik.cjs

@@ -636,7 +636,7 @@ const Dropdown = qwik.component$(({ class: Class, hover, opened, ...props }) =>
   return /* @__PURE__ */ jsxRuntime.jsxs("button", {
     type: "button",
     class: {
-      "lum-btn": true,
+      "group lum-btn": true,
       ...Class
     },
     ...props,
@@ -686,7 +686,7 @@ const SelectMenu = qwik.component$((props) => {
     ]
   });
 });
-const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdown, hover, ...props }) => {
+const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdown, hover, align, ...props }) => {
   const store = qwik.useStore({
     opened: false,
     value: props.value
@@ -712,7 +712,10 @@ const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdow
       }),
       /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, {
         opened: store.opened,
-        class: Class,
+        class: {
+          "w-full": true,
+          ...Class
+        },
         onClick$: () => {
           if (!hover) store.opened = !store.opened;
         },
@@ -732,8 +735,12 @@ const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdow
         ]
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
+        id: `lui-${id}-opts-container`,
         class: {
-          "absolute top-full left-0 z-[1000] pt-2 transition-all ease-out": true,
+          "absolute z-[1000] pt-2 transition-all ease-out": 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

package/lib/index.qwik.mjs

@@ -634,7 +634,7 @@ const Dropdown = component$(({ class: Class, hover, opened, ...props }) => {
   return /* @__PURE__ */ jsxs("button", {
     type: "button",
     class: {
-      "lum-btn": true,
+      "group lum-btn": true,
       ...Class
     },
     ...props,
@@ -684,7 +684,7 @@ const SelectMenu = component$((props) => {
     ]
   });
 });
-const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, hover, ...props }) => {
+const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, hover, align, ...props }) => {
   const store = useStore({
     opened: false,
     value: props.value
@@ -710,7 +710,10 @@ const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, ho
       }),
       /* @__PURE__ */ jsxs(Dropdown, {
         opened: store.opened,
-        class: Class,
+        class: {
+          "w-full": true,
+          ...Class
+        },
         onClick$: () => {
           if (!hover) store.opened = !store.opened;
         },
@@ -730,8 +733,12 @@ const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, ho
         ]
       }),
       /* @__PURE__ */ jsx("div", {
+        id: `lui-${id}-opts-container`,
         class: {
-          "absolute top-full left-0 z-[1000] pt-2 transition-all ease-out": true,
+          "absolute z-[1000] pt-2 transition-all ease-out": 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

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

@@ -5,6 +5,7 @@ interface SelectMenuProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
     };
     customDropdown?: boolean;
     hover?: boolean;
+    align?: 'left' | 'right' | 'center';
     values?: {
         name: JSXChildren;
         value: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "4.1.1",
+  "version": "4.2.2",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -32,27 +32,27 @@
   },
   "devDependencies": {
     "@anuragroy/tailwindcss-animate": "^1.0.6",
-    "@builder.io/qwik": "1.13.0",
-    "@builder.io/qwik-city": "^1.13.0",
-    "@eslint/js": "^9.26.0",
-    "@tailwindcss/vite": "^4.1.5",
+    "@builder.io/qwik": "1.14.1",
+    "@builder.io/qwik-city": "^1.14.1",
+    "@eslint/js": "^9.30.1",
+    "@tailwindcss/vite": "^4.1.11",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.15.3",
-    "@typescript-eslint/eslint-plugin": "^8.31.1",
-    "@typescript-eslint/parser": "^8.31.1",
-    "eslint": "^9.26.0",
-    "eslint-plugin-qwik": "^1.13.0",
-    "globals": "^16.0.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "4.1.5",
+    "@types/node": "^24.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@typescript-eslint/parser": "^8.35.1",
+    "eslint": "^9.30.1",
+    "eslint-plugin-qwik": "^1.14.1",
+    "globals": "^16.3.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.13",
+    "tailwindcss": "4.1.11",
     "typescript": "5.8.3",
-    "typescript-eslint": "^8.31.1",
+    "typescript-eslint": "^8.35.1",
     "vite": "5.4.14",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
-    "@luminescent/ui": "4.1.1"
+    "@luminescent/ui": "4.2.2"
   },
   "scripts": {
     "build": "qwik build",