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

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

@@ -1,314 +1,296 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const color = require("../../utils/color.qwik.cjs");
-const Shuffle = require("../../svg/Shuffle.qwik.cjs");
-const ColorPicker = 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 = color.rgbToHsv(color.hexToRgba(value));
-  const store = core.useStore({
-    hue: {
-      position: hsvColor.h * maxHue,
-      color: color.rgbToHex(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 = core.$(async (color$1) => {
-    if (!/^#[0-9a-f]{0,8}$/i.test(color$1)) return;
-    const hsv = color.rgbToHsv(color.hexToRgba(color$1));
-    store.hue.position = hsv.h * maxHue;
-    store.hue.color = color.rgbToHex(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$1;
-    await onInput$?.(store.value);
-  });
-  const hueChange = core.$(async (e, hOffset) => {
-    const { y } = color.getMousePosition(e);
-    store.hue.position = color.clamp(maxHue - (y - hOffset), 0, maxHue);
-    const hsvColor2 = color.rgbToHsv(color.hexToRgba(store.value));
-    const h = store.hue.position / maxHue;
-    hsvColor2.h = h;
-    store.hue.color = color.rgbToHex(color.hsvToRgb({
-      h,
-      s: 1,
-      v: 1,
-      a: hsvColor2.a
-    }));
-    store.value = color.rgbToHex(color.hsvToRgb(hsvColor2));
-    await onInput$?.(store.value);
-  });
-  const hueMouseDown = core.$(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 = core.$(async (e, hOffset) => {
-    const { x, y } = color.getMousePosition(e);
-    store.bPosition = color.clamp(y - hOffset.top, 0, maxHue);
-    store.sPosition = color.clamp(x - hOffset.left, 0, width);
-    const s = store.sPosition / width;
-    const v = 1 - store.bPosition / maxHue;
-    store.value = color.rgbToHex(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 = core.$(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 = core.$(async (e, hOffset) => {
-    const { x } = color.getMousePosition(e);
-    store.opacity.position = color.clamp(x - hOffset.left, 0, maxHue);
-    const a = 1 - store.opacity.position / maxHue;
-    const hsvColor2 = color.rgbToHsv(color.hexToRgba(store.value));
-    hsvColor2.a = a;
-    store.value = color.rgbToHex(color.hsvToRgb(hsvColor2));
-    await onInput$?.(store.value);
-  });
-  const opacityMouseDown = core.$(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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", {
-        class: "flex gap-4",
-        children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", {
-                class: "h-37.5 w-31.25 rounded-md border border-gray-700 bg-linear-to-b from-transparent to-black"
-              }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", {
-        class: "relative h-2 w-full rounded-md",
-        onMouseDown$: opacityMouseDown,
-        onTouchStart$: opacityMouseDown,
-        "preventdefault:mousedown": true,
-        "preventdefault:touchstart": true,
-        style: {
-          backgroundColor: "white",
-          backgroundImage: `
+const require_functions = require("../functions.qwik.cjs");
+const require_color = require("../../utils/color.qwik.cjs");
+const require_Shuffle = require("../../svg/Shuffle.qwik.cjs");
+let _qwik_dev_core = require("@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__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__ */ (0, _qwik_dev_core.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 = 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 = /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (color) => {
+		const maxHue = _qwik_dev_core._captures[0], onInput$ = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2], width = _qwik_dev_core._captures[3];
+		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);
+	}, "ColorPicker_component_setColor_m9tT2MF9iI8", [
+		maxHue,
+		onInput$,
+		store,
+		width
+	]);
+	const hueMouseDown = /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, el) => {
+		const hueChange = _qwik_dev_core._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__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, hOffset) => {
+		const maxHue = _qwik_dev_core._captures[0], onInput$ = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2];
+		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);
+	}, "ColorPicker_component_hueChange_c0i9qwof0Yw", [
+		maxHue,
+		onInput$,
+		store
+	])]);
+	const sbMouseDown = /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, el) => {
+		const sbChange = _qwik_dev_core._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__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, hOffset) => {
+		const maxHue = _qwik_dev_core._captures[0], onInput$ = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2], width = _qwik_dev_core._captures[3];
+		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);
+	}, "ColorPicker_component_sbChange_NwrBaY0ccx0", [
+		maxHue,
+		onInput$,
+		store,
+		width
+	])]);
+	const opacityMouseDown = /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, el) => {
+		const opacityChange = _qwik_dev_core._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__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, hOffset) => {
+		const maxHue = _qwik_dev_core._captures[0], onInput$ = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2];
+		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);
+	}, "ColorPicker_component_opacityChange_WBZtDRHmnMU", [
+		maxHue,
+		onInput$,
+		store
+	])]);
+	return /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", {
+		class: {
+			"lum-card touch-none p-4": true,
+			"flex-col": !horizontal,
+			...require_functions.getClassObject(Class)
+		},
+		id,
+		"q-e:input": /* @__PURE__ */ (0, _qwik_dev_core.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__ */ (0, _qwik_dev_core._jsxSorted)("div", null, { class: "flex gap-4" }, [/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, {
+			class: "relative h-37.5 w-31.25 rounded-md",
+			style: (0, _qwik_dev_core._fnSignal)(_hf0, [store]),
+			"q-e:mousedown": sbMouseDown,
+			"q-e:touchstart": sbMouseDown,
+			"preventdefault:mousedown": true,
+			"preventdefault:touchstart": true
+		}, [/* @__PURE__ */ (0, _qwik_dev_core._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__ */ (0, _qwik_dev_core._jsxSorted)("div", null, {
+			class: { "absolute -top-2 -left-2 h-4 w-4 rounded-md border lum-bg drop-shadow-lg": true },
+			style: (0, _qwik_dev_core._fnSignal)(_hf1, [store])
+		}, null, 3, null)], 3, null), /* @__PURE__ */ (0, _qwik_dev_core._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__ */ (0, _qwik_dev_core._jsxSorted)("div", null, {
+			class: "absolute -bottom-2 -left-1.25 h-4 w-4 rounded-md lum-bg! bg-[#ff0000] ",
+			style: (0, _qwik_dev_core._fnSignal)(_hf2, [store])
+		}, null, 3, null), 3, null)], 3, null),
+		opacity && /* @__PURE__ */ (0, _qwik_dev_core._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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ (0, _qwik_dev_core._jsxSorted)("div", null, {
+			class: "alsolute inset-0 h-2 w-full rounded-md border border-gray-700",
+			style: (0, _qwik_dev_core._fnSignal)(_hf3, [store])
+		}, null, 3, null), /* @__PURE__ */ (0, _qwik_dev_core._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__ */ jsxRuntime.jsxs("div", {
-        class: "flex w-37.5 flex-wrap justify-between gap-1",
-        children: [
-          showInput && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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: color.getBrightness(color.hexToRgba(store.value)) > 0.5 ? "black" : "white"
-                } : {},
-                onInput$: async (e, el) => {
-                  await setColor(el.value);
-                }
-              })
-            ]
-          }),
-          colors.map((color2, i) => {
-            return /* @__PURE__ */ jsxRuntime.jsx("button", {
-              type: "button",
-              name: color2,
-              class: {
-                "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0 lum-bg hover:brightness-150": true,
-                "border-lum-accent": color2 === store.value
-              },
-              style: {
-                "--bg-color": color2
-              },
-              onClick$: async () => {
-                await setColor(color2);
-              }
-            }, i);
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", {
-            type: "button",
-            class: "lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0.5",
-            name: "Randomize",
-            onClick$: async () => {
-              const color2 = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-              await setColor(color2);
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(Shuffle.Shuffle, {
-              class: "p-0.5 pl-0.5 text-lum-text"
-            })
-          })
-        ]
-      })
-    ]
-  });
-});
+			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__ */ (0, _qwik_dev_core._jsxSorted)("div", null, { class: "flex w-37.5 flex-wrap justify-between gap-1" }, [
+			showInput && /* @__PURE__ */ (0, _qwik_dev_core._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__ */ (0, _qwik_dev_core._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: (0, _qwik_dev_core._fnSignal)(_hf4, [store]) }, null, 3, "Xr_1"), /* @__PURE__ */ (0, _qwik_dev_core._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__ */ (0, _qwik_dev_core.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: require_color.getBrightness(require_color.hexToRgba(store.value)) > .5 ? "black" : "white"
+				} : {}
+			}, { value: (0, _qwik_dev_core._wrapProp)(store) }, null, 6, null)], 1, "Xr_2"),
+			colors.map((color, i) => {
+				const qrl_4294901768 = /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (_, _1, color) => {
+					const setColor = _qwik_dev_core._captures[0];
+					await setColor(color);
+				}, "ColorPicker_component_div_div_button_q_e_click_iKRo0q0pNkI", [setColor]);
+				return /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("button", {
+					class: (0, _qwik_dev_core._fnSignal)(_hf5, [color, store]),
+					name: color,
+					"q-e:click": qrl_4294901768,
+					"q:p": color,
+					style: { "--bg-color": color }
+				}, { type: "button" }, null, 6, i);
+			}),
+			/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("button", {
+				"q-e:click": /* @__PURE__ */ (0, _qwik_dev_core.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__ */ (0, _qwik_dev_core._jsxSorted)(require_Shuffle.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
 exports.ColorPicker = ColorPicker;