@luminescent/ui-qwik 3.0.3 → 4.0.0-0

package/lib/index.qwik.cjs

@@ -484,8 +484,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: {
-      "lum-bg-gray-900 flex touch-none gap-4 rounded-lg p-4 motion-safe:transition-all": true,
-      flex: true,
+      "lum-card touch-none p-4 motion-safe:transition-all": true,
       "flex-col": !horizontal,
       ...props.class
     },
@@ -509,11 +508,11 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
             "preventdefault:touchstart": true,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", {
-                class: "h-[150px] w-[125px] rounded-[0.3rem] border border-gray-700 bg-gradient-to-b from-transparent to-black"
+                class: "h-[150px] w-[125px] rounded-md border border-gray-700 bg-gradient-to-b from-transparent to-black"
               }),
               /* @__PURE__ */ jsxRuntime.jsx("div", {
                 class: {
-                  "absolute -top-2 -left-2 h-4 w-4 rounded-full border bg-white": true,
+                  "absolute -top-2 -left-2 h-4 w-4 rounded-md border bg-white": true,
                   "border-white": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) < 0.5,
                   "border-black": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5
                 },
@@ -534,7 +533,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
             "preventdefault:mousedown": true,
             "preventdefault:touchstart": true,
             children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-              class: "absolute -bottom-2 -left-[5px] h-4 w-4 rounded-full border border-white bg-[#ff0000]",
+              class: "absolute -bottom-2 -left-[5px] h-4 w-4 rounded-md border border-white bg-[#ff0000]",
               style: {
                 transform: `translateY(${-store.hue.position}px)`,
                 background: store.hue.color
@@ -557,11 +556,11 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
             children: [
               preview != "full" && /* @__PURE__ */ jsxRuntime.jsx("div", {
                 class: {
-                  "border border-gray-700": true,
-                  "aspect-square h-full rounded-md": preview == "left" || preview == "right",
+                  "border border-gray-700 rounded-sm": true,
+                  "aspect-square h-full": preview == "left" || preview == "right",
                   "h-3 w-full": preview == "top" || preview == "bottom",
-                  "rounded-t-md": preview == "top",
-                  "rounded-b-md": preview == "bottom"
+                  "rounded-b-none": preview == "top",
+                  "rounded-t-none": preview == "bottom"
                 },
                 style: {
                   backgroundColor: `${store.value}`
@@ -569,7 +568,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
               }),
               /* @__PURE__ */ jsxRuntime.jsx("input", {
                 class: {
-                  "lum-input w-full p-1 text-xs": true,
+                  "lum-input w-full p-1 text-xs rounded-sm": true,
                   "rounded-t-none border-t-0": preview == "top",
                   "rounded-b-none border-b-0": preview == "bottom"
                 },
@@ -586,8 +585,9 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
           }),
           colors.map((color, i) => {
             return /* @__PURE__ */ jsxRuntime.jsx("button", {
+              type: "button",
               class: {
-                "lum-btn h-[1.6rem] w-[1.6rem] border-2 border-white/30 p-0 hover:border-white": true
+                "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] border-2 border-white/30 p-0 hover:border-white": true
               },
               style: {
                 background: color,
@@ -599,7 +599,8 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
             }, i);
           }),
           /* @__PURE__ */ jsxRuntime.jsx("button", {
-            class: "lum-btn h-[1.6rem] w-[1.6rem] p-0.5",
+            type: "button",
+            class: "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0.5",
             onClick$: async () => {
               const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
               await setColor(color);
@@ -633,6 +634,7 @@ const ChevronDown = qwik.component$(({ size, ...props }) => {
 });
 const Dropdown = qwik.component$(({ class: Class, hover, opened, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("button", {
+    type: "button",
     class: {
       "lum-btn": true,
       ...Class
@@ -739,13 +741,14 @@ const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdow
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
           id: `lui-${id}-opts`,
           class: {
-            "lum-bg-gray-800 lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-md border p-1 backdrop-blur-xl select-none motion-safe:transition-all": true
+            "lum-bg-gray-800 lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 backdrop-blur-xl select-none motion-safe:transition-all": true
           },
           children: [
             values?.map(({ name, value }, i) => {
               return /* @__PURE__ */ jsxRuntime.jsx("button", {
+                type: "button",
                 class: {
-                  "lum-btn lum-bg-transparent": true
+                  "lum-btn lum-bg-transparent rounded-lum-1": true
                 },
                 onClick$: () => {
                   store.opened = false;
@@ -811,12 +814,12 @@ const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-b
           "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-lg before:drop-shadow-xl before:content-[""]': true
+          'before:absolute before:-z-10 before:h-full before:w-full before:rounded-lum before:drop-shadow-xl before:content-[""]': true
         },
         children: /* @__PURE__ */ jsxRuntime.jsx("div", {
           class: {
             [colorClass]: true,
-            "flex w-full max-w-7xl flex-col gap-2 rounded-lg border px-2 py-4 motion-safe:transition-all": 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"
@@ -835,9 +838,9 @@ const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-b
           class: {
             "mx-auto flex w-full max-w-7xl justify-evenly px-2": true,
             [colorClass]: floating,
-            "rounded-lg border": 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-lg before:drop-shadow-xl before:content-[""]': 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
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -947,6 +950,7 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("button", {
+        type: "button",
         class: {
           "lum-btn p-2": true
         },
@@ -973,6 +977,7 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
         }
       }),
       /* @__PURE__ */ jsxRuntime.jsx("button", {
+        type: "button",
         class: {
           "lum-btn p-2": true
         },
@@ -1209,7 +1214,7 @@ const Toggle = qwik.component$(({ checkbox, round, center, label, onColor = "blu
             class: {
               "peer h-7 border duration-300 ease-out hover:shadow-lg hover:duration-75 motion-safe:transition": true,
               "after:absolute after:top-[4px] after:left-[4px] after:h-5 after:w-5 after:border after:duration-300 after:ease-out after:content-[''] after:hover:duration-75 after:motion-safe:transition-all": true,
-              "rounded-md after:rounded-[0.2rem]": !round,
+              "rounded-lum after:rounded-lum-1": !round,
               "rounded-full after:rounded-full": round,
               "w-12 peer-checked:after:translate-x-full": !checkbox,
               "w-7 after:opacity-0 peer-checked:after:opacity-100": checkbox,
@@ -1229,6 +1234,16 @@ const Toggle = qwik.component$(({ checkbox, round, center, label, onColor = "blu
     ]
   });
 });
+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)`;
+  },
+  onMouseLeave$: (e, el) => {
+    el.style.transform = "rotateX(0deg) rotateY(0deg)";
+  }
+};
 const LogoBirdflop = qwik.component$(({ confused, fillGradient, size, ...props }) => {
   const gradientId = fillGradient?.join("-").replace("#", "");
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", {
@@ -1678,6 +1693,7 @@ exports.Anchor = Anchor;
 exports.Blobs = Blobs;
 exports.ColorPicker = ColorPicker;
 exports.Dropdown = Dropdown;
+exports.Hoverable = Hoverable;
 exports.LogoBirdflop = LogoBirdflop;
 exports.LogoDiscord = LogoDiscord;
 exports.LogoFabric = LogoFabric;

package/lib/index.qwik.mjs

@@ -482,8 +482,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
   });
   return /* @__PURE__ */ jsxs("div", {
     class: {
-      "lum-bg-gray-900 flex touch-none gap-4 rounded-lg p-4 motion-safe:transition-all": true,
-      flex: true,
+      "lum-card touch-none p-4 motion-safe:transition-all": true,
       "flex-col": !horizontal,
       ...props.class
     },
@@ -507,11 +506,11 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
             "preventdefault:touchstart": true,
             children: [
               /* @__PURE__ */ jsx("div", {
-                class: "h-[150px] w-[125px] rounded-[0.3rem] border border-gray-700 bg-gradient-to-b from-transparent to-black"
+                class: "h-[150px] w-[125px] rounded-md border border-gray-700 bg-gradient-to-b from-transparent to-black"
               }),
               /* @__PURE__ */ jsx("div", {
                 class: {
-                  "absolute -top-2 -left-2 h-4 w-4 rounded-full border bg-white": true,
+                  "absolute -top-2 -left-2 h-4 w-4 rounded-md border bg-white": true,
                   "border-white": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) < 0.5,
                   "border-black": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5
                 },
@@ -532,7 +531,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
             "preventdefault:mousedown": true,
             "preventdefault:touchstart": true,
             children: /* @__PURE__ */ jsx("div", {
-              class: "absolute -bottom-2 -left-[5px] h-4 w-4 rounded-full border border-white bg-[#ff0000]",
+              class: "absolute -bottom-2 -left-[5px] h-4 w-4 rounded-md border border-white bg-[#ff0000]",
               style: {
                 transform: `translateY(${-store.hue.position}px)`,
                 background: store.hue.color
@@ -555,11 +554,11 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
             children: [
               preview != "full" && /* @__PURE__ */ jsx("div", {
                 class: {
-                  "border border-gray-700": true,
-                  "aspect-square h-full rounded-md": preview == "left" || preview == "right",
+                  "border border-gray-700 rounded-sm": true,
+                  "aspect-square h-full": preview == "left" || preview == "right",
                   "h-3 w-full": preview == "top" || preview == "bottom",
-                  "rounded-t-md": preview == "top",
-                  "rounded-b-md": preview == "bottom"
+                  "rounded-b-none": preview == "top",
+                  "rounded-t-none": preview == "bottom"
                 },
                 style: {
                   backgroundColor: `${store.value}`
@@ -567,7 +566,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
               }),
               /* @__PURE__ */ jsx("input", {
                 class: {
-                  "lum-input w-full p-1 text-xs": true,
+                  "lum-input w-full p-1 text-xs rounded-sm": true,
                   "rounded-t-none border-t-0": preview == "top",
                   "rounded-b-none border-b-0": preview == "bottom"
                 },
@@ -584,8 +583,9 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
           }),
           colors.map((color, i) => {
             return /* @__PURE__ */ jsx("button", {
+              type: "button",
               class: {
-                "lum-btn h-[1.6rem] w-[1.6rem] border-2 border-white/30 p-0 hover:border-white": true
+                "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] border-2 border-white/30 p-0 hover:border-white": true
               },
               style: {
                 background: color,
@@ -597,7 +597,8 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
             }, i);
           }),
           /* @__PURE__ */ jsx("button", {
-            class: "lum-btn h-[1.6rem] w-[1.6rem] p-0.5",
+            type: "button",
+            class: "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0.5",
             onClick$: async () => {
               const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
               await setColor(color);
@@ -631,6 +632,7 @@ const ChevronDown = component$(({ size, ...props }) => {
 });
 const Dropdown = component$(({ class: Class, hover, opened, ...props }) => {
   return /* @__PURE__ */ jsxs("button", {
+    type: "button",
     class: {
       "lum-btn": true,
       ...Class
@@ -737,13 +739,14 @@ const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, ho
         children: /* @__PURE__ */ jsxs("div", {
           id: `lui-${id}-opts`,
           class: {
-            "lum-bg-gray-800 lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-md border p-1 backdrop-blur-xl select-none motion-safe:transition-all": true
+            "lum-bg-gray-800 lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 backdrop-blur-xl select-none motion-safe:transition-all": true
           },
           children: [
             values?.map(({ name, value }, i) => {
               return /* @__PURE__ */ jsx("button", {
+                type: "button",
                 class: {
-                  "lum-btn lum-bg-transparent": true
+                  "lum-btn lum-bg-transparent rounded-lum-1": true
                 },
                 onClick$: () => {
                   store.opened = false;
@@ -809,12 +812,12 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-gra
           "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-lg before:drop-shadow-xl before:content-[""]': true
+          'before:absolute before:-z-10 before:h-full before:w-full before:rounded-lum before:drop-shadow-xl before:content-[""]': true
         },
         children: /* @__PURE__ */ jsx("div", {
           class: {
             [colorClass]: true,
-            "flex w-full max-w-7xl flex-col gap-2 rounded-lg border px-2 py-4 motion-safe:transition-all": 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"
@@ -833,9 +836,9 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-gra
           class: {
             "mx-auto flex w-full max-w-7xl justify-evenly px-2": true,
             [colorClass]: floating,
-            "rounded-lg border": 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-lg before:drop-shadow-xl before:content-[""]': 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
           },
           children: [
             /* @__PURE__ */ jsx("div", {
@@ -945,6 +948,7 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
     },
     children: [
       /* @__PURE__ */ jsx("button", {
+        type: "button",
         class: {
           "lum-btn p-2": true
         },
@@ -971,6 +975,7 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
         }
       }),
       /* @__PURE__ */ jsx("button", {
+        type: "button",
         class: {
           "lum-btn p-2": true
         },
@@ -1207,7 +1212,7 @@ const Toggle = component$(({ checkbox, round, center, label, onColor = "blue", o
             class: {
               "peer h-7 border duration-300 ease-out hover:shadow-lg hover:duration-75 motion-safe:transition": true,
               "after:absolute after:top-[4px] after:left-[4px] after:h-5 after:w-5 after:border after:duration-300 after:ease-out after:content-[''] after:hover:duration-75 after:motion-safe:transition-all": true,
-              "rounded-md after:rounded-[0.2rem]": !round,
+              "rounded-lum after:rounded-lum-1": !round,
               "rounded-full after:rounded-full": round,
               "w-12 peer-checked:after:translate-x-full": !checkbox,
               "w-7 after:opacity-0 peer-checked:after:opacity-100": checkbox,
@@ -1227,6 +1232,16 @@ const Toggle = component$(({ checkbox, round, center, label, onColor = "blue", o
     ]
   });
 });
+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)`;
+  },
+  onMouseLeave$: (e, el) => {
+    el.style.transform = "rotateX(0deg) rotateY(0deg)";
+  }
+};
 const LogoBirdflop = component$(({ confused, fillGradient, size, ...props }) => {
   const gradientId = fillGradient?.join("-").replace("#", "");
   return /* @__PURE__ */ jsxs("svg", {
@@ -1677,6 +1692,7 @@ export {
   Blobs,
   ColorPicker,
   Dropdown,
+  Hoverable,
   LogoBirdflop,
   LogoDiscord,
   LogoFabric,

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

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

package/lib-types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/elements';
+export * from './components/functions';
 export * from './components/logos';

package/package.json

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