@luminescent/ui 0.16.6 → 0.17.0

package/lib/index.qwik.cjs

@@ -771,7 +771,7 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
   const props1 = qwik._restProps(props, [
     "onInput$",
     "value",
-    "presetColors",
+    "colors",
     "preview",
     "class"
   ]);
@@ -845,30 +845,16 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
         onBlur$: qwik._IMMUTABLE
       }
     }, 0, "0s_1"),
-    /* @__PURE__ */ qwik._jsxC(ColorPickerRaw, {
+    /* @__PURE__ */ qwik._jsxC(ColorPicker, {
       get id() {
         return props1.id;
       },
-      get color() {
+      get value() {
         return props.value ?? "#000000";
       },
-      colors: [
-        "#FAEDCB",
-        "#C9E4DE",
-        "#C6DEF1",
-        "#DBCDF0",
-        "#F2C6DE",
-        "#FCD05C",
-        "#5FE2C5",
-        "#4498DB",
-        "#9863E7",
-        "#E43A96",
-        "#000000",
-        "#555555",
-        "#AAAAAA",
-        "#FFFFFF",
-        ...props.presetColors ?? []
-      ],
+      get colors() {
+        return props.colors;
+      },
       get class() {
         return {
           "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
@@ -898,15 +884,18 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
             break;
         }
         props2.onInput$?.(color);
-      }, "ColorInput_component_div_ColorPickerRaw_onInput_wTO4B2czR7s", [
+      }, "ColorInput_component_div_ColorPicker_onInput_iZguRdHILBQ", [
         props1,
         props
       ]),
       [qwik._IMMUTABLE]: {
         id: qwik._wrapProp(props1, "id"),
-        color: qwik._fnSignal((p0) => p0.value ?? "#000000", [
+        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
@@ -917,16 +906,16 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
     }, 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) => {
   const props1 = qwik._restProps(props, [
     "id",
-    "color",
+    "value",
     "colors",
     "onInput$"
   ]);
   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,11 +927,11 @@ 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;
+    store2.value = color;
     const hsv = rgbToHsv(hexNumberToRgb(hexStringToNumber(color)));
     store2.hue.position = hsv.h * maxHue2;
     store2.hue.color = rgbToHex(hsvToRgb({
@@ -953,7 +942,7 @@ 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", [
+  }, "ColorPicker_component_setColor_dQW0vdqeCN0", [
     maxHue,
     props,
     store,
@@ -963,7 +952,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 +960,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_hJtp8803ipI", [
     maxHue,
     props,
     store
@@ -993,7 +982,7 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPickerRaw_component_hueMouseDown_IbHBnI0jzpg", [
+  }, "ColorPicker_component_hueMouseDown_6A9i0ZBsZm8", [
     hueChange
   ]);
   const sbChange = /* @__PURE__ */ qwik.inlinedQrl((e, hOffset) => {
@@ -1003,13 +992,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_0v0ifR3opLw", [
     maxHue,
     props,
     store,
@@ -1030,7 +1019,7 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPickerRaw_component_sbMouseDown_hRgkP7lymfY", [
+  }, "ColorPicker_component_sbMouseDown_hy5wUud5AMs", [
     sbChange
   ]);
   qwik.useOn("change", /* @__PURE__ */ qwik.inlinedQrl(() => {
@@ -1041,7 +1030,7 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     if (!inputElement)
       return;
     setColor2(inputElement.value);
-  }, "ColorPickerRaw_component_useOn_hsh00WCnzOE", [
+  }, "ColorPicker_component_useOn_M72kyUTBS6Q", [
     props,
     setColor
   ]));
@@ -1078,11 +1067,11 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         /* @__PURE__ */ qwik._jsxQ("div", null, {
           class: "absolute -top-2 -left-2 w-4 h-4 border border-white rounded-full bg-white",
           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),
       /* @__PURE__ */ qwik._jsxQ("div", null, {
@@ -1107,20 +1096,35 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: "w-[150px] flex flex-wrap gap-1 justify-evenly"
     }, [
-      props.colors.map((color, i) => {
+      (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", [
+          }, "ColorPicker_component_div_div_button_onMouseDown_Q70JtgqzpdY", [
             color,
             setColor
           ]),
           onTouchStart$: /* @__PURE__ */ qwik.inlinedQrl(() => {
             const [color2, setColor2] = qwik.useLexicalScope();
             setColor2(color2);
-          }, "ColorPickerRaw_component_div_div_button_onTouchStart_qgiiO8Blb88", [
+          }, "ColorPicker_component_div_div_button_onTouchStart_m0QkWI0vvWo", [
             color,
             setColor
           ])
@@ -1138,14 +1142,14 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
           const [setColor2] = qwik.useLexicalScope();
           const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
           setColor2(color);
-        }, "ColorPickerRaw_component_div_div_button_onMouseDown_1_30vaDl3iDKc", [
+        }, "ColorPicker_component_div_div_button_onMouseDown_1_BkgpnioHbWM", [
           setColor
         ]),
         onTouchStart$: /* @__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_onTouchStart_1_WXsfg0rO47c", [
           setColor
         ])
       }, /* @__PURE__ */ qwik._jsxC(Shuffle, {
@@ -1156,7 +1160,7 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       }, 3, "0s_4"), 1, null)
     ], 1, null)
   ], 1, "0s_5");
-}, "ColorPickerRaw_component_CWQPPcezhyA"));
+}, "ColorPicker_component_01s3C1v6iWI"));
 const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2718,7 +2722,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

@@ -769,7 +769,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
   const props1 = _restProps(props, [
     "onInput$",
     "value",
-    "presetColors",
+    "colors",
     "preview",
     "class"
   ]);
@@ -843,30 +843,16 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         onBlur$: _IMMUTABLE
       }
     }, 0, "0s_1"),
-    /* @__PURE__ */ _jsxC(ColorPickerRaw, {
+    /* @__PURE__ */ _jsxC(ColorPicker, {
       get id() {
         return props1.id;
       },
-      get color() {
+      get value() {
         return props.value ?? "#000000";
       },
-      colors: [
-        "#FAEDCB",
-        "#C9E4DE",
-        "#C6DEF1",
-        "#DBCDF0",
-        "#F2C6DE",
-        "#FCD05C",
-        "#5FE2C5",
-        "#4498DB",
-        "#9863E7",
-        "#E43A96",
-        "#000000",
-        "#555555",
-        "#AAAAAA",
-        "#FFFFFF",
-        ...props.presetColors ?? []
-      ],
+      get colors() {
+        return props.colors;
+      },
       get class() {
         return {
           "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
@@ -896,15 +882,18 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
             break;
         }
         props2.onInput$?.(color);
-      }, "ColorInput_component_div_ColorPickerRaw_onInput_wTO4B2czR7s", [
+      }, "ColorInput_component_div_ColorPicker_onInput_iZguRdHILBQ", [
         props1,
         props
       ]),
       [_IMMUTABLE]: {
         id: _wrapProp(props1, "id"),
-        color: _fnSignal((p0) => p0.value ?? "#000000", [
+        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
@@ -915,16 +904,16 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     }, 3, "0s_2")
   ], 1, "0s_3");
 }, "ColorInput_component_jilGo0Bn3Ps"));
-const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "id",
-    "color",
+    "value",
     "colors",
     "onInput$"
   ]);
   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,11 +925,11 @@ 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;
+    store2.value = color;
     const hsv = rgbToHsv(hexNumberToRgb(hexStringToNumber(color)));
     store2.hue.position = hsv.h * maxHue2;
     store2.hue.color = rgbToHex(hsvToRgb({
@@ -951,7 +940,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     store2.sPosition = hsv.s * width2;
     store2.bPosition = (1 - hsv.v) * maxHue2;
     props2.onInput$?.(color);
-  }, "ColorPickerRaw_component_setColor_KSE5T0GnULs", [
+  }, "ColorPicker_component_setColor_dQW0vdqeCN0", [
     maxHue,
     props,
     store,
@@ -961,7 +950,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 +958,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_hJtp8803ipI", [
     maxHue,
     props,
     store
@@ -991,7 +980,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPickerRaw_component_hueMouseDown_IbHBnI0jzpg", [
+  }, "ColorPicker_component_hueMouseDown_6A9i0ZBsZm8", [
     hueChange
   ]);
   const sbChange = /* @__PURE__ */ inlinedQrl((e, hOffset) => {
@@ -1001,13 +990,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_0v0ifR3opLw", [
     maxHue,
     props,
     store,
@@ -1028,7 +1017,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     };
     window.addEventListener("mouseup", mouseUpListener);
     window.addEventListener("touchend", mouseUpListener);
-  }, "ColorPickerRaw_component_sbMouseDown_hRgkP7lymfY", [
+  }, "ColorPicker_component_sbMouseDown_hy5wUud5AMs", [
     sbChange
   ]);
   useOn("change", /* @__PURE__ */ inlinedQrl(() => {
@@ -1039,7 +1028,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     if (!inputElement)
       return;
     setColor2(inputElement.value);
-  }, "ColorPickerRaw_component_useOn_hsh00WCnzOE", [
+  }, "ColorPicker_component_useOn_M72kyUTBS6Q", [
     props,
     setColor
   ]));
@@ -1076,11 +1065,11 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         /* @__PURE__ */ _jsxQ("div", null, {
           class: "absolute -top-2 -left-2 w-4 h-4 border border-white rounded-full bg-white",
           style: _fnSignal((p0) => ({
-            background: p0.color,
+            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),
       /* @__PURE__ */ _jsxQ("div", null, {
@@ -1105,20 +1094,35 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     /* @__PURE__ */ _jsxQ("div", null, {
       class: "w-[150px] flex flex-wrap gap-1 justify-evenly"
     }, [
-      props.colors.map((color, i) => {
+      (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", [
+          }, "ColorPicker_component_div_div_button_onMouseDown_Q70JtgqzpdY", [
             color,
             setColor
           ]),
           onTouchStart$: /* @__PURE__ */ inlinedQrl(() => {
             const [color2, setColor2] = useLexicalScope();
             setColor2(color2);
-          }, "ColorPickerRaw_component_div_div_button_onTouchStart_qgiiO8Blb88", [
+          }, "ColorPicker_component_div_div_button_onTouchStart_m0QkWI0vvWo", [
             color,
             setColor
           ])
@@ -1136,14 +1140,14 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
           const [setColor2] = useLexicalScope();
           const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
           setColor2(color);
-        }, "ColorPickerRaw_component_div_div_button_onMouseDown_1_30vaDl3iDKc", [
+        }, "ColorPicker_component_div_div_button_onMouseDown_1_BkgpnioHbWM", [
           setColor
         ]),
         onTouchStart$: /* @__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_onTouchStart_1_WXsfg0rO47c", [
           setColor
         ])
       }, /* @__PURE__ */ _jsxC(Shuffle, {
@@ -1154,7 +1158,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       }, 3, "0s_4"), 1, null)
     ], 1, null)
   ], 1, "0s_5");
-}, "ColorPickerRaw_component_CWQPPcezhyA"));
+}, "ColorPicker_component_01s3C1v6iWI"));
 const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2717,7 +2721,7 @@ export {
   ButtonAnchor,
   Card,
   ColorInput,
-  ColorPickerRaw,
+  ColorPicker,
   Dropdown,
   DropdownRaw,
   Header,

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

@@ -3,7 +3,7 @@ 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';
     id: string;
 }
@@ -13,7 +13,7 @@ export interface ColorPickerProps extends Omit<PropsOf<'div'>, 'class' | 'onInpu
         [key: string]: boolean;
     };
     onInput$?: QRL<(color: string) => void>;
-    color: string;
-    colors: string[];
+    value?: string;
+    colors?: string[];
 }
-export declare const ColorPickerRaw: import("@builder.io/qwik").Component<ColorPickerProps>;
+export declare const ColorPicker: import("@builder.io/qwik").Component<ColorPickerProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.16.6",
+  "version": "0.17.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 {};