@luminescent/ui-qwik 6.8.2 → 6.8.3-2

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

@@ -0,0 +1,314 @@
+"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: `
+                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: `
+                  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"
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+exports.ColorPicker = ColorPicker;

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

@@ -0,0 +1,314 @@
+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 { 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: `
+                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)) > 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
+};

package/{lib-types → lib}/components/elements/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import type { PropsOf } from '@builder.io/qwik';
+import type { PropsOf } from '@qwik.dev/core';
 interface DropdownProps extends Omit<PropsOf<'button'>, 'class'> {
     class?: {
         [key: string]: boolean;
@@ -6,5 +6,5 @@ interface DropdownProps extends Omit<PropsOf<'button'>, 'class'> {
     hover?: boolean;
     opened?: boolean;
 }
-export declare const Dropdown: import("@builder.io/qwik").Component<DropdownProps>;
+export declare const Dropdown: import("@qwik.dev/core").Component<DropdownProps>;
 export {};

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const ChevronDown = require("../../svg/ChevronDown.qwik.cjs");
+const Dropdown = core.component$(({ class: Class, hover, opened, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
+    type: "button",
+    class: {
+      "group lum-btn": true,
+      ...Class
+    },
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        class: "flex-1 text-left",
+        children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(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
+        }
+      })
+    ]
+  });
+});
+exports.Dropdown = Dropdown;