@luminescent/ui 0.7.5 → 0.7.7

package/lib/index.qwik.cjs

@@ -25,7 +25,7 @@ const sizeClasses = {
   lg: "text-base px-6 py-3 rounded-lg gap-3",
   xl: "text-base px-8 py-4 rounded-xl gap-4"
 };
-const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95";
+const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95 whitespace-nowrap";
 const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
     "color",
@@ -271,7 +271,7 @@ const TextInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlined
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ qwik._jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -579,7 +579,20 @@ class ColorPicker {
       this.$colors = this._document.createElement("div");
       this.$colors.className = "color-picker-colors";
       this.$el.appendChild(this.$colors);
-      this.$colors.innerHTML = options.colors.map((color) => `<div class="color-picker-color" style="background: ${color}"></div>`).join("");
+      options.colors.forEach((color) => {
+        const $color = this._document.createElement("button");
+        $color.className = "color-picker-color";
+        $color.style.background = `${color}`;
+        $color.addEventListener("mousedown", (e) => {
+          this.setColor(color);
+          e.preventDefault();
+        });
+        $color.addEventListener("touchstart", (e) => {
+          this.setColor(color);
+          e.preventDefault();
+        });
+        this.$colors.appendChild($color);
+      });
     }
     this.setSize(options.width || 175, options.height || 150);
     this.setColor(options.color);
@@ -868,12 +881,19 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
     }
 
     .color-picker-color {
+      transition: all 0.2s;
       height: 25px;
       width: 25px;
       border-radius: 5px;
       position: relative;
       background: red;
       border: 1px solid rgb(31 41 55);
+      cursor: pointer;
+    }
+
+    .color-picker-color:hover {
+      border: 1px solid white;
+      transform: scale(1.1);
     }
 
     .color-picker-hSelector {
@@ -892,15 +912,16 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
     /* @__PURE__ */ qwik._jsxQ("label", {
       for: qwik._wrapSignal(props1, "id")
     }, {
-      class: "mb-2 flex"
+      class: "text-gray-300 pb-1 flex"
     }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "0s_0"), 1, null),
     /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
       ...props1,
       get value() {
         return props.value ?? "#000000";
       },
-      onBlur$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+      onBlur$: /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
         const [props12] = qwik.useLexicalScope();
+        console.log(event);
         const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
         pickerDiv.classList.add("opacity-0", "pointer-events-none", "scale-95");
       }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
@@ -915,7 +936,19 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
           const picker = new ColorPicker({
             el: pickerDiv,
             color: props2.value ?? "#000000",
-            colors: props2.presetColors,
+            colors: [
+              "#FAEDCB",
+              "#C9E4DE",
+              "#C6DEF1",
+              "#DBCDF0",
+              "#F2C6DE",
+              "#FCD05C",
+              "#5FE2C5",
+              "#4498DB",
+              "#9863E7",
+              "#E43A96",
+              ...props2.presetColors ?? []
+            ],
             width: 150,
             height: 150
           });
@@ -1000,8 +1033,9 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
   qwik._jsxBranch();
   let Component = /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
     children: /* @__PURE__ */ qwik._jsxQ("h2", null, {
-      class: "flex flex-1 items-center font-bold text-2xl"
+      class: "flex gap-2 flex-1 items-center font-bold text-2xl whitespace-nowrap"
     }, [
+      /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "dL_0"),
       props.id && /* @__PURE__ */ qwik._jsxC(Anchor, {
         get id() {
           return props.id;
@@ -1011,8 +1045,7 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
             props
           ], "p0.id")
         }
-      }, 3, "dL_0"),
-      /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "dL_1")
+      }, 3, "dL_1")
     ], 1, null)
   }, 1, "dL_2");
   if (props.subheader)
@@ -1021,7 +1054,7 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
     }, [
       Component,
       /* @__PURE__ */ qwik._jsxQ("h3", null, {
-        class: "flex flex-1 items-center text-gray-400 text-sm"
+        class: "flex items-center text-gray-400 text-sm"
       }, qwik._fnSignal((p0) => p0.subheader, [
         props
       ], "p0.subheader"), 3, null)
@@ -1091,7 +1124,7 @@ const NumberInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ qwik._jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1177,6 +1210,7 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       ...props1,
       class: {
         [InputClasses]: true,
+        "text-center": true,
         ...props1.class
       }
     }, {
@@ -1256,7 +1290,7 @@ const SelectInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ qwik._jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1275,6 +1309,28 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
   const store = qwik.useStore({
     opened: false
   });
+  qwik.useStylesQrl(/* @__PURE__ */ qwik.inlinedQrl(`
+    .lui-scroll {
+      scroll-behavior: smooth;
+    }
+    .lui-scroll::-webkit-scrollbar {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 8px;
+      height: 8px;
+    }
+    .lui-scroll::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+    .lui-scroll::-webkit-scrollbar-thumb {
+      background-color: #ffffff20;
+      border: 1px solid #ffffff20;
+      border-radius: 3px;
+    }
+    .lui-scroll::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  `, "SelectInputRaw_component_useStyles_Zc40Za0ngqc"));
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: "relative"
   }, [
@@ -1344,7 +1400,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     }, 1, "cA_4"),
     /* @__PURE__ */ qwik._jsxQ("div", {
       class: {
-        "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,
+        "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 lui-scroll overflow-auto select-none": true,
         "pointer-events-none opacity-0 scale-95": !store.opened
       }
     }, {
@@ -1390,7 +1446,7 @@ const TextArea = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ qwik._jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1469,7 +1525,7 @@ const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
     props.label && /* @__PURE__ */ qwik._jsxQ("label", {
       for: qwik._wrapSignal(props1, "id")
     }, {
-      class: "text-gray-100"
+      class: "text-gray-300"
     }, qwik._fnSignal((p0) => p0.label, [
       props
     ], "p0.label"), 3, "yu_0")

package/lib/index.qwik.mjs

@@ -23,7 +23,7 @@ const sizeClasses = {
   lg: "text-base px-6 py-3 rounded-lg gap-3",
   xl: "text-base px-8 py-4 rounded-xl gap-4"
 };
-const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95";
+const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95 whitespace-nowrap";
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
@@ -269,7 +269,7 @@ const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -577,7 +577,20 @@ class ColorPicker {
       this.$colors = this._document.createElement("div");
       this.$colors.className = "color-picker-colors";
       this.$el.appendChild(this.$colors);
-      this.$colors.innerHTML = options.colors.map((color) => `<div class="color-picker-color" style="background: ${color}"></div>`).join("");
+      options.colors.forEach((color) => {
+        const $color = this._document.createElement("button");
+        $color.className = "color-picker-color";
+        $color.style.background = `${color}`;
+        $color.addEventListener("mousedown", (e) => {
+          this.setColor(color);
+          e.preventDefault();
+        });
+        $color.addEventListener("touchstart", (e) => {
+          this.setColor(color);
+          e.preventDefault();
+        });
+        this.$colors.appendChild($color);
+      });
     }
     this.setSize(options.width || 175, options.height || 150);
     this.setColor(options.color);
@@ -866,12 +879,19 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     }
 
     .color-picker-color {
+      transition: all 0.2s;
       height: 25px;
       width: 25px;
       border-radius: 5px;
       position: relative;
       background: red;
       border: 1px solid rgb(31 41 55);
+      cursor: pointer;
+    }
+
+    .color-picker-color:hover {
+      border: 1px solid white;
+      transform: scale(1.1);
     }
 
     .color-picker-hSelector {
@@ -890,15 +910,16 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
-      class: "mb-2 flex"
+      class: "text-gray-300 pb-1 flex"
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0s_0"), 1, null),
     /* @__PURE__ */ _jsxC(TextInputRaw, {
       ...props1,
       get value() {
         return props.value ?? "#000000";
       },
-      onBlur$: /* @__PURE__ */ inlinedQrl(() => {
+      onBlur$: /* @__PURE__ */ inlinedQrl((event, element) => {
         const [props12] = useLexicalScope();
+        console.log(event);
         const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
         pickerDiv.classList.add("opacity-0", "pointer-events-none", "scale-95");
       }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
@@ -913,7 +934,19 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
           const picker = new ColorPicker({
             el: pickerDiv,
             color: props2.value ?? "#000000",
-            colors: props2.presetColors,
+            colors: [
+              "#FAEDCB",
+              "#C9E4DE",
+              "#C6DEF1",
+              "#DBCDF0",
+              "#F2C6DE",
+              "#FCD05C",
+              "#5FE2C5",
+              "#4498DB",
+              "#9863E7",
+              "#E43A96",
+              ...props2.presetColors ?? []
+            ],
             width: 150,
             height: 150
           });
@@ -998,8 +1031,9 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   _jsxBranch();
   let Component = /* @__PURE__ */ _jsxC(Fragment, {
     children: /* @__PURE__ */ _jsxQ("h2", null, {
-      class: "flex flex-1 items-center font-bold text-2xl"
+      class: "flex gap-2 flex-1 items-center font-bold text-2xl whitespace-nowrap"
     }, [
+      /* @__PURE__ */ _jsxC(Slot, null, 3, "dL_0"),
       props.id && /* @__PURE__ */ _jsxC(Anchor, {
         get id() {
           return props.id;
@@ -1009,8 +1043,7 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
             props
           ], "p0.id")
         }
-      }, 3, "dL_0"),
-      /* @__PURE__ */ _jsxC(Slot, null, 3, "dL_1")
+      }, 3, "dL_1")
     ], 1, null)
   }, 1, "dL_2");
   if (props.subheader)
@@ -1019,7 +1052,7 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     }, [
       Component,
       /* @__PURE__ */ _jsxQ("h3", null, {
-        class: "flex flex-1 items-center text-gray-400 text-sm"
+        class: "flex items-center text-gray-400 text-sm"
       }, _fnSignal((p0) => p0.subheader, [
         props
       ], "p0.subheader"), 3, null)
@@ -1089,7 +1122,7 @@ const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1175,6 +1208,7 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ...props1,
       class: {
         [InputClasses]: true,
+        "text-center": true,
         ...props1.class
       }
     }, {
@@ -1254,7 +1288,7 @@ const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1273,6 +1307,28 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
   const store = useStore({
     opened: false
   });
+  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+    .lui-scroll {
+      scroll-behavior: smooth;
+    }
+    .lui-scroll::-webkit-scrollbar {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 8px;
+      height: 8px;
+    }
+    .lui-scroll::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+    .lui-scroll::-webkit-scrollbar-thumb {
+      background-color: #ffffff20;
+      border: 1px solid #ffffff20;
+      border-radius: 3px;
+    }
+    .lui-scroll::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  `, "SelectInputRaw_component_useStyles_Zc40Za0ngqc"));
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "relative"
   }, [
@@ -1342,7 +1398,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     }, 1, "cA_4"),
     /* @__PURE__ */ _jsxQ("div", {
       class: {
-        "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,
+        "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 lui-scroll overflow-auto select-none": true,
         "pointer-events-none opacity-0 scale-95": !store.opened
       }
     }, {
@@ -1388,7 +1444,7 @@ const TextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "pb-2",
+      class: "text-gray-300 pb-1",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1467,7 +1523,7 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     props.label && /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
-      class: "text-gray-100"
+      class: "text-gray-300"
     }, _fnSignal((p0) => p0.label, [
       props
     ], "p0.label"), 3, "yu_0")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",