@luminescent/ui-qwik 6.8.3-2 → 6.9.0

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

@@ -1,314 +0,0 @@
-"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

@@ -1,314 +0,0 @@
-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/components/elements/Dropdown.qwik.cjs

@@ -1,31 +0,0 @@
-"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;

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

@@ -1,31 +0,0 @@
-import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, Slot } from "@qwik.dev/core";
-import { ChevronDown } from "../../svg/ChevronDown.qwik.mjs";
-const 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
-        }
-      })
-    ]
-  });
-});
-export {
-  Dropdown
-};