@luminescent/ui 0.16.6 → 0.18.0

package/lib/index.qwik.cjs

@@ -767,166 +767,21 @@ const Shuffle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQr
     ], "p0.width")
   }, 0, "zt_0");
 }, "Shuffle_component_DnmmsuyAgDE"));
-const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  const props1 = qwik._restProps(props, [
-    "onInput$",
-    "value",
-    "presetColors",
-    "preview",
-    "class"
-  ]);
-  const store = qwik.useStore({
-    opened: false
-  });
-  return /* @__PURE__ */ qwik._jsxQ("div", null, {
-    class: "relative"
-  }, [
-    /* @__PURE__ */ qwik._jsxQ("label", {
-      for: qwik._wrapSignal(props1, "id")
-    }, {
-      class: "text-gray-300 pb-1 flex select-none"
-    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "0s_0"), 1, null),
-    /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
-      get class() {
-        return {
-          "w-full": true,
-          ...props.class
-        };
-      },
-      ...props1,
-      get value() {
-        return props.value ?? "#000000";
-      },
-      onFocus$: /* @__PURE__ */ qwik.inlinedQrl(() => {
-        const [store2] = qwik.useLexicalScope();
-        store2.opened = true;
-      }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
-        store
-      ]),
-      onBlur$: /* @__PURE__ */ qwik.inlinedQrl(() => {
-        const [store2] = qwik.useLexicalScope();
-        store2.opened = false;
-      }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
-        store
-      ]),
-      onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
-        const [props12, props2] = qwik.useLexicalScope();
-        const div = document.getElementById(`${props12.id}-picker`);
-        const event = new Event("change");
-        div.dispatchEvent(event);
-        props2.onInput$?.(el.value);
-      }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
-        props1,
-        props
-      ]),
-      style: (props.preview ?? "left") == "full" ? {
-        backgroundColor: `${props.value ?? "#000000"}`,
-        color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
-      } : (props.preview ?? "left") == "left" ? {
-        borderLeft: `35px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "right" ? {
-        borderRight: `35px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "top" ? {
-        borderTop: `10px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "bottom" ? {
-        borderBottom: `10px solid ${props.value ?? "#000000"}`
-      } : {},
-      [qwik._IMMUTABLE]: {
-        class: qwik._fnSignal((p0) => ({
-          "w-full": true,
-          ...p0.class
-        }), [
-          props
-        ], '{"w-full":true,...p0.class}'),
-        value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"'),
-        onFocus$: qwik._IMMUTABLE,
-        onBlur$: qwik._IMMUTABLE
-      }
-    }, 0, "0s_1"),
-    /* @__PURE__ */ qwik._jsxC(ColorPickerRaw, {
-      get id() {
-        return props1.id;
-      },
-      get color() {
-        return props.value ?? "#000000";
-      },
-      colors: [
-        "#FAEDCB",
-        "#C9E4DE",
-        "#C6DEF1",
-        "#DBCDF0",
-        "#F2C6DE",
-        "#FCD05C",
-        "#5FE2C5",
-        "#4498DB",
-        "#9863E7",
-        "#E43A96",
-        "#000000",
-        "#555555",
-        "#AAAAAA",
-        "#FFFFFF",
-        ...props.presetColors ?? []
-      ],
-      get class() {
-        return {
-          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 scale-95 pointer-events-none": !store.opened
-        };
-      },
-      onInput$: /* @__PURE__ */ qwik.inlinedQrl((color) => {
-        const [props12, props2] = qwik.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 = `35px solid ${color}`;
-            break;
-          case "right":
-            el.style.borderRight = `35px 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
-      ]),
-      [qwik._IMMUTABLE]: {
-        id: qwik._wrapProp(props1, "id"),
-        color: qwik._fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"'),
-        class: qwik._fnSignal((p0) => ({
-          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 scale-95 pointer-events-none": !p0.opened
-        }), [
-          store
-        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}')
-      }
-    }, 3, "0s_2")
-  ], 1, "0s_3");
-}, "ColorInput_component_jilGo0Bn3Ps"));
-const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  qwik._jsxBranch();
   const props1 = qwik._restProps(props, [
     "id",
-    "color",
+    "value",
     "colors",
-    "onInput$"
+    "color",
+    "onInput$",
+    "preview",
+    "horizontal",
+    "showInput"
   ]);
   const width = 125;
   const maxHue = 148;
-  const hsvColor = rgbToHsv(hexNumberToRgb(hexStringToNumber(props.color)));
+  const hsvColor = rgbToHsv(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000")));
   const store = qwik.useStore({
     hue: {
       position: hsvColor.h * maxHue,
@@ -938,12 +793,12 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     },
     bPosition: (1 - hsvColor.v) * maxHue,
     sPosition: hsvColor.s * width,
-    color: props.color
+    value: props.value ?? "#000000"
   });
   const setColor = /* @__PURE__ */ qwik.inlinedQrl((color) => {
     const [maxHue2, props2, store2, width2] = qwik.useLexicalScope();
-    store2.color = color;
     const hsv = rgbToHsv(hexNumberToRgb(hexStringToNumber(color)));
+    store2.value = rgbToHex(hsvToRgb(hsv));
     store2.hue.position = hsv.h * maxHue2;
     store2.hue.color = rgbToHex(hsvToRgb({
       h: hsv.h,
@@ -952,8 +807,8 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     }));
     store2.sPosition = hsv.s * width2;
     store2.bPosition = (1 - hsv.v) * maxHue2;
-    props2.onInput$?.(color);
-  }, "ColorPickerRaw_component_setColor_KSE5T0GnULs", [
+    props2.onInput$?.(store2.value);
+  }, "ColorPicker_component_setColor_QqVIlZ9HOqM", [
     maxHue,
     props,
     store,
@@ -963,7 +818,7 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     const [maxHue2, props2, store2] = qwik.useLexicalScope();
     const { y } = getMousePosition(e);
     store2.hue.position = clamp(maxHue2 - (y - hOffset), 0, maxHue2);
-    const hsvColor2 = rgbToHsv(hexNumberToRgb(hexStringToNumber(store2.color)));
+    const hsvColor2 = rgbToHsv(hexNumberToRgb(hexStringToNumber(store2.value)));
     const h = store2.hue.position / maxHue2;
     hsvColor2.h = h;
     store2.hue.color = rgbToHex(hsvToRgb({
@@ -971,9 +826,9 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       s: 1,
       v: 1
     }));
-    store2.color = rgbToHex(hsvToRgb(hsvColor2));
-    props2.onInput$?.(store2.color);
-  }, "ColorPickerRaw_component_hueChange_za4ruRb84uA", [
+    store2.value = rgbToHex(hsvToRgb(hsvColor2));
+    props2.onInput$?.(store2.value);
+  }, "ColorPicker_component_hueChange_mB1ILUl3lVg", [
     maxHue,
     props,
     store
@@ -993,7 +848,7 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPickerRaw_component_hueMouseDown_IbHBnI0jzpg", [
+  }, "ColorPicker_component_hueMouseDown_469EJwWnUmc", [
     hueChange
   ]);
   const sbChange = /* @__PURE__ */ qwik.inlinedQrl((e, hOffset) => {
@@ -1003,13 +858,13 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     store2.sPosition = clamp(x - hOffset.left, 0, width2);
     const s = store2.sPosition / width2;
     const v = 1 - store2.bPosition / maxHue2;
-    store2.color = rgbToHex(hsvToRgb({
+    store2.value = rgbToHex(hsvToRgb({
       h: store2.hue.position / maxHue2,
       s,
       v
     }));
-    props2.onInput$?.(store2.color);
-  }, "ColorPickerRaw_component_sbChange_yhwlg2HYP8Y", [
+    props2.onInput$?.(store2.value);
+  }, "ColorPicker_component_sbChange_PWXSO5Wzkt4", [
     maxHue,
     props,
     store,
@@ -1030,7 +885,7 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPickerRaw_component_sbMouseDown_hRgkP7lymfY", [
+  }, "ColorPicker_component_sbMouseDown_lP7vsjR4o9U", [
     sbChange
   ]);
   qwik.useOn("change", /* @__PURE__ */ qwik.inlinedQrl(() => {
@@ -1041,18 +896,18 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     if (!inputElement)
       return;
     setColor2(inputElement.value);
-  }, "ColorPickerRaw_component_useOn_hsh00WCnzOE", [
+  }, "ColorPicker_component_useOn_U80lAP6qXKg", [
     props,
     setColor
   ]));
   return /* @__PURE__ */ qwik._jsxQ("div", {
     class: {
-      "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex flex-col gap-6 rounded-lg border border-gray-700 touch-none": true,
+      "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-6 rounded-lg border border-gray-700 touch-none": true,
+      "flex": true,
+      "flex-col": !props.horizontal,
       ...props1.class
     }
   }, {
-    "preventdefault:mousedown": true,
-    "preventdefault:touchstart": true,
     id: qwik._fnSignal((p0) => p0.id ? `${p0.id}-picker` : void 0, [
       props
     ], "p0.id?`${p0.id}-picker`:undefined")
@@ -1073,18 +928,23 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         onTouchStart$: sbMouseDown
       }, [
         /* @__PURE__ */ qwik._jsxQ("div", null, {
-          class: "w-[123px] h-[148px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black"
+          class: "w-[123px] h-[149px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black"
         }, null, 3, null),
-        /* @__PURE__ */ qwik._jsxQ("div", null, {
-          class: "absolute -top-2 -left-2 w-4 h-4 border border-white rounded-full bg-white",
+        /* @__PURE__ */ qwik._jsxQ("div", {
+          class: {
+            "absolute -top-2 -left-2 w-4 h-4 border rounded-full bg-white": true,
+            "border-white": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) < 0.5,
+            "border-black": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5
+          }
+        }, {
           style: qwik._fnSignal((p0) => ({
-            background: p0.color,
+            background: p0.value,
             transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
           }), [
             store
-          ], "{background:p0.color,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
+          ], "{background:p0.value,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
         }, null, 3, null)
-      ], 3, null),
+      ], 1, null),
       /* @__PURE__ */ qwik._jsxQ("div", null, {
         class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
         style: {
@@ -1103,49 +963,90 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
           store
         ], "{transform:`translateY(${-p0.hue.position}px)`,background:p0.hue.color}")
       }, null, 3, null), 3, null)
-    ], 3, null),
+    ], 1, null),
     /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: "w-[150px] flex flex-wrap gap-1 justify-evenly"
+      class: "w-[150px] flex flex-wrap gap-1 justify-between"
     }, [
-      props.colors.map((color, i) => {
+      (props.showInput ?? true) && /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
+        class: {
+          "w-[150px] mb-4": true
+        },
+        get value() {
+          return store.value;
+        },
+        style: (props.preview ?? "left") == "full" ? {
+          backgroundColor: `${store.value}`,
+          color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
+        } : (props.preview ?? "left") == "left" ? {
+          borderLeft: `35px solid ${store.value}`
+        } : (props.preview ?? "left") == "right" ? {
+          borderRight: `35px solid ${store.value}`
+        } : (props.preview ?? "left") == "top" ? {
+          borderTop: `10px solid ${store.value}`
+        } : (props.preview ?? "left") == "bottom" ? {
+          borderBottom: `10px solid ${store.value}`
+        } : {},
+        get color() {
+          return props.color ?? "gray";
+        },
+        onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
+          const [setColor2] = qwik.useLexicalScope();
+          setColor2(el.value);
+        }, "ColorPicker_component_div_div_TextInputRaw_onInput_nhKRhFMCxTk", [
+          setColor
+        ]),
+        [qwik._IMMUTABLE]: {
+          class: qwik._IMMUTABLE,
+          value: qwik._fnSignal((p0) => p0.value, [
+            store
+          ], "p0.value"),
+          color: qwik._fnSignal((p0) => p0.color ?? "gray", [
+            props
+          ], 'p0.color??"gray"'),
+          onInput$: qwik._IMMUTABLE
+        }
+      }, 3, "sj_0"),
+      (props.colors ?? [
+        "#FAEDCB",
+        "#C9E4DE",
+        "#C6DEF1",
+        "#DBCDF0",
+        "#F2C6DE",
+        "#FCD05C",
+        "#5FE2C5",
+        "#4498DB",
+        "#9863E7",
+        "#E43A96",
+        "#000000",
+        "#555555",
+        "#AAAAAA",
+        "#FFFFFF"
+      ]).map((color, i) => {
         return /* @__PURE__ */ qwik._jsxQ("button", {
-          style: `background: ${color}`,
-          onMouseDown$: /* @__PURE__ */ qwik.inlinedQrl(() => {
-            const [color2, setColor2] = qwik.useLexicalScope();
-            setColor2(color2);
-          }, "ColorPickerRaw_component_div_div_button_onMouseDown_C5tqQYvx7wA", [
-            color,
-            setColor
-          ]),
-          onTouchStart$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+          style: {
+            background: color,
+            outline: color === store.value ? "2px solid #ffffffaa" : void 0
+          },
+          onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
             const [color2, setColor2] = qwik.useLexicalScope();
             setColor2(color2);
-          }, "ColorPickerRaw_component_div_div_button_onTouchStart_qgiiO8Blb88", [
+          }, "ColorPicker_component_div_div_button_onClick_Ta02Z5rle88", [
             color,
             setColor
           ])
         }, {
-          class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
-          "preventdefault:mousedown": true,
-          "preventdefault:touchstart": true
+          class: {
+            "w-[1.6rem] h-[1.6rem] rounded-md hover:scale-110 motion-safe:transition-all -outline-offset-1 outline outline-1 outline-white/30": true
+          }
         }, null, 2, i);
       }),
       /* @__PURE__ */ qwik._jsxQ("button", null, {
         class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
-        "preventdefault:mousedown": true,
-        "preventdefault:touchstart": true,
-        onMouseDown$: /* @__PURE__ */ qwik.inlinedQrl(() => {
-          const [setColor2] = qwik.useLexicalScope();
-          const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-          setColor2(color);
-        }, "ColorPickerRaw_component_div_div_button_onMouseDown_1_30vaDl3iDKc", [
-          setColor
-        ]),
-        onTouchStart$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+        onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
           const [setColor2] = qwik.useLexicalScope();
           const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
           setColor2(color);
-        }, "ColorPickerRaw_component_div_div_button_onTouchStart_1_w30s4j6SxyE", [
+        }, "ColorPicker_component_div_div_button_onClick_1_f6gYSNc77Ik", [
           setColor
         ])
       }, /* @__PURE__ */ qwik._jsxC(Shuffle, {
@@ -1153,10 +1054,175 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         [qwik._IMMUTABLE]: {
           class: qwik._IMMUTABLE
         }
-      }, 3, "0s_4"), 1, null)
+      }, 3, "sj_1"), 1, null)
     ], 1, null)
-  ], 1, "0s_5");
-}, "ColorPickerRaw_component_CWQPPcezhyA"));
+  ], 1, "sj_2");
+}, "ColorPicker_component_D1OSB6ycLrI"));
+const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  const props1 = qwik._restProps(props, [
+    "onInput$",
+    "value",
+    "colors",
+    "preview",
+    "horizontal",
+    "class",
+    "showInput"
+  ]);
+  const store = qwik.useStore({
+    opened: false
+  });
+  return /* @__PURE__ */ qwik._jsxQ("div", null, {
+    class: "relative"
+  }, [
+    /* @__PURE__ */ qwik._jsxQ("label", {
+      for: qwik._wrapSignal(props1, "id")
+    }, {
+      class: "text-gray-300 pb-1 flex select-none"
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "0s_0"), 1, null),
+    /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
+      get class() {
+        return {
+          "w-full": true,
+          ...props.class
+        };
+      },
+      ...props1,
+      get value() {
+        return props.value ?? "#000000";
+      },
+      onFocus$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+        const [props12, store2] = qwik.useLexicalScope();
+        const abortController = new AbortController();
+        document.addEventListener("click", (e) => {
+          if (e.target instanceof HTMLElement && !e.target.closest(`#${props12.id}-picker`) && !e.target.closest(`#${props12.id}`)) {
+            store2.opened = false;
+            abortController.abort();
+          }
+        }, {
+          signal: abortController.signal
+        });
+        store2.opened = true;
+      }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
+        props1,
+        store
+      ]),
+      onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
+        const [props12, props2] = qwik.useLexicalScope();
+        const div = document.getElementById(`${props12.id}-picker`);
+        const event = new Event("change");
+        div.dispatchEvent(event);
+        props2.onInput$?.(el.value);
+      }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
+        props1,
+        props
+      ]),
+      style: (props.preview ?? "left") == "full" ? {
+        backgroundColor: `${props.value ?? "#000000"}`,
+        color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
+      } : (props.preview ?? "left") == "left" ? {
+        borderLeft: `35px solid ${props.value ?? "#000000"}`
+      } : (props.preview ?? "left") == "right" ? {
+        borderRight: `35px solid ${props.value ?? "#000000"}`
+      } : (props.preview ?? "left") == "top" ? {
+        borderTop: `10px solid ${props.value ?? "#000000"}`
+      } : (props.preview ?? "left") == "bottom" ? {
+        borderBottom: `10px solid ${props.value ?? "#000000"}`
+      } : {},
+      [qwik._IMMUTABLE]: {
+        class: qwik._fnSignal((p0) => ({
+          "w-full": true,
+          ...p0.class
+        }), [
+          props
+        ], '{"w-full":true,...p0.class}'),
+        value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
+          props
+        ], 'p0.value??"#000000"')
+      }
+    }, 0, "0s_1"),
+    /* @__PURE__ */ qwik._jsxC(ColorPicker, {
+      get id() {
+        return props1.id;
+      },
+      get value() {
+        return props.value ?? "#000000";
+      },
+      get color() {
+        return props1.color;
+      },
+      get colors() {
+        return props.colors;
+      },
+      get preview() {
+        return props.preview ?? "left";
+      },
+      get horizontal() {
+        return props.horizontal;
+      },
+      get showInput() {
+        return props.showInput ?? false;
+      },
+      get class() {
+        return {
+          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "opacity-0 scale-95 pointer-events-none": !store.opened
+        };
+      },
+      onInput$: /* @__PURE__ */ qwik.inlinedQrl((color) => {
+        const [props12, props2] = qwik.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 = `35px solid ${color}`;
+            break;
+          case "right":
+            el.style.borderRight = `35px 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_ColorPicker_onInput_iZguRdHILBQ", [
+        props1,
+        props
+      ]),
+      [qwik._IMMUTABLE]: {
+        id: qwik._wrapProp(props1, "id"),
+        value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
+          props
+        ], 'p0.value??"#000000"'),
+        color: qwik._wrapProp(props1, "color"),
+        colors: qwik._fnSignal((p0) => p0.colors, [
+          props
+        ], "p0.colors"),
+        preview: qwik._fnSignal((p0) => p0.preview ?? "left", [
+          props
+        ], 'p0.preview??"left"'),
+        horizontal: qwik._fnSignal((p0) => p0.horizontal, [
+          props
+        ], "p0.horizontal"),
+        showInput: qwik._fnSignal((p0) => p0.showInput ?? false, [
+          props
+        ], "p0.showInput??false"),
+        class: qwik._fnSignal((p0) => ({
+          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "opacity-0 scale-95 pointer-events-none": !p0.opened
+        }), [
+          store
+        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}')
+      }
+    }, 3, "0s_2")
+  ], 1, "0s_3");
+}, "ColorInput_component_jilGo0Bn3Ps"));
 const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2718,7 +2784,7 @@ exports.Button = Button;
 exports.ButtonAnchor = ButtonAnchor;
 exports.Card = Card;
 exports.ColorInput = ColorInput;
-exports.ColorPickerRaw = ColorPickerRaw;
+exports.ColorPicker = ColorPicker;
 exports.Dropdown = Dropdown;
 exports.DropdownRaw = DropdownRaw;
 exports.Header = Header;

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, _wrapSignal, useStore, useLexicalScope, _wrapProp, useOn, useStylesQrl, useSignal } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, _wrapSignal, useStore, useOn, useLexicalScope, _wrapProp, useStylesQrl, useSignal } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
   id: _fnSignal((p0) => p0.id, [
@@ -765,166 +765,21 @@ const Shuffle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     ], "p0.width")
   }, 0, "zt_0");
 }, "Shuffle_component_DnmmsuyAgDE"));
-const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const props1 = _restProps(props, [
-    "onInput$",
-    "value",
-    "presetColors",
-    "preview",
-    "class"
-  ]);
-  const store = useStore({
-    opened: false
-  });
-  return /* @__PURE__ */ _jsxQ("div", null, {
-    class: "relative"
-  }, [
-    /* @__PURE__ */ _jsxQ("label", {
-      for: _wrapSignal(props1, "id")
-    }, {
-      class: "text-gray-300 pb-1 flex select-none"
-    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0s_0"), 1, null),
-    /* @__PURE__ */ _jsxC(TextInputRaw, {
-      get class() {
-        return {
-          "w-full": true,
-          ...props.class
-        };
-      },
-      ...props1,
-      get value() {
-        return props.value ?? "#000000";
-      },
-      onFocus$: /* @__PURE__ */ inlinedQrl(() => {
-        const [store2] = useLexicalScope();
-        store2.opened = true;
-      }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
-        store
-      ]),
-      onBlur$: /* @__PURE__ */ inlinedQrl(() => {
-        const [store2] = useLexicalScope();
-        store2.opened = false;
-      }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
-        store
-      ]),
-      onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
-        const [props12, props2] = useLexicalScope();
-        const div = document.getElementById(`${props12.id}-picker`);
-        const event = new Event("change");
-        div.dispatchEvent(event);
-        props2.onInput$?.(el.value);
-      }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
-        props1,
-        props
-      ]),
-      style: (props.preview ?? "left") == "full" ? {
-        backgroundColor: `${props.value ?? "#000000"}`,
-        color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
-      } : (props.preview ?? "left") == "left" ? {
-        borderLeft: `35px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "right" ? {
-        borderRight: `35px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "top" ? {
-        borderTop: `10px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "bottom" ? {
-        borderBottom: `10px solid ${props.value ?? "#000000"}`
-      } : {},
-      [_IMMUTABLE]: {
-        class: _fnSignal((p0) => ({
-          "w-full": true,
-          ...p0.class
-        }), [
-          props
-        ], '{"w-full":true,...p0.class}'),
-        value: _fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"'),
-        onFocus$: _IMMUTABLE,
-        onBlur$: _IMMUTABLE
-      }
-    }, 0, "0s_1"),
-    /* @__PURE__ */ _jsxC(ColorPickerRaw, {
-      get id() {
-        return props1.id;
-      },
-      get color() {
-        return props.value ?? "#000000";
-      },
-      colors: [
-        "#FAEDCB",
-        "#C9E4DE",
-        "#C6DEF1",
-        "#DBCDF0",
-        "#F2C6DE",
-        "#FCD05C",
-        "#5FE2C5",
-        "#4498DB",
-        "#9863E7",
-        "#E43A96",
-        "#000000",
-        "#555555",
-        "#AAAAAA",
-        "#FFFFFF",
-        ...props.presetColors ?? []
-      ],
-      get class() {
-        return {
-          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 scale-95 pointer-events-none": !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 = `35px solid ${color}`;
-            break;
-          case "right":
-            el.style.borderRight = `35px 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]: {
-        id: _wrapProp(props1, "id"),
-        color: _fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"'),
-        class: _fnSignal((p0) => ({
-          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 scale-95 pointer-events-none": !p0.opened
-        }), [
-          store
-        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}')
-      }
-    }, 3, "0s_2")
-  ], 1, "0s_3");
-}, "ColorInput_component_jilGo0Bn3Ps"));
-const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
   const props1 = _restProps(props, [
     "id",
-    "color",
+    "value",
     "colors",
-    "onInput$"
+    "color",
+    "onInput$",
+    "preview",
+    "horizontal",
+    "showInput"
   ]);
   const width = 125;
   const maxHue = 148;
-  const hsvColor = rgbToHsv(hexNumberToRgb(hexStringToNumber(props.color)));
+  const hsvColor = rgbToHsv(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000")));
   const store = useStore({
     hue: {
       position: hsvColor.h * maxHue,
@@ -936,12 +791,12 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     },
     bPosition: (1 - hsvColor.v) * maxHue,
     sPosition: hsvColor.s * width,
-    color: props.color
+    value: props.value ?? "#000000"
   });
   const setColor = /* @__PURE__ */ inlinedQrl((color) => {
     const [maxHue2, props2, store2, width2] = useLexicalScope();
-    store2.color = color;
     const hsv = rgbToHsv(hexNumberToRgb(hexStringToNumber(color)));
+    store2.value = rgbToHex(hsvToRgb(hsv));
     store2.hue.position = hsv.h * maxHue2;
     store2.hue.color = rgbToHex(hsvToRgb({
       h: hsv.h,
@@ -950,8 +805,8 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     }));
     store2.sPosition = hsv.s * width2;
     store2.bPosition = (1 - hsv.v) * maxHue2;
-    props2.onInput$?.(color);
-  }, "ColorPickerRaw_component_setColor_KSE5T0GnULs", [
+    props2.onInput$?.(store2.value);
+  }, "ColorPicker_component_setColor_QqVIlZ9HOqM", [
     maxHue,
     props,
     store,
@@ -961,7 +816,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     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 hsvColor2 = rgbToHsv(hexNumberToRgb(hexStringToNumber(store2.value)));
     const h = store2.hue.position / maxHue2;
     hsvColor2.h = h;
     store2.hue.color = rgbToHex(hsvToRgb({
@@ -969,9 +824,9 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       s: 1,
       v: 1
     }));
-    store2.color = rgbToHex(hsvToRgb(hsvColor2));
-    props2.onInput$?.(store2.color);
-  }, "ColorPickerRaw_component_hueChange_za4ruRb84uA", [
+    store2.value = rgbToHex(hsvToRgb(hsvColor2));
+    props2.onInput$?.(store2.value);
+  }, "ColorPicker_component_hueChange_mB1ILUl3lVg", [
     maxHue,
     props,
     store
@@ -991,7 +846,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPickerRaw_component_hueMouseDown_IbHBnI0jzpg", [
+  }, "ColorPicker_component_hueMouseDown_469EJwWnUmc", [
     hueChange
   ]);
   const sbChange = /* @__PURE__ */ inlinedQrl((e, hOffset) => {
@@ -1001,13 +856,13 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     store2.sPosition = clamp(x - hOffset.left, 0, width2);
     const s = store2.sPosition / width2;
     const v = 1 - store2.bPosition / maxHue2;
-    store2.color = rgbToHex(hsvToRgb({
+    store2.value = rgbToHex(hsvToRgb({
       h: store2.hue.position / maxHue2,
       s,
       v
     }));
-    props2.onInput$?.(store2.color);
-  }, "ColorPickerRaw_component_sbChange_yhwlg2HYP8Y", [
+    props2.onInput$?.(store2.value);
+  }, "ColorPicker_component_sbChange_PWXSO5Wzkt4", [
     maxHue,
     props,
     store,
@@ -1028,7 +883,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPickerRaw_component_sbMouseDown_hRgkP7lymfY", [
+  }, "ColorPicker_component_sbMouseDown_lP7vsjR4o9U", [
     sbChange
   ]);
   useOn("change", /* @__PURE__ */ inlinedQrl(() => {
@@ -1039,18 +894,18 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     if (!inputElement)
       return;
     setColor2(inputElement.value);
-  }, "ColorPickerRaw_component_useOn_hsh00WCnzOE", [
+  }, "ColorPicker_component_useOn_U80lAP6qXKg", [
     props,
     setColor
   ]));
   return /* @__PURE__ */ _jsxQ("div", {
     class: {
-      "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex flex-col gap-6 rounded-lg border border-gray-700 touch-none": true,
+      "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-6 rounded-lg border border-gray-700 touch-none": true,
+      "flex": true,
+      "flex-col": !props.horizontal,
       ...props1.class
     }
   }, {
-    "preventdefault:mousedown": true,
-    "preventdefault:touchstart": true,
     id: _fnSignal((p0) => p0.id ? `${p0.id}-picker` : void 0, [
       props
     ], "p0.id?`${p0.id}-picker`:undefined")
@@ -1071,18 +926,23 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         onTouchStart$: sbMouseDown
       }, [
         /* @__PURE__ */ _jsxQ("div", null, {
-          class: "w-[123px] h-[148px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black"
+          class: "w-[123px] h-[149px] rounded-[0.3rem] 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",
+        /* @__PURE__ */ _jsxQ("div", {
+          class: {
+            "absolute -top-2 -left-2 w-4 h-4 border rounded-full bg-white": true,
+            "border-white": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) < 0.5,
+            "border-black": getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5
+          }
+        }, {
           style: _fnSignal((p0) => ({
-            background: p0.color,
+            background: p0.value,
             transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
           }), [
             store
-          ], "{background:p0.color,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
+          ], "{background:p0.value,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
         }, null, 3, null)
-      ], 3, null),
+      ], 1, null),
       /* @__PURE__ */ _jsxQ("div", null, {
         class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
         style: {
@@ -1101,49 +961,90 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
           store
         ], "{transform:`translateY(${-p0.hue.position}px)`,background:p0.hue.color}")
       }, null, 3, null), 3, null)
-    ], 3, null),
+    ], 1, null),
     /* @__PURE__ */ _jsxQ("div", null, {
-      class: "w-[150px] flex flex-wrap gap-1 justify-evenly"
+      class: "w-[150px] flex flex-wrap gap-1 justify-between"
     }, [
-      props.colors.map((color, i) => {
+      (props.showInput ?? true) && /* @__PURE__ */ _jsxC(TextInputRaw, {
+        class: {
+          "w-[150px] mb-4": true
+        },
+        get value() {
+          return store.value;
+        },
+        style: (props.preview ?? "left") == "full" ? {
+          backgroundColor: `${store.value}`,
+          color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
+        } : (props.preview ?? "left") == "left" ? {
+          borderLeft: `35px solid ${store.value}`
+        } : (props.preview ?? "left") == "right" ? {
+          borderRight: `35px solid ${store.value}`
+        } : (props.preview ?? "left") == "top" ? {
+          borderTop: `10px solid ${store.value}`
+        } : (props.preview ?? "left") == "bottom" ? {
+          borderBottom: `10px solid ${store.value}`
+        } : {},
+        get color() {
+          return props.color ?? "gray";
+        },
+        onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
+          const [setColor2] = useLexicalScope();
+          setColor2(el.value);
+        }, "ColorPicker_component_div_div_TextInputRaw_onInput_nhKRhFMCxTk", [
+          setColor
+        ]),
+        [_IMMUTABLE]: {
+          class: _IMMUTABLE,
+          value: _fnSignal((p0) => p0.value, [
+            store
+          ], "p0.value"),
+          color: _fnSignal((p0) => p0.color ?? "gray", [
+            props
+          ], 'p0.color??"gray"'),
+          onInput$: _IMMUTABLE
+        }
+      }, 3, "sj_0"),
+      (props.colors ?? [
+        "#FAEDCB",
+        "#C9E4DE",
+        "#C6DEF1",
+        "#DBCDF0",
+        "#F2C6DE",
+        "#FCD05C",
+        "#5FE2C5",
+        "#4498DB",
+        "#9863E7",
+        "#E43A96",
+        "#000000",
+        "#555555",
+        "#AAAAAA",
+        "#FFFFFF"
+      ]).map((color, i) => {
         return /* @__PURE__ */ _jsxQ("button", {
-          style: `background: ${color}`,
-          onMouseDown$: /* @__PURE__ */ inlinedQrl(() => {
-            const [color2, setColor2] = useLexicalScope();
-            setColor2(color2);
-          }, "ColorPickerRaw_component_div_div_button_onMouseDown_C5tqQYvx7wA", [
-            color,
-            setColor
-          ]),
-          onTouchStart$: /* @__PURE__ */ inlinedQrl(() => {
+          style: {
+            background: color,
+            outline: color === store.value ? "2px solid #ffffffaa" : void 0
+          },
+          onClick$: /* @__PURE__ */ inlinedQrl(() => {
             const [color2, setColor2] = useLexicalScope();
             setColor2(color2);
-          }, "ColorPickerRaw_component_div_div_button_onTouchStart_qgiiO8Blb88", [
+          }, "ColorPicker_component_div_div_button_onClick_Ta02Z5rle88", [
             color,
             setColor
           ])
         }, {
-          class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
-          "preventdefault:mousedown": true,
-          "preventdefault:touchstart": true
+          class: {
+            "w-[1.6rem] h-[1.6rem] rounded-md hover:scale-110 motion-safe:transition-all -outline-offset-1 outline outline-1 outline-white/30": true
+          }
         }, null, 2, i);
       }),
       /* @__PURE__ */ _jsxQ("button", null, {
         class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
-        "preventdefault:mousedown": true,
-        "preventdefault:touchstart": true,
-        onMouseDown$: /* @__PURE__ */ inlinedQrl(() => {
-          const [setColor2] = useLexicalScope();
-          const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-          setColor2(color);
-        }, "ColorPickerRaw_component_div_div_button_onMouseDown_1_30vaDl3iDKc", [
-          setColor
-        ]),
-        onTouchStart$: /* @__PURE__ */ inlinedQrl(() => {
+        onClick$: /* @__PURE__ */ inlinedQrl(() => {
           const [setColor2] = useLexicalScope();
           const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
           setColor2(color);
-        }, "ColorPickerRaw_component_div_div_button_onTouchStart_1_w30s4j6SxyE", [
+        }, "ColorPicker_component_div_div_button_onClick_1_f6gYSNc77Ik", [
           setColor
         ])
       }, /* @__PURE__ */ _jsxC(Shuffle, {
@@ -1151,10 +1052,175 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         [_IMMUTABLE]: {
           class: _IMMUTABLE
         }
-      }, 3, "0s_4"), 1, null)
+      }, 3, "sj_1"), 1, null)
     ], 1, null)
-  ], 1, "0s_5");
-}, "ColorPickerRaw_component_CWQPPcezhyA"));
+  ], 1, "sj_2");
+}, "ColorPicker_component_D1OSB6ycLrI"));
+const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "onInput$",
+    "value",
+    "colors",
+    "preview",
+    "horizontal",
+    "class",
+    "showInput"
+  ]);
+  const store = useStore({
+    opened: false
+  });
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "relative"
+  }, [
+    /* @__PURE__ */ _jsxQ("label", {
+      for: _wrapSignal(props1, "id")
+    }, {
+      class: "text-gray-300 pb-1 flex select-none"
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0s_0"), 1, null),
+    /* @__PURE__ */ _jsxC(TextInputRaw, {
+      get class() {
+        return {
+          "w-full": true,
+          ...props.class
+        };
+      },
+      ...props1,
+      get value() {
+        return props.value ?? "#000000";
+      },
+      onFocus$: /* @__PURE__ */ inlinedQrl(() => {
+        const [props12, store2] = useLexicalScope();
+        const abortController = new AbortController();
+        document.addEventListener("click", (e) => {
+          if (e.target instanceof HTMLElement && !e.target.closest(`#${props12.id}-picker`) && !e.target.closest(`#${props12.id}`)) {
+            store2.opened = false;
+            abortController.abort();
+          }
+        }, {
+          signal: abortController.signal
+        });
+        store2.opened = true;
+      }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
+        props1,
+        store
+      ]),
+      onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
+        const [props12, props2] = useLexicalScope();
+        const div = document.getElementById(`${props12.id}-picker`);
+        const event = new Event("change");
+        div.dispatchEvent(event);
+        props2.onInput$?.(el.value);
+      }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
+        props1,
+        props
+      ]),
+      style: (props.preview ?? "left") == "full" ? {
+        backgroundColor: `${props.value ?? "#000000"}`,
+        color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
+      } : (props.preview ?? "left") == "left" ? {
+        borderLeft: `35px solid ${props.value ?? "#000000"}`
+      } : (props.preview ?? "left") == "right" ? {
+        borderRight: `35px solid ${props.value ?? "#000000"}`
+      } : (props.preview ?? "left") == "top" ? {
+        borderTop: `10px solid ${props.value ?? "#000000"}`
+      } : (props.preview ?? "left") == "bottom" ? {
+        borderBottom: `10px solid ${props.value ?? "#000000"}`
+      } : {},
+      [_IMMUTABLE]: {
+        class: _fnSignal((p0) => ({
+          "w-full": true,
+          ...p0.class
+        }), [
+          props
+        ], '{"w-full":true,...p0.class}'),
+        value: _fnSignal((p0) => p0.value ?? "#000000", [
+          props
+        ], 'p0.value??"#000000"')
+      }
+    }, 0, "0s_1"),
+    /* @__PURE__ */ _jsxC(ColorPicker, {
+      get id() {
+        return props1.id;
+      },
+      get value() {
+        return props.value ?? "#000000";
+      },
+      get color() {
+        return props1.color;
+      },
+      get colors() {
+        return props.colors;
+      },
+      get preview() {
+        return props.preview ?? "left";
+      },
+      get horizontal() {
+        return props.horizontal;
+      },
+      get showInput() {
+        return props.showInput ?? false;
+      },
+      get class() {
+        return {
+          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "opacity-0 scale-95 pointer-events-none": !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 = `35px solid ${color}`;
+            break;
+          case "right":
+            el.style.borderRight = `35px 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_ColorPicker_onInput_iZguRdHILBQ", [
+        props1,
+        props
+      ]),
+      [_IMMUTABLE]: {
+        id: _wrapProp(props1, "id"),
+        value: _fnSignal((p0) => p0.value ?? "#000000", [
+          props
+        ], 'p0.value??"#000000"'),
+        color: _wrapProp(props1, "color"),
+        colors: _fnSignal((p0) => p0.colors, [
+          props
+        ], "p0.colors"),
+        preview: _fnSignal((p0) => p0.preview ?? "left", [
+          props
+        ], 'p0.preview??"left"'),
+        horizontal: _fnSignal((p0) => p0.horizontal, [
+          props
+        ], "p0.horizontal"),
+        showInput: _fnSignal((p0) => p0.showInput ?? false, [
+          props
+        ], "p0.showInput??false"),
+        class: _fnSignal((p0) => ({
+          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "opacity-0 scale-95 pointer-events-none": !p0.opened
+        }), [
+          store
+        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}')
+      }
+    }, 3, "0s_2")
+  ], 1, "0s_3");
+}, "ColorInput_component_jilGo0Bn3Ps"));
 const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2717,7 +2783,7 @@ export {
   ButtonAnchor,
   Card,
   ColorInput,
-  ColorPickerRaw,
+  ColorPicker,
   Dropdown,
   DropdownRaw,
   Header,

package/lib-types/components/elements/ColorInput.d.ts

@@ -1,19 +1,12 @@
-import type { PropsOf, QRL } from '@builder.io/qwik';
+import type { QRL } from '@builder.io/qwik';
 import type { TextInputRawProps } from './TextInput';
 export interface ColorInputProps extends Omit<TextInputRawProps, 'onInput$' | 'children'> {
     onInput$?: QRL<(color: string) => void>;
     value?: string;
-    presetColors?: string[];
+    colors?: string[];
     preview?: 'left' | 'right' | 'top' | 'bottom' | 'full';
+    horizontal?: boolean;
+    showInput?: boolean;
     id: string;
 }
 export declare const ColorInput: import("@builder.io/qwik").Component<ColorInputProps>;
-export interface ColorPickerProps extends Omit<PropsOf<'div'>, 'class' | 'onInput$'> {
-    class: {
-        [key: string]: boolean;
-    };
-    onInput$?: QRL<(color: string) => void>;
-    color: string;
-    colors: string[];
-}
-export declare const ColorPickerRaw: import("@builder.io/qwik").Component<ColorPickerProps>;

package/lib-types/components/elements/ColorPicker.d.ts

@@ -0,0 +1,15 @@
+import type { PropsOf, QRL } from '@builder.io/qwik';
+import type { TextInputRawProps } from './TextInput';
+export interface ColorPickerProps extends Omit<PropsOf<'div'>, 'class' | 'onInput$'> {
+    class?: {
+        [key: string]: boolean;
+    };
+    onInput$?: QRL<(color: string) => void>;
+    value?: string;
+    colors?: string[];
+    color?: TextInputRawProps['color'];
+    preview?: 'left' | 'right' | 'top' | 'bottom' | 'full';
+    horizontal?: boolean;
+    showInput?: boolean;
+}
+export declare const ColorPicker: import("@builder.io/qwik").Component<ColorPickerProps>;

package/lib-types/components/elements.d.ts

@@ -3,6 +3,7 @@ export * from './elements/Blobs';
 export * from './elements/Button';
 export * from './elements/Card';
 export * from './elements/ColorInput';
+export * from './elements/ColorPicker';
 export * from './elements/Dropdown';
 export * from './elements/Header';
 export * from './elements/LoadingIcon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.16.6",
+  "version": "0.18.0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -41,22 +41,22 @@
   },
   "devDependencies": {
     "@anuragroy/tailwindcss-animate": "^1.0.6",
-    "@builder.io/qwik": "1.5.4",
-    "@builder.io/qwik-city": "^1.5.4",
+    "@builder.io/qwik": "1.5.6",
+    "@builder.io/qwik-city": "^1.5.6",
     "@types/eslint": "^8.56.10",
-    "@types/node": "^20.12.11",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
+    "@types/node": "^20.14.2",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
     "autoprefixer": "^10.4.19",
-    "chart.js": "^4.4.2",
+    "chart.js": "^4.4.3",
     "eslint": "^8.57.0",
     "eslint-plugin-qwik": "latest",
     "np": "^10.0.5",
     "postcss": "^8.4.38",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "3.4.4",
     "typescript": "5.4.5",
     "undici": "*",
-    "vite": "^5.2.11",
+    "vite": "^5.2.13",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }

package/lib-types/components/docs/SelectInput.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("@builder.io/qwik").Component<unknown>;
-export default _default;

package/lib-types/components/elements/SelectInput.d.ts

@@ -1,19 +0,0 @@
-import type { JSXChildren, PropsOf } from '@builder.io/qwik';
-import type { buttonColorClasses, sizeClasses } from './Button';
-interface SelectInputProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
-    class?: {
-        [key: string]: boolean;
-    };
-    display?: JSXChildren;
-    color?: keyof typeof buttonColorClasses;
-    size?: keyof typeof sizeClasses;
-    id: string;
-    values: {
-        name: JSXChildren;
-        value: string | number;
-        color?: keyof typeof buttonColorClasses;
-    }[];
-}
-export declare const SelectInput: import("@builder.io/qwik").Component<SelectInputProps>;
-export declare const SelectInputRaw: import("@builder.io/qwik").Component<SelectInputProps>;
-export {};