@luminescent/ui-qwik 6.8.3-qwikv2 → 6.9.0

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

@@ -1,283 +0,0 @@
-const require_color = require("../../utils/color.qwik.cjs");
-const require_Shuffle = require("../../svg/Shuffle.qwik.cjs");
-let _qwik_dev_core_jsx_runtime = require("@qwik.dev/core/jsx-runtime");
-let _qwik_dev_core = require("@qwik.dev/core");
-//#region src/components/elements/ColorPicker.tsx
-var ColorPicker = (0, _qwik_dev_core.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 = require_color.rgbToHsv(require_color.hexToRgba(value));
-	const store = (0, _qwik_dev_core.useStore)({
-		hue: {
-			position: hsvColor.h * maxHue,
-			color: require_color.rgbToHex(require_color.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 = (0, _qwik_dev_core.$)(async (color) => {
-		if (!/^#[0-9a-f]{0,8}$/i.test(color)) return;
-		const hsv = require_color.rgbToHsv(require_color.hexToRgba(color));
-		store.hue.position = hsv.h * maxHue;
-		store.hue.color = require_color.rgbToHex(require_color.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 = (0, _qwik_dev_core.$)(async (e, hOffset) => {
-		const { y } = require_color.getMousePosition(e);
-		store.hue.position = require_color.clamp(maxHue - (y - hOffset), 0, maxHue);
-		const hsvColor = require_color.rgbToHsv(require_color.hexToRgba(store.value));
-		const h = store.hue.position / maxHue;
-		hsvColor.h = h;
-		store.hue.color = require_color.rgbToHex(require_color.hsvToRgb({
-			h,
-			s: 1,
-			v: 1,
-			a: hsvColor.a
-		}));
-		store.value = require_color.rgbToHex(require_color.hsvToRgb(hsvColor));
-		await onInput$?.(store.value);
-	});
-	const hueMouseDown = (0, _qwik_dev_core.$)(async (e, el) => {
-		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);
-	});
-	const sbChange = (0, _qwik_dev_core.$)(async (e, hOffset) => {
-		const { x, y } = require_color.getMousePosition(e);
-		store.bPosition = require_color.clamp(y - hOffset.top, 0, maxHue);
-		store.sPosition = require_color.clamp(x - hOffset.left, 0, width);
-		const s = store.sPosition / width;
-		const v = 1 - store.bPosition / maxHue;
-		store.value = require_color.rgbToHex(require_color.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 = (0, _qwik_dev_core.$)(async (e, el) => {
-		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);
-	});
-	const opacityChange = (0, _qwik_dev_core.$)(async (e, hOffset) => {
-		const { x } = require_color.getMousePosition(e);
-		store.opacity.position = require_color.clamp(x - hOffset.left, 0, maxHue);
-		const a = 1 - store.opacity.position / maxHue;
-		const hsvColor = require_color.rgbToHsv(require_color.hexToRgba(store.value));
-		hsvColor.a = a;
-		store.value = require_color.rgbToHex(require_color.hsvToRgb(hsvColor));
-		await onInput$?.(store.value);
-	});
-	const opacityMouseDown = (0, _qwik_dev_core.$)(async (e, el) => {
-		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);
-	});
-	return /* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.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__ */ (0, _qwik_dev_core_jsx_runtime.jsxs)("div", {
-				class: "flex gap-4",
-				children: [/* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.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__ */ (0, _qwik_dev_core_jsx_runtime.jsx)("div", { class: "h-37.5 w-31.25 rounded-md border border-gray-700 bg-linear-to-b from-transparent to-black" }), /* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.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__ */ (0, _qwik_dev_core_jsx_runtime.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__ */ (0, _qwik_dev_core_jsx_runtime.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__ */ (0, _qwik_dev_core_jsx_runtime.jsxs)("div", {
-				class: "relative h-2 w-full rounded-md",
-				onMouseDown$: opacityMouseDown,
-				onTouchStart$: 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__ */ (0, _qwik_dev_core_jsx_runtime.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__ */ (0, _qwik_dev_core_jsx_runtime.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: `
-                  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__ */ (0, _qwik_dev_core_jsx_runtime.jsxs)("div", {
-				class: "flex w-37.5 flex-wrap justify-between gap-1",
-				children: [
-					showInput && /* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.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__ */ (0, _qwik_dev_core_jsx_runtime.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__ */ (0, _qwik_dev_core_jsx_runtime.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: require_color.getBrightness(require_color.hexToRgba(store.value)) > .5 ? "black" : "white"
-							} : {},
-							onInput$: async (e, el) => {
-								await setColor(el.value);
-							}
-						})]
-					}),
-					colors.map((color, i) => {
-						return /* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.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__ */ (0, _qwik_dev_core_jsx_runtime.jsx)("button", {
-						type: "button",
-						class: "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0.5",
-						name: "Randomize",
-						onClick$: async () => {
-							await setColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
-						},
-						children: /* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.jsx)(require_Shuffle.Shuffle, { class: "p-0.5 pl-0.5 text-lum-text" })
-					})
-				]
-			})
-		]
-	});
-});
-//#endregion
-exports.ColorPicker = ColorPicker;

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

@@ -1,283 +0,0 @@
-import { clamp, getBrightness, getMousePosition, hexToRgba, hsvToRgb, rgbToHex, rgbToHsv } from "../../utils/color.qwik.mjs";
-import { Shuffle } from "../../svg/Shuffle.qwik.mjs";
-import { jsx, jsxs } from "@qwik.dev/core/jsx-runtime";
-import { $, component$, useStore } from "@qwik.dev/core";
-//#region src/components/elements/ColorPicker.tsx
-var 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 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);
-	});
-	const hueMouseDown = $(async (e, el) => {
-		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);
-	});
-	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 = (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);
-	});
-	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 hsvColor = rgbToHsv(hexToRgba(store.value));
-		hsvColor.a = a;
-		store.value = rgbToHex(hsvToRgb(hsvColor));
-		await onInput$?.(store.value);
-	});
-	const opacityMouseDown = $(async (e, el) => {
-		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);
-	});
-	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: `
-                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: `
-                  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)) > .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 () => {
-							await setColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
-						},
-						children: /* @__PURE__ */ jsx(Shuffle, { class: "p-0.5 pl-0.5 text-lum-text" })
-					})
-				]
-			})
-		]
-	});
-});
-//#endregion
-export { ColorPicker };

package/lib/components/elements/Dropdown.qwik.cjs

@@ -1,28 +0,0 @@
-const require_ChevronDown = require("../../svg/ChevronDown.qwik.cjs");
-let _qwik_dev_core_jsx_runtime = require("@qwik.dev/core/jsx-runtime");
-let _qwik_dev_core = require("@qwik.dev/core");
-//#region src/components/elements/Dropdown.tsx
-var Dropdown = (0, _qwik_dev_core.component$)(({ class: Class, hover, opened, ...props }) => {
-	return /* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.jsxs)("button", {
-		type: "button",
-		class: {
-			"group lum-btn": true,
-			...Class
-		},
-		...props,
-		children: [/* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.jsx)("span", {
-			class: "flex-1 text-left",
-			children: /* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.jsx)(_qwik_dev_core.Slot, {})
-		}), /* @__PURE__ */ (0, _qwik_dev_core_jsx_runtime.jsx)(require_ChevronDown.ChevronDown, {
-			size: 16,
-			class: {
-				"ease-out motion-safe:transition-transform": true,
-				"rotate-180 transform": 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
-			}
-		})]
-	});
-});
-//#endregion
-exports.Dropdown = Dropdown;

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

@@ -1,28 +0,0 @@
-import { ChevronDown } from "../../svg/ChevronDown.qwik.mjs";
-import { jsx, jsxs } from "@qwik.dev/core/jsx-runtime";
-import { Slot, component$ } from "@qwik.dev/core";
-//#region src/components/elements/Dropdown.tsx
-var Dropdown = component$(({ class: Class, hover, opened, ...props }) => {
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		class: {
-			"group lum-btn": true,
-			...Class
-		},
-		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			class: "flex-1 text-left",
-			children: /* @__PURE__ */ jsx(Slot, {})
-		}), /* @__PURE__ */ jsx(ChevronDown, {
-			size: 16,
-			class: {
-				"ease-out motion-safe:transition-transform": true,
-				"rotate-180 transform": 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
-			}
-		})]
-	});
-});
-//#endregion
-export { Dropdown };