@luminescent/ui 0.7.6 → 0.8.0

package/lib/index.qwik.mjs

@@ -1,5 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _wrapSignal, useStylesQrl, useLexicalScope, _IMMUTABLE, _jsxBranch, useStore } from "@builder.io/qwik";
-import { isServer } from "@builder.io/qwik/build";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _wrapSignal, useStore, useLexicalScope, _IMMUTABLE, _jsxBranch, useStylesQrl } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
   class: "block h-32 -mt-32",
@@ -23,7 +22,7 @@ const sizeClasses = {
   lg: "text-base px-6 py-3 rounded-lg gap-3",
   xl: "text-base px-8 py-4 rounded-xl gap-4"
 };
-const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95";
+const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95 whitespace-nowrap";
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
@@ -269,7 +268,7 @@ const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -305,80 +304,6 @@ function getMousePosition(e) {
   };
 }
 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() {
-    this._brightness = getBrightness(this._rgba);
-    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 getBrightness(color) {
   const { r, g, b } = color;
   return (r * 299 + g * 587 + b * 114) / 1e3;
@@ -403,7 +328,6 @@ function rgbToHex(color) {
   ];
   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;
@@ -473,325 +397,6 @@ function rgbToHsv(color) {
     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$",
@@ -799,98 +404,16 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     "presetColors",
     "preview"
   ]);
-  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
-    .color-picker {
-      display: flex;
-      gap: 12px;
-      height: 185px !important;
-      width: 100% !important;
-      padding: 15px;
-      border-radius: 10px;
-      border: 1px solid rgb(31 41 55);
-      filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
-      background: rgba(31 41 55 / 40%);
-      backdrop-filter: blur(10px);
-      user-select: none;
-      position: relative;
-      z-index: 1000;
-    }
-
-    .color-picker-saturation {
-      position: relative;
-      height: 100%;
-      width: 100%;
-      background: linear-gradient(to right, #FFFFFF, #FF0000);
-      float: left;
-      border-radius: 5px;
-      border: 1px solid rgb(31 41 55);
-    }
-
-    .color-picker-brightness {
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 1));
-    }
-
-    .color-picker-sbSelector {
-      border: 1px solid white;
-      position: absolute;
-      width: 14px;
-      height: 14px;
-      background: white;
-      border-radius: 10px;
-      top: -7px;
-      left: -7px;
-      box-sizing: border-box;
-    }
-
-    .color-picker-hue {
-      width: 8px;
-      border-radius: 5px;
-      height: 100%;
-      position: relative;
-      float: left;
-      background: linear-gradient(rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 34%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 84%, rgb(255, 0, 0) 100%);
-      border: 1px solid rgb(31 41 55);
-    }
-
-    .color-picker-colors {
-      height: 100%;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-      float: left;
-      justify-content: space-evenly;
-      flex-wrap: wrap;
-    }
-
-    .color-picker-color {
-      height: 25px;
-      width: 25px;
-      border-radius: 5px;
-      position: relative;
-      background: red;
-      border: 1px solid rgb(31 41 55);
-    }
-
-    .color-picker-hSelector {
-      border: 1px solid white;
-      position: absolute;
-      width: 14px;
-      height: 14px;
-      background: white;
-      border-radius: 10px;
-      top: -6px;
-      left: -4px;
-      box-sizing: border-box;
-    }
-  `, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
-  return /* @__PURE__ */ _jsxQ("div", null, null, [
+  const store = useStore({
+    opened: false
+  });
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "relative"
+  }, [
     /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
-      class: "mb-2 flex"
+      class: "text-gray-300 pb-1 flex"
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0s_0"), 1, null),
     /* @__PURE__ */ _jsxC(TextInputRaw, {
       ...props1,
@@ -898,54 +421,16 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         return props.value ?? "#000000";
       },
       onBlur$: /* @__PURE__ */ inlinedQrl(() => {
-        const [props12] = useLexicalScope();
-        const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
-        pickerDiv.classList.add("opacity-0", "pointer-events-none", "scale-95");
+        const [store2] = useLexicalScope();
+        store2.opened = false;
       }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
-        props1
+        store
       ]),
-      onFocus$: /* @__PURE__ */ inlinedQrl((event, element) => {
-        const [props12, props2] = useLexicalScope();
-        const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
-        if (!pickerDiv.children.length) {
-          if (isServer)
-            return;
-          const picker = new ColorPicker({
-            el: pickerDiv,
-            color: props2.value ?? "#000000",
-            colors: props2.presetColors,
-            width: 150,
-            height: 150
-          });
-          picker.onChange((color) => {
-            element.value = color;
-            switch (props2.preview ?? "left") {
-              case "full":
-                element.style.backgroundColor = color;
-                element.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
-                break;
-              case "left":
-                element.style.borderLeft = `40px solid ${color}`;
-                break;
-              case "right":
-                element.style.borderRight = `40px solid ${color}`;
-                break;
-              case "top":
-                element.style.borderTop = `10px solid ${color}`;
-                break;
-              case "bottom":
-                element.style.borderBottom = `10px solid ${color}`;
-                break;
-            }
-            if (props2.onInput$)
-              props2.onInput$(color, element);
-          });
-          element.addEventListener("input", () => picker.setColor(element.value));
-        }
-        pickerDiv.classList.remove("opacity-0", "pointer-events-none", "scale-95");
+      onFocus$: /* @__PURE__ */ inlinedQrl(() => {
+        const [store2] = useLexicalScope();
+        store2.opened = true;
       }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
-        props1,
-        props
+        store
       ]),
       style: (props.preview ?? "left") == "full" ? {
         backgroundColor: `${props.value ?? "#000000"}`,
@@ -960,18 +445,288 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         borderBottom: `10px solid ${props.value ?? "#000000"}`
       } : {},
       [_IMMUTABLE]: {
+        onBlur$: _IMMUTABLE,
+        onFocus$: _IMMUTABLE,
         value: _fnSignal((p0) => p0.value ?? "#000000", [
           props
         ], 'p0.value??"#000000"')
       }
     }, 0, "0s_1"),
-    /* @__PURE__ */ _jsxQ("div", {
-      id: `${props1.id}-color-picker`
-    }, {
-      class: "absolute mt-2 opacity-0 transition-all pointer-events-none scale-95"
-    }, null, 3, null)
-  ], 1, "0s_2");
+    /* @__PURE__ */ _jsxC(ColorPickerRaw, {
+      get color() {
+        return props.value ?? "#000000";
+      },
+      get colors() {
+        return [
+          "#FAEDCB",
+          "#C9E4DE",
+          "#C6DEF1",
+          "#DBCDF0",
+          "#F2C6DE",
+          "#FCD05C",
+          "#5FE2C5",
+          "#4498DB",
+          "#9863E7",
+          "#E43A96",
+          ...props.presetColors ?? []
+        ];
+      },
+      get class() {
+        return {
+          "transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "opacity-0 pointer-events-none scale-95": !store.opened
+        };
+      },
+      onInput$: /* @__PURE__ */ inlinedQrl((color) => {
+        const [props12, props2] = useLexicalScope();
+        const el = document.getElementById(props12.id);
+        el.value = color;
+        switch (props2.preview ?? "left") {
+          case "full":
+            el.style.backgroundColor = color;
+            el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
+            break;
+          case "left":
+            el.style.borderLeft = `40px solid ${color}`;
+            break;
+          case "right":
+            el.style.borderRight = `40px solid ${color}`;
+            break;
+          case "top":
+            el.style.borderTop = `10px solid ${color}`;
+            break;
+          case "bottom":
+            el.style.borderBottom = `10px solid ${color}`;
+            break;
+        }
+        props2.onInput$?.(color);
+      }, "ColorInput_component_div_ColorPickerRaw_onInput_wTO4B2czR7s", [
+        props1,
+        props
+      ]),
+      [_IMMUTABLE]: {
+        class: _fnSignal((p0) => ({
+          "transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "opacity-0 pointer-events-none scale-95": !p0.opened
+        }), [
+          store
+        ], '{"transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 pointer-events-none scale-95":!p0.opened}'),
+        color: _fnSignal((p0) => p0.value ?? "#000000", [
+          props
+        ], 'p0.value??"#000000"'),
+        colors: _fnSignal((p0) => [
+          "#FAEDCB",
+          "#C9E4DE",
+          "#C6DEF1",
+          "#DBCDF0",
+          "#F2C6DE",
+          "#FCD05C",
+          "#5FE2C5",
+          "#4498DB",
+          "#9863E7",
+          "#E43A96",
+          ...p0.presetColors ?? []
+        ], [
+          props
+        ], '["#FAEDCB","#C9E4DE","#C6DEF1","#DBCDF0","#F2C6DE","#FCD05C","#5FE2C5","#4498DB","#9863E7","#E43A96",...p0.presetColors??[]]')
+      }
+    }, 3, "0s_2")
+  ], 1, "0s_3");
 }, "ColorInput_component_jilGo0Bn3Ps"));
+const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "color",
+    "colors",
+    "onInput$"
+  ]);
+  const width = 125;
+  const maxHue = 148;
+  const hsvColor = rgbToHsv(hexNumberToRgb(hexStringToNumber(props.color)));
+  const store = useStore({
+    hue: {
+      position: hsvColor.h * maxHue,
+      color: rgbToHex(hsvToRgb({
+        h: hsvColor.h,
+        s: 1,
+        v: 1
+      }))
+    },
+    bPosition: (1 - hsvColor.v) * maxHue,
+    sPosition: hsvColor.s * width,
+    color: props.color
+  });
+  const setColor = /* @__PURE__ */ inlinedQrl((color) => {
+    const [maxHue2, props2, store2, width2] = useLexicalScope();
+    store2.color = color;
+    const hsv = rgbToHsv(hexNumberToRgb(hexStringToNumber(color)));
+    store2.hue.position = hsv.h * maxHue2;
+    store2.hue.color = rgbToHex(hsvToRgb({
+      h: hsv.h,
+      s: 1,
+      v: 1
+    }));
+    store2.sPosition = hsv.s * width2;
+    store2.bPosition = (1 - hsv.v) * maxHue2;
+    props2.onInput$?.(color);
+  }, "ColorPickerRaw_component_setColor_KSE5T0GnULs", [
+    maxHue,
+    props,
+    store,
+    width
+  ]);
+  const hueChange = /* @__PURE__ */ inlinedQrl((e, hOffset) => {
+    const [maxHue2, props2, store2] = useLexicalScope();
+    const { y } = getMousePosition(e);
+    store2.hue.position = clamp(maxHue2 - (y - hOffset), 0, maxHue2);
+    const hsvColor2 = rgbToHsv(hexNumberToRgb(hexStringToNumber(store2.color)));
+    const h = store2.hue.position / maxHue2;
+    hsvColor2.h = h;
+    store2.hue.color = rgbToHex(hsvToRgb({
+      h,
+      s: 1,
+      v: 1
+    }));
+    store2.color = rgbToHex(hsvToRgb(hsvColor2));
+    props2.onInput$?.(store2.color);
+  }, "ColorPickerRaw_component_hueChange_za4ruRb84uA", [
+    maxHue,
+    props,
+    store
+  ]);
+  const hueMouseDown = /* @__PURE__ */ inlinedQrl((e, el) => {
+    const [hueChange2] = useLexicalScope();
+    const hOffset = el.getBoundingClientRect().top;
+    hueChange2(e, hOffset);
+    const eventListener = (e2) => hueChange2(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);
+  }, "ColorPickerRaw_component_hueMouseDown_IbHBnI0jzpg", [
+    hueChange
+  ]);
+  const sbChange = /* @__PURE__ */ inlinedQrl((e, hOffset) => {
+    const [maxHue2, props2, store2, width2] = useLexicalScope();
+    const { x, y } = getMousePosition(e);
+    store2.bPosition = clamp(y - hOffset.top, 0, maxHue2);
+    store2.sPosition = clamp(x - hOffset.left, 0, width2);
+    const s = store2.sPosition / width2;
+    const v = 1 - store2.bPosition / maxHue2;
+    store2.color = rgbToHex(hsvToRgb({
+      h: store2.hue.position / maxHue2,
+      s,
+      v
+    }));
+    props2.onInput$?.(store2.color);
+  }, "ColorPickerRaw_component_sbChange_yhwlg2HYP8Y", [
+    maxHue,
+    props,
+    store,
+    width
+  ]);
+  const sbMouseDown = /* @__PURE__ */ inlinedQrl((e, el) => {
+    const [sbChange2] = useLexicalScope();
+    const offset = el.getBoundingClientRect();
+    sbChange2(e, offset);
+    const eventListener = (e2) => sbChange2(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);
+  }, "ColorPickerRaw_component_sbMouseDown_hRgkP7lymfY", [
+    sbChange
+  ]);
+  return /* @__PURE__ */ _jsxQ("div", {
+    class: {
+      "transition-all p-4 gap-4 bg-gray-800/50 backdrop-blur-xl flex rounded-lg border border-gray-700 touch-none": true,
+      ...props1.class
+    }
+  }, {
+    "preventdefault:mousedown": true,
+    "preventdefault:touchstart": true
+  }, [
+    /* @__PURE__ */ _jsxQ("div", null, {
+      class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
+      onMouseDown$: sbMouseDown,
+      onTouchStart$: sbMouseDown,
+      "preventdefault:mousedown": true,
+      "preventdefault:touchstart": true,
+      style: _fnSignal((p0) => ({
+        background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
+      }), [
+        store
+      ], "{background:`linear-gradient(to right, #FFFFFF, ${p0.hue.color})`}")
+    }, [
+      /* @__PURE__ */ _jsxQ("div", null, {
+        class: "w-[125px] h-[150px] border border-gray-700 rounded-md bg-gradient-to-b from-transparent to-black"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("div", null, {
+        class: "absolute -top-2 -left-2 w-4 h-4 border border-white rounded-full bg-white",
+        style: _fnSignal((p0) => ({
+          background: p0.color,
+          transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
+        }), [
+          store
+        ], "{background:p0.color,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
+      }, null, 3, null)
+    ], 3, null),
+    /* @__PURE__ */ _jsxQ("div", null, {
+      class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
+      onMouseDown$: hueMouseDown,
+      onTouchStart$: hueMouseDown,
+      "preventdefault:mousedown": true,
+      "preventdefault:touchstart": true,
+      style: {
+        background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
+      }
+    }, /* @__PURE__ */ _jsxQ("div", null, {
+      class: "absolute -bottom-2 -left-[5px] w-4 h-4 border border-white rounded-full bg-[#ff0000]",
+      style: _fnSignal((p0) => ({
+        transform: `translateY(${-p0.hue.position}px)`,
+        background: p0.hue.color
+      }), [
+        store
+      ], "{transform:`translateY(${-p0.hue.position}px)`,background:p0.hue.color}")
+    }, null, 3, null), 3, null),
+    /* @__PURE__ */ _jsxQ("div", null, {
+      class: "h-[150px] flex flex-col flex-wrap gap-1 justify-evenly"
+    }, props.colors.map((color, i) => {
+      return /* @__PURE__ */ _jsxQ("button", {
+        onMouseDown$: /* @__PURE__ */ inlinedQrl(() => {
+          const [color2, setColor2] = useLexicalScope();
+          setColor2(color2);
+        }, "ColorPickerRaw_component_div_div_button_onMouseDown_C5tqQYvx7wA", [
+          color,
+          setColor
+        ]),
+        onTouchStart$: /* @__PURE__ */ inlinedQrl(() => {
+          const [color2, setColor2] = useLexicalScope();
+          setColor2(color2);
+        }, "ColorPickerRaw_component_div_div_button_onTouchStart_qgiiO8Blb88", [
+          color,
+          setColor
+        ]),
+        style: `background: ${color}`
+      }, {
+        class: "w-[25px] h-[25px] border border-gray-700 rounded-md hover:scale-110 transition-all",
+        "preventdefault:mousedown": true,
+        "preventdefault:touchstart": true
+      }, null, 2, i);
+    }), 1, null)
+  ], 1, "0s_4");
+}, "ColorPickerRaw_component_CWQPPcezhyA"));
 const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "width",
@@ -998,8 +753,9 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   _jsxBranch();
   let Component = /* @__PURE__ */ _jsxC(Fragment, {
     children: /* @__PURE__ */ _jsxQ("h2", null, {
-      class: "flex flex-1 items-center font-bold text-2xl"
+      class: "flex gap-2 flex-1 items-center font-bold text-2xl whitespace-nowrap"
     }, [
+      /* @__PURE__ */ _jsxC(Slot, null, 3, "dL_0"),
       props.id && /* @__PURE__ */ _jsxC(Anchor, {
         get id() {
           return props.id;
@@ -1009,8 +765,7 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
             props
           ], "p0.id")
         }
-      }, 3, "dL_0"),
-      /* @__PURE__ */ _jsxC(Slot, null, 3, "dL_1")
+      }, 3, "dL_1")
     ], 1, null)
   }, 1, "dL_2");
   if (props.subheader)
@@ -1019,7 +774,7 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     }, [
       Component,
       /* @__PURE__ */ _jsxQ("h3", null, {
-        class: "flex flex-1 items-center text-gray-400 text-sm"
+        class: "flex items-center text-gray-400 text-sm"
       }, _fnSignal((p0) => p0.subheader, [
         props
       ], "p0.subheader"), 3, null)
@@ -1089,7 +844,7 @@ const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1175,6 +930,7 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ...props1,
       class: {
         [InputClasses]: true,
+        "text-center": true,
         ...props1.class
       }
     }, {
@@ -1254,7 +1010,7 @@ const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1410,7 +1166,7 @@ const TextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1489,7 +1245,7 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     props.label && /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
-      class: "text-gray-100"
+      class: "text-gray-300"
     }, _fnSignal((p0) => p0.label, [
       props
     ], "p0.label"), 3, "yu_0")
@@ -1936,6 +1692,7 @@ export {
   ButtonAnchor,
   Card,
   ColorInput,
+  ColorPickerRaw,
   Header,
   InputClasses,
   LoadingIcon,