@luminescent/ui 0.17.0 → 0.18.0

package/lib/index.qwik.cjs

@@ -767,151 +767,17 @@ 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",
-    "colors",
-    "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(ColorPicker, {
-      get id() {
-        return props1.id;
-      },
-      get value() {
-        return props.value ?? "#000000";
-      },
-      get colors() {
-        return props.colors;
-      },
-      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"'),
-        colors: qwik._fnSignal((p0) => p0.colors, [
-          props
-        ], "p0.colors"),
-        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 ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  qwik._jsxBranch();
   const props1 = qwik._restProps(props, [
     "id",
     "value",
     "colors",
-    "onInput$"
+    "color",
+    "onInput$",
+    "preview",
+    "horizontal",
+    "showInput"
   ]);
   const width = 125;
   const maxHue = 148;
@@ -931,8 +797,8 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
   });
   const setColor = /* @__PURE__ */ qwik.inlinedQrl((color) => {
     const [maxHue2, props2, store2, width2] = qwik.useLexicalScope();
-    store2.value = 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,
@@ -941,8 +807,8 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     }));
     store2.sPosition = hsv.s * width2;
     store2.bPosition = (1 - hsv.v) * maxHue2;
-    props2.onInput$?.(color);
-  }, "ColorPicker_component_setColor_dQW0vdqeCN0", [
+    props2.onInput$?.(store2.value);
+  }, "ColorPicker_component_setColor_QqVIlZ9HOqM", [
     maxHue,
     props,
     store,
@@ -962,7 +828,7 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     }));
     store2.value = rgbToHex(hsvToRgb(hsvColor2));
     props2.onInput$?.(store2.value);
-  }, "ColorPicker_component_hueChange_hJtp8803ipI", [
+  }, "ColorPicker_component_hueChange_mB1ILUl3lVg", [
     maxHue,
     props,
     store
@@ -982,7 +848,7 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPicker_component_hueMouseDown_6A9i0ZBsZm8", [
+  }, "ColorPicker_component_hueMouseDown_469EJwWnUmc", [
     hueChange
   ]);
   const sbChange = /* @__PURE__ */ qwik.inlinedQrl((e, hOffset) => {
@@ -998,7 +864,7 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       v
     }));
     props2.onInput$?.(store2.value);
-  }, "ColorPicker_component_sbChange_0v0ifR3opLw", [
+  }, "ColorPicker_component_sbChange_PWXSO5Wzkt4", [
     maxHue,
     props,
     store,
@@ -1019,7 +885,7 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPicker_component_sbMouseDown_hy5wUud5AMs", [
+  }, "ColorPicker_component_sbMouseDown_lP7vsjR4o9U", [
     sbChange
   ]);
   qwik.useOn("change", /* @__PURE__ */ qwik.inlinedQrl(() => {
@@ -1030,18 +896,18 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     if (!inputElement)
       return;
     setColor2(inputElement.value);
-  }, "ColorPicker_component_useOn_M72kyUTBS6Q", [
+  }, "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")
@@ -1062,10 +928,15 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
         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.value,
             transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
@@ -1073,7 +944,7 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
             store
           ], "{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: {
@@ -1092,10 +963,49 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
           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.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",
@@ -1113,43 +1023,30 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
         "#FFFFFF"
       ]).map((color, i) => {
         return /* @__PURE__ */ qwik._jsxQ("button", {
-          style: `background: ${color}`,
-          onMouseDown$: /* @__PURE__ */ qwik.inlinedQrl(() => {
-            const [color2, setColor2] = qwik.useLexicalScope();
-            setColor2(color2);
-          }, "ColorPicker_component_div_div_button_onMouseDown_Q70JtgqzpdY", [
-            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);
-          }, "ColorPicker_component_div_div_button_onTouchStart_m0QkWI0vvWo", [
+          }, "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);
-        }, "ColorPicker_component_div_div_button_onMouseDown_1_BkgpnioHbWM", [
-          setColor
-        ]),
-        onTouchStart$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+        onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
           const [setColor2] = qwik.useLexicalScope();
           const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
           setColor2(color);
-        }, "ColorPicker_component_div_div_button_onTouchStart_1_WXsfg0rO47c", [
+        }, "ColorPicker_component_div_div_button_onClick_1_f6gYSNc77Ik", [
           setColor
         ])
       }, /* @__PURE__ */ qwik._jsxC(Shuffle, {
@@ -1157,10 +1054,175 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
         [qwik._IMMUTABLE]: {
           class: qwik._IMMUTABLE
         }
-      }, 3, "0s_4"), 1, null)
+      }, 3, "sj_1"), 1, null)
     ], 1, null)
-  ], 1, "0s_5");
-}, "ColorPicker_component_01s3C1v6iWI"));
+  ], 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",

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,151 +765,17 @@ 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",
-    "colors",
-    "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(ColorPicker, {
-      get id() {
-        return props1.id;
-      },
-      get value() {
-        return props.value ?? "#000000";
-      },
-      get colors() {
-        return props.colors;
-      },
-      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"'),
-        colors: _fnSignal((p0) => p0.colors, [
-          props
-        ], "p0.colors"),
-        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 ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
   const props1 = _restProps(props, [
     "id",
     "value",
     "colors",
-    "onInput$"
+    "color",
+    "onInput$",
+    "preview",
+    "horizontal",
+    "showInput"
   ]);
   const width = 125;
   const maxHue = 148;
@@ -929,8 +795,8 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   });
   const setColor = /* @__PURE__ */ inlinedQrl((color) => {
     const [maxHue2, props2, store2, width2] = useLexicalScope();
-    store2.value = 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,
@@ -939,8 +805,8 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     }));
     store2.sPosition = hsv.s * width2;
     store2.bPosition = (1 - hsv.v) * maxHue2;
-    props2.onInput$?.(color);
-  }, "ColorPicker_component_setColor_dQW0vdqeCN0", [
+    props2.onInput$?.(store2.value);
+  }, "ColorPicker_component_setColor_QqVIlZ9HOqM", [
     maxHue,
     props,
     store,
@@ -960,7 +826,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     }));
     store2.value = rgbToHex(hsvToRgb(hsvColor2));
     props2.onInput$?.(store2.value);
-  }, "ColorPicker_component_hueChange_hJtp8803ipI", [
+  }, "ColorPicker_component_hueChange_mB1ILUl3lVg", [
     maxHue,
     props,
     store
@@ -980,7 +846,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPicker_component_hueMouseDown_6A9i0ZBsZm8", [
+  }, "ColorPicker_component_hueMouseDown_469EJwWnUmc", [
     hueChange
   ]);
   const sbChange = /* @__PURE__ */ inlinedQrl((e, hOffset) => {
@@ -996,7 +862,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       v
     }));
     props2.onInput$?.(store2.value);
-  }, "ColorPicker_component_sbChange_0v0ifR3opLw", [
+  }, "ColorPicker_component_sbChange_PWXSO5Wzkt4", [
     maxHue,
     props,
     store,
@@ -1017,7 +883,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPicker_component_sbMouseDown_hy5wUud5AMs", [
+  }, "ColorPicker_component_sbMouseDown_lP7vsjR4o9U", [
     sbChange
   ]);
   useOn("change", /* @__PURE__ */ inlinedQrl(() => {
@@ -1028,18 +894,18 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     if (!inputElement)
       return;
     setColor2(inputElement.value);
-  }, "ColorPicker_component_useOn_M72kyUTBS6Q", [
+  }, "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")
@@ -1060,10 +926,15 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         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.value,
             transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
@@ -1071,7 +942,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
             store
           ], "{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: {
@@ -1090,10 +961,49 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
           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.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",
@@ -1111,43 +1021,30 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         "#FFFFFF"
       ]).map((color, i) => {
         return /* @__PURE__ */ _jsxQ("button", {
-          style: `background: ${color}`,
-          onMouseDown$: /* @__PURE__ */ inlinedQrl(() => {
-            const [color2, setColor2] = useLexicalScope();
-            setColor2(color2);
-          }, "ColorPicker_component_div_div_button_onMouseDown_Q70JtgqzpdY", [
-            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);
-          }, "ColorPicker_component_div_div_button_onTouchStart_m0QkWI0vvWo", [
+          }, "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);
-        }, "ColorPicker_component_div_div_button_onMouseDown_1_BkgpnioHbWM", [
-          setColor
-        ]),
-        onTouchStart$: /* @__PURE__ */ inlinedQrl(() => {
+        onClick$: /* @__PURE__ */ inlinedQrl(() => {
           const [setColor2] = useLexicalScope();
           const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
           setColor2(color);
-        }, "ColorPicker_component_div_div_button_onTouchStart_1_WXsfg0rO47c", [
+        }, "ColorPicker_component_div_div_button_onClick_1_f6gYSNc77Ik", [
           setColor
         ])
       }, /* @__PURE__ */ _jsxC(Shuffle, {
@@ -1155,10 +1052,175 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         [_IMMUTABLE]: {
           class: _IMMUTABLE
         }
-      }, 3, "0s_4"), 1, null)
+      }, 3, "sj_1"), 1, null)
     ], 1, null)
-  ], 1, "0s_5");
-}, "ColorPicker_component_01s3C1v6iWI"));
+  ], 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",

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;
     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>;
-    value?: string;
-    colors?: string[];
-}
-export declare const ColorPicker: 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.17.0",
+  "version": "0.18.0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",