@luminescent/ui 0.1.3 → 0.2.1

package/lib/index.qwik.mjs

@@ -79,6 +79,12 @@ const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     xmlns: "http://www.w3.org/2000/svg"
   }, 0, "XP_0");
 }, "LoadingIcon_component_iXFSRNToIus"));
+const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
+  class: "block h-32 -mt-32",
+  id: _fnSignal((p0) => p0.id, [
+    props
+  ], "p0.id")
+}, null, 3, "Oa_0"), "Anchor_component_O7y4zyaazA0"));
 const cardColorClasses = {
   pink: {
     card: {
@@ -283,12 +289,16 @@ const CardHeader = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
   return /* @__PURE__ */ _jsxQ("h1", null, {
     class: "flex font-bold text-gray-100 text-2xl"
   }, [
-    props.id && /* @__PURE__ */ _jsxQ("span", null, {
-      class: "block h-32 -mt-32",
-      id: _fnSignal((p0) => p0.id, [
-        props
-      ], "p0.id")
-    }, null, 3, "OW_3"),
+    props.id && /* @__PURE__ */ _jsxC(Anchor, {
+      get id() {
+        return props.id;
+      },
+      [_IMMUTABLE]: {
+        id: _fnSignal((p0) => p0.id, [
+          props
+        ], "p0.id")
+      }
+    }, 3, "OW_3"),
     /* @__PURE__ */ _jsxQ("div", null, {
       class: "flex flex-1"
     }, /* @__PURE__ */ _jsxQ("div", null, {
@@ -324,218 +334,6 @@ const CardHeader = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     }, 3, "OW_6"), 1, "OW_7")
   ], 1, "OW_8");
 }, "CardHeader_component_2xQZ6Uv7R4A"));
-var insertCss$1 = { exports: {} };
-var containers = [];
-var styleElements = [];
-var usage = "insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).";
-function insertCss(css, options) {
-  options = options || {};
-  if (css === void 0) {
-    throw new Error(usage);
-  }
-  var position = options.prepend === true ? "prepend" : "append";
-  var container = options.container !== void 0 ? options.container : document.querySelector("head");
-  var containerId = containers.indexOf(container);
-  if (containerId === -1) {
-    containerId = containers.push(container) - 1;
-    styleElements[containerId] = {};
-  }
-  var styleElement;
-  if (styleElements[containerId] !== void 0 && styleElements[containerId][position] !== void 0) {
-    styleElement = styleElements[containerId][position];
-  } else {
-    styleElement = styleElements[containerId][position] = createStyleElement();
-    if (position === "prepend") {
-      container.insertBefore(styleElement, container.childNodes[0]);
-    } else {
-      container.appendChild(styleElement);
-    }
-  }
-  if (css.charCodeAt(0) === 65279) {
-    css = css.substr(1, css.length);
-  }
-  if (styleElement.styleSheet) {
-    styleElement.styleSheet.cssText += css;
-  } else {
-    styleElement.textContent += css;
-  }
-  return styleElement;
-}
-function createStyleElement() {
-  var styleElement = document.createElement("style");
-  styleElement.setAttribute("type", "text/css");
-  return styleElement;
-}
-insertCss$1.exports = insertCss;
-var insertCss_2 = insertCss$1.exports.insertCss = insertCss;
-function e(t, e2) {
-  for (var i2 = 0; i2 < e2.length; i2++) {
-    var o2 = e2[i2];
-    o2.enumerable = o2.enumerable || false, o2.configurable = true, "value" in o2 && (o2.writable = true), Object.defineProperty(t, o2.key, o2);
-  }
-}
-function i(t, i2, o2) {
-  return i2 && e(t.prototype, i2), o2 && e(t, o2), t;
-}
-function o(t) {
-  return "number" == typeof t && !isNaN(t);
-}
-function s(t, e2, i2) {
-  return Math.min(Math.max(t, e2), i2);
-}
-function n(t) {
-  if (0 === t.type.indexOf("touch")) {
-    var e2 = t.touches[0];
-    return { x: e2.clientX, y: e2.clientY };
-  }
-  return { x: t.clientX, y: t.clientY };
-}
-function r(t) {
-  return 1 == t.length ? "0" + t : "" + t;
-}
-var h = function() {
-  function t(t2) {
-    this._rgba = { r: 0, g: 0, b: 0, a: 1 }, this._hsva = { h: 0, s: 0, v: 0, a: 1 }, this.fromHex(t2);
-  }
-  var e2 = t.prototype;
-  return e2.fromHex = function(t2) {
-    t2 || (t2 = 0), o(t2) ? (this._hexNumber = t2, this._hexString = function(t3) {
-      return "#" + ("00000" + (0 | t3).toString(16)).substr(-6).toUpperCase();
-    }(this._hexNumber)) : (this._hexString = t2.toUpperCase(), this._hexNumber = u(this._hexString));
-    var e3 = function(t3) {
-      return { r: (t3 >> 16 & 255) / 255, g: (t3 >> 8 & 255) / 255, b: (255 & t3) / 255 };
-    }(this._hexNumber), i2 = e3.g, s2 = e3.b;
-    this._rgba.r = e3.r, this._rgba.g = i2, this._rgba.b = s2;
-    var n2 = function(t3) {
-      var e4, i3 = t3.r, o2 = t3.g, s3 = t3.b, n3 = Math.max(i3, o2, s3), r3 = Math.min(i3, o2, s3), h3 = n3 - r3, u2 = 0 === n3 ? 0 : h3 / n3, a2 = n3;
-      if (n3 == r3)
-        e4 = 0;
-      else {
-        switch (n3) {
-          case i3:
-            e4 = (o2 - s3) / h3 + (o2 < s3 ? 6 : 0);
-            break;
-          case o2:
-            e4 = (s3 - i3) / h3 + 2;
-            break;
-          case s3:
-            e4 = (i3 - o2) / h3 + 4;
-        }
-        e4 /= 6;
-      }
-      return { h: e4, s: u2, v: a2 };
-    }(this._rgba), r2 = n2.s, h2 = n2.v;
-    this._hsva.h = n2.h, this._hsva.s = r2, this._hsva.v = h2, this._updateBrightness();
-  }, e2.fromHsv = function(t2) {
-    var e3 = t2.s, i2 = t2.v;
-    this._hsva.h = t2.h, this._hsva.s = e3, this._hsva.v = i2;
-    var o2 = function(t3) {
-      var e4 = t3.h, i3 = t3.s, o3 = t3.v;
-      e4 *= 6;
-      var s3 = Math.floor(e4), n3 = e4 - s3, r2 = o3 * (1 - i3), h2 = o3 * (1 - n3 * i3), u2 = o3 * (1 - (1 - n3) * i3), a2 = s3 % 6;
-      return { r: [o3, h2, r2, r2, u2, o3][a2], g: [u2, o3, o3, h2, r2, r2][a2], b: [r2, r2, u2, o3, o3, h2][a2] };
-    }(this._hsva), s2 = o2.g, n2 = o2.b;
-    this._rgba.r = o2.r, this._rgba.g = s2, this._rgba.b = n2, this._hexString = function(t3) {
-      var e4 = t3.g, i3 = t3.b;
-      return ["#", r(Math.round(255 * t3.r).toString(16)), r(Math.round(255 * e4).toString(16)), r(Math.round(255 * i3).toString(16))].join("").toUpperCase();
-    }(this._rgba), this._hexNumber = u(this._hexString), this._updateBrightness();
-  }, e2._updateBrightness = function() {
-    var t2 = this._rgba;
-    this._brightness = (299 * t2.r + 587 * t2.g + 114 * t2.b) / 1e3, this._isDark = this._brightness < 0.5, this._isLight = !this._isDark;
-  }, i(t, [{ key: "rgb", get: function() {
-    return this._rgba;
-  } }, { key: "hsv", get: function() {
-    return this._hsva;
-  } }, { key: "hex", get: function() {
-    return this._hexNumber;
-  } }, { key: "hexString", get: function() {
-    return this._hexString;
-  } }, { key: "brightness", get: function() {
-    return this._brightness;
-  } }, { key: "isDark", get: function() {
-    return this._isDark;
-  } }, { key: "isLight", get: function() {
-    return this._isLight;
-  } }]), t;
-}();
-function u(t) {
-  return parseInt(t.replace("#", ""), 16);
-}
-var a = function() {
-  function t(t2) {
-    var e3 = this;
-    void 0 === t2 && (t2 = {}), this._widthUnits = "px", this._heightUnits = "px", this._huePosition = 0, this._hueHeight = 0, this._maxHue = 0, this._inputIsNumber = false, this._saturationWidth = 0, this._isChoosing = false, this._callbacks = [], this.width = 0, this.height = 0, this.hue = 0, this.position = { x: 0, y: 0 }, this.color = new h(0), this.backgroundColor = new h(0), this.hueColor = new h(0), this._onSaturationMouseDown = function(t3) {
-      var i2 = e3.$saturation.getBoundingClientRect(), o2 = n(t3), s2 = o2.x, r2 = o2.y;
-      e3._isChoosing = true, e3._moveSelectorTo(s2 - i2.left, r2 - i2.top), e3._updateColorFromPosition(), e3._window.addEventListener("mouseup", e3._onSaturationMouseUp), e3._window.addEventListener("touchend", e3._onSaturationMouseUp), e3._window.addEventListener("mousemove", e3._onSaturationMouseMove), e3._window.addEventListener("touchmove", e3._onSaturationMouseMove), t3.preventDefault();
-    }, this._onSaturationMouseMove = function(t3) {
-      var i2 = e3.$saturation.getBoundingClientRect(), o2 = n(t3);
-      e3._moveSelectorTo(o2.x - i2.left, o2.y - i2.top), e3._updateColorFromPosition();
-    }, this._onSaturationMouseUp = function() {
-      e3._isChoosing = false, e3._window.removeEventListener("mouseup", e3._onSaturationMouseUp), e3._window.removeEventListener("touchend", e3._onSaturationMouseUp), e3._window.removeEventListener("mousemove", e3._onSaturationMouseMove), e3._window.removeEventListener("touchmove", e3._onSaturationMouseMove);
-    }, this._onHueMouseDown = function(t3) {
-      var i2 = e3.$hue.getBoundingClientRect(), o2 = n(t3).y;
-      e3._isChoosing = true, e3._moveHueTo(o2 - i2.top), e3._updateHueFromPosition(), e3._window.addEventListener("mouseup", e3._onHueMouseUp), e3._window.addEventListener("touchend", e3._onHueMouseUp), e3._window.addEventListener("mousemove", e3._onHueMouseMove), e3._window.addEventListener("touchmove", e3._onHueMouseMove), t3.preventDefault();
-    }, this._onHueMouseMove = function(t3) {
-      var i2 = e3.$hue.getBoundingClientRect(), o2 = n(t3);
-      e3._moveHueTo(o2.y - i2.top), e3._updateHueFromPosition();
-    }, this._onHueMouseUp = function() {
-      e3._isChoosing = false, e3._window.removeEventListener("mouseup", e3._onHueMouseUp), e3._window.removeEventListener("touchend", e3._onHueMouseUp), e3._window.removeEventListener("mousemove", e3._onHueMouseMove), e3._window.removeEventListener("touchmove", e3._onHueMouseMove);
-    }, this._window = t2.window || window, this._document = this._window.document, this.$el = this._document.createElement("div"), this.$el.className = "Scp", this.$el.innerHTML = '\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ', this.$saturation = this.$el.querySelector(".Scp-saturation"), this.$hue = this.$el.querySelector(".Scp-hue"), this.$sbSelector = this.$el.querySelector(".Scp-sbSelector"), this.$hSelector = this.$el.querySelector(".Scp-hSelector"), this.$saturation.addEventListener("mousedown", this._onSaturationMouseDown), this.$saturation.addEventListener("touchstart", this._onSaturationMouseDown), this.$hue.addEventListener("mousedown", this._onHueMouseDown), this.$hue.addEventListener("touchstart", this._onHueMouseDown), t2.el && this.appendTo(t2.el), t2.background && this.setBackgroundColor(t2.background), t2.widthUnits && (this._widthUnits = t2.widthUnits), t2.heightUnits && (this._heightUnits = t2.heightUnits), this.setSize(t2.width || 175, t2.height || 150), this.setColor(t2.color);
-  }
-  var e2 = t.prototype;
-  return e2.appendTo = function(t2) {
-    return "string" == typeof t2 ? document.querySelector(t2).appendChild(this.$el) : t2.appendChild(this.$el), this;
-  }, e2.remove = function() {
-    this._callbacks = [], this._onSaturationMouseUp(), this._onHueMouseUp(), this.$saturation.removeEventListener("mousedown", this._onSaturationMouseDown), this.$saturation.removeEventListener("touchstart", this._onSaturationMouseDown), this.$hue.removeEventListener("mousedown", this._onHueMouseDown), this.$hue.removeEventListener("touchstart", this._onHueMouseDown), this.$el.parentNode && this.$el.parentNode.removeChild(this.$el);
-  }, e2.setColor = function(t2) {
-    this._inputIsNumber = o(t2), this.color.fromHex(t2);
-    var e3 = this.color.hsv, i2 = e3.h, s2 = e3.s, n2 = e3.v;
-    return isNaN(i2) || (this.hue = i2), this._moveSelectorTo(this._saturationWidth * s2, (1 - n2) * this._hueHeight), this._moveHueTo((1 - this.hue) * this._hueHeight), this._updateHue(), this;
-  }, e2.setSize = function(t2, e3) {
-    return this.width = t2, this.height = e3, this.$el.style.width = this.width + this._widthUnits, this.$el.style.height = this.height + this._heightUnits, this._saturationWidth = this.width - 25, this.$saturation.style.width = this._saturationWidth + "px", this._hueHeight = this.height, this._maxHue = this._hueHeight - 2, this;
-  }, e2.setBackgroundColor = function(t2) {
-    return this.backgroundColor.fromHex(t2), this.$el.style.padding = "5px", this.$el.style.background = this.backgroundColor.hexString, this;
-  }, e2.setNoBackground = function() {
-    return this.$el.style.padding = "0px", this.$el.style.background = "none", this;
-  }, e2.onChange = function(t2) {
-    return this._callbacks.indexOf(t2) < 0 && (this._callbacks.push(t2), t2(this.getHexString())), this;
-  }, e2.getColor = function() {
-    return this._inputIsNumber ? this.getHexNumber() : this.getHexString();
-  }, e2.getHexString = function() {
-    return this.color.hexString.toUpperCase();
-  }, e2.getHexNumber = function() {
-    return this.color.hex;
-  }, e2.getRGB = function() {
-    return this.color.rgb;
-  }, e2.getHSV = function() {
-    return this.color.hsv;
-  }, e2.isDark = function() {
-    return this.color.isDark;
-  }, e2.isLight = function() {
-    return this.color.isLight;
-  }, e2._moveSelectorTo = function(t2, e3) {
-    this.position.x = s(t2, 0, this._saturationWidth), this.position.y = s(e3, 0, this._hueHeight), this.$sbSelector.style.transform = "translate(" + this.position.x + "px, " + this.position.y + "px)";
-  }, e2._updateColorFromPosition = function() {
-    this.color.fromHsv({ h: this.hue, s: this.position.x / this._saturationWidth, v: 1 - this.position.y / this._hueHeight }), this._updateColor();
-  }, e2._moveHueTo = function(t2) {
-    this._huePosition = s(t2, 0, this._maxHue), this.$hSelector.style.transform = "translateY(" + this._huePosition + "px)";
-  }, e2._updateHueFromPosition = function() {
-    var t2 = this.getHSV();
-    this.hue = 1 - this._huePosition / this._maxHue, this.color.fromHsv({ h: this.hue, s: t2.s, v: t2.v }), this._updateHue();
-  }, e2._updateHue = function() {
-    this.hueColor.fromHsv({ h: this.hue, s: 1, v: 1 }), this.$saturation.style.background = "linear-gradient(to right, #fff, " + this.hueColor.hexString + ")", this._updateColor();
-  }, e2._updateColor = function() {
-    this.$sbSelector.style.background = this.getHexString(), this.$sbSelector.style.borderColor = this.isDark() ? "#fff" : "#000", this._triggerChange();
-  }, e2._triggerChange = function() {
-    var t2 = this;
-    this._callbacks.forEach(function(e3) {
-      return e3(t2.getHexString());
-    });
-  }, i(t, [{ key: "isChoosing", get: function() {
-    return this._isChoosing;
-  } }]), t;
-}();
-insertCss_2(".Scp{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.Scp-saturation{position:relative;height:100%;background:linear-gradient(90deg,#fff,red);float:left;margin-right:5px}.Scp-brightness{width:100%;height:100%;background:linear-gradient(hsla(0,0%,100%,0),#000)}.Scp-sbSelector{border:2px solid #fff;position:absolute;width:14px;height:14px;background:#fff;border-radius:10px;top:-7px;left:-7px;box-sizing:border-box;z-index:10}.Scp-hue{width:20px;height:100%;position:relative;float:left;background:linear-gradient(red,#f0f 17%,#00f 34%,#0ff 50%,#0f0 67%,#ff0 84%,red)}.Scp-hSelector{position:absolute;background:#fff;border-bottom:1px solid #000;right:-3px;width:10px;height:2px}");
 const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
@@ -563,10 +361,511 @@ const TextInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     }
   }, null, 0, "dC_2");
 }, "TextInputRaw_component_ssloWlmBB4w"));
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function getMousePosition(e) {
+  if (e instanceof TouchEvent) {
+    const touch = e.touches[0];
+    return {
+      x: touch.clientX,
+      y: touch.clientY
+    };
+  }
+  const mouse = e;
+  return {
+    x: mouse.clientX,
+    y: mouse.clientY
+  };
+}
+const pad2 = (c) => c.length == 1 ? "0" + c : "" + c;
+class Color {
+  constructor(color) {
+    this._rgba = {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 1
+    };
+    this._hsva = {
+      h: 0,
+      s: 0,
+      v: 0,
+      a: 1
+    };
+    this.fromHex(color);
+  }
+  fromHex(color = 0) {
+    if (typeof color === "number") {
+      this._hexNumber = color;
+      this._hexString = numberToHexString(this._hexNumber);
+    } else {
+      this._hexString = color.toUpperCase();
+      this._hexNumber = hexStringToNumber(this._hexString);
+    }
+    const { r, g, b } = hexNumberToRgb(this._hexNumber);
+    this._rgba.r = r;
+    this._rgba.g = g;
+    this._rgba.b = b;
+    const { h, s, v } = rgbToHsv(this._rgba);
+    this._hsva.h = h;
+    this._hsva.s = s;
+    this._hsva.v = v;
+    this._updateBrightness();
+  }
+  fromHsv(color) {
+    const { h, s, v } = color;
+    this._hsva.h = h;
+    this._hsva.s = s;
+    this._hsva.v = v;
+    const { r, g, b } = hsvToRgb(this._hsva);
+    this._rgba.r = r;
+    this._rgba.g = g;
+    this._rgba.b = b;
+    this._hexString = rgbToHex(this._rgba);
+    this._hexNumber = hexStringToNumber(this._hexString);
+    this._updateBrightness();
+  }
+  _updateBrightness() {
+    const { r, g, b } = this._rgba;
+    this._brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+    this._isDark = this._brightness < 0.5;
+    this._isLight = !this._isDark;
+  }
+  get rgb() {
+    return this._rgba;
+  }
+  get hsv() {
+    return this._hsva;
+  }
+  get hex() {
+    return this._hexNumber;
+  }
+  get hexString() {
+    return this._hexString;
+  }
+  get brightness() {
+    return this._brightness;
+  }
+  get isDark() {
+    return this._isDark;
+  }
+  get isLight() {
+    return this._isLight;
+  }
+}
+function hexNumberToRgb(color) {
+  const r = (color >> 16 & 255) / 255;
+  const g = (color >> 8 & 255) / 255;
+  const b = (color & 255) / 255;
+  return {
+    r,
+    g,
+    b
+  };
+}
+function rgbToHex(color) {
+  const { r, g, b } = color;
+  const hex = [
+    "#",
+    pad2(Math.round(r * 255).toString(16)),
+    pad2(Math.round(g * 255).toString(16)),
+    pad2(Math.round(b * 255).toString(16))
+  ];
+  return hex.join("").toUpperCase();
+}
+const numberToHexString = (color) => "#" + ("00000" + (color | 0).toString(16)).substr(-6).toUpperCase();
+const hexStringToNumber = (color) => parseInt(color.replace("#", ""), 16);
+function hsvToRgb(color) {
+  let { h } = color;
+  const { s, v } = color;
+  h *= 6;
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const mod = i % 6;
+  const r = [
+    v,
+    q,
+    p,
+    p,
+    t,
+    v
+  ][mod];
+  const g = [
+    t,
+    v,
+    v,
+    q,
+    p,
+    p
+  ][mod];
+  const b = [
+    p,
+    p,
+    t,
+    v,
+    v,
+    q
+  ][mod];
+  return {
+    r,
+    g,
+    b
+  };
+}
+function rgbToHsv(color) {
+  const { r, g, b } = color;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  const s = max === 0 ? 0 : d / max;
+  const v = max;
+  let h = 0;
+  if (max != min) {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h,
+    s,
+    v
+  };
+}
+class ColorPicker {
+  constructor(options = {}) {
+    this._widthUnits = "px";
+    this._heightUnits = "px";
+    this._huePosition = 0;
+    this._hueHeight = 0;
+    this._maxHue = 0;
+    this._inputIsNumber = false;
+    this._saturationWidth = 0;
+    this._isChoosing = false;
+    this._callbacks = [];
+    this.width = 0;
+    this.height = 0;
+    this.hue = 0;
+    this.position = {
+      x: 0,
+      y: 0
+    };
+    this.color = new Color(0);
+    this.backgroundColor = new Color(0);
+    this.hueColor = new Color(0);
+    this._onSaturationMouseDown = (e) => {
+      const sbOffset = this.$saturation.getBoundingClientRect();
+      const { x, y } = getMousePosition(e);
+      this._isChoosing = true;
+      this._moveSelectorTo(x - sbOffset.left, y - sbOffset.top);
+      this._updateColorFromPosition();
+      this._window.addEventListener("mouseup", this._onSaturationMouseUp);
+      this._window.addEventListener("touchend", this._onSaturationMouseUp);
+      this._window.addEventListener("mousemove", this._onSaturationMouseMove);
+      this._window.addEventListener("touchmove", this._onSaturationMouseMove);
+      e.preventDefault();
+    };
+    this._onSaturationMouseMove = (e) => {
+      const sbOffset = this.$saturation.getBoundingClientRect();
+      const { x, y } = getMousePosition(e);
+      this._moveSelectorTo(x - sbOffset.left, y - sbOffset.top);
+      this._updateColorFromPosition();
+    };
+    this._onSaturationMouseUp = () => {
+      this._isChoosing = false;
+      this._window.removeEventListener("mouseup", this._onSaturationMouseUp);
+      this._window.removeEventListener("touchend", this._onSaturationMouseUp);
+      this._window.removeEventListener("mousemove", this._onSaturationMouseMove);
+      this._window.removeEventListener("touchmove", this._onSaturationMouseMove);
+    };
+    this._onHueMouseDown = (e) => {
+      const hOffset = this.$hue.getBoundingClientRect();
+      const { y } = getMousePosition(e);
+      this._isChoosing = true;
+      this._moveHueTo(y - hOffset.top);
+      this._updateHueFromPosition();
+      this._window.addEventListener("mouseup", this._onHueMouseUp);
+      this._window.addEventListener("touchend", this._onHueMouseUp);
+      this._window.addEventListener("mousemove", this._onHueMouseMove);
+      this._window.addEventListener("touchmove", this._onHueMouseMove);
+      e.preventDefault();
+    };
+    this._onHueMouseMove = (e) => {
+      const hOffset = this.$hue.getBoundingClientRect();
+      const { y } = getMousePosition(e);
+      this._moveHueTo(y - hOffset.top);
+      this._updateHueFromPosition();
+    };
+    this._onHueMouseUp = () => {
+      this._isChoosing = false;
+      this._window.removeEventListener("mouseup", this._onHueMouseUp);
+      this._window.removeEventListener("touchend", this._onHueMouseUp);
+      this._window.removeEventListener("mousemove", this._onHueMouseMove);
+      this._window.removeEventListener("touchmove", this._onHueMouseMove);
+    };
+    this._window = options.window || window;
+    this._document = this._window.document;
+    this.$el = this._document.createElement("div");
+    this.$el.className = "color-picker";
+    this.$el.innerHTML = `
+      <div class="color-picker-saturation">
+        <div class="color-picker-brightness"></div>
+        <div class="color-picker-sbSelector"></div>
+      </div>
+      <div class="color-picker-hue">
+        <div class="color-picker-hSelector"></div>
+      </div>
+    `;
+    this.$saturation = this.$el.querySelector(".color-picker-saturation");
+    this.$hue = this.$el.querySelector(".color-picker-hue");
+    this.$sbSelector = this.$el.querySelector(".color-picker-sbSelector");
+    this.$hSelector = this.$el.querySelector(".color-picker-hSelector");
+    this.$saturation.addEventListener("mousedown", this._onSaturationMouseDown);
+    this.$saturation.addEventListener("touchstart", this._onSaturationMouseDown);
+    this.$hue.addEventListener("mousedown", this._onHueMouseDown);
+    this.$hue.addEventListener("touchstart", this._onHueMouseDown);
+    if (options.el)
+      this.appendTo(options.el);
+    if (options.background)
+      this.setBackgroundColor(options.background);
+    if (options.widthUnits)
+      this._widthUnits = options.widthUnits;
+    if (options.heightUnits)
+      this._heightUnits = options.heightUnits;
+    if (options.colors) {
+      this.$colors = this._document.createElement("div");
+      this.$colors.className = "color-picker-colors";
+      this.$el.appendChild(this.$colors);
+      this.$colors.innerHTML = options.colors.map((color) => `<div class="color-picker-color" style="background: ${color}"></div>`).join("");
+    }
+    this.setSize(options.width || 175, options.height || 150);
+    this.setColor(options.color);
+  }
+  /**
+  * Add the ColorPicker instance to a DOM element.
+  * @param  {HTMLElement} el
+  * @return {ColorPicker} Returns itself for chaining purpose
+  */
+  appendTo(el) {
+    if (typeof el === "string")
+      document.querySelector(el).appendChild(this.$el);
+    else
+      el.appendChild(this.$el);
+    return this;
+  }
+  /**
+  * Removes picker from its parent and kill all listeners.
+  * Call this method for proper destroy.
+  */
+  remove() {
+    this._callbacks = [];
+    this._onSaturationMouseUp();
+    this._onHueMouseUp();
+    this.$saturation.removeEventListener("mousedown", this._onSaturationMouseDown);
+    this.$saturation.removeEventListener("touchstart", this._onSaturationMouseDown);
+    this.$hue.removeEventListener("mousedown", this._onHueMouseDown);
+    this.$hue.removeEventListener("touchstart", this._onHueMouseDown);
+    if (this.$el.parentNode)
+      this.$el.parentNode.removeChild(this.$el);
+  }
+  /**
+  * Manually set the current color of the picker. This is the method
+  * used on instantiation to convert `color` option to actual color for
+  * the picker. Param can be a hexadecimal number or an hex String.
+  * @param {String|Number} color hex color desired
+  * @return {ColorPicker} Returns itself for chaining purpose
+  */
+  setColor(color) {
+    this._inputIsNumber = !isNaN(Number(color));
+    this.color.fromHex(color);
+    const { h, s, v } = this.color.hsv;
+    if (!isNaN(h))
+      this.hue = h;
+    this._moveSelectorTo(this._saturationWidth * s, (1 - v) * this._hueHeight);
+    this._moveHueTo((1 - this.hue) * this._hueHeight);
+    this._updateHue();
+    return this;
+  }
+  /**
+  * Set size of the color picker for a given width and height. Note that
+  * a padding of 5px will be added if you chose to use the background option
+  * of the constructor.
+  * @param {Number} width
+  * @param {Number} height
+  * @return {ColorPicker} Returns itself for chaining purpose
+  */
+  setSize(width, height) {
+    this.width = width;
+    this.height = height;
+    this.$el.style.width = this.width + this._widthUnits;
+    this.$el.style.height = this.height + this._heightUnits;
+    this._saturationWidth = this.width - 25;
+    this.$saturation.style.width = this._saturationWidth + "px";
+    this._hueHeight = this.height;
+    this._maxHue = this._hueHeight - 2;
+    return this;
+  }
+  /**
+  * Set the background color of the picker. It also adds a 5px padding
+  * for design purpose.
+  * @param {String|Number} color hex color desired for background
+  * @return {ColorPicker} Returns itself for chaining purpose
+  */
+  setBackgroundColor(color) {
+    this.backgroundColor.fromHex(color);
+    this.$el.style.padding = "5px";
+    this.$el.style.background = this.backgroundColor.hexString;
+    return this;
+  }
+  /**
+  * Removes background of the picker if previously set. It's no use
+  * calling this method if you didn't set the background option on start
+  * or if you didn't call setBackgroundColor previously.
+  */
+  setNoBackground() {
+    this.$el.style.padding = "0px";
+    this.$el.style.background = "none";
+    return this;
+  }
+  /**
+  * Registers callback to the update event of the picker.
+  * picker inherits from [component/emitter](https://github.com/component/emitter)
+  * so you could do the same thing by calling `colorPicker.on('update');`
+  * @param  {Function} callback
+  * @return {ColorPicker} Returns itself for chaining purpose
+  */
+  onChange(callback) {
+    if (this._callbacks.indexOf(callback) < 0) {
+      this._callbacks.push(callback);
+      callback(this.getHexString());
+    }
+    return this;
+  }
+  /**
+  * Is true when mouse is down and user is currently choosing a color.
+  */
+  get isChoosing() {
+    return this._isChoosing;
+  }
+  /* =============================================================================
+    Color getters
+  ============================================================================= */
+  /**
+  * Main color getter, will return a formatted color string depending on input
+  * or a number depending on the last setColor call.
+  * @return {Number|String}
+  */
+  getColor() {
+    if (this._inputIsNumber)
+      return this.getHexNumber();
+    return this.getHexString();
+  }
+  /**
+  * Returns color as css hex string (ex: '#FF0000').
+  * @return {String}
+  */
+  getHexString() {
+    return this.color.hexString.toUpperCase();
+  }
+  /**
+  * Returns color as number (ex: 0xFF0000).
+  * @return {Number}
+  */
+  getHexNumber() {
+    return this.color.hex;
+  }
+  /**
+  * Returns color as {r: 1, g: 0, b: 0} object.
+  * @return {Object}
+  */
+  getRGB() {
+    return this.color.rgb;
+  }
+  /**
+  * Returns color as {h: 100, s: 1, v: 1} object.
+  * @return {Object}
+  */
+  getHSV() {
+    return this.color.hsv;
+  }
+  /**
+  * Returns true if color is perceived as dark
+  * @return {Boolean}
+  */
+  isDark() {
+    return this.color.isDark;
+  }
+  /**
+  * Returns true if color is perceived as light
+  * @return {Boolean}
+  */
+  isLight() {
+    return this.color.isLight;
+  }
+  /* =============================================================================
+    Private methods
+  ============================================================================= */
+  _moveSelectorTo(x, y) {
+    this.position.x = clamp(x, 0, this._saturationWidth);
+    this.position.y = clamp(y, 0, this._hueHeight);
+    this.$sbSelector.style.transform = `translate(${this.position.x}px, ${this.position.y}px)`;
+  }
+  _updateColorFromPosition() {
+    this.color.fromHsv({
+      h: this.hue,
+      s: this.position.x / this._saturationWidth,
+      v: 1 - this.position.y / this._hueHeight
+    });
+    this._updateColor();
+  }
+  _moveHueTo(y) {
+    this._huePosition = clamp(y, 0, this._maxHue);
+    this.$hSelector.style.transform = `translateY(${this._huePosition}px)`;
+  }
+  _updateHueFromPosition() {
+    const hsvColor = this.getHSV();
+    this.hue = 1 - this._huePosition / this._maxHue;
+    this.color.fromHsv({
+      h: this.hue,
+      s: hsvColor.s,
+      v: hsvColor.v
+    });
+    this._updateHue();
+  }
+  _updateHue() {
+    this.hueColor.fromHsv({
+      h: this.hue,
+      s: 1,
+      v: 1
+    });
+    this.$hSelector.style.background = this.hueColor.hexString;
+    this.$saturation.style.background = `linear-gradient(to right, #fff, ${this.hueColor.hexString})`;
+    this._updateColor();
+  }
+  _updateColor() {
+    this.$sbSelector.style.background = this.getHexString();
+    this.$sbSelector.style.borderColor = this.isDark() ? "#fff" : "#000";
+    this._triggerChange();
+  }
+  _triggerChange() {
+    this._callbacks.forEach((callback) => callback(this.getHexString()));
+  }
+}
 const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "onInput$",
-    "value"
+    "value",
+    "presetColors"
   ]);
   const store = useStore({
     value: (props.value ?? "#FFFFFF") || "#FFFFFF"
@@ -595,10 +894,10 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         if (!pickerDiv.children.length) {
           if (isServer)
             return;
-          const picker = new a({
+          const picker = new ColorPicker({
             el: pickerDiv,
             color: store2.value,
-            background: "#1D1D1D",
+            colors: props2.presetColors,
             width: 150,
             height: 150
           });
@@ -853,10 +1152,10 @@ const OutputFieldRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
           alertsStore
         ])
       }, null, 0, null),
-      alertsStore.alerts.map((alert, i2) => /* @__PURE__ */ _jsxQ("p", {
+      alertsStore.alerts.map((alert, i) => /* @__PURE__ */ _jsxQ("p", {
         class: _wrapSignal(alert, "class"),
         dangerouslySetInnerHTML: _wrapSignal(alert, "text")
-      }, null, null, 3, `output-alert${i2}`))
+      }, null, null, 3, `output-alert${i}`))
     ]
   }, 1, "ze_2");
 }, "OutputFieldRaw_component_OxiM0W3AR0o"));