@luminescent/ui-qwik 1.4.5-0 → 1.4.6-1

package/lib/index.qwik.cjs

@@ -356,7 +356,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
     sPosition: hsvColor.s * width,
     value
   });
-  const setColor = qwik.$((color) => {
+  const setColor = qwik.$(async (color) => {
     if (!color.match(/^#[0-9A-F]{6}$/i)) return;
     const number = hexStringToNumber(color);
     const hsv = rgbToHsv(hexNumberToRgb(number));
@@ -369,9 +369,9 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
     store.sPosition = hsv.s * width;
     store.bPosition = (1 - hsv.v) * maxHue;
     store.value = color;
-    onInput$?.(store.value);
+    await onInput$?.(store.value);
   });
-  const hueChange = qwik.$((e, hOffset) => {
+  const hueChange = qwik.$(async (e, hOffset) => {
     const { y } = getMousePosition(e);
     store.hue.position = clamp(maxHue - (y - hOffset), 0, maxHue);
     const hsvColor2 = rgbToHsv(hexNumberToRgb(hexStringToNumber(store.value)));
@@ -383,12 +383,12 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
       v: 1
     }));
     store.value = rgbToHex(hsvToRgb(hsvColor2));
-    onInput$?.(store.value);
+    await onInput$?.(store.value);
   });
-  const hueMouseDown = qwik.$((e, el) => {
+  const hueMouseDown = qwik.$(async (e, el) => {
     const hOffset = el.getBoundingClientRect().top;
-    hueChange(e, hOffset);
-    const eventListener = (e2) => hueChange(e2, hOffset);
+    await hueChange(e, hOffset);
+    const eventListener = (e2) => void hueChange(e2, hOffset);
     window.addEventListener("mousemove", eventListener);
     window.addEventListener("touchmove", eventListener);
     const mouseUpListener = () => {
@@ -400,7 +400,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
   });
-  const sbChange = qwik.$((e, hOffset) => {
+  const sbChange = qwik.$(async (e, hOffset) => {
     const { x, y } = getMousePosition(e);
     store.bPosition = clamp(y - hOffset.top, 0, maxHue);
     store.sPosition = clamp(x - hOffset.left, 0, width);
@@ -411,12 +411,12 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
       s,
       v
     }));
-    onInput$?.(store.value);
+    await onInput$?.(store.value);
   });
-  const sbMouseDown = qwik.$((e, el) => {
+  const sbMouseDown = qwik.$(async (e, el) => {
     const offset = el.getBoundingClientRect();
-    sbChange(e, offset);
-    const eventListener = (e2) => sbChange(e2, offset);
+    await sbChange(e, offset);
+    const eventListener = (e2) => void sbChange(e2, offset);
     window.addEventListener("mousemove", eventListener);
     window.addEventListener("touchmove", eventListener);
     const mouseUpListener = () => {
@@ -436,9 +436,9 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
       ...props.class
     },
     id,
-    onInput$: (e, el) => {
+    onInput$: async (e, el) => {
       if (!el.dataset.value) return;
-      setColor(el.dataset.value);
+      await setColor(el.dataset.value);
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -515,7 +515,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
               }),
               /* @__PURE__ */ jsxRuntime.jsx("input", {
                 class: {
-                  "w-full lum-input lum-pad-sm text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true,
+                  "w-full lum-input p-1 text-xs": true,
                   "border-t-0 rounded-t-none": preview == "top",
                   "border-b-0 rounded-b-none": preview == "bottom"
                 },
@@ -524,8 +524,8 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
                   backgroundColor: `${store.value}`,
                   color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
                 } : {},
-                onInput$: (e, el) => {
-                  setColor(el.value);
+                onInput$: async (e, el) => {
+                  await setColor(el.value);
                 }
               })
             ]
@@ -533,22 +533,22 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
           colors.map((color, i) => {
             return /* @__PURE__ */ jsxRuntime.jsx("button", {
               class: {
-                "w-[1.6rem] h-[1.6rem] rounded-md hover:scale-110 motion-safe:transition-all duration-300 hover:duration-75 ease-out -outline-offset-1 outline outline-1 outline-white/30": true
+                "w-[1.6rem] h-[1.6rem] lum-btn p-0 border-white/30 border-2 hover:border-white": true
               },
               style: {
                 background: color,
-                outline: color === store.value ? "2px solid #ffffffaa" : void 0
+                borderColor: color === store.value ? "#ffffff" : void 0
               },
-              onClick$: () => {
-                setColor(color);
+              onClick$: async () => {
+                await setColor(color);
               }
             }, i);
           }),
           /* @__PURE__ */ jsxRuntime.jsx("button", {
-            class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all duration-300 hover:duration-75 ease-out",
-            onClick$: () => {
+            class: "w-[1.6rem] h-[1.6rem] lum-btn p-0.5",
+            onClick$: async () => {
               const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-              setColor(color);
+              await setColor(color);
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(Shuffle, {
               class: "fill-current text-gray-300 pl-0.5 p-0.5"
@@ -616,7 +616,7 @@ const DropdownRaw = qwik.component$(({ id, values, class: Class, display, hover,
       }),
       /* @__PURE__ */ jsxRuntime.jsxs("button", {
         class: {
-          "lum-btn lum-pad-md text-base lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true,
+          "lum-btn": true,
           ...Class
         },
         onClick$: () => {
@@ -634,7 +634,8 @@ const DropdownRaw = qwik.component$(({ id, values, class: Class, display, hover,
             class: {
               "motion-safe:transition-all ease-out": true,
               "transform rotate-180": store.opened,
-              "group-hover:transform group-hover:rotate-180 duration-300 group-hover:duration-75": hover
+              "group-hover:transform group-hover:rotate-180 duration-300 group-hover:duration-75": hover,
+              "focus-within:transform focus-within:rotate-180 focus-within:duration-75": true
             }
           })
         ]
@@ -643,7 +644,8 @@ const DropdownRaw = qwik.component$(({ id, values, class: Class, display, hover,
         class: {
           "transition-all ease-out absolute top-full pt-2 left-0 z-[1000] ": true,
           "opacity-0 scale-95 pointer-events-none": !store.opened,
-          "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100 duration-300 group-hover:duration-75": hover
+          "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100 duration-300 group-hover:duration-75": hover,
+          "focus-within:pointer-events-auto focus-within:opacity-100 focus-within:scale-100 focus-within:duration-75": true
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
           id: `lui-${id}-opts`,
@@ -654,7 +656,7 @@ const DropdownRaw = qwik.component$(({ id, values, class: Class, display, hover,
             values?.map(({ name, value }, i) => {
               return /* @__PURE__ */ jsxRuntime.jsx("button", {
                 class: {
-                  "lum-btn lum-pad-md text-base lum-bg-transparent": true
+                  "lum-btn lum-bg-transparent": true
                 },
                 onClick$: () => {
                   store.opened = false;
@@ -693,45 +695,28 @@ const Link = qwik.component$((props) => {
     })
   });
 });
-const Header = qwik.component$(({ id, anchor, subheader, ...props }) => {
-  let Component = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /* @__PURE__ */ jsxRuntime.jsxs("h2", {
-      class: {
-        "flex gap-2 group items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
-        ...props.class
+const Header = qwik.component$(({ id, anchor, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs("h2", {
+  class: {
+    "flex gap-2 group items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
+    ...props.class
+  },
+  children: [
+    /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}),
+    id && /* @__PURE__ */ jsxRuntime.jsx(Anchor, {
+      id
+    }),
+    anchor && id && /* @__PURE__ */ jsxRuntime.jsx("a", {
+      href: `#${id}`,
+      onClick$: async () => {
+        await navigator.clipboard.writeText(window.location.href);
       },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}),
-        id && /* @__PURE__ */ jsxRuntime.jsx(Anchor, {
-          id
-        }),
-        anchor && id && /* @__PURE__ */ jsxRuntime.jsx("a", {
-          href: `#${id}`,
-          onClick$: () => {
-            navigator.clipboard.writeText(window.location.href);
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(Link, {
-            class: "transition-all opacity-10 group-hover:opacity-100 duration-300 group-hover:duration-75",
-            width: 24
-          })
-        })
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(Link, {
+        class: "transition-all opacity-10 group-hover:opacity-100 duration-300 group-hover:duration-75",
+        width: 24
+      })
     })
-  });
-  if (subheader) {
-    Component = /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      class: "flex flex-col gap-1",
-      children: [
-        Component,
-        /* @__PURE__ */ jsxRuntime.jsx("h3", {
-          class: "flex items-center text-gray-400 text-sm",
-          children: subheader
-        })
-      ]
-    });
-  }
-  return Component;
-});
+  ]
+}));
 const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-gray-900", ...props }) => {
   const menu = qwik.useSignal(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", {
@@ -797,7 +782,7 @@ const Nav = qwik.component$(({ fixed, floating, nohamburger, colorClass = "lum-b
                   name: "end"
                 }),
                 !nohamburger && /* @__PURE__ */ jsxRuntime.jsx("button", {
-                  class: "lum-btn lum-pad-equal-md lum-bg-transparent sm:hidden",
+                  class: "lum-btn p-2 lum-bg-transparent sm:hidden",
                   onClick$: () => menu.value = !menu.value,
                   children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
                     class: "w-6 h-6",
@@ -887,15 +872,15 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("button", {
         class: {
-          "lum-btn lum-pad-equal-sm text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true
+          "lum-btn p-2": true
         },
         "data-action": "decrement",
         "aria-label": "Decrement",
         disabled: props.min ? value <= props.min : false,
-        onClick$: input ? qwik.$((event, element) => {
+        onClick$: input ? qwik.$(async (event, element) => {
           const siblingInput = element.nextElementSibling;
           siblingInput.stepDown();
-          onDecrement$(event, element, siblingInput);
+          await onDecrement$(event, element, siblingInput);
         }) : onDecrement$,
         children: /* @__PURE__ */ jsxRuntime.jsx(Minus, {
           width: "24",
@@ -908,22 +893,21 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
         value,
         step,
         class: {
-          "lum-input text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true,
-          "text-center": true,
+          "lum-input text-center": true,
           ...props.class
         }
       }),
       /* @__PURE__ */ jsxRuntime.jsx("button", {
         class: {
-          "lum-btn lum-pad-equal-sm text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true
+          "lum-btn p-2": true
         },
         "data-action": "increment",
         "aria-label": "Increment",
         disabled: props.max ? value >= props.max : false,
-        onClick$: input ? qwik.$((event, element) => {
+        onClick$: input ? qwik.$(async (event, element) => {
           const siblingInput = element.previousElementSibling;
           siblingInput.stepUp();
-          onIncrement$(event, element, siblingInput);
+          await onIncrement$(event, element, siblingInput);
         }) : onIncrement$,
         children: /* @__PURE__ */ jsxRuntime.jsx(Plus, {
           width: "24",

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "@builder.io/qwik/jsx-runtime";
+import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
 import { component$, useStore, $, Slot, useSignal, useStyles$ } from "@builder.io/qwik";
 const Anchor = component$(({ id }) => /* @__PURE__ */ jsx("span", {
   id,
@@ -354,7 +354,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
     sPosition: hsvColor.s * width,
     value
   });
-  const setColor = $((color) => {
+  const setColor = $(async (color) => {
     if (!color.match(/^#[0-9A-F]{6}$/i)) return;
     const number = hexStringToNumber(color);
     const hsv = rgbToHsv(hexNumberToRgb(number));
@@ -367,9 +367,9 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
     store.sPosition = hsv.s * width;
     store.bPosition = (1 - hsv.v) * maxHue;
     store.value = color;
-    onInput$?.(store.value);
+    await onInput$?.(store.value);
   });
-  const hueChange = $((e, hOffset) => {
+  const hueChange = $(async (e, hOffset) => {
     const { y } = getMousePosition(e);
     store.hue.position = clamp(maxHue - (y - hOffset), 0, maxHue);
     const hsvColor2 = rgbToHsv(hexNumberToRgb(hexStringToNumber(store.value)));
@@ -381,12 +381,12 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
       v: 1
     }));
     store.value = rgbToHex(hsvToRgb(hsvColor2));
-    onInput$?.(store.value);
+    await onInput$?.(store.value);
   });
-  const hueMouseDown = $((e, el) => {
+  const hueMouseDown = $(async (e, el) => {
     const hOffset = el.getBoundingClientRect().top;
-    hueChange(e, hOffset);
-    const eventListener = (e2) => hueChange(e2, hOffset);
+    await hueChange(e, hOffset);
+    const eventListener = (e2) => void hueChange(e2, hOffset);
     window.addEventListener("mousemove", eventListener);
     window.addEventListener("touchmove", eventListener);
     const mouseUpListener = () => {
@@ -398,7 +398,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
   });
-  const sbChange = $((e, hOffset) => {
+  const sbChange = $(async (e, hOffset) => {
     const { x, y } = getMousePosition(e);
     store.bPosition = clamp(y - hOffset.top, 0, maxHue);
     store.sPosition = clamp(x - hOffset.left, 0, width);
@@ -409,12 +409,12 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
       s,
       v
     }));
-    onInput$?.(store.value);
+    await onInput$?.(store.value);
   });
-  const sbMouseDown = $((e, el) => {
+  const sbMouseDown = $(async (e, el) => {
     const offset = el.getBoundingClientRect();
-    sbChange(e, offset);
-    const eventListener = (e2) => sbChange(e2, offset);
+    await sbChange(e, offset);
+    const eventListener = (e2) => void sbChange(e2, offset);
     window.addEventListener("mousemove", eventListener);
     window.addEventListener("touchmove", eventListener);
     const mouseUpListener = () => {
@@ -434,9 +434,9 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
       ...props.class
     },
     id,
-    onInput$: (e, el) => {
+    onInput$: async (e, el) => {
       if (!el.dataset.value) return;
-      setColor(el.dataset.value);
+      await setColor(el.dataset.value);
     },
     children: [
       /* @__PURE__ */ jsxs("div", {
@@ -513,7 +513,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
               }),
               /* @__PURE__ */ jsx("input", {
                 class: {
-                  "w-full lum-input lum-pad-sm text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true,
+                  "w-full lum-input p-1 text-xs": true,
                   "border-t-0 rounded-t-none": preview == "top",
                   "border-b-0 rounded-b-none": preview == "bottom"
                 },
@@ -522,8 +522,8 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
                   backgroundColor: `${store.value}`,
                   color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
                 } : {},
-                onInput$: (e, el) => {
-                  setColor(el.value);
+                onInput$: async (e, el) => {
+                  await setColor(el.value);
                 }
               })
             ]
@@ -531,22 +531,22 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
           colors.map((color, i) => {
             return /* @__PURE__ */ jsx("button", {
               class: {
-                "w-[1.6rem] h-[1.6rem] rounded-md hover:scale-110 motion-safe:transition-all duration-300 hover:duration-75 ease-out -outline-offset-1 outline outline-1 outline-white/30": true
+                "w-[1.6rem] h-[1.6rem] lum-btn p-0 border-white/30 border-2 hover:border-white": true
               },
               style: {
                 background: color,
-                outline: color === store.value ? "2px solid #ffffffaa" : void 0
+                borderColor: color === store.value ? "#ffffff" : void 0
               },
-              onClick$: () => {
-                setColor(color);
+              onClick$: async () => {
+                await setColor(color);
               }
             }, i);
           }),
           /* @__PURE__ */ jsx("button", {
-            class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all duration-300 hover:duration-75 ease-out",
-            onClick$: () => {
+            class: "w-[1.6rem] h-[1.6rem] lum-btn p-0.5",
+            onClick$: async () => {
               const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-              setColor(color);
+              await setColor(color);
             },
             children: /* @__PURE__ */ jsx(Shuffle, {
               class: "fill-current text-gray-300 pl-0.5 p-0.5"
@@ -614,7 +614,7 @@ const DropdownRaw = component$(({ id, values, class: Class, display, hover, ...p
       }),
       /* @__PURE__ */ jsxs("button", {
         class: {
-          "lum-btn lum-pad-md text-base lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true,
+          "lum-btn": true,
           ...Class
         },
         onClick$: () => {
@@ -632,7 +632,8 @@ const DropdownRaw = component$(({ id, values, class: Class, display, hover, ...p
             class: {
               "motion-safe:transition-all ease-out": true,
               "transform rotate-180": store.opened,
-              "group-hover:transform group-hover:rotate-180 duration-300 group-hover:duration-75": hover
+              "group-hover:transform group-hover:rotate-180 duration-300 group-hover:duration-75": hover,
+              "focus-within:transform focus-within:rotate-180 focus-within:duration-75": true
             }
           })
         ]
@@ -641,7 +642,8 @@ const DropdownRaw = component$(({ id, values, class: Class, display, hover, ...p
         class: {
           "transition-all ease-out absolute top-full pt-2 left-0 z-[1000] ": true,
           "opacity-0 scale-95 pointer-events-none": !store.opened,
-          "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100 duration-300 group-hover:duration-75": hover
+          "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100 duration-300 group-hover:duration-75": hover,
+          "focus-within:pointer-events-auto focus-within:opacity-100 focus-within:scale-100 focus-within:duration-75": true
         },
         children: /* @__PURE__ */ jsxs("div", {
           id: `lui-${id}-opts`,
@@ -652,7 +654,7 @@ const DropdownRaw = component$(({ id, values, class: Class, display, hover, ...p
             values?.map(({ name, value }, i) => {
               return /* @__PURE__ */ jsx("button", {
                 class: {
-                  "lum-btn lum-pad-md text-base lum-bg-transparent": true
+                  "lum-btn lum-bg-transparent": true
                 },
                 onClick$: () => {
                   store.opened = false;
@@ -691,45 +693,28 @@ const Link = component$((props) => {
     })
   });
 });
-const Header = component$(({ id, anchor, subheader, ...props }) => {
-  let Component = /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsxs("h2", {
-      class: {
-        "flex gap-2 group items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
-        ...props.class
+const Header = component$(({ id, anchor, ...props }) => /* @__PURE__ */ jsxs("h2", {
+  class: {
+    "flex gap-2 group items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
+    ...props.class
+  },
+  children: [
+    /* @__PURE__ */ jsx(Slot, {}),
+    id && /* @__PURE__ */ jsx(Anchor, {
+      id
+    }),
+    anchor && id && /* @__PURE__ */ jsx("a", {
+      href: `#${id}`,
+      onClick$: async () => {
+        await navigator.clipboard.writeText(window.location.href);
       },
-      children: [
-        /* @__PURE__ */ jsx(Slot, {}),
-        id && /* @__PURE__ */ jsx(Anchor, {
-          id
-        }),
-        anchor && id && /* @__PURE__ */ jsx("a", {
-          href: `#${id}`,
-          onClick$: () => {
-            navigator.clipboard.writeText(window.location.href);
-          },
-          children: /* @__PURE__ */ jsx(Link, {
-            class: "transition-all opacity-10 group-hover:opacity-100 duration-300 group-hover:duration-75",
-            width: 24
-          })
-        })
-      ]
+      children: /* @__PURE__ */ jsx(Link, {
+        class: "transition-all opacity-10 group-hover:opacity-100 duration-300 group-hover:duration-75",
+        width: 24
+      })
     })
-  });
-  if (subheader) {
-    Component = /* @__PURE__ */ jsxs("div", {
-      class: "flex flex-col gap-1",
-      children: [
-        Component,
-        /* @__PURE__ */ jsx("h3", {
-          class: "flex items-center text-gray-400 text-sm",
-          children: subheader
-        })
-      ]
-    });
-  }
-  return Component;
-});
+  ]
+}));
 const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-gray-900", ...props }) => {
   const menu = useSignal(false);
   return /* @__PURE__ */ jsxs("nav", {
@@ -795,7 +780,7 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-gra
                   name: "end"
                 }),
                 !nohamburger && /* @__PURE__ */ jsx("button", {
-                  class: "lum-btn lum-pad-equal-md lum-bg-transparent sm:hidden",
+                  class: "lum-btn p-2 lum-bg-transparent sm:hidden",
                   onClick$: () => menu.value = !menu.value,
                   children: /* @__PURE__ */ jsx("svg", {
                     class: "w-6 h-6",
@@ -885,15 +870,15 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
     children: [
       /* @__PURE__ */ jsx("button", {
         class: {
-          "lum-btn lum-pad-equal-sm text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true
+          "lum-btn p-2": true
         },
         "data-action": "decrement",
         "aria-label": "Decrement",
         disabled: props.min ? value <= props.min : false,
-        onClick$: input ? $((event, element) => {
+        onClick$: input ? $(async (event, element) => {
           const siblingInput = element.nextElementSibling;
           siblingInput.stepDown();
-          onDecrement$(event, element, siblingInput);
+          await onDecrement$(event, element, siblingInput);
         }) : onDecrement$,
         children: /* @__PURE__ */ jsx(Minus, {
           width: "24",
@@ -906,22 +891,21 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
         value,
         step,
         class: {
-          "lum-input text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true,
-          "text-center": true,
+          "lum-input text-center": true,
           ...props.class
         }
       }),
       /* @__PURE__ */ jsx("button", {
         class: {
-          "lum-btn lum-pad-equal-sm text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md": true
+          "lum-btn p-2": true
         },
         "data-action": "increment",
         "aria-label": "Increment",
         disabled: props.max ? value >= props.max : false,
-        onClick$: input ? $((event, element) => {
+        onClick$: input ? $(async (event, element) => {
           const siblingInput = element.previousElementSibling;
           siblingInput.stepUp();
-          onIncrement$(event, element, siblingInput);
+          await onIncrement$(event, element, siblingInput);
         }) : onIncrement$,
         children: /* @__PURE__ */ jsx(Plus, {
           width: "24",

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

@@ -0,0 +1,8 @@
+export * from './docs/Anchor';
+export * from './docs/Blobs';
+export * from './docs/ColorPicker';
+export * from './docs/Dropdown';
+export * from './docs/IconsLogos';
+export * from './docs/Nav';
+export * from './docs/NumberInput';
+export * from './docs/Toggle';

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

@@ -1,11 +1,10 @@
-import type { JSXOutput, PropsOf } from '@builder.io/qwik';
+import type { PropsOf } from '@builder.io/qwik';
 interface HeaderProps extends Omit<PropsOf<'h2'>, 'class'> {
     class?: {
         [key: string]: boolean;
     };
     id?: string;
     anchor?: boolean;
-    subheader?: string | JSXOutput;
 }
 export declare const Header: import("@builder.io/qwik").Component<HeaderProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "1.4.5-0",
+  "version": "1.4.6-1",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -29,23 +29,25 @@
   },
   "devDependencies": {
     "@anuragroy/tailwindcss-animate": "^1.0.6",
-    "@builder.io/qwik": "1.12.0",
-    "@builder.io/qwik-city": "^1.12.0",
-    "@tailwindcss/vite": "^4.0.6",
-    "@types/eslint": "^8.56.11",
-    "@types/node": "^22.13.2",
-    "@typescript-eslint/eslint-plugin": "^8.24.0",
-    "@typescript-eslint/parser": "^8.24.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-qwik": "latest",
-    "tailwindcss": "4.0.6",
-    "typescript": "5.7.3",
-    "undici": "*",
-    "vite": "^6.1.0",
+    "@builder.io/qwik": "1.13.0",
+    "@builder.io/qwik-city": "^1.13.0",
+    "@eslint/js": "^9.26.0",
+    "@tailwindcss/vite": "^4.1.5",
+    "@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",
+    "tailwindcss": "4.1.5",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.31.1",
+    "vite": "5.4.14",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
-    "@luminescent/ui": "^1.4.3"
+    "@luminescent/ui": "1.4.6-1"
   },
   "scripts": {
     "build": "qwik build",

package/lib-types/components/docs/Playground.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("@builder.io/qwik").Component<unknown>;
-export default _default;