@luminescent/ui-qwik 3.0.4 → 4.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"
                 },
@@ -588,7 +587,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
             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,
@@ -601,7 +600,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
           }),
           /* @__PURE__ */ jsxRuntime.jsx("button", {
             type: "button",
-            class: "lum-btn h-[1.6rem] w-[1.6rem] p-0.5",
+            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);
@@ -742,14 +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 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;
@@ -815,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"
@@ -839,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,13 +946,13 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
   `);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: {
-      "flex touch-manipulation gap-2 text-gray-50": true
+      "flex touch-manipulation gap-1 text-gray-50": true
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("button", {
         type: "button",
         class: {
-          "lum-btn p-2": true
+          "lum-btn p-2 rounded-r-sm": true
         },
         "data-action": "decrement",
         "aria-label": "Decrement",
@@ -964,7 +963,7 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
           await onDecrement$(event, element, siblingInput);
         }) : onDecrement$,
         children: /* @__PURE__ */ jsxRuntime.jsx(Minus, {
-          size: 24
+          size: 20
         })
       }),
       input && /* @__PURE__ */ jsxRuntime.jsx("input", {
@@ -973,14 +972,14 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
         value,
         step,
         class: {
-          "lum-input text-center": true,
+          "lum-input text-center rounded-sm lum-input-p-1": true,
           ...props.class
         }
       }),
       /* @__PURE__ */ jsxRuntime.jsx("button", {
         type: "button",
         class: {
-          "lum-btn p-2": true
+          "lum-btn p-2 rounded-l-sm": true
         },
         "data-action": "increment",
         "aria-label": "Increment",
@@ -991,213 +990,16 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
           await onIncrement$(event, element, siblingInput);
         }) : onIncrement$,
         children: /* @__PURE__ */ jsxRuntime.jsx(Plus, {
-          size: 24
+          size: 20
         })
       })
     ]
   });
 });
-const toggleOnColorClasses = {
-  slate: {
-    checked: "peer-checked:bg-slate-600 peer-checked:border-slate-500 peer-checked:hover:bg-slate-500 peer-checked:active:bg-slate-400",
-    checkedAfter: "peer-checked:after:bg-slate-500 peer-checked:after:border-slate-400 peer-checked:after:hover:bg-slate-400 peer-checked:after:active:bg-slate-300"
-  },
-  gray: {
-    checked: "peer-checked:bg-gray-600 peer-checked:border-gray-500 peer-checked:hover:bg-gray-500 peer-checked:active:bg-gray-400",
-    checkedAfter: "peer-checked:after:bg-gray-500 peer-checked:after:border-gray-400 peer-checked:after:hover:bg-gray-400 peer-checked:after:active:bg-gray-300"
-  },
-  darkgray: {
-    checked: "peer-checked:bg-gray-700 peer-checked:border-gray-600 peer-checked:hover:bg-gray-600 peer-checked:active:bg-gray-500",
-    checkedAfter: "peer-checked:after:bg-gray-600 peer-checked:after:border-gray-500 peer-checked:after:hover:bg-gray-500 peer-checked:after:active:bg-gray-400"
-  },
-  darkergray: {
-    checked: "peer-checked:bg-gray-800 peer-checked:border-gray-700 peer-checked:hover:bg-gray-700 peer-checked:active:bg-gray-600",
-    checkedAfter: "peer-checked:after:bg-gray-700 peer-checked:after:border-gray-600 peer-checked:after:hover:bg-gray-600 peer-checked:after:active:bg-gray-500"
-  },
-  zinc: {
-    checked: "peer-checked:bg-zinc-600 peer-checked:border-zinc-500 peer-checked:hover:bg-zinc-500 peer-checked:active:bg-zinc-400",
-    checkedAfter: "peer-checked:after:bg-zinc-500 peer-checked:after:border-zinc-400 peer-checked:after:hover:bg-zinc-400 peer-checked:after:active:bg-zinc-300"
-  },
-  neutral: {
-    checked: "peer-checked:bg-neutral-600 peer-checked:border-neutral-500 peer-checked:hover:bg-neutral-500 peer-checked:active:bg-neutral-400",
-    checkedAfter: "peer-checked:after:bg-neutral-500 peer-checked:after:border-neutral-400 peer-checked:after:hover:bg-neutral-400 peer-checked:after:active:bg-neutral-300"
-  },
-  stone: {
-    checked: "peer-checked:bg-stone-600 peer-checked:border-stone-500 peer-checked:hover:bg-stone-500 peer-checked:active:bg-stone-400",
-    checkedAfter: "peer-checked:after:bg-stone-500 peer-checked:after:border-stone-400 peer-checked:after:hover:bg-stone-400 peer-checked:after:active:bg-stone-300"
-  },
-  red: {
-    checked: "peer-checked:bg-red-600 peer-checked:border-red-500 peer-checked:hover:bg-red-500 peer-checked:active:bg-red-400",
-    checkedAfter: "peer-checked:after:bg-red-500 peer-checked:after:border-red-400 peer-checked:after:hover:bg-red-400 peer-checked:after:active:bg-red-300"
-  },
-  orange: {
-    checked: "peer-checked:bg-orange-600 peer-checked:border-orange-500 peer-checked:hover:bg-orange-500 peer-checked:active:bg-orange-400",
-    checkedAfter: "peer-checked:after:bg-orange-500 peer-checked:after:border-orange-400 peer-checked:after:hover:bg-orange-400 peer-checked:after:active:bg-orange-300"
-  },
-  amber: {
-    checked: "peer-checked:bg-amber-600 peer-checked:border-amber-500 peer-checked:hover:bg-amber-500 peer-checked:active:bg-amber-400",
-    checkedAfter: "peer-checked:after:bg-amber-500 peer-checked:after:border-amber-400 peer-checked:after:hover:bg-amber-400 peer-checked:after:active:bg-amber-300"
-  },
-  yellow: {
-    checked: "peer-checked:bg-yellow-600 peer-checked:border-yellow-500 peer-checked:hover:bg-yellow-500 peer-checked:active:bg-yellow-400",
-    checkedAfter: "peer-checked:after:bg-yellow-500 peer-checked:after:border-yellow-400 peer-checked:after:hover:bg-yellow-400 peer-checked:after:active:bg-yellow-300"
-  },
-  lime: {
-    checked: "peer-checked:bg-lime-600 peer-checked:border-lime-500 peer-checked:hover:bg-lime-500 peer-checked:active:bg-lime-400",
-    checkedAfter: "peer-checked:after:bg-lime-500 peer-checked:after:border-lime-400 peer-checked:after:hover:bg-lime-400 peer-checked:after:active:bg-lime-300"
-  },
-  green: {
-    checked: "peer-checked:bg-green-600 peer-checked:border-green-500 peer-checked:hover:bg-green-500 peer-checked:active:bg-green-400",
-    checkedAfter: "peer-checked:after:bg-green-500 peer-checked:after:border-green-400 peer-checked:after:hover:bg-green-400 peer-checked:after:active:bg-green-300"
-  },
-  emerald: {
-    checked: "peer-checked:bg-emerald-600 peer-checked:border-emerald-500 peer-checked:hover:bg-emerald-500 peer-checked:active:bg-emerald-400",
-    checkedAfter: "peer-checked:after:bg-emerald-500 peer-checked:after:border-emerald-400 peer-checked:after:hover:bg-emerald-400 peer-checked:after:active:bg-emerald-300"
-  },
-  teal: {
-    checked: "peer-checked:bg-teal-600 peer-checked:border-teal-500 peer-checked:hover:bg-teal-500 peer-checked:active:bg-teal-400",
-    checkedAfter: "peer-checked:after:bg-teal-500 peer-checked:after:border-teal-400 peer-checked:after:hover:bg-teal-400 peer-checked:after:active:bg-teal-300"
-  },
-  cyan: {
-    checked: "peer-checked:bg-cyan-600 peer-checked:border-cyan-500 peer-checked:hover:bg-cyan-500 peer-checked:active:bg-cyan-400",
-    checkedAfter: "peer-checked:after:bg-cyan-500 peer-checked:after:border-cyan-400 peer-checked:after:hover:bg-cyan-400 peer-checked:after:active:bg-cyan-300"
-  },
-  sky: {
-    checked: "peer-checked:bg-sky-600 peer-checked:border-sky-500 peer-checked:hover:bg-sky-500 peer-checked:active:bg-sky-400",
-    checkedAfter: "peer-checked:after:bg-sky-500 peer-checked:after:border-sky-400 peer-checked:after:hover:bg-sky-400 peer-checked:after:active:bg-sky-300"
-  },
-  blue: {
-    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-500 peer-checked:hover:bg-blue-500 peer-checked:active:bg-blue-400",
-    checkedAfter: "peer-checked:after:bg-blue-500 peer-checked:after:border-blue-400 peer-checked:after:hover:bg-blue-400 peer-checked:after:active:bg-blue-300"
-  },
-  indigo: {
-    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:hover:bg-indigo-500 peer-checked:active:bg-indigo-400",
-    checkedAfter: "peer-checked:after:bg-indigo-500 peer-checked:after:border-indigo-400 peer-checked:after:hover:bg-indigo-400 peer-checked:after:active:bg-indigo-300"
-  },
-  violet: {
-    checked: "peer-checked:bg-violet-600 peer-checked:border-violet-500 peer-checked:hover:bg-violet-500 peer-checked:active:bg-violet-400",
-    checkedAfter: "peer-checked:after:bg-violet-500 peer-checked:after:border-violet-400 peer-checked:after:hover:bg-violet-400 peer-checked:after:active:bg-violet-300"
-  },
-  purple: {
-    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-500 peer-checked:hover:bg-purple-500 peer-checked:active:bg-purple-400",
-    checkedAfter: "peer-checked:after:bg-purple-500 peer-checked:after:border-purple-400 peer-checked:after:hover:bg-purple-400 peer-checked:after:active:bg-purple-300"
-  },
-  fuchsia: {
-    checked: "peer-checked:bg-fuchsia-600 peer-checked:border-fuchsia-500 peer-checked:hover:bg-fuchsia-500 peer-checked:active:bg-fuchsia-400",
-    checkedAfter: "peer-checked:after:bg-fuchsia-500 peer-checked:after:border-fuchsia-400 peer-checked:after:hover:bg-fuchsia-400 peer-checked:after:active:bg-fuchsia-300"
-  },
-  pink: {
-    checked: "peer-checked:bg-pink-600 peer-checked:border-pink-500 peer-checked:hover:bg-pink-500 peer-checked:active:bg-pink-400",
-    checkedAfter: "peer-checked:after:bg-pink-500 peer-checked:after:border-pink-400 peer-checked:after:hover:bg-pink-400 peer-checked:after:active:bg-pink-300"
-  },
-  rose: {
-    checked: "peer-checked:bg-rose-600 peer-checked:border-rose-500 peer-checked:hover:bg-rose-500 peer-checked:active:bg-rose-400",
-    checkedAfter: "peer-checked:after:bg-rose-500 peer-checked:after:border-rose-400 peer-checked:after:hover:bg-rose-400 peer-checked:after:active:bg-rose-300"
-  }
-};
-const toggleOffColorClasses = {
-  slate: {
-    unchecked: "bg-slate-700 border-slate-600 hover:bg-slate-600 active:bg-slate-500",
-    uncheckedAfter: "after:bg-slate-600 after:border-slate-500 after:hover:bg-slate-500 after:active:bg-slate-400"
-  },
-  gray: {
-    unchecked: "bg-gray-700 border-gray-600 hover:bg-gray-600 active:bg-gray-500",
-    uncheckedAfter: "after:bg-gray-600 after:border-gray-500 after:hover:bg-gray-500 after:active:bg-gray-400"
-  },
-  darkgray: {
-    unchecked: "bg-gray-800 border-gray-700 hover:bg-gray-700 active:bg-gray-600",
-    uncheckedAfter: "after:bg-gray-700 after:border-gray-600 after:hover:bg-gray-600 after:active:bg-gray-500"
-  },
-  darkergray: {
-    unchecked: "bg-gray-900 border-gray-800 hover:bg-gray-800 active:bg-gray-700",
-    uncheckedAfter: "after:bg-gray-800 after:border-gray-700 after:hover:bg-gray-700 after:active:bg-gray-600"
-  },
-  zinc: {
-    unchecked: "bg-zinc-700 border-zinc-600 hover:bg-zinc-600 active:bg-zinc-500",
-    uncheckedAfter: "after:bg-zinc-600 after:border-zinc-500 after:hover:bg-zinc-500 after:active:bg-zinc-400"
-  },
-  neutral: {
-    unchecked: "bg-neutral-700 border-neutral-600 hover:bg-neutral-600 active:bg-neutral-500",
-    uncheckedAfter: "after:bg-neutral-600 after:border-neutral-500 after:hover:bg-neutral-500 after:active:bg-neutral-400"
-  },
-  stone: {
-    unchecked: "bg-stone-700 border-stone-600 hover:bg-stone-600 active:bg-stone-500",
-    uncheckedAfter: "after:bg-stone-600 after:border-stone-500 after:hover:bg-stone-500 after:active:bg-stone-400"
-  },
-  red: {
-    unchecked: "bg-red-700 border-red-600 hover:bg-red-600 active:bg-red-500",
-    uncheckedAfter: "after:bg-red-600 after:border-red-500 after:hover:bg-red-500 after:active:bg-red-400"
-  },
-  orange: {
-    unchecked: "bg-orange-700 border-orange-600 hover:bg-orange-600 active:bg-orange-500",
-    uncheckedAfter: "after:bg-orange-600 after:border-orange-500 after:hover:bg-orange-500 after:active:bg-orange-400"
-  },
-  amber: {
-    unchecked: "bg-amber-700 border-amber-600 hover:bg-amber-600 active:bg-amber-500",
-    uncheckedAfter: "after:bg-amber-600 after:border-amber-500 after:hover:bg-amber-500 after:active:bg-amber-400"
-  },
-  yellow: {
-    unchecked: "bg-yellow-700 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500",
-    uncheckedAfter: "after:bg-yellow-600 after:border-yellow-500 after:hover:bg-yellow-500 after:active:bg-yellow-400"
-  },
-  lime: {
-    unchecked: "bg-lime-700 border-lime-600 hover:bg-lime-600 active:bg-lime-500",
-    uncheckedAfter: "after:bg-lime-600 after:border-lime-500 after:hover:bg-lime-500 after:active:bg-lime-400"
-  },
-  green: {
-    unchecked: "bg-green-700 border-green-600 hover:bg-green-600 active:bg-green-500",
-    uncheckedAfter: "after:bg-green-600 after:border-green-500 after:hover:bg-green-500 after:active:bg-green-400"
-  },
-  emerald: {
-    unchecked: "bg-emerald-700 border-emerald-600 hover:bg-emerald-600 active:bg-emerald-500",
-    uncheckedAfter: "after:bg-emerald-600 after:border-emerald-500 after:hover:bg-emerald-500 after:active:bg-emerald-400"
-  },
-  teal: {
-    unchecked: "bg-teal-700 border-teal-600 hover:bg-teal-600 active:bg-teal-500",
-    uncheckedAfter: "after:bg-teal-600 after:border-teal-500 after:hover:bg-teal-500 after:active:bg-teal-400"
-  },
-  cyan: {
-    unchecked: "bg-cyan-700 border-cyan-600 hover:bg-cyan-600 active:bg-cyan-500",
-    uncheckedAfter: "after:bg-cyan-600 after:border-cyan-500 after:hover:bg-cyan-500 after:active:bg-cyan-400"
-  },
-  sky: {
-    unchecked: "bg-sky-700 border-sky-600 hover:bg-sky-600 active:bg-sky-500",
-    uncheckedAfter: "after:bg-sky-600 after:border-sky-500 after:hover:bg-sky-500 after:active:bg-sky-400"
-  },
-  blue: {
-    unchecked: "bg-blue-700 border-blue-600 hover:bg-blue-600 active:bg-blue-500",
-    uncheckedAfter: "after:bg-blue-600 after:border-blue-500 after:hover:bg-blue-500 after:active:bg-blue-400"
-  },
-  indigo: {
-    unchecked: "bg-indigo-700 border-indigo-600 hover:bg-indigo-600 active:bg-indigo-500",
-    uncheckedAfter: "after:bg-indigo-600 after:border-indigo-500 after:hover:bg-indigo-500 after:active:bg-indigo-400"
-  },
-  violet: {
-    unchecked: "bg-violet-700 border-violet-600 hover:bg-violet-600 active:bg-violet-500",
-    uncheckedAfter: "after:bg-violet-600 after:border-violet-500 after:hover:bg-violet-500 after:active:bg-violet-400"
-  },
-  purple: {
-    unchecked: "bg-purple-700 border-purple-600 hover:bg-purple-600 active:bg-purple-500",
-    uncheckedAfter: "after:bg-purple-600 after:border-purple-500 after:hover:bg-purple-500 after:active:bg-purple-400"
-  },
-  fuchsia: {
-    unchecked: "bg-fuchsia-700 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500",
-    uncheckedAfter: "after:bg-fuchsia-600 after:border-fuchsia-500 after:hover:bg-fuchsia-500 after:active:bg-fuchsia-400"
-  },
-  pink: {
-    unchecked: "bg-pink-700 border-pink-600 hover:bg-pink-600 active:bg-pink-500",
-    uncheckedAfter: "after:bg-pink-600 after:border-pink-500 after:hover:bg-pink-500 after:active:bg-pink-400"
-  },
-  rose: {
-    unchecked: "bg-rose-700 border-rose-600 hover:bg-rose-600 active:bg-rose-500",
-    uncheckedAfter: "after:bg-rose-600 after:border-rose-500 after:hover:bg-rose-500 after:active:bg-rose-400"
-  }
-};
-const Toggle = qwik.component$(({ checkbox, round, center, label, onColor = "blue", offColor = "darkgray", ...props }) => {
+const Toggle = qwik.component$(({ checkbox, round, label, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: {
-      "flex touch-manipulation items-center gap-3": true,
-      "justify-center": center
+      "flex touch-manipulation items-center gap-3": true
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("label", {
@@ -1207,22 +1009,19 @@ const Toggle = qwik.component$(({ checkbox, round, center, label, onColor = "blu
             type: "checkbox",
             ...props,
             class: {
-              "peer sr-only": true,
-              ...props.class
+              "peer sr-only": true
             }
           }),
           /* @__PURE__ */ jsxRuntime.jsx("div", {
             class: {
-              "peer h-7 border duration-300 ease-out hover:shadow-lg hover:duration-75 motion-safe:transition": true,
+              "peer h-7 duration-300 ease-out 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,
-              [toggleOnColorClasses[onColor].checked]: true,
-              [toggleOnColorClasses[onColor].checkedAfter]: true,
-              [toggleOffColorClasses[offColor].unchecked]: true,
-              [toggleOffColorClasses[offColor].uncheckedAfter]: true
+              "lum-toggle-bg-gray-800 peer-checked:lum-toggle-bg-blue-500": true,
+              [props.class ?? ""]: !!props.class
             }
           })
         ]
@@ -1235,6 +1034,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", {
@@ -1684,6 +1493,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;
@@ -1702,5 +1512,3 @@ exports.SelectMenu = SelectMenu;
 exports.SelectMenuRaw = SelectMenuRaw;
 exports.Toggle = Toggle;
 exports.blobColorClasses = blobColorClasses;
-exports.toggleOffColorClasses = toggleOffColorClasses;
-exports.toggleOnColorClasses = toggleOnColorClasses;

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"
                 },
@@ -586,7 +585,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
             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,
@@ -599,7 +598,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
           }),
           /* @__PURE__ */ jsx("button", {
             type: "button",
-            class: "lum-btn h-[1.6rem] w-[1.6rem] p-0.5",
+            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);
@@ -740,14 +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 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;
@@ -813,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"
@@ -837,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,13 +944,13 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
   `);
   return /* @__PURE__ */ jsxs("div", {
     class: {
-      "flex touch-manipulation gap-2 text-gray-50": true
+      "flex touch-manipulation gap-1 text-gray-50": true
     },
     children: [
       /* @__PURE__ */ jsx("button", {
         type: "button",
         class: {
-          "lum-btn p-2": true
+          "lum-btn p-2 rounded-r-sm": true
         },
         "data-action": "decrement",
         "aria-label": "Decrement",
@@ -962,7 +961,7 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
           await onDecrement$(event, element, siblingInput);
         }) : onDecrement$,
         children: /* @__PURE__ */ jsx(Minus, {
-          size: 24
+          size: 20
         })
       }),
       input && /* @__PURE__ */ jsx("input", {
@@ -971,14 +970,14 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
         value,
         step,
         class: {
-          "lum-input text-center": true,
+          "lum-input text-center rounded-sm lum-input-p-1": true,
           ...props.class
         }
       }),
       /* @__PURE__ */ jsx("button", {
         type: "button",
         class: {
-          "lum-btn p-2": true
+          "lum-btn p-2 rounded-l-sm": true
         },
         "data-action": "increment",
         "aria-label": "Increment",
@@ -989,213 +988,16 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
           await onIncrement$(event, element, siblingInput);
         }) : onIncrement$,
         children: /* @__PURE__ */ jsx(Plus, {
-          size: 24
+          size: 20
         })
       })
     ]
   });
 });
-const toggleOnColorClasses = {
-  slate: {
-    checked: "peer-checked:bg-slate-600 peer-checked:border-slate-500 peer-checked:hover:bg-slate-500 peer-checked:active:bg-slate-400",
-    checkedAfter: "peer-checked:after:bg-slate-500 peer-checked:after:border-slate-400 peer-checked:after:hover:bg-slate-400 peer-checked:after:active:bg-slate-300"
-  },
-  gray: {
-    checked: "peer-checked:bg-gray-600 peer-checked:border-gray-500 peer-checked:hover:bg-gray-500 peer-checked:active:bg-gray-400",
-    checkedAfter: "peer-checked:after:bg-gray-500 peer-checked:after:border-gray-400 peer-checked:after:hover:bg-gray-400 peer-checked:after:active:bg-gray-300"
-  },
-  darkgray: {
-    checked: "peer-checked:bg-gray-700 peer-checked:border-gray-600 peer-checked:hover:bg-gray-600 peer-checked:active:bg-gray-500",
-    checkedAfter: "peer-checked:after:bg-gray-600 peer-checked:after:border-gray-500 peer-checked:after:hover:bg-gray-500 peer-checked:after:active:bg-gray-400"
-  },
-  darkergray: {
-    checked: "peer-checked:bg-gray-800 peer-checked:border-gray-700 peer-checked:hover:bg-gray-700 peer-checked:active:bg-gray-600",
-    checkedAfter: "peer-checked:after:bg-gray-700 peer-checked:after:border-gray-600 peer-checked:after:hover:bg-gray-600 peer-checked:after:active:bg-gray-500"
-  },
-  zinc: {
-    checked: "peer-checked:bg-zinc-600 peer-checked:border-zinc-500 peer-checked:hover:bg-zinc-500 peer-checked:active:bg-zinc-400",
-    checkedAfter: "peer-checked:after:bg-zinc-500 peer-checked:after:border-zinc-400 peer-checked:after:hover:bg-zinc-400 peer-checked:after:active:bg-zinc-300"
-  },
-  neutral: {
-    checked: "peer-checked:bg-neutral-600 peer-checked:border-neutral-500 peer-checked:hover:bg-neutral-500 peer-checked:active:bg-neutral-400",
-    checkedAfter: "peer-checked:after:bg-neutral-500 peer-checked:after:border-neutral-400 peer-checked:after:hover:bg-neutral-400 peer-checked:after:active:bg-neutral-300"
-  },
-  stone: {
-    checked: "peer-checked:bg-stone-600 peer-checked:border-stone-500 peer-checked:hover:bg-stone-500 peer-checked:active:bg-stone-400",
-    checkedAfter: "peer-checked:after:bg-stone-500 peer-checked:after:border-stone-400 peer-checked:after:hover:bg-stone-400 peer-checked:after:active:bg-stone-300"
-  },
-  red: {
-    checked: "peer-checked:bg-red-600 peer-checked:border-red-500 peer-checked:hover:bg-red-500 peer-checked:active:bg-red-400",
-    checkedAfter: "peer-checked:after:bg-red-500 peer-checked:after:border-red-400 peer-checked:after:hover:bg-red-400 peer-checked:after:active:bg-red-300"
-  },
-  orange: {
-    checked: "peer-checked:bg-orange-600 peer-checked:border-orange-500 peer-checked:hover:bg-orange-500 peer-checked:active:bg-orange-400",
-    checkedAfter: "peer-checked:after:bg-orange-500 peer-checked:after:border-orange-400 peer-checked:after:hover:bg-orange-400 peer-checked:after:active:bg-orange-300"
-  },
-  amber: {
-    checked: "peer-checked:bg-amber-600 peer-checked:border-amber-500 peer-checked:hover:bg-amber-500 peer-checked:active:bg-amber-400",
-    checkedAfter: "peer-checked:after:bg-amber-500 peer-checked:after:border-amber-400 peer-checked:after:hover:bg-amber-400 peer-checked:after:active:bg-amber-300"
-  },
-  yellow: {
-    checked: "peer-checked:bg-yellow-600 peer-checked:border-yellow-500 peer-checked:hover:bg-yellow-500 peer-checked:active:bg-yellow-400",
-    checkedAfter: "peer-checked:after:bg-yellow-500 peer-checked:after:border-yellow-400 peer-checked:after:hover:bg-yellow-400 peer-checked:after:active:bg-yellow-300"
-  },
-  lime: {
-    checked: "peer-checked:bg-lime-600 peer-checked:border-lime-500 peer-checked:hover:bg-lime-500 peer-checked:active:bg-lime-400",
-    checkedAfter: "peer-checked:after:bg-lime-500 peer-checked:after:border-lime-400 peer-checked:after:hover:bg-lime-400 peer-checked:after:active:bg-lime-300"
-  },
-  green: {
-    checked: "peer-checked:bg-green-600 peer-checked:border-green-500 peer-checked:hover:bg-green-500 peer-checked:active:bg-green-400",
-    checkedAfter: "peer-checked:after:bg-green-500 peer-checked:after:border-green-400 peer-checked:after:hover:bg-green-400 peer-checked:after:active:bg-green-300"
-  },
-  emerald: {
-    checked: "peer-checked:bg-emerald-600 peer-checked:border-emerald-500 peer-checked:hover:bg-emerald-500 peer-checked:active:bg-emerald-400",
-    checkedAfter: "peer-checked:after:bg-emerald-500 peer-checked:after:border-emerald-400 peer-checked:after:hover:bg-emerald-400 peer-checked:after:active:bg-emerald-300"
-  },
-  teal: {
-    checked: "peer-checked:bg-teal-600 peer-checked:border-teal-500 peer-checked:hover:bg-teal-500 peer-checked:active:bg-teal-400",
-    checkedAfter: "peer-checked:after:bg-teal-500 peer-checked:after:border-teal-400 peer-checked:after:hover:bg-teal-400 peer-checked:after:active:bg-teal-300"
-  },
-  cyan: {
-    checked: "peer-checked:bg-cyan-600 peer-checked:border-cyan-500 peer-checked:hover:bg-cyan-500 peer-checked:active:bg-cyan-400",
-    checkedAfter: "peer-checked:after:bg-cyan-500 peer-checked:after:border-cyan-400 peer-checked:after:hover:bg-cyan-400 peer-checked:after:active:bg-cyan-300"
-  },
-  sky: {
-    checked: "peer-checked:bg-sky-600 peer-checked:border-sky-500 peer-checked:hover:bg-sky-500 peer-checked:active:bg-sky-400",
-    checkedAfter: "peer-checked:after:bg-sky-500 peer-checked:after:border-sky-400 peer-checked:after:hover:bg-sky-400 peer-checked:after:active:bg-sky-300"
-  },
-  blue: {
-    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-500 peer-checked:hover:bg-blue-500 peer-checked:active:bg-blue-400",
-    checkedAfter: "peer-checked:after:bg-blue-500 peer-checked:after:border-blue-400 peer-checked:after:hover:bg-blue-400 peer-checked:after:active:bg-blue-300"
-  },
-  indigo: {
-    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:hover:bg-indigo-500 peer-checked:active:bg-indigo-400",
-    checkedAfter: "peer-checked:after:bg-indigo-500 peer-checked:after:border-indigo-400 peer-checked:after:hover:bg-indigo-400 peer-checked:after:active:bg-indigo-300"
-  },
-  violet: {
-    checked: "peer-checked:bg-violet-600 peer-checked:border-violet-500 peer-checked:hover:bg-violet-500 peer-checked:active:bg-violet-400",
-    checkedAfter: "peer-checked:after:bg-violet-500 peer-checked:after:border-violet-400 peer-checked:after:hover:bg-violet-400 peer-checked:after:active:bg-violet-300"
-  },
-  purple: {
-    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-500 peer-checked:hover:bg-purple-500 peer-checked:active:bg-purple-400",
-    checkedAfter: "peer-checked:after:bg-purple-500 peer-checked:after:border-purple-400 peer-checked:after:hover:bg-purple-400 peer-checked:after:active:bg-purple-300"
-  },
-  fuchsia: {
-    checked: "peer-checked:bg-fuchsia-600 peer-checked:border-fuchsia-500 peer-checked:hover:bg-fuchsia-500 peer-checked:active:bg-fuchsia-400",
-    checkedAfter: "peer-checked:after:bg-fuchsia-500 peer-checked:after:border-fuchsia-400 peer-checked:after:hover:bg-fuchsia-400 peer-checked:after:active:bg-fuchsia-300"
-  },
-  pink: {
-    checked: "peer-checked:bg-pink-600 peer-checked:border-pink-500 peer-checked:hover:bg-pink-500 peer-checked:active:bg-pink-400",
-    checkedAfter: "peer-checked:after:bg-pink-500 peer-checked:after:border-pink-400 peer-checked:after:hover:bg-pink-400 peer-checked:after:active:bg-pink-300"
-  },
-  rose: {
-    checked: "peer-checked:bg-rose-600 peer-checked:border-rose-500 peer-checked:hover:bg-rose-500 peer-checked:active:bg-rose-400",
-    checkedAfter: "peer-checked:after:bg-rose-500 peer-checked:after:border-rose-400 peer-checked:after:hover:bg-rose-400 peer-checked:after:active:bg-rose-300"
-  }
-};
-const toggleOffColorClasses = {
-  slate: {
-    unchecked: "bg-slate-700 border-slate-600 hover:bg-slate-600 active:bg-slate-500",
-    uncheckedAfter: "after:bg-slate-600 after:border-slate-500 after:hover:bg-slate-500 after:active:bg-slate-400"
-  },
-  gray: {
-    unchecked: "bg-gray-700 border-gray-600 hover:bg-gray-600 active:bg-gray-500",
-    uncheckedAfter: "after:bg-gray-600 after:border-gray-500 after:hover:bg-gray-500 after:active:bg-gray-400"
-  },
-  darkgray: {
-    unchecked: "bg-gray-800 border-gray-700 hover:bg-gray-700 active:bg-gray-600",
-    uncheckedAfter: "after:bg-gray-700 after:border-gray-600 after:hover:bg-gray-600 after:active:bg-gray-500"
-  },
-  darkergray: {
-    unchecked: "bg-gray-900 border-gray-800 hover:bg-gray-800 active:bg-gray-700",
-    uncheckedAfter: "after:bg-gray-800 after:border-gray-700 after:hover:bg-gray-700 after:active:bg-gray-600"
-  },
-  zinc: {
-    unchecked: "bg-zinc-700 border-zinc-600 hover:bg-zinc-600 active:bg-zinc-500",
-    uncheckedAfter: "after:bg-zinc-600 after:border-zinc-500 after:hover:bg-zinc-500 after:active:bg-zinc-400"
-  },
-  neutral: {
-    unchecked: "bg-neutral-700 border-neutral-600 hover:bg-neutral-600 active:bg-neutral-500",
-    uncheckedAfter: "after:bg-neutral-600 after:border-neutral-500 after:hover:bg-neutral-500 after:active:bg-neutral-400"
-  },
-  stone: {
-    unchecked: "bg-stone-700 border-stone-600 hover:bg-stone-600 active:bg-stone-500",
-    uncheckedAfter: "after:bg-stone-600 after:border-stone-500 after:hover:bg-stone-500 after:active:bg-stone-400"
-  },
-  red: {
-    unchecked: "bg-red-700 border-red-600 hover:bg-red-600 active:bg-red-500",
-    uncheckedAfter: "after:bg-red-600 after:border-red-500 after:hover:bg-red-500 after:active:bg-red-400"
-  },
-  orange: {
-    unchecked: "bg-orange-700 border-orange-600 hover:bg-orange-600 active:bg-orange-500",
-    uncheckedAfter: "after:bg-orange-600 after:border-orange-500 after:hover:bg-orange-500 after:active:bg-orange-400"
-  },
-  amber: {
-    unchecked: "bg-amber-700 border-amber-600 hover:bg-amber-600 active:bg-amber-500",
-    uncheckedAfter: "after:bg-amber-600 after:border-amber-500 after:hover:bg-amber-500 after:active:bg-amber-400"
-  },
-  yellow: {
-    unchecked: "bg-yellow-700 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500",
-    uncheckedAfter: "after:bg-yellow-600 after:border-yellow-500 after:hover:bg-yellow-500 after:active:bg-yellow-400"
-  },
-  lime: {
-    unchecked: "bg-lime-700 border-lime-600 hover:bg-lime-600 active:bg-lime-500",
-    uncheckedAfter: "after:bg-lime-600 after:border-lime-500 after:hover:bg-lime-500 after:active:bg-lime-400"
-  },
-  green: {
-    unchecked: "bg-green-700 border-green-600 hover:bg-green-600 active:bg-green-500",
-    uncheckedAfter: "after:bg-green-600 after:border-green-500 after:hover:bg-green-500 after:active:bg-green-400"
-  },
-  emerald: {
-    unchecked: "bg-emerald-700 border-emerald-600 hover:bg-emerald-600 active:bg-emerald-500",
-    uncheckedAfter: "after:bg-emerald-600 after:border-emerald-500 after:hover:bg-emerald-500 after:active:bg-emerald-400"
-  },
-  teal: {
-    unchecked: "bg-teal-700 border-teal-600 hover:bg-teal-600 active:bg-teal-500",
-    uncheckedAfter: "after:bg-teal-600 after:border-teal-500 after:hover:bg-teal-500 after:active:bg-teal-400"
-  },
-  cyan: {
-    unchecked: "bg-cyan-700 border-cyan-600 hover:bg-cyan-600 active:bg-cyan-500",
-    uncheckedAfter: "after:bg-cyan-600 after:border-cyan-500 after:hover:bg-cyan-500 after:active:bg-cyan-400"
-  },
-  sky: {
-    unchecked: "bg-sky-700 border-sky-600 hover:bg-sky-600 active:bg-sky-500",
-    uncheckedAfter: "after:bg-sky-600 after:border-sky-500 after:hover:bg-sky-500 after:active:bg-sky-400"
-  },
-  blue: {
-    unchecked: "bg-blue-700 border-blue-600 hover:bg-blue-600 active:bg-blue-500",
-    uncheckedAfter: "after:bg-blue-600 after:border-blue-500 after:hover:bg-blue-500 after:active:bg-blue-400"
-  },
-  indigo: {
-    unchecked: "bg-indigo-700 border-indigo-600 hover:bg-indigo-600 active:bg-indigo-500",
-    uncheckedAfter: "after:bg-indigo-600 after:border-indigo-500 after:hover:bg-indigo-500 after:active:bg-indigo-400"
-  },
-  violet: {
-    unchecked: "bg-violet-700 border-violet-600 hover:bg-violet-600 active:bg-violet-500",
-    uncheckedAfter: "after:bg-violet-600 after:border-violet-500 after:hover:bg-violet-500 after:active:bg-violet-400"
-  },
-  purple: {
-    unchecked: "bg-purple-700 border-purple-600 hover:bg-purple-600 active:bg-purple-500",
-    uncheckedAfter: "after:bg-purple-600 after:border-purple-500 after:hover:bg-purple-500 after:active:bg-purple-400"
-  },
-  fuchsia: {
-    unchecked: "bg-fuchsia-700 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500",
-    uncheckedAfter: "after:bg-fuchsia-600 after:border-fuchsia-500 after:hover:bg-fuchsia-500 after:active:bg-fuchsia-400"
-  },
-  pink: {
-    unchecked: "bg-pink-700 border-pink-600 hover:bg-pink-600 active:bg-pink-500",
-    uncheckedAfter: "after:bg-pink-600 after:border-pink-500 after:hover:bg-pink-500 after:active:bg-pink-400"
-  },
-  rose: {
-    unchecked: "bg-rose-700 border-rose-600 hover:bg-rose-600 active:bg-rose-500",
-    uncheckedAfter: "after:bg-rose-600 after:border-rose-500 after:hover:bg-rose-500 after:active:bg-rose-400"
-  }
-};
-const Toggle = component$(({ checkbox, round, center, label, onColor = "blue", offColor = "darkgray", ...props }) => {
+const Toggle = component$(({ checkbox, round, label, ...props }) => {
   return /* @__PURE__ */ jsxs("div", {
     class: {
-      "flex touch-manipulation items-center gap-3": true,
-      "justify-center": center
+      "flex touch-manipulation items-center gap-3": true
     },
     children: [
       /* @__PURE__ */ jsxs("label", {
@@ -1205,22 +1007,19 @@ const Toggle = component$(({ checkbox, round, center, label, onColor = "blue", o
             type: "checkbox",
             ...props,
             class: {
-              "peer sr-only": true,
-              ...props.class
+              "peer sr-only": true
             }
           }),
           /* @__PURE__ */ jsx("div", {
             class: {
-              "peer h-7 border duration-300 ease-out hover:shadow-lg hover:duration-75 motion-safe:transition": true,
+              "peer h-7 duration-300 ease-out 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,
-              [toggleOnColorClasses[onColor].checked]: true,
-              [toggleOnColorClasses[onColor].checkedAfter]: true,
-              [toggleOffColorClasses[offColor].unchecked]: true,
-              [toggleOffColorClasses[offColor].uncheckedAfter]: true
+              "lum-toggle-bg-gray-800 peer-checked:lum-toggle-bg-blue-500": true,
+              [props.class ?? ""]: !!props.class
             }
           })
         ]
@@ -1233,6 +1032,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", {
@@ -1683,6 +1492,7 @@ export {
   Blobs,
   ColorPicker,
   Dropdown,
+  Hoverable,
   LogoBirdflop,
   LogoDiscord,
   LogoFabric,
@@ -1700,7 +1510,5 @@ export {
   SelectMenu,
   SelectMenuRaw,
   Toggle,
-  blobColorClasses,
-  toggleOffColorClasses,
-  toggleOnColorClasses
+  blobColorClasses
 };

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

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

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

@@ -2,211 +2,10 @@ import type { JSXOutput, PropsOf } from '@builder.io/qwik';
 interface ToggleProps extends Omit<PropsOf<'input'> & {
     type: 'checkbox';
 }, 'class' | 'bind:checked' | 'type' | 'children'> {
-    class?: {
-        [key: string]: boolean;
-    };
+    class?: string;
     checkbox?: boolean;
     round?: boolean;
-    onColor?: keyof typeof toggleOnColorClasses;
-    offColor?: keyof typeof toggleOffColorClasses;
-    center?: boolean;
     label?: string | JSXOutput;
 }
-export declare const toggleOnColorClasses: {
-    slate: {
-        checked: string;
-        checkedAfter: string;
-    };
-    gray: {
-        checked: string;
-        checkedAfter: string;
-    };
-    darkgray: {
-        checked: string;
-        checkedAfter: string;
-    };
-    darkergray: {
-        checked: string;
-        checkedAfter: string;
-    };
-    zinc: {
-        checked: string;
-        checkedAfter: string;
-    };
-    neutral: {
-        checked: string;
-        checkedAfter: string;
-    };
-    stone: {
-        checked: string;
-        checkedAfter: string;
-    };
-    red: {
-        checked: string;
-        checkedAfter: string;
-    };
-    orange: {
-        checked: string;
-        checkedAfter: string;
-    };
-    amber: {
-        checked: string;
-        checkedAfter: string;
-    };
-    yellow: {
-        checked: string;
-        checkedAfter: string;
-    };
-    lime: {
-        checked: string;
-        checkedAfter: string;
-    };
-    green: {
-        checked: string;
-        checkedAfter: string;
-    };
-    emerald: {
-        checked: string;
-        checkedAfter: string;
-    };
-    teal: {
-        checked: string;
-        checkedAfter: string;
-    };
-    cyan: {
-        checked: string;
-        checkedAfter: string;
-    };
-    sky: {
-        checked: string;
-        checkedAfter: string;
-    };
-    blue: {
-        checked: string;
-        checkedAfter: string;
-    };
-    indigo: {
-        checked: string;
-        checkedAfter: string;
-    };
-    violet: {
-        checked: string;
-        checkedAfter: string;
-    };
-    purple: {
-        checked: string;
-        checkedAfter: string;
-    };
-    fuchsia: {
-        checked: string;
-        checkedAfter: string;
-    };
-    pink: {
-        checked: string;
-        checkedAfter: string;
-    };
-    rose: {
-        checked: string;
-        checkedAfter: string;
-    };
-};
-export declare const toggleOffColorClasses: {
-    slate: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    gray: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    darkgray: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    darkergray: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    zinc: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    neutral: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    stone: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    red: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    orange: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    amber: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    yellow: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    lime: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    green: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    emerald: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    teal: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    cyan: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    sky: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    blue: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    indigo: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    violet: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    purple: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    fuchsia: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    pink: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-    rose: {
-        unchecked: string;
-        uncheckedAfter: string;
-    };
-};
 export declare const Toggle: import("@builder.io/qwik").Component<ToggleProps>;
 export {};

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.4",
+  "version": "4.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.4"
+    "@luminescent/ui": "4.0.0"
   },
   "scripts": {
     "build": "qwik build",