@luminescent/ui-qwik 6.8.3-2 → 7.0.0-0

package/lib/components/elements/ColorPicker.qwik.mjs

@@ -1,314 +1,296 @@
-import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, useStore, $ } from "@qwik.dev/core";
-import { rgbToHsv, hexToRgba, rgbToHex, hsvToRgb, getMousePosition, clamp, getBrightness } from "../../utils/color.qwik.mjs";
+import { getClassObject } from "../functions.qwik.mjs";
+import { clamp, getBrightness, getMousePosition, hexToRgba, hsvToRgb, rgbToHex, rgbToHsv } from "../../utils/color.qwik.mjs";
 import { Shuffle } from "../../svg/Shuffle.qwik.mjs";
-const ColorPicker = component$(({ id, value = "#000000", colors = [
-  "#FAEDCB",
-  "#C9E4DE",
-  "#C6DEF1",
-  "#DBCDF0",
-  "#F2C6DE",
-  "#FCD05C",
-  "#5FE2C5",
-  "#4498DB",
-  "#9863E7",
-  "#E43A96",
-  "#000000",
-  "#555555",
-  "#AAAAAA",
-  "#FFFFFF"
-], onInput$, preview = "left", horizontal, showInput = true, opacity, ...props }) => {
-  const height = 150;
-  const width = height - 25;
-  const maxHue = height - 2;
-  const hsvColor = rgbToHsv(hexToRgba(value));
-  const store = useStore({
-    hue: {
-      position: hsvColor.h * maxHue,
-      color: rgbToHex(hsvToRgb({
-        h: hsvColor.h,
-        s: 1,
-        v: 1
-      }))
-    },
-    opacity: {
-      position: hsvColor.a !== void 0 ? (1 - hsvColor.a) * maxHue : 0
-    },
-    bPosition: (1 - hsvColor.v) * maxHue,
-    sPosition: hsvColor.s * width,
-    value
-  });
-  const setColor = $(async (color) => {
-    if (!/^#[0-9a-f]{0,8}$/i.test(color)) return;
-    const hsv = rgbToHsv(hexToRgba(color));
-    store.hue.position = hsv.h * maxHue;
-    store.hue.color = rgbToHex(hsvToRgb({
-      h: hsv.h,
-      s: 1,
-      v: 1,
-      a: hsv.a
-    }));
-    store.sPosition = hsv.s * width;
-    store.bPosition = (1 - hsv.v) * maxHue;
-    store.value = color;
-    await onInput$?.(store.value);
-  });
-  const hueChange = $(async (e, hOffset) => {
-    const { y } = getMousePosition(e);
-    store.hue.position = clamp(maxHue - (y - hOffset), 0, maxHue);
-    const hsvColor2 = rgbToHsv(hexToRgba(store.value));
-    const h = store.hue.position / maxHue;
-    hsvColor2.h = h;
-    store.hue.color = rgbToHex(hsvToRgb({
-      h,
-      s: 1,
-      v: 1,
-      a: hsvColor2.a
-    }));
-    store.value = rgbToHex(hsvToRgb(hsvColor2));
-    await onInput$?.(store.value);
-  });
-  const hueMouseDown = $(async (e, el) => {
-    const hOffset = el.getBoundingClientRect().top;
-    await hueChange(e, hOffset);
-    const eventListener = (e2) => void hueChange(e2, hOffset);
-    window.addEventListener("mousemove", eventListener);
-    window.addEventListener("touchmove", eventListener);
-    const mouseUpListener = () => {
-      window.removeEventListener("mousemove", eventListener);
-      window.removeEventListener("touchmove", eventListener);
-      window.removeEventListener("mouseup", mouseUpListener);
-      window.removeEventListener("touchend", mouseUpListener);
-    };
-    window.addEventListener("mouseup", mouseUpListener);
-    window.addEventListener("touchend", mouseUpListener);
-  });
-  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);
-    const s = store.sPosition / width;
-    const v = 1 - store.bPosition / maxHue;
-    store.value = rgbToHex(hsvToRgb({
-      h: store.hue.position / maxHue,
-      s,
-      v,
-      a: store.opacity.position !== void 0 ? 1 - store.opacity.position / maxHue : 1
-    }));
-    await onInput$?.(store.value);
-  });
-  const sbMouseDown = $(async (e, el) => {
-    const offset = el.getBoundingClientRect();
-    await sbChange(e, offset);
-    const eventListener = (e2) => void sbChange(e2, offset);
-    window.addEventListener("mousemove", eventListener);
-    window.addEventListener("touchmove", eventListener);
-    const mouseUpListener = () => {
-      window.removeEventListener("mousemove", eventListener);
-      window.removeEventListener("touchmove", eventListener);
-      window.removeEventListener("mouseup", mouseUpListener);
-      window.removeEventListener("touchend", mouseUpListener);
-    };
-    window.addEventListener("mouseup", mouseUpListener);
-    window.addEventListener("touchend", mouseUpListener);
-  });
-  const opacityChange = $(async (e, hOffset) => {
-    const { x } = getMousePosition(e);
-    store.opacity.position = clamp(x - hOffset.left, 0, maxHue);
-    const a = 1 - store.opacity.position / maxHue;
-    const hsvColor2 = rgbToHsv(hexToRgba(store.value));
-    hsvColor2.a = a;
-    store.value = rgbToHex(hsvToRgb(hsvColor2));
-    await onInput$?.(store.value);
-  });
-  const opacityMouseDown = $(async (e, el) => {
-    const offset = el.getBoundingClientRect();
-    await opacityChange(e, offset);
-    const eventListener = (e2) => void opacityChange(e2, offset);
-    window.addEventListener("mousemove", eventListener);
-    window.addEventListener("touchmove", eventListener);
-    const mouseUpListener = () => {
-      window.removeEventListener("mousemove", eventListener);
-      window.removeEventListener("touchmove", eventListener);
-      window.removeEventListener("mouseup", mouseUpListener);
-      window.removeEventListener("touchend", mouseUpListener);
-    };
-    window.addEventListener("mouseup", mouseUpListener);
-    window.addEventListener("touchend", mouseUpListener);
-  });
-  return /* @__PURE__ */ jsxs("div", {
-    class: {
-      "lum-card touch-none p-4": true,
-      "flex-col": !horizontal,
-      ...props.class
-    },
-    id,
-    onInput$: async (e, el) => {
-      if (!el.dataset.value) return;
-      await setColor(el.dataset.value);
-    },
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        class: "flex gap-4",
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            class: "relative h-37.5 w-31.25 rounded-md",
-            style: {
-              background: `linear-gradient(to right, #FFFFFF, ${store.hue.color})`
-            },
-            onMouseDown$: sbMouseDown,
-            onTouchStart$: sbMouseDown,
-            "preventdefault:mousedown": true,
-            "preventdefault:touchstart": true,
-            children: [
-              /* @__PURE__ */ jsx("div", {
-                class: "h-37.5 w-31.25 rounded-md border border-gray-700 bg-linear-to-b from-transparent to-black"
-              }),
-              /* @__PURE__ */ jsx("div", {
-                class: {
-                  "absolute -top-2 -left-2 h-4 w-4 rounded-md border lum-bg drop-shadow-lg": true
-                },
-                style: {
-                  "--bg-color": store.value,
-                  transform: `translate(${store.sPosition}px, ${store.bPosition}px)`
-                }
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx("div", {
-            class: "relative h-37.5 w-2 rounded-md border border-gray-700",
-            style: {
-              background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
-            },
-            onMouseDown$: hueMouseDown,
-            onTouchStart$: hueMouseDown,
-            "preventdefault:mousedown": true,
-            "preventdefault:touchstart": true,
-            children: /* @__PURE__ */ jsx("div", {
-              class: "absolute -bottom-2 -left-1.25 h-4 w-4 rounded-md lum-bg! bg-[#ff0000] ",
-              style: {
-                transform: `translateY(${-store.hue.position}px)`,
-                "--bg-color": store.hue.color
-              }
-            })
-          })
-        ]
-      }),
-      opacity && /* @__PURE__ */ jsxs("div", {
-        class: "relative h-2 w-full rounded-md",
-        onMouseDown$: opacityMouseDown,
-        onTouchStart$: opacityMouseDown,
-        "preventdefault:mousedown": true,
-        "preventdefault:touchstart": true,
-        style: {
-          backgroundColor: "white",
-          backgroundImage: `
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useStore } from "@qwik.dev/core";
+//#region src/components/elements/ColorPicker.tsx
+var _hf0 = (p0) => ({ background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})` });
+var _hf1 = (p0) => ({
+	"--bg-color": p0.value,
+	transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
+});
+var _hf2 = (p0) => ({
+	transform: `translateY(${-p0.hue.position}px)`,
+	"--bg-color": p0.hue.color
+});
+var _hf3 = (p0) => ({ background: `linear-gradient(to right, ${p0.value}, transparent)` });
+var _hf4 = (p0) => ({ backgroundColor: `${p0.value}` });
+var _hf5 = (p0, p1) => ({
+	"lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0 lum-bg hover:brightness-150": true,
+	"border-lum-accent": p0 === p1.value
+});
+var ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(({ id, class: Class, value = "#000000", colors = [
+	"#FAEDCB",
+	"#C9E4DE",
+	"#C6DEF1",
+	"#DBCDF0",
+	"#F2C6DE",
+	"#FCD05C",
+	"#5FE2C5",
+	"#4498DB",
+	"#9863E7",
+	"#E43A96",
+	"#000000",
+	"#555555",
+	"#AAAAAA",
+	"#FFFFFF"
+], onInput$, preview = "left", horizontal, showInput = true, opacity }) => {
+	const height = 150;
+	const width = height - 25;
+	const maxHue = height - 2;
+	const hsvColor = rgbToHsv(hexToRgba(value));
+	const store = useStore({
+		hue: {
+			position: hsvColor.h * maxHue,
+			color: rgbToHex(hsvToRgb({
+				h: hsvColor.h,
+				s: 1,
+				v: 1
+			}))
+		},
+		opacity: { position: hsvColor.a !== void 0 ? (1 - hsvColor.a) * maxHue : 0 },
+		bPosition: (1 - hsvColor.v) * maxHue,
+		sPosition: hsvColor.s * width,
+		value
+	});
+	const setColor = /* @__PURE__ */ inlinedQrl(async (color) => {
+		const maxHue = _captures[0], onInput$ = _captures[1], store = _captures[2], width = _captures[3];
+		if (!/^#[0-9a-f]{0,8}$/i.test(color)) return;
+		const hsv = rgbToHsv(hexToRgba(color));
+		store.hue.position = hsv.h * maxHue;
+		store.hue.color = rgbToHex(hsvToRgb({
+			h: hsv.h,
+			s: 1,
+			v: 1,
+			a: hsv.a
+		}));
+		store.sPosition = hsv.s * width;
+		store.bPosition = (1 - hsv.v) * maxHue;
+		store.value = color;
+		await onInput$?.(store.value);
+	}, "ColorPicker_component_setColor_m9tT2MF9iI8", [
+		maxHue,
+		onInput$,
+		store,
+		width
+	]);
+	const hueMouseDown = /* @__PURE__ */ inlinedQrl(async (e, el) => {
+		const hueChange = _captures[0];
+		const hOffset = el.getBoundingClientRect().top;
+		await hueChange(e, hOffset);
+		const eventListener = (e) => void hueChange(e, hOffset);
+		window.addEventListener("mousemove", eventListener);
+		window.addEventListener("touchmove", eventListener);
+		const mouseUpListener = () => {
+			window.removeEventListener("mousemove", eventListener);
+			window.removeEventListener("touchmove", eventListener);
+			window.removeEventListener("mouseup", mouseUpListener);
+			window.removeEventListener("touchend", mouseUpListener);
+		};
+		window.addEventListener("mouseup", mouseUpListener);
+		window.addEventListener("touchend", mouseUpListener);
+	}, "ColorPicker_component_hueMouseDown_cw08gCPBKtw", [/* @__PURE__ */ inlinedQrl(async (e, hOffset) => {
+		const maxHue = _captures[0], onInput$ = _captures[1], store = _captures[2];
+		const { y } = getMousePosition(e);
+		store.hue.position = clamp(maxHue - (y - hOffset), 0, maxHue);
+		const hsvColor = rgbToHsv(hexToRgba(store.value));
+		const h = store.hue.position / maxHue;
+		hsvColor.h = h;
+		store.hue.color = rgbToHex(hsvToRgb({
+			h,
+			s: 1,
+			v: 1,
+			a: hsvColor.a
+		}));
+		store.value = rgbToHex(hsvToRgb(hsvColor));
+		await onInput$?.(store.value);
+	}, "ColorPicker_component_hueChange_c0i9qwof0Yw", [
+		maxHue,
+		onInput$,
+		store
+	])]);
+	const sbMouseDown = /* @__PURE__ */ inlinedQrl(async (e, el) => {
+		const sbChange = _captures[0];
+		const offset = el.getBoundingClientRect();
+		await sbChange(e, offset);
+		const eventListener = (e) => void sbChange(e, offset);
+		window.addEventListener("mousemove", eventListener);
+		window.addEventListener("touchmove", eventListener);
+		const mouseUpListener = () => {
+			window.removeEventListener("mousemove", eventListener);
+			window.removeEventListener("touchmove", eventListener);
+			window.removeEventListener("mouseup", mouseUpListener);
+			window.removeEventListener("touchend", mouseUpListener);
+		};
+		window.addEventListener("mouseup", mouseUpListener);
+		window.addEventListener("touchend", mouseUpListener);
+	}, "ColorPicker_component_sbMouseDown_Vor71dUNt7g", [/* @__PURE__ */ inlinedQrl(async (e, hOffset) => {
+		const maxHue = _captures[0], onInput$ = _captures[1], store = _captures[2], width = _captures[3];
+		const { x, y } = getMousePosition(e);
+		store.bPosition = clamp(y - hOffset.top, 0, maxHue);
+		store.sPosition = clamp(x - hOffset.left, 0, width);
+		const s = store.sPosition / width;
+		const v = 1 - store.bPosition / maxHue;
+		store.value = rgbToHex(hsvToRgb({
+			h: store.hue.position / maxHue,
+			s,
+			v,
+			a: store.opacity.position !== void 0 ? 1 - store.opacity.position / maxHue : 1
+		}));
+		await onInput$?.(store.value);
+	}, "ColorPicker_component_sbChange_NwrBaY0ccx0", [
+		maxHue,
+		onInput$,
+		store,
+		width
+	])]);
+	const opacityMouseDown = /* @__PURE__ */ inlinedQrl(async (e, el) => {
+		const opacityChange = _captures[0];
+		const offset = el.getBoundingClientRect();
+		await opacityChange(e, offset);
+		const eventListener = (e) => void opacityChange(e, offset);
+		window.addEventListener("mousemove", eventListener);
+		window.addEventListener("touchmove", eventListener);
+		const mouseUpListener = () => {
+			window.removeEventListener("mousemove", eventListener);
+			window.removeEventListener("touchmove", eventListener);
+			window.removeEventListener("mouseup", mouseUpListener);
+			window.removeEventListener("touchend", mouseUpListener);
+		};
+		window.addEventListener("mouseup", mouseUpListener);
+		window.addEventListener("touchend", mouseUpListener);
+	}, "ColorPicker_component_opacityMouseDown_U0p127RN2e0", [/* @__PURE__ */ inlinedQrl(async (e, hOffset) => {
+		const maxHue = _captures[0], onInput$ = _captures[1], store = _captures[2];
+		const { x } = getMousePosition(e);
+		store.opacity.position = clamp(x - hOffset.left, 0, maxHue);
+		const a = 1 - store.opacity.position / maxHue;
+		const hsvColor = rgbToHsv(hexToRgba(store.value));
+		hsvColor.a = a;
+		store.value = rgbToHex(hsvToRgb(hsvColor));
+		await onInput$?.(store.value);
+	}, "ColorPicker_component_opacityChange_WBZtDRHmnMU", [
+		maxHue,
+		onInput$,
+		store
+	])]);
+	return /* @__PURE__ */ _jsxSorted("div", {
+		class: {
+			"lum-card touch-none p-4": true,
+			"flex-col": !horizontal,
+			...getClassObject(Class)
+		},
+		id,
+		"q-e:input": /* @__PURE__ */ inlinedQrl(async (e, el, setColor) => {
+			if (!el.dataset.value) return;
+			await setColor(el.dataset.value);
+		}, "ColorPicker_component_div_q_e_input_6CeAo90QNf4"),
+		"q:p": setColor
+	}, null, [
+		/* @__PURE__ */ _jsxSorted("div", null, { class: "flex gap-4" }, [/* @__PURE__ */ _jsxSorted("div", null, {
+			class: "relative h-37.5 w-31.25 rounded-md",
+			style: _fnSignal(_hf0, [store]),
+			"q-e:mousedown": sbMouseDown,
+			"q-e:touchstart": sbMouseDown,
+			"preventdefault:mousedown": true,
+			"preventdefault:touchstart": true
+		}, [/* @__PURE__ */ _jsxSorted("div", null, { class: "h-37.5 w-31.25 rounded-md border border-gray-700 bg-linear-to-b from-transparent to-black" }, null, 3, null), /* @__PURE__ */ _jsxSorted("div", null, {
+			class: { "absolute -top-2 -left-2 h-4 w-4 rounded-md border lum-bg drop-shadow-lg": true },
+			style: _fnSignal(_hf1, [store])
+		}, null, 3, null)], 3, null), /* @__PURE__ */ _jsxSorted("div", null, {
+			class: "relative h-37.5 w-2 rounded-md border border-gray-700",
+			style: { background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)" },
+			"q-e:mousedown": hueMouseDown,
+			"q-e:touchstart": hueMouseDown,
+			"preventdefault:mousedown": true,
+			"preventdefault:touchstart": true
+		}, /* @__PURE__ */ _jsxSorted("div", null, {
+			class: "absolute -bottom-2 -left-1.25 h-4 w-4 rounded-md lum-bg! bg-[#ff0000] ",
+			style: _fnSignal(_hf2, [store])
+		}, null, 3, null), 3, null)], 3, null),
+		opacity && /* @__PURE__ */ _jsxSorted("div", null, {
+			class: "relative h-2 w-full rounded-md",
+			"q-e:mousedown": opacityMouseDown,
+			"q-e:touchstart": opacityMouseDown,
+			"preventdefault:mousedown": true,
+			"preventdefault:touchstart": true,
+			style: {
+				backgroundColor: "white",
+				backgroundImage: `
                 linear-gradient(45deg, #ccc 25%, transparent 25%), 
                 linear-gradient(135deg, #ccc 25%, transparent 25%),
                 linear-gradient(45deg, transparent 75%, #ccc 75%),
                 linear-gradient(135deg, transparent 75%, #ccc 75%);
               `,
-          backgroundSize: "8px 8px",
-          backgroundPosition: "0 0, 4px 0, 4px -4px, 0 4px"
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            class: "alsolute inset-0 h-2 w-full rounded-md border border-gray-700",
-            style: {
-              background: `linear-gradient(to right, ${store.value}, transparent)`
-            }
-          }),
-          /* @__PURE__ */ jsx("div", {
-            class: "absolute -bottom-1.25 -left-1.25 h-4 w-4 rounded-md",
-            style: {
-              transform: `translateX(${store.opacity.position ?? 1}px)`,
-              backgroundColor: store.value,
-              backgroundImage: `
+				backgroundSize: "8px 8px",
+				backgroundPosition: "0 0, 4px 0, 4px -4px, 0 4px"
+			}
+		}, [/* @__PURE__ */ _jsxSorted("div", null, {
+			class: "alsolute inset-0 h-2 w-full rounded-md border border-gray-700",
+			style: _fnSignal(_hf3, [store])
+		}, null, 3, null), /* @__PURE__ */ _jsxSorted("div", { style: {
+			transform: `translateX(${store.opacity.position ?? 1}px)`,
+			backgroundColor: store.value,
+			backgroundImage: `
                   linear-gradient(45deg, #ccc4 25%, transparent 25%), 
                   linear-gradient(135deg, #ccc4 25%, transparent 25%),
                   linear-gradient(45deg, transparent 75%, #ccc4 75%),
                   linear-gradient(135deg, transparent 75%, #ccc4 75%);
                 `,
-              backgroundSize: "8px 8px",
-              backgroundPosition: "0 0, 4px 0, 4px -4px, 0 4px"
-            }
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        class: "flex w-37.5 flex-wrap justify-between gap-1",
-        children: [
-          showInput && /* @__PURE__ */ jsxs("div", {
-            class: {
-              "mb-2 flex w-37.5 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",
-              "flex-col-reverse": preview == "bottom"
-            },
-            children: [
-              preview != "full" && /* @__PURE__ */ jsx("div", {
-                class: {
-                  "border border-gray-700 rounded-sm": true,
-                  "aspect-square h-full": preview == "left" || preview == "right",
-                  "h-3 w-full": preview == "top" || preview == "bottom",
-                  "rounded-b-none": preview == "top",
-                  "rounded-t-none": preview == "bottom"
-                },
-                style: {
-                  backgroundColor: `${store.value}`
-                }
-              }),
-              /* @__PURE__ */ jsx("input", {
-                class: {
-                  "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"
-                },
-                value: store.value,
-                style: preview == "full" ? {
-                  backgroundColor: `${store.value}`,
-                  color: getBrightness(hexToRgba(store.value)) > 0.5 ? "black" : "white"
-                } : {},
-                onInput$: async (e, el) => {
-                  await setColor(el.value);
-                }
-              })
-            ]
-          }),
-          colors.map((color, i) => {
-            return /* @__PURE__ */ jsx("button", {
-              type: "button",
-              name: color,
-              class: {
-                "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0 lum-bg hover:brightness-150": true,
-                "border-lum-accent": color === store.value
-              },
-              style: {
-                "--bg-color": color
-              },
-              onClick$: async () => {
-                await setColor(color);
-              }
-            }, i);
-          }),
-          /* @__PURE__ */ jsx("button", {
-            type: "button",
-            class: "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0.5",
-            name: "Randomize",
-            onClick$: async () => {
-              const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-              await setColor(color);
-            },
-            children: /* @__PURE__ */ jsx(Shuffle, {
-              class: "p-0.5 pl-0.5 text-lum-text"
-            })
-          })
-        ]
-      })
-    ]
-  });
-});
-export {
-  ColorPicker
-};
+			backgroundSize: "8px 8px",
+			backgroundPosition: "0 0, 4px 0, 4px -4px, 0 4px"
+		} }, { class: "absolute -bottom-1.25 -left-1.25 h-4 w-4 rounded-md" }, null, 3, null)], 1, "Xr_0"),
+		/* @__PURE__ */ _jsxSorted("div", null, { class: "flex w-37.5 flex-wrap justify-between gap-1" }, [
+			showInput && /* @__PURE__ */ _jsxSorted("div", { class: {
+				"mb-2 flex w-37.5 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",
+				"flex-col-reverse": preview == "bottom"
+			} }, null, [preview != "full" && /* @__PURE__ */ _jsxSorted("div", { class: {
+				"border border-gray-700 rounded-sm": true,
+				"aspect-square h-full": preview == "left" || preview == "right",
+				"h-3 w-full": preview == "top" || preview == "bottom",
+				"rounded-b-none": preview == "top",
+				"rounded-t-none": preview == "bottom"
+			} }, { style: _fnSignal(_hf4, [store]) }, null, 3, "Xr_1"), /* @__PURE__ */ _jsxSorted("input", {
+				class: {
+					"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"
+				},
+				"q-e:input": /* @__PURE__ */ inlinedQrl(async (e, el, setColor) => {
+					await setColor(el.value);
+				}, "ColorPicker_component_div_div_div_input_q_e_input_ExKkgH2ke0g"),
+				"q:p": setColor,
+				style: preview == "full" ? {
+					backgroundColor: `${store.value}`,
+					color: getBrightness(hexToRgba(store.value)) > .5 ? "black" : "white"
+				} : {}
+			}, { value: _wrapProp(store) }, null, 6, null)], 1, "Xr_2"),
+			colors.map((color, i) => {
+				const qrl_4294901768 = /* @__PURE__ */ inlinedQrl(async (_, _1, color) => {
+					const setColor = _captures[0];
+					await setColor(color);
+				}, "ColorPicker_component_div_div_button_q_e_click_iKRo0q0pNkI", [setColor]);
+				return /* @__PURE__ */ _jsxSorted("button", {
+					class: _fnSignal(_hf5, [color, store]),
+					name: color,
+					"q-e:click": qrl_4294901768,
+					"q:p": color,
+					style: { "--bg-color": color }
+				}, { type: "button" }, null, 6, i);
+			}),
+			/* @__PURE__ */ _jsxSorted("button", {
+				"q-e:click": /* @__PURE__ */ inlinedQrl(async (_, _1, setColor) => {
+					await setColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
+				}, "ColorPicker_component_div_div_button_q_e_click_1_50T6z49ncA8"),
+				"q:p": setColor
+			}, {
+				type: "button",
+				class: "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0.5",
+				name: "Randomize"
+			}, /* @__PURE__ */ _jsxSorted(Shuffle, null, { class: "p-0.5 pl-0.5 text-lum-text" }, null, 3, "Xr_3"), 4, null)
+		], 1, null)
+	], 4, "Xr_4");
+}, "ColorPicker_component_8ldznufwKro"));
+//#endregion
+export { ColorPicker };

package/lib/components/elements/Dropdown.d.ts

@@ -1,8 +1,5 @@
 import type { PropsOf } from '@qwik.dev/core';
-interface DropdownProps extends Omit<PropsOf<'button'>, 'class'> {
-    class?: {
-        [key: string]: boolean;
-    };
+interface DropdownProps extends PropsOf<'button'> {
     hover?: boolean;
     opened?: boolean;
 }