@luminescent/ui-qwik 1.4.6-0 → 2.0.0

package/lib/index.qwik.mjs

@@ -1,8 +1,8 @@
-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,
-  class: "block h-32 -mt-32 pointer-events-none"
+  class: "pointer-events-none -mt-32 block h-32"
 }));
 const blobColorClasses = {
   slate: [
@@ -140,7 +140,7 @@ const Blobs = component$(({ color = "darkgray", blur = "xl", ...props }) => {
   const colorClass = typeof color == "string" ? blobColorClasses[color] : color;
   return /* @__PURE__ */ jsxs("div", {
     class: {
-      "motion-reduce:hidden absolute inset-0 transition-all animate-in fade-in anim-duration-[2s]": true,
+      "animate-in fade-in anim-duration-[2s] absolute inset-0 transition-all motion-reduce:hidden": true,
       ...props.class
     },
     style: {
@@ -150,7 +150,8 @@ const Blobs = component$(({ color = "darkgray", blur = "xl", ...props }) => {
     children: [
       /* @__PURE__ */ jsx("div", {
         class: {
-          "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
+          "absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
+          "blur-xs": blur === "xs",
           "blur-sm": blur === "sm",
           "blur-md": blur === "md",
           "blur-lg": blur === "lg",
@@ -161,7 +162,8 @@ const Blobs = component$(({ color = "darkgray", blur = "xl", ...props }) => {
       }),
       /* @__PURE__ */ jsx("div", {
         class: {
-          "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
+          "absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
+          "blur-xs": blur === "xs",
           "blur-sm": blur === "sm",
           "blur-md": blur === "md",
           "blur-lg": blur === "lg",
@@ -173,7 +175,8 @@ const Blobs = component$(({ color = "darkgray", blur = "xl", ...props }) => {
       }),
       /* @__PURE__ */ jsx("div", {
         class: {
-          "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
+          "absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
+          "blur-xs": blur === "xs",
           "blur-sm": blur === "sm",
           "blur-md": blur === "md",
           "blur-lg": blur === "lg",
@@ -354,7 +357,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 +370,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 +384,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 +401,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 +412,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 = () => {
@@ -428,22 +431,22 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
   });
   return /* @__PURE__ */ jsxs("div", {
     class: {
-      "motion-safe:transition-all p-4 lum-bg-gray-900 flex gap-4 rounded-lg touch-none": true,
-      "flex": true,
+      "lum-bg-gray-900 flex touch-none gap-4 rounded-lg p-4 motion-safe:transition-all": true,
+      flex: true,
       "flex-col": !horizontal,
       ...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", {
         class: "flex gap-4",
         children: [
           /* @__PURE__ */ jsxs("div", {
-            class: "w-[125px] h-[150px] rounded-md relative",
+            class: "relative h-[150px] w-[125px] rounded-md",
             style: {
               background: `linear-gradient(to right, #FFFFFF, ${store.hue.color})`
             },
@@ -453,11 +456,11 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
             "preventdefault:touchstart": true,
             children: [
               /* @__PURE__ */ jsx("div", {
-                class: "w-[125px] h-[150px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black border border-gray-700"
+                class: "h-[150px] w-[125px] rounded-[0.3rem] border border-gray-700 bg-gradient-to-b from-transparent to-black"
               }),
               /* @__PURE__ */ jsx("div", {
                 class: {
-                  "absolute -top-2 -left-2 w-4 h-4 border rounded-full bg-white": true,
+                  "absolute -top-2 -left-2 h-4 w-4 rounded-full border bg-white": true,
                   "border-white": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) < 0.5,
                   "border-black": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5
                 },
@@ -469,7 +472,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
             ]
           }),
           /* @__PURE__ */ jsx("div", {
-            class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
+            class: "relative h-[150px] w-2 rounded-md border border-gray-700",
             style: {
               background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
             },
@@ -478,7 +481,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
             "preventdefault:mousedown": true,
             "preventdefault:touchstart": true,
             children: /* @__PURE__ */ jsx("div", {
-              class: "absolute -bottom-2 -left-[5px] w-4 h-4 border border-white rounded-full bg-[#ff0000]",
+              class: "absolute -bottom-2 -left-[5px] h-4 w-4 rounded-full border border-white bg-[#ff0000]",
               style: {
                 transform: `translateY(${-store.hue.position}px)`,
                 background: store.hue.color
@@ -488,11 +491,11 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: "w-[150px] flex flex-wrap gap-1 justify-between",
+        class: "flex w-[150px] flex-wrap justify-between gap-1",
         children: [
           showInput && /* @__PURE__ */ jsxs("div", {
             class: {
-              "flex w-[150px] pb-3 mb-2 border-b border-b-gray-700": true,
+              "mb-2 flex w-[150px] border-b border-b-gray-700 pb-3": true,
               "flex-row gap-1": preview == "left",
               "flex-row-reverse gap-1": preview == "right",
               "flex-col": preview == "top",
@@ -502,8 +505,8 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
               preview != "full" && /* @__PURE__ */ jsx("div", {
                 class: {
                   "border border-gray-700": true,
-                  "h-full aspect-square rounded-md": preview == "left" || preview == "right",
-                  "w-full h-3": preview == "top" || preview == "bottom",
+                  "aspect-square h-full rounded-md": preview == "left" || preview == "right",
+                  "h-3 w-full": preview == "top" || preview == "bottom",
                   "rounded-t-md": preview == "top",
                   "rounded-b-md": preview == "bottom"
                 },
@@ -513,17 +516,17 @@ 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,
-                  "border-t-0 rounded-t-none": preview == "top",
-                  "border-b-0 rounded-b-none": preview == "bottom"
+                  "lum-input w-full p-1 text-xs": true,
+                  "rounded-t-none border-t-0": preview == "top",
+                  "rounded-b-none border-b-0": preview == "bottom"
                 },
                 value: store.value,
                 style: preview == "full" ? {
                   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,25 +534,25 @@ 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
+                "lum-btn h-[1.6rem] w-[1.6rem] border-2 border-white/30 p-0 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: "lum-btn h-[1.6rem] w-[1.6rem] 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"
+              class: "fill-current p-0.5 pl-0.5 text-gray-300"
             })
           })
         ]
@@ -579,7 +582,7 @@ const Dropdown = component$((props) => {
     children: [
       /* @__PURE__ */ jsx("label", {
         for: props.id,
-        class: "text-gray-300 pb-1 select-none",
+        class: "pb-1 text-gray-300 select-none",
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsx(DropdownRaw, {
@@ -596,14 +599,14 @@ const DropdownRaw = component$(({ id, values, class: Class, display, hover, ...p
   return /* @__PURE__ */ jsxs("div", {
     class: {
       "relative touch-manipulation": true,
-      "group": hover
+      group: hover
     },
     children: [
       values && /* @__PURE__ */ jsx("select", {
         ...props,
         id,
         class: {
-          "hidden": true
+          hidden: true
         },
         children: values.map((value, i) => {
           return /* @__PURE__ */ jsx("option", {
@@ -614,7 +617,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 group-hover:lum-bg-gray-700 focus-within:lum-bg-gray-700 rounded-md": true,
+          "lum-btn": true,
           ...Class
         },
         onClick$: () => {
@@ -630,31 +633,31 @@ const DropdownRaw = component$(({ id, values, class: Class, display, hover, ...p
           /* @__PURE__ */ jsx(ChevronDown, {
             width: 16,
             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,
-              "focus-within:transform focus-within:rotate-180 focus-within:duration-75": true
+              "ease-out motion-safe:transition-all": true,
+              "rotate-180 transform": store.opened,
+              "duration-300 group-hover:rotate-180 group-hover:transform group-hover:duration-75": hover,
+              "focus-within:rotate-180 focus-within:transform focus-within:duration-75": true
             }
           })
         ]
       }),
       /* @__PURE__ */ jsx("div", {
         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,
-          "focus-within:pointer-events-auto focus-within:opacity-100 focus-within:scale-100 focus-within:duration-75": true
+          "absolute top-full left-0 z-[1000] pt-2 transition-all ease-out": true,
+          "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
         },
         children: /* @__PURE__ */ jsxs("div", {
           id: `lui-${id}-opts`,
           class: {
-            "motion-safe:transition-all p-1 gap-1 lum-bg-gray-800 backdrop-blur-xl flex flex-col border max-h-72 lum-scroll overflow-auto select-none rounded-md": true
+            "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
           },
           children: [
             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;
@@ -693,68 +696,51 @@ 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: {
+    "group flex items-center gap-2 text-xl font-bold whitespace-nowrap text-white sm:text-2xl": 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: "opacity-10 transition-all duration-300 group-hover:opacity-100 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", {
     ...props,
     class: {
-      "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
-      "fixed": fixed,
-      "absolute": !fixed,
+      "top-0 left-0 z-50 flex w-full flex-col duration-200 motion-safe:transition-all": true,
+      fixed,
+      absolute: !fixed,
       ...props.class
     },
     children: [
       !nohamburger && /* @__PURE__ */ jsx("div", {
         class: {
-          "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full top-full": true,
+          "absolute top-full flex w-full flex-col items-center px-2 motion-safe:transition-all sm:hidden": true,
           "mt-2": menu.value,
-          "opacity-0 pointer-events-none": !menu.value,
+          "pointer-events-none opacity-0": !menu.value,
           "before:backdrop-blur-lg": !colorClass.includes("transparent"),
-          'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true
+          'before:absolute before:-z-10 before:h-full before:w-full before:rounded-lg before:drop-shadow-xl before:content-[""]': true
         },
         children: /* @__PURE__ */ jsx("div", {
           class: {
             [colorClass]: true,
-            "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true
+            "flex w-full max-w-7xl flex-col gap-2 rounded-lg border px-2 py-4 motion-safe:transition-all": true
           },
           children: /* @__PURE__ */ jsx(Slot, {
             name: "mobile"
@@ -764,43 +750,43 @@ const Nav = component$(({ fixed, floating, nohamburger, colorClass = "lum-bg-gra
       /* @__PURE__ */ jsx("div", {
         class: {
           [colorClass]: !floating,
-          "!border-t-0 !border-x-0": !floating,
+          "!border-x-0 !border-t-0": !floating,
           "before:backdrop-blur-lg": !colorClass.includes("transparent") && !floating,
-          'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10': !floating,
-          "relative mt-2 mx-2": floating
+          'before:absolute before:-z-10 before:h-full before:w-full before:drop-shadow-xl before:content-[""]': !floating,
+          "relative mx-2 mt-2": floating
         },
         children: /* @__PURE__ */ jsxs("div", {
           class: {
-            "flex justify-evenly w-full mx-auto px-2 max-w-7xl": true,
+            "mx-auto flex w-full max-w-7xl justify-evenly px-2": true,
             [colorClass]: floating,
-            "border rounded-lg": floating,
+            "rounded-lg border": floating,
             "before:backdrop-blur-lg": !colorClass.includes("transparent") && floating,
-            'before:absolute before:content-[""] before:w-full before:max-w-7xl before:h-full before:rounded-lg before:drop-shadow-xl before:-z-10': 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
           },
           children: [
             /* @__PURE__ */ jsx("div", {
-              class: "flex items-center flex-1 gap-2 py-2 justify-start",
+              class: "flex flex-1 items-center justify-start gap-2 py-2",
               children: /* @__PURE__ */ jsx(Slot, {
                 name: "start"
               })
             }),
             /* @__PURE__ */ jsx("div", {
-              class: "flex items-center flex-1 gap-2 py-2 justify-center",
+              class: "flex flex-1 items-center justify-center gap-2 py-2",
               children: /* @__PURE__ */ jsx(Slot, {
                 name: "center"
               })
             }),
             /* @__PURE__ */ jsxs("div", {
-              class: "flex items-center flex-1 gap-2 py-2 justify-end",
+              class: "flex flex-1 items-center justify-end gap-2 py-2",
               children: [
                 /* @__PURE__ */ jsx(Slot, {
                   name: "end"
                 }),
                 !nohamburger && /* @__PURE__ */ jsx("button", {
-                  class: "lum-btn lum-pad-equal-md lum-bg-transparent sm:hidden",
+                  class: "lum-btn lum-bg-transparent p-2 sm:hidden",
                   onClick$: () => menu.value = !menu.value,
                   children: /* @__PURE__ */ jsx("svg", {
-                    class: "w-6 h-6",
+                    class: "h-6 w-6",
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
@@ -859,7 +845,7 @@ const NumberInput = component$((props) => {
     children: [
       /* @__PURE__ */ jsx("label", {
         for: props.id,
-        class: "text-gray-300 pb-1 select-none",
+        class: "pb-1 text-gray-300 select-none",
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsx(NumberInputRaw, {
@@ -882,20 +868,20 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
   `);
   return /* @__PURE__ */ jsxs("div", {
     class: {
-      "flex gap-2 text-gray-50 touch-manipulation": true
+      "flex touch-manipulation gap-2 text-gray-50": true
     },
     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",
@@ -908,22 +894,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",
@@ -1132,25 +1117,25 @@ const toggleOffColorClasses = {
 const Toggle = component$(({ checkbox, round, center, label, onColor = "blue", offColor = "darkgray", ...props }) => {
   return /* @__PURE__ */ jsxs("div", {
     class: {
-      "flex gap-3 items-center touch-manipulation": true,
+      "flex touch-manipulation items-center gap-3": true,
       "justify-center": center
     },
     children: [
       /* @__PURE__ */ jsxs("label", {
-        class: "inline-flex relative items-center cursor-pointer",
+        class: "relative inline-flex cursor-pointer items-center",
         children: [
           /* @__PURE__ */ jsx("input", {
             type: "checkbox",
             ...props,
             class: {
-              "sr-only peer": true,
+              "peer sr-only": true,
               ...props.class
             }
           }),
           /* @__PURE__ */ jsx("div", {
             class: {
-              "motion-safe:transition duration-300 hover:duration-75 ease-out h-7 peer border hover:shadow-lg": true,
-              "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:h-5 after:w-5 after:motion-safe:transition-all after:duration-300 after:hover:duration-75 after:ease-out": true,
+              "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-full after:rounded-full": round,
               "w-12 peer-checked:after:translate-x-full": !checkbox,
@@ -1165,7 +1150,7 @@ const Toggle = component$(({ checkbox, round, center, label, onColor = "blue", o
       }),
       label && /* @__PURE__ */ jsx("label", {
         for: props.id,
-        class: "text-gray-300 flex gap-2 select-none",
+        class: "flex gap-2 text-gray-300 select-none",
         children: label
       })
     ]

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/Blobs.d.ts

@@ -6,7 +6,7 @@ export interface BlobProps {
         [key: string]: string | number;
     };
     color?: keyof typeof blobColorClasses | [string, string, string];
-    blur?: 'sm' | 'md' | 'lg' | 'xl';
+    blur?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 export declare const blobColorClasses: {
     slate: string[];

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/lib-types/components/elements/NumberInput.d.ts

@@ -1,7 +1,7 @@
 import type { PropsOf, QRL } from '@builder.io/qwik';
-interface NumberInputRawProps extends Omit<(PropsOf<'input'> & {
+interface NumberInputRawProps extends Omit<PropsOf<'input'> & {
     type: 'number';
-}), 'class' | 'type'> {
+}, 'class' | 'type'> {
     onDecrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, inputElement?: HTMLInputElement) => void>;
     onIncrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, inputElement?: HTMLInputElement) => void>;
     input?: boolean;

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

@@ -1,7 +1,7 @@
 import type { JSXOutput, PropsOf } from '@builder.io/qwik';
-interface ToggleProps extends Omit<(PropsOf<'input'> & {
+interface ToggleProps extends Omit<PropsOf<'input'> & {
     type: 'checkbox';
-}), 'class' | 'bind:checked' | 'type' | 'children'> {
+}, 'class' | 'bind:checked' | 'type' | 'children'> {
     class?: {
         [key: string]: boolean;
     };