@luminescent/ui 0.5.1 → 0.6.0

package/lib/index.qwik.cjs

@@ -59,30 +59,27 @@ const ButtonAnchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
   }, null, 0, "7H_3");
 }, "ButtonAnchor_component_vQT9xS0lqew"));
 const LoadingIcon = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  return /* @__PURE__ */ qwik._jsxQ("div", null, {
-    class: "animate-spin"
-  }, /* @__PURE__ */ qwik._jsxS("svg", {
-    ...props,
-    children: [
-      /* @__PURE__ */ qwik._jsxQ("circle", null, {
-        class: "opacity-25",
-        cx: "12",
-        cy: "12",
-        r: "10",
-        stroke: "currentColor",
-        "stroke-width": "4"
-      }, null, 3, null),
-      /* @__PURE__ */ qwik._jsxQ("path", null, {
-        class: "opacity-75",
-        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
-        fill: "currentColor"
-      }, null, 3, null)
-    ]
+  const props1 = qwik._restProps(props, [
+    "width",
+    "speed"
+  ]);
+  return /* @__PURE__ */ qwik._jsxS("div", {
+    ...props1,
+    class: {
+      "animate-spin rounded-full border-transparent border-l-current border-t-current": true,
+      ...props1.class
+    }
   }, {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, 0, null), 1, "XP_0");
-}, "LoadingIcon_component_iXFSRNToIus"));
+    style: qwik._fnSignal((p0) => ({
+      borderWidth: p0.width / 8,
+      width: p0.width,
+      height: p0.width,
+      animation: `spin ${p0.speed ?? "0.6s"} ease-in-out infinite`
+    }), [
+      props
+    ], '{borderWidth:p0.width/8,width:p0.width,height:p0.width,animation:`spin ${p0.speed??"0.6s"} ease-in-out infinite`}')
+  }, 0, "1A_0");
+}, "LoadingIcon_component_QMsA9D0RcAM"));
 const cardColorClasses = {
   pink: {
     card: {
@@ -337,12 +334,8 @@ const CardHeader = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
         props
       ], '{"transition-all":true,"opacity-0":!(p0.loading??false),"opacity-100":p0.loading??false}')
     }, /* @__PURE__ */ qwik._jsxC(LoadingIcon, {
-      class: {
-        "text-white": true
-      },
-      width: 20,
+      width: 24,
       [qwik._IMMUTABLE]: {
-        class: qwik._IMMUTABLE,
         width: qwik._IMMUTABLE
       }
     }, 3, "OW_7"), 1, "OW_8")
@@ -927,7 +920,7 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       top: -7px;
       left: -7px;
       box-sizing: border-box;
-≈    }
+    }
 
     .color-picker-hue {
       width: 8px;
@@ -971,9 +964,6 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       box-sizing: border-box;
     }
   `, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
-  const store = qwik.useStore({
-    value: (props.value ?? "#000000") || "#FFFFFF"
-  });
   return /* @__PURE__ */ qwik._jsxQ("div", null, null, [
     /* @__PURE__ */ qwik._jsxQ("label", {
       for: qwik._wrapSignal(props1, "id")
@@ -983,7 +973,7 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
     /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
       ...props1,
       get value() {
-        return store.value;
+        return props.value ?? "#000000";
       },
       onBlur$: /* @__PURE__ */ qwik.inlinedQrl(() => {
         const [props12] = qwik.useLexicalScope();
@@ -993,51 +983,64 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
         props1
       ]),
       onFocus$: /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
-        const [props12, props2, store2] = qwik.useLexicalScope();
+        const [props12, props2] = qwik.useLexicalScope();
         const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
         if (!pickerDiv.children.length) {
           if (build.isServer)
             return;
           const picker = new ColorPicker({
             el: pickerDiv,
-            color: store2.value,
+            color: props2.value ?? "#000000",
             colors: props2.presetColors,
             width: 150,
             height: 150
           });
           picker.onChange((color) => {
-            store2.value = color;
+            element.value = color;
+            switch (props2.preview ?? "left") {
+              case "full":
+                element.style.backgroundColor = color;
+                element.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
+                break;
+              case "left":
+                element.style.borderLeft = `40px solid ${color}`;
+                break;
+              case "right":
+                element.style.borderRight = `40px solid ${color}`;
+                break;
+              case "top":
+                element.style.borderTop = `10px solid ${color}`;
+                break;
+              case "bottom":
+                element.style.borderBottom = `10px solid ${color}`;
+                break;
+            }
             if (props2.onInput$)
               props2.onInput$(color, element);
           });
-          element.addEventListener("input", () => {
-            if (!/^#[0-9A-F]{6}$/i.test(element.value))
-              return;
-            picker.setColor(element.value);
-          });
+          element.addEventListener("input", () => picker.setColor(element.value));
         }
         pickerDiv.classList.remove("opacity-0", "pointer-events-none", "scale-95");
       }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
         props1,
-        props,
-        store
+        props
       ]),
       style: (props.preview ?? "left") == "full" ? {
-        backgroundColor: `${store.value}`,
-        color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
+        backgroundColor: `${props.value ?? "#000000"}`,
+        color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
       } : (props.preview ?? "left") == "left" ? {
-        borderLeft: `40px solid ${store.value}`
+        borderLeft: `40px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "right" ? {
-        borderRight: `40px solid ${store.value}`
+        borderRight: `40px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "top" ? {
-        borderTop: `10px solid ${store.value}`
+        borderTop: `10px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "bottom" ? {
-        borderBottom: `10px solid ${store.value}`
+        borderBottom: `10px solid ${props.value ?? "#000000"}`
       } : {},
       [qwik._IMMUTABLE]: {
-        value: qwik._fnSignal((p0) => p0.value, [
-          store
-        ], "p0.value")
+        value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
+          props
+        ], 'p0.value??"#000000"')
       }
     }, 0, "0s_1"),
     /* @__PURE__ */ qwik._jsxQ("div", {
@@ -1294,12 +1297,13 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     /* @__PURE__ */ qwik._jsxC(Button, {
       children: [
         /* @__PURE__ */ qwik._jsxQ("span", null, {
+          class: "flex-1 text-left",
           id: qwik._fnSignal((p0) => `lui-${p0.id}-name`, [
             props
           ], "`lui-${p0.id}-name`")
         }, props.values.find((value) => value.value.toString() === props1.value)?.name ?? props.values[0].name, 1, null),
         /* @__PURE__ */ qwik._jsxC(ChevronDown, {
-          width: 20,
+          width: 16,
           get class() {
             return {
               "transition-all duration-200": true,
@@ -1318,6 +1322,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         }, 3, "cA_3")
       ],
       class: {
+        "flex": true,
         ...props1.class
       },
       onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
@@ -1332,7 +1337,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     }, 1, "cA_4"),
     /* @__PURE__ */ qwik._jsxQ("div", {
       class: {
-        "transition-all absolute top-full p-1 mt-2 gap-1 left-0 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 z-[1000] max-h-72 overflow-scroll": true,
+        "transition-all absolute top-full left-0 p-1 mt-2 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 z-[1000] max-h-72 overflow-scroll select-none": true,
         "pointer-events-none opacity-0 scale-95": !store.opened
       }
     }, {
@@ -1489,6 +1494,7 @@ const LogoBirdflop = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
       /* @__PURE__ */ qwik._jsxQ("g", null, {
         "clip-path": "url(#clip-bf_3)",
         "data-name": "bf - 3",
+        fill: "currentColor",
         id: "bf_3"
       }, /* @__PURE__ */ qwik._jsxQ("path", null, {
         d: "M-1886.608-89.36c-8.311-65.774-27.64-219.008-27.64-221.333a.279.279,0,0,1,.09-.159q-.474-4.88-.477-9.885A101.066,101.066,0,0,1-1813.61-421.844a100.671,100.671,0,0,1,71.913,30.1l.093-.042c-.077-.093-8.783-10.549-22.7-24.758-8.216-8.388-16.645-16.459-25.052-23.993-10.51-9.417-21.018-18.013-31.23-25.552a120.5,120.5,0,0,0-40.468-71.567,119.916,119.916,0,0,0-77.984-28.881c-66.215,0-120.083,53.941-120.083,120.244h-.237v116.01h-.24c-.131,132.971-107.6,240.728-240.16,240.728V-330.289H-2300V-449.818h.362V-931.536h0V-1170c132.71,0,240.293,106.764,240.293,238.464v145.112a358.089,358.089,0,0,1,47.7-13.28,362.475,362.475,0,0,1,72.6-7.329,362.455,362.455,0,0,1,72.6,7.329,358.112,358.112,0,0,1,67.622,21.02,360.042,360.042,0,0,1,61.191,33.26,362.833,362.833,0,0,1,53.315,44.049,363.178,363.178,0,0,1,43.99,53.387,360.83,360.83,0,0,1,33.213,61.276A359.3,359.3,0,0,1-1586.118-519a363.948,363.948,0,0,1,7.317,72.7,363.957,363.957,0,0,1-7.317,72.7,359.333,359.333,0,0,1-20.992,67.714,360.95,360.95,0,0,1-33.213,61.277,363.233,363.233,0,0,1-43.99,53.388,362.833,362.833,0,0,1-53.315,44.049,360.017,360.017,0,0,1-61.191,33.259,358.108,358.108,0,0,1-67.622,21.02c-6.636,1.36-13.421,2.548-20.165,3.532Zm-79.831-365.056a27.049,27.049,0,0,1,27.038-27.059,27.048,27.048,0,0,1,27.037,27.059,27.049,27.049,0,0,1-27.037,27.06A27.05,27.05,0,0,1-1966.439-454.416Z",
@@ -1533,6 +1539,7 @@ const LogoDiscord = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       d: "M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
     }, null, 3, null)
   }, {
+    fill: "currentColor",
     height: qwik._fnSignal((p0) => p0.width, [
       props
     ], "p0.width"),
@@ -1608,12 +1615,13 @@ const LogoLuminescent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.i
       d: "M 119.476562 -167.570312 C 90.671875 -133.253906 37.820312 -144.527344 30.308594 -109.710938 C 26.550781 -92.175781 39.074219 -75.644531 62.367188 -76.394531 C 67.878906 -77.398438 69.882812 -87.917969 66.628906 -90.671875 C 56.859375 -92.675781 55.855469 -99.691406 57.609375 -107.453125 C 62.117188 -125.988281 93.929688 -123.734375 113.96875 -147.28125 C 103.949219 -115.21875 96.933594 -78.902344 83.910156 -43.582031 C 59.363281 -58.863281 23.796875 -50.847656 21.542969 -27.050781 C 19.285156 -8.765625 32.8125 3.257812 55.355469 2.253906 C 72.386719 1.753906 80.902344 -4.007812 89.921875 -12.023438 C 112.464844 15.277344 138.261719 52.097656 181.347656 37.570312 C 188.609375 30.558594 183.347656 14.777344 177.085938 15.277344 C 147.28125 25.546875 132 1.253906 104.699219 -28.054688 C 119.476562 -56.105469 134.003906 -124.738281 148.53125 -167.320312 C 147.53125 -173.582031 124.488281 -177.339844 119.476562 -167.570312 Z M 46.339844 -28.804688 C 50.347656 -38.324219 68.128906 -36.570312 77.148438 -27.550781 C 72.890625 -20.789062 66.628906 -15.027344 57.359375 -15.027344 C 46.085938 -15.027344 43.332031 -22.792969 46.339844 -28.804688 Z M 46.339844 -28.804688 "
     }, null, 3, null), 3, null), 3, null)
   }, {
+    fill: "currentColor",
     height: qwik._fnSignal((p0) => p0.width, [
       props
     ], "p0.width"),
     preserveAspectRatio: "xMidYMid meet",
     version: "1.0",
-    viewBox: "0 0 375 375",
+    viewBox: "80 80 220 220",
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink",
     zoomAndPan: "magnify"
@@ -1702,9 +1710,10 @@ const LogoLuminescentFull = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qw
       }, null, 3, null), 3, null), 3, null)
     ]
   }, {
+    fill: "currentColor",
     preserveAspectRatio: "xMidYMid meet",
     version: "1.0",
-    viewBox: "0 0 1230 318",
+    viewBox: "30 60 1160 200",
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink",
     zoomAndPan: "magnify"

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, useStylesQrl, useStore, _wrapSignal, useLexicalScope } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, useStylesQrl, _wrapSignal, useLexicalScope, useStore } from "@builder.io/qwik";
 import { isServer } from "@builder.io/qwik/build";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
@@ -57,30 +57,27 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   }, null, 0, "7H_3");
 }, "ButtonAnchor_component_vQT9xS0lqew"));
 const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxQ("div", null, {
-    class: "animate-spin"
-  }, /* @__PURE__ */ _jsxS("svg", {
-    ...props,
-    children: [
-      /* @__PURE__ */ _jsxQ("circle", null, {
-        class: "opacity-25",
-        cx: "12",
-        cy: "12",
-        r: "10",
-        stroke: "currentColor",
-        "stroke-width": "4"
-      }, null, 3, null),
-      /* @__PURE__ */ _jsxQ("path", null, {
-        class: "opacity-75",
-        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
-        fill: "currentColor"
-      }, null, 3, null)
-    ]
+  const props1 = _restProps(props, [
+    "width",
+    "speed"
+  ]);
+  return /* @__PURE__ */ _jsxS("div", {
+    ...props1,
+    class: {
+      "animate-spin rounded-full border-transparent border-l-current border-t-current": true,
+      ...props1.class
+    }
   }, {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, 0, null), 1, "XP_0");
-}, "LoadingIcon_component_iXFSRNToIus"));
+    style: _fnSignal((p0) => ({
+      borderWidth: p0.width / 8,
+      width: p0.width,
+      height: p0.width,
+      animation: `spin ${p0.speed ?? "0.6s"} ease-in-out infinite`
+    }), [
+      props
+    ], '{borderWidth:p0.width/8,width:p0.width,height:p0.width,animation:`spin ${p0.speed??"0.6s"} ease-in-out infinite`}')
+  }, 0, "1A_0");
+}, "LoadingIcon_component_QMsA9D0RcAM"));
 const cardColorClasses = {
   pink: {
     card: {
@@ -335,12 +332,8 @@ const CardHeader = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         props
       ], '{"transition-all":true,"opacity-0":!(p0.loading??false),"opacity-100":p0.loading??false}')
     }, /* @__PURE__ */ _jsxC(LoadingIcon, {
-      class: {
-        "text-white": true
-      },
-      width: 20,
+      width: 24,
       [_IMMUTABLE]: {
-        class: _IMMUTABLE,
         width: _IMMUTABLE
       }
     }, 3, "OW_7"), 1, "OW_8")
@@ -925,7 +918,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       top: -7px;
       left: -7px;
       box-sizing: border-box;
-≈    }
+    }
 
     .color-picker-hue {
       width: 8px;
@@ -969,9 +962,6 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       box-sizing: border-box;
     }
   `, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
-  const store = useStore({
-    value: (props.value ?? "#000000") || "#FFFFFF"
-  });
   return /* @__PURE__ */ _jsxQ("div", null, null, [
     /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
@@ -981,7 +971,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     /* @__PURE__ */ _jsxC(TextInputRaw, {
       ...props1,
       get value() {
-        return store.value;
+        return props.value ?? "#000000";
       },
       onBlur$: /* @__PURE__ */ inlinedQrl(() => {
         const [props12] = useLexicalScope();
@@ -991,51 +981,64 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         props1
       ]),
       onFocus$: /* @__PURE__ */ inlinedQrl((event, element) => {
-        const [props12, props2, store2] = useLexicalScope();
+        const [props12, props2] = useLexicalScope();
         const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
         if (!pickerDiv.children.length) {
           if (isServer)
             return;
           const picker = new ColorPicker({
             el: pickerDiv,
-            color: store2.value,
+            color: props2.value ?? "#000000",
             colors: props2.presetColors,
             width: 150,
             height: 150
           });
           picker.onChange((color) => {
-            store2.value = color;
+            element.value = color;
+            switch (props2.preview ?? "left") {
+              case "full":
+                element.style.backgroundColor = color;
+                element.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
+                break;
+              case "left":
+                element.style.borderLeft = `40px solid ${color}`;
+                break;
+              case "right":
+                element.style.borderRight = `40px solid ${color}`;
+                break;
+              case "top":
+                element.style.borderTop = `10px solid ${color}`;
+                break;
+              case "bottom":
+                element.style.borderBottom = `10px solid ${color}`;
+                break;
+            }
             if (props2.onInput$)
               props2.onInput$(color, element);
           });
-          element.addEventListener("input", () => {
-            if (!/^#[0-9A-F]{6}$/i.test(element.value))
-              return;
-            picker.setColor(element.value);
-          });
+          element.addEventListener("input", () => picker.setColor(element.value));
         }
         pickerDiv.classList.remove("opacity-0", "pointer-events-none", "scale-95");
       }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
         props1,
-        props,
-        store
+        props
       ]),
       style: (props.preview ?? "left") == "full" ? {
-        backgroundColor: `${store.value}`,
-        color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
+        backgroundColor: `${props.value ?? "#000000"}`,
+        color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
       } : (props.preview ?? "left") == "left" ? {
-        borderLeft: `40px solid ${store.value}`
+        borderLeft: `40px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "right" ? {
-        borderRight: `40px solid ${store.value}`
+        borderRight: `40px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "top" ? {
-        borderTop: `10px solid ${store.value}`
+        borderTop: `10px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "bottom" ? {
-        borderBottom: `10px solid ${store.value}`
+        borderBottom: `10px solid ${props.value ?? "#000000"}`
       } : {},
       [_IMMUTABLE]: {
-        value: _fnSignal((p0) => p0.value, [
-          store
-        ], "p0.value")
+        value: _fnSignal((p0) => p0.value ?? "#000000", [
+          props
+        ], 'p0.value??"#000000"')
       }
     }, 0, "0s_1"),
     /* @__PURE__ */ _jsxQ("div", {
@@ -1292,12 +1295,13 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     /* @__PURE__ */ _jsxC(Button, {
       children: [
         /* @__PURE__ */ _jsxQ("span", null, {
+          class: "flex-1 text-left",
           id: _fnSignal((p0) => `lui-${p0.id}-name`, [
             props
           ], "`lui-${p0.id}-name`")
         }, props.values.find((value) => value.value.toString() === props1.value)?.name ?? props.values[0].name, 1, null),
         /* @__PURE__ */ _jsxC(ChevronDown, {
-          width: 20,
+          width: 16,
           get class() {
             return {
               "transition-all duration-200": true,
@@ -1316,6 +1320,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         }, 3, "cA_3")
       ],
       class: {
+        "flex": true,
         ...props1.class
       },
       onClick$: /* @__PURE__ */ inlinedQrl(() => {
@@ -1330,7 +1335,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     }, 1, "cA_4"),
     /* @__PURE__ */ _jsxQ("div", {
       class: {
-        "transition-all absolute top-full p-1 mt-2 gap-1 left-0 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 z-[1000] max-h-72 overflow-scroll": true,
+        "transition-all absolute top-full left-0 p-1 mt-2 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 z-[1000] max-h-72 overflow-scroll select-none": true,
         "pointer-events-none opacity-0 scale-95": !store.opened
       }
     }, {
@@ -1487,6 +1492,7 @@ const LogoBirdflop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       /* @__PURE__ */ _jsxQ("g", null, {
         "clip-path": "url(#clip-bf_3)",
         "data-name": "bf - 3",
+        fill: "currentColor",
         id: "bf_3"
       }, /* @__PURE__ */ _jsxQ("path", null, {
         d: "M-1886.608-89.36c-8.311-65.774-27.64-219.008-27.64-221.333a.279.279,0,0,1,.09-.159q-.474-4.88-.477-9.885A101.066,101.066,0,0,1-1813.61-421.844a100.671,100.671,0,0,1,71.913,30.1l.093-.042c-.077-.093-8.783-10.549-22.7-24.758-8.216-8.388-16.645-16.459-25.052-23.993-10.51-9.417-21.018-18.013-31.23-25.552a120.5,120.5,0,0,0-40.468-71.567,119.916,119.916,0,0,0-77.984-28.881c-66.215,0-120.083,53.941-120.083,120.244h-.237v116.01h-.24c-.131,132.971-107.6,240.728-240.16,240.728V-330.289H-2300V-449.818h.362V-931.536h0V-1170c132.71,0,240.293,106.764,240.293,238.464v145.112a358.089,358.089,0,0,1,47.7-13.28,362.475,362.475,0,0,1,72.6-7.329,362.455,362.455,0,0,1,72.6,7.329,358.112,358.112,0,0,1,67.622,21.02,360.042,360.042,0,0,1,61.191,33.26,362.833,362.833,0,0,1,53.315,44.049,363.178,363.178,0,0,1,43.99,53.387,360.83,360.83,0,0,1,33.213,61.276A359.3,359.3,0,0,1-1586.118-519a363.948,363.948,0,0,1,7.317,72.7,363.957,363.957,0,0,1-7.317,72.7,359.333,359.333,0,0,1-20.992,67.714,360.95,360.95,0,0,1-33.213,61.277,363.233,363.233,0,0,1-43.99,53.388,362.833,362.833,0,0,1-53.315,44.049,360.017,360.017,0,0,1-61.191,33.259,358.108,358.108,0,0,1-67.622,21.02c-6.636,1.36-13.421,2.548-20.165,3.532Zm-79.831-365.056a27.049,27.049,0,0,1,27.038-27.059,27.048,27.048,0,0,1,27.037,27.059,27.049,27.049,0,0,1-27.037,27.06A27.05,27.05,0,0,1-1966.439-454.416Z",
@@ -1531,6 +1537,7 @@ const LogoDiscord = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       d: "M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
     }, null, 3, null)
   }, {
+    fill: "currentColor",
     height: _fnSignal((p0) => p0.width, [
       props
     ], "p0.width"),
@@ -1606,12 +1613,13 @@ const LogoLuminescent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
       d: "M 119.476562 -167.570312 C 90.671875 -133.253906 37.820312 -144.527344 30.308594 -109.710938 C 26.550781 -92.175781 39.074219 -75.644531 62.367188 -76.394531 C 67.878906 -77.398438 69.882812 -87.917969 66.628906 -90.671875 C 56.859375 -92.675781 55.855469 -99.691406 57.609375 -107.453125 C 62.117188 -125.988281 93.929688 -123.734375 113.96875 -147.28125 C 103.949219 -115.21875 96.933594 -78.902344 83.910156 -43.582031 C 59.363281 -58.863281 23.796875 -50.847656 21.542969 -27.050781 C 19.285156 -8.765625 32.8125 3.257812 55.355469 2.253906 C 72.386719 1.753906 80.902344 -4.007812 89.921875 -12.023438 C 112.464844 15.277344 138.261719 52.097656 181.347656 37.570312 C 188.609375 30.558594 183.347656 14.777344 177.085938 15.277344 C 147.28125 25.546875 132 1.253906 104.699219 -28.054688 C 119.476562 -56.105469 134.003906 -124.738281 148.53125 -167.320312 C 147.53125 -173.582031 124.488281 -177.339844 119.476562 -167.570312 Z M 46.339844 -28.804688 C 50.347656 -38.324219 68.128906 -36.570312 77.148438 -27.550781 C 72.890625 -20.789062 66.628906 -15.027344 57.359375 -15.027344 C 46.085938 -15.027344 43.332031 -22.792969 46.339844 -28.804688 Z M 46.339844 -28.804688 "
     }, null, 3, null), 3, null), 3, null)
   }, {
+    fill: "currentColor",
     height: _fnSignal((p0) => p0.width, [
       props
     ], "p0.width"),
     preserveAspectRatio: "xMidYMid meet",
     version: "1.0",
-    viewBox: "0 0 375 375",
+    viewBox: "80 80 220 220",
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink",
     zoomAndPan: "magnify"
@@ -1700,9 +1708,10 @@ const LogoLuminescentFull = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
       }, null, 3, null), 3, null), 3, null)
     ]
   }, {
+    fill: "currentColor",
     preserveAspectRatio: "xMidYMid meet",
     version: "1.0",
-    viewBox: "0 0 1230 318",
+    viewBox: "30 60 1160 200",
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink",
     zoomAndPan: "magnify"

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

@@ -0,0 +1,10 @@
+import type { PropsOf } from '@builder.io/qwik';
+interface loadingIconProps extends Omit<PropsOf<'div'>, 'class'> {
+    class?: {
+        [key: string]: boolean;
+    };
+    width: number;
+    speed?: string;
+}
+export declare const LoadingIcon: import("@builder.io/qwik").Component<loadingIconProps>;
+export {};

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

@@ -2,6 +2,7 @@ export * from './elements/Anchor';
 export * from './elements/Button';
 export * from './elements/Card';
 export * from './elements/ColorInput';
+export * from './elements/LoadingIcon';
 export * from './elements/NumberInput';
 export * from './elements/SelectInput';
 export * from './elements/TextArea';

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

@@ -2,7 +2,6 @@ export * from './logos/Birdflop';
 export * from './logos/Discord';
 export * from './logos/Fabric';
 export * from './logos/Forge';
-export * from './logos/LoadingIcon';
 export * from './logos/Luminescent';
 export * from './logos/Paper';
 export * from './logos/Pterodactyl';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -45,8 +45,8 @@
     "@builder.io/qwik-city": "^1.4.5",
     "@types/eslint": "^8.56.2",
     "@types/node": "^20.11.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "autoprefixer": "^10.4.17",
     "chart.js": "^4.4.1",
     "eslint": "^8.56.0",