@luminescent/ui 0.10.0-1 → 0.10.0-2

package/lib/index.qwik.cjs

@@ -17,7 +17,7 @@ const buttonColorClasses = {
   yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
   gray: "bg-gray-700/90 border-gray-600 hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
   darkgray: "bg-gray-800/90 border-gray-700 hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
-  transparent: "bg-transparent border-transparent hover:bg-gray-700/30 active:bg-gray-700/40 focus:border-gray-700/40"
+  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
 };
 const sizeClasses = {
   sm: {
@@ -41,7 +41,7 @@ const sizeClasses = {
     equal: "p-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 whitespace-nowrap";
+const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none";
 const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
     "color",
@@ -247,7 +247,7 @@ const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
         class: "absolute inset-0"
       }, null, 3, "OW_1"),
       props.blobs && /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "absolute -z-10 inset-0 transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
+        class: "motion-reduce:hidden absolute -z-10 inset-0 transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
         style: {
           containerType: "size"
         }
@@ -278,22 +278,22 @@ const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
       ], 1, "OW_2")
     ],
     class: {
-      "relative p-8 border rounded-lg transition-all": true,
+      "relative p-8 border rounded-lg motion-safe:transition-all": true,
       [cardColorClasses[props.color ?? "darkgray"].card.bg]: !props.blobs,
       [cardColorClasses[props.color ?? "darkgray"].card.bg_blobs]: props.blobs,
       [cardColorClasses[props.color ?? "darkgray"].card.hover + " hover:shadow-lg"]: props.hover,
-      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer select-none"]: props.hover == "clickable",
+      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer select-none touch-manipulation"]: props.hover == "clickable",
       ...props1.class
     }
   }, null, 0, "OW_3");
 }, "Card_component_DlkkcTEVka4"));
-const InputClasses = "transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5";
+const InputClasses = "motion-safe:transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5 touch-manipulation";
 const TextInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ qwik._jsxQ("label", null, {
-      class: "text-gray-300 pb-1",
+      class: "text-gray-300 pb-1 select-none",
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -438,7 +438,7 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
     /* @__PURE__ */ qwik._jsxQ("label", {
       for: qwik._wrapSignal(props1, "id")
     }, {
-      class: "text-gray-300 pb-1 flex"
+      class: "text-gray-300 pb-1 flex select-none"
     }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "0s_0"), 1, null),
     /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
       ...props1,
@@ -511,7 +511,7 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       },
       get class() {
         return {
-          "transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
           "opacity-0 pointer-events-none scale-95": !store.opened
         };
       },
@@ -544,11 +544,11 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       ]),
       [qwik._IMMUTABLE]: {
         class: qwik._fnSignal((p0) => ({
-          "transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
           "opacity-0 pointer-events-none scale-95": !p0.opened
         }), [
           store
-        ], '{"transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 pointer-events-none scale-95":!p0.opened}'),
+        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 pointer-events-none scale-95":!p0.opened}'),
         color: qwik._fnSignal((p0) => p0.value ?? "#000000", [
           props
         ], 'p0.value??"#000000"'),
@@ -702,7 +702,7 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
   ]));
   return /* @__PURE__ */ qwik._jsxQ("div", {
     class: {
-      "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 flex-col gap-6 rounded-lg border border-gray-700 touch-none": true,
       ...props1.class
     }
   }, {
@@ -779,7 +779,7 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         ]),
         style: `background: ${color}`
       }, {
-        class: "w-[25px] h-[25px] border border-gray-700 rounded-md hover:scale-110 transition-all",
+        class: "w-[25px] h-[25px] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
         "preventdefault:mousedown": true,
         "preventdefault:touchstart": true
       }, null, 2, i);
@@ -845,12 +845,12 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
       Component,
       /* @__PURE__ */ qwik._jsxQ("div", null, {
         class: qwik._fnSignal((p0) => ({
-          "transition-all duration-200": true,
+          "motion-safe:transition-all duration-200": true,
           "opacity-0": !p0.loading,
           "opacity-100": p0.loading
         }), [
           props
-        ], '{"transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
+        ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
       }, /* @__PURE__ */ qwik._jsxC(LoadingIcon, {
         width: 24,
         [qwik._IMMUTABLE]: {
@@ -864,24 +864,24 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
   const menu = qwik.useSignal(false);
   return /* @__PURE__ */ qwik._jsxQ("nav", null, {
     class: qwik._fnSignal((p0) => ({
-      "transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
+      "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
       "fixed": p0.fixed,
       "absolute": !p0.fixed
     }), [
       props
-    ], '{"transition-all duration-200 flex flex-col top-0 left-0 w-full z-50":true,"fixed":p0.fixed,"absolute":!p0.fixed}')
+    ], '{"motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50":true,"fixed":p0.fixed,"absolute":!p0.fixed}')
   }, [
     /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: qwik._fnSignal((p0) => ({
-        "sm:hidden transition-all flex flex-col px-4 items-center absolute w-full": true,
-        "top-full mt-4": p0.value,
+        "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full": true,
+        "top-full mt-2": p0.value,
         "opacity-0 top-0": !p0.value
       }), [
         menu
-      ], '{"sm:hidden transition-all flex flex-col px-4 items-center absolute w-full":true,"top-full mt-4":p0.value,"opacity-0 top-0":!p0.value}')
+      ], '{"sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full":true,"top-full mt-2":p0.value,"opacity-0 top-0":!p0.value}')
     }, /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: {
-        "flex flex-col transition-all max-w-7xl w-full p-2 bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": true
+        "flex flex-col motion-safe:transition-all max-w-7xl w-full p-2 bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": true
       }
     }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
       name: "mobile",
@@ -892,10 +892,10 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
     /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: qwik._fnSignal((p0) => ({
         "bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl": !p0.floating,
-        "p-4 pb-0": p0.floating
+        "p-2 pb-0": p0.floating
       }), [
         props
-      ], '{"bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl":!p0.floating,"p-4 pb-0":p0.floating}')
+      ], '{"bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl":!p0.floating,"p-2 pb-0":p0.floating}')
     }, /* @__PURE__ */ qwik._jsxQ("div", {
       class: {
         "flex justify-evenly w-full mx-auto px-4 py-2 max-w-7xl": true,
@@ -1005,7 +1005,7 @@ const NumberInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ qwik._jsxQ("label", null, {
-      class: "text-gray-300 pb-1",
+      class: "text-gray-300 pb-1 select-none",
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1036,11 +1036,11 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
   `, "NumberInputRaw_component_useStyles_v5EsWTMt0DU"));
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: qwik._fnSignal((p0) => ({
-      "flex text-gray-50": true,
+      "flex text-gray-50 touch-manipulation": true,
       "gap-2": !p0.input
     }), [
       props
-    ], '{"flex text-gray-50":true,"gap-2":!p0.input}')
+    ], '{"flex text-gray-50 touch-manipulation":true,"gap-2":!p0.input}')
   }, [
     /* @__PURE__ */ qwik._jsxC(Button, {
       size: "sm",
@@ -1170,7 +1170,7 @@ const SelectInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ qwik._jsxQ("label", null, {
-      class: "text-gray-300 pb-1",
+      class: "text-gray-300 pb-1 select-none",
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1184,7 +1184,9 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
   const props1 = qwik._restProps(props, [
     "id",
     "values",
-    "class"
+    "class",
+    "display",
+    "color"
   ]);
   const store = qwik.useStore({
     opened: false
@@ -1212,7 +1214,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     }
   `, "SelectInputRaw_component_useStyles_Zc40Za0ngqc"));
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
-    class: "relative"
+    class: "relative touch-manipulation"
   }, [
     /* @__PURE__ */ qwik._jsxS("select", {
       ...props1,
@@ -1230,38 +1232,44 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       ], "p0.id")
     }, 0, null),
     /* @__PURE__ */ qwik._jsxC(Button, {
+      get color() {
+        return props.color;
+      },
       size: "sm",
       get class() {
         return {
-          "flex focus:bg-gray-700": true,
+          "flex": true,
           ...props.class
         };
       },
       children: [
-        /* @__PURE__ */ qwik._jsxQ("span", null, {
+        qwik._fnSignal((p0) => p0.display, [
+          props
+        ], "p0.display"),
+        !props.display && /* @__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),
+        }, props.values.find((value) => value.value.toString() === props1.value)?.name ?? props.values[0].name, 1, "cA_3"),
         /* @__PURE__ */ qwik._jsxC(ChevronDown, {
           width: 16,
           get class() {
             return {
-              "transition-all duration-200": true,
+              "motion-safe:transition-all duration-200": true,
               "transform rotate-180": store.opened
             };
           },
           [qwik._IMMUTABLE]: {
             class: qwik._fnSignal((p0) => ({
-              "transition-all duration-200": true,
+              "motion-safe:transition-all duration-200": true,
               "transform rotate-180": p0.opened
             }), [
               store
-            ], '{"transition-all duration-200":true,"transform rotate-180":p0.opened}'),
+            ], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p0.opened}'),
             width: qwik._IMMUTABLE
           }
-        }, 3, "cA_3")
+        }, 3, "cA_4")
       ],
       onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
         const [store2] = qwik.useLexicalScope();
@@ -1271,18 +1279,21 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       ]),
       [qwik._IMMUTABLE]: {
         class: qwik._fnSignal((p0) => ({
-          "flex focus:bg-gray-700": true,
+          "flex": true,
           ...p0.class
         }), [
           props
-        ], '{"flex focus:bg-gray-700":true,...p0.class}'),
+        ], '{"flex":true,...p0.class}'),
+        color: qwik._fnSignal((p0) => p0.color, [
+          props
+        ], "p0.color"),
         onClick$: qwik._IMMUTABLE,
         size: qwik._IMMUTABLE
       }
-    }, 1, "cA_4"),
+    }, 1, "cA_5"),
     /* @__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 lui-scroll overflow-auto select-none": true,
+        "motion-safe: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
       }
     }, {
@@ -1291,6 +1302,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       ], "`lui-${p0.id}-opts`")
     }, props.values.map((value, i) => {
       return /* @__PURE__ */ qwik._jsxC(Button, {
+        color: "transparent",
         onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
           const [props2, store2, value2] = qwik.useLexicalScope();
           store2.opened = false;
@@ -1306,29 +1318,28 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         ]),
         get class() {
           return {
-            "border-0 bg-transparent": true,
             "opacity-0": !store.opened
           };
         },
         children: qwik._wrapSignal(value, "name"),
         [qwik._IMMUTABLE]: {
           class: qwik._fnSignal((p0) => ({
-            "border-0 bg-transparent": true,
             "opacity-0": !p0.opened
           }), [
             store
-          ], '{"border-0 bg-transparent":true,"opacity-0":!p0.opened}')
+          ], '{"opacity-0":!p0.opened}'),
+          color: qwik._IMMUTABLE
         }
       }, 1, i);
     }), 1, null)
-  ], 1, "cA_5");
+  ], 1, "cA_6");
 }, "SelectInputRaw_component_Itdx5yPeQd4"));
 const TextArea = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ qwik._jsxQ("label", null, {
-      class: "text-gray-300 pb-1",
+      class: "text-gray-300 pb-1 select-none",
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1375,11 +1386,11 @@ const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
   ]);
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: qwik._fnSignal((p0) => ({
-      "flex gap-3 items-center": true,
+      "flex gap-3 items-center touch-manipulation": true,
       "justify-center": p0.center
     }), [
       props
-    ], '{"flex gap-3 items-center":true,"justify-center":p0.center}')
+    ], '{"flex gap-3 items-center touch-manipulation":true,"justify-center":p0.center}')
   }, [
     /* @__PURE__ */ qwik._jsxQ("label", null, {
       class: "inline-flex relative items-center cursor-pointer"
@@ -1395,9 +1406,9 @@ const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
       }, 0, null),
       /* @__PURE__ */ qwik._jsxQ("div", null, {
         class: {
-          "transition ease-in-out w-12 h-7 rounded-md peer border hover:shadow-lg": true,
+          "motion-safe:transition ease-in-out w-12 h-7 rounded-md peer border hover:shadow-lg": true,
           "bg-gray-800 border-gray-700 hover:bg-gray-700 active:bg-gray-600": true,
-          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:rounded-md after:h-5 after:w-5 after:transition-all after:ease-in-out": true,
+          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:rounded-md after:h-5 after:w-5 after:motion-safe:transition-all after:ease-in-out": true,
           "after:bg-gray-700 after:border-gray-600 after:hover:bg-gray-600 after:active:bg-gray-500": true,
           "peer-checked:bg-blue-700 peer-checked:border-blue-600 peer-checked:hover:bg-blue-600 peer-checked:active:bg-blue-500": true,
           "peer-checked:after:translate-x-full peer-checked:after:bg-blue-600 peer-checked:after:border-blue-500 peer-checked:after:hover:bg-blue-500 peer-checked:after:active:bg-blue-400": true
@@ -1407,7 +1418,7 @@ const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
     props.label && /* @__PURE__ */ qwik._jsxQ("label", {
       for: qwik._wrapSignal(props1, "id")
     }, {
-      class: "text-gray-300 flex gap-2"
+      class: "text-gray-300 flex gap-2 select-none"
     }, qwik._fnSignal((p0) => p0.label, [
       props
     ], "p0.label"), 3, "yu_0")

package/lib/index.qwik.mjs

@@ -15,7 +15,7 @@ const buttonColorClasses = {
   yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
   gray: "bg-gray-700/90 border-gray-600 hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
   darkgray: "bg-gray-800/90 border-gray-700 hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
-  transparent: "bg-transparent border-transparent hover:bg-gray-700/30 active:bg-gray-700/40 focus:border-gray-700/40"
+  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
 };
 const sizeClasses = {
   sm: {
@@ -39,7 +39,7 @@ const sizeClasses = {
     equal: "p-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 whitespace-nowrap";
+const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none";
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
@@ -245,7 +245,7 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
         class: "absolute inset-0"
       }, null, 3, "OW_1"),
       props.blobs && /* @__PURE__ */ _jsxQ("div", null, {
-        class: "absolute -z-10 inset-0 transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
+        class: "motion-reduce:hidden absolute -z-10 inset-0 transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
         style: {
           containerType: "size"
         }
@@ -276,22 +276,22 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
       ], 1, "OW_2")
     ],
     class: {
-      "relative p-8 border rounded-lg transition-all": true,
+      "relative p-8 border rounded-lg motion-safe:transition-all": true,
       [cardColorClasses[props.color ?? "darkgray"].card.bg]: !props.blobs,
       [cardColorClasses[props.color ?? "darkgray"].card.bg_blobs]: props.blobs,
       [cardColorClasses[props.color ?? "darkgray"].card.hover + " hover:shadow-lg"]: props.hover,
-      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer select-none"]: props.hover == "clickable",
+      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer select-none touch-manipulation"]: props.hover == "clickable",
       ...props1.class
     }
   }, null, 0, "OW_3");
 }, "Card_component_DlkkcTEVka4"));
-const InputClasses = "transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5";
+const InputClasses = "motion-safe:transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5 touch-manipulation";
 const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "text-gray-300 pb-1",
+      class: "text-gray-300 pb-1 select-none",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -436,7 +436,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
-      class: "text-gray-300 pb-1 flex"
+      class: "text-gray-300 pb-1 flex select-none"
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0s_0"), 1, null),
     /* @__PURE__ */ _jsxC(TextInputRaw, {
       ...props1,
@@ -509,7 +509,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       },
       get class() {
         return {
-          "transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
           "opacity-0 pointer-events-none scale-95": !store.opened
         };
       },
@@ -542,11 +542,11 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       ]),
       [_IMMUTABLE]: {
         class: _fnSignal((p0) => ({
-          "transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
+          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
           "opacity-0 pointer-events-none scale-95": !p0.opened
         }), [
           store
-        ], '{"transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 pointer-events-none scale-95":!p0.opened}'),
+        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 pointer-events-none scale-95":!p0.opened}'),
         color: _fnSignal((p0) => p0.value ?? "#000000", [
           props
         ], 'p0.value??"#000000"'),
@@ -700,7 +700,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
   ]));
   return /* @__PURE__ */ _jsxQ("div", {
     class: {
-      "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 flex-col gap-6 rounded-lg border border-gray-700 touch-none": true,
       ...props1.class
     }
   }, {
@@ -777,7 +777,7 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         ]),
         style: `background: ${color}`
       }, {
-        class: "w-[25px] h-[25px] border border-gray-700 rounded-md hover:scale-110 transition-all",
+        class: "w-[25px] h-[25px] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
         "preventdefault:mousedown": true,
         "preventdefault:touchstart": true
       }, null, 2, i);
@@ -843,12 +843,12 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       Component,
       /* @__PURE__ */ _jsxQ("div", null, {
         class: _fnSignal((p0) => ({
-          "transition-all duration-200": true,
+          "motion-safe:transition-all duration-200": true,
           "opacity-0": !p0.loading,
           "opacity-100": p0.loading
         }), [
           props
-        ], '{"transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
+        ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
       }, /* @__PURE__ */ _jsxC(LoadingIcon, {
         width: 24,
         [_IMMUTABLE]: {
@@ -862,24 +862,24 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const menu = useSignal(false);
   return /* @__PURE__ */ _jsxQ("nav", null, {
     class: _fnSignal((p0) => ({
-      "transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
+      "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
       "fixed": p0.fixed,
       "absolute": !p0.fixed
     }), [
       props
-    ], '{"transition-all duration-200 flex flex-col top-0 left-0 w-full z-50":true,"fixed":p0.fixed,"absolute":!p0.fixed}')
+    ], '{"motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50":true,"fixed":p0.fixed,"absolute":!p0.fixed}')
   }, [
     /* @__PURE__ */ _jsxQ("div", null, {
       class: _fnSignal((p0) => ({
-        "sm:hidden transition-all flex flex-col px-4 items-center absolute w-full": true,
-        "top-full mt-4": p0.value,
+        "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full": true,
+        "top-full mt-2": p0.value,
         "opacity-0 top-0": !p0.value
       }), [
         menu
-      ], '{"sm:hidden transition-all flex flex-col px-4 items-center absolute w-full":true,"top-full mt-4":p0.value,"opacity-0 top-0":!p0.value}')
+      ], '{"sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full":true,"top-full mt-2":p0.value,"opacity-0 top-0":!p0.value}')
     }, /* @__PURE__ */ _jsxQ("div", null, {
       class: {
-        "flex flex-col transition-all max-w-7xl w-full p-2 bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": true
+        "flex flex-col motion-safe:transition-all max-w-7xl w-full p-2 bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": true
       }
     }, /* @__PURE__ */ _jsxC(Slot, {
       name: "mobile",
@@ -890,10 +890,10 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
     /* @__PURE__ */ _jsxQ("div", null, {
       class: _fnSignal((p0) => ({
         "bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl": !p0.floating,
-        "p-4 pb-0": p0.floating
+        "p-2 pb-0": p0.floating
       }), [
         props
-      ], '{"bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl":!p0.floating,"p-4 pb-0":p0.floating}')
+      ], '{"bg-gray-800/50 border-b border-gray-700/50 backdrop-blur-lg drop-shadow-xl":!p0.floating,"p-2 pb-0":p0.floating}')
     }, /* @__PURE__ */ _jsxQ("div", {
       class: {
         "flex justify-evenly w-full mx-auto px-4 py-2 max-w-7xl": true,
@@ -1003,7 +1003,7 @@ const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "text-gray-300 pb-1",
+      class: "text-gray-300 pb-1 select-none",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1034,11 +1034,11 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
   `, "NumberInputRaw_component_useStyles_v5EsWTMt0DU"));
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: _fnSignal((p0) => ({
-      "flex text-gray-50": true,
+      "flex text-gray-50 touch-manipulation": true,
       "gap-2": !p0.input
     }), [
       props
-    ], '{"flex text-gray-50":true,"gap-2":!p0.input}')
+    ], '{"flex text-gray-50 touch-manipulation":true,"gap-2":!p0.input}')
   }, [
     /* @__PURE__ */ _jsxC(Button, {
       size: "sm",
@@ -1168,7 +1168,7 @@ const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "text-gray-300 pb-1",
+      class: "text-gray-300 pb-1 select-none",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1182,7 +1182,9 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
   const props1 = _restProps(props, [
     "id",
     "values",
-    "class"
+    "class",
+    "display",
+    "color"
   ]);
   const store = useStore({
     opened: false
@@ -1210,7 +1212,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     }
   `, "SelectInputRaw_component_useStyles_Zc40Za0ngqc"));
   return /* @__PURE__ */ _jsxQ("div", null, {
-    class: "relative"
+    class: "relative touch-manipulation"
   }, [
     /* @__PURE__ */ _jsxS("select", {
       ...props1,
@@ -1228,38 +1230,44 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ], "p0.id")
     }, 0, null),
     /* @__PURE__ */ _jsxC(Button, {
+      get color() {
+        return props.color;
+      },
       size: "sm",
       get class() {
         return {
-          "flex focus:bg-gray-700": true,
+          "flex": true,
           ...props.class
         };
       },
       children: [
-        /* @__PURE__ */ _jsxQ("span", null, {
+        _fnSignal((p0) => p0.display, [
+          props
+        ], "p0.display"),
+        !props.display && /* @__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),
+        }, props.values.find((value) => value.value.toString() === props1.value)?.name ?? props.values[0].name, 1, "cA_3"),
         /* @__PURE__ */ _jsxC(ChevronDown, {
           width: 16,
           get class() {
             return {
-              "transition-all duration-200": true,
+              "motion-safe:transition-all duration-200": true,
               "transform rotate-180": store.opened
             };
           },
           [_IMMUTABLE]: {
             class: _fnSignal((p0) => ({
-              "transition-all duration-200": true,
+              "motion-safe:transition-all duration-200": true,
               "transform rotate-180": p0.opened
             }), [
               store
-            ], '{"transition-all duration-200":true,"transform rotate-180":p0.opened}'),
+            ], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p0.opened}'),
             width: _IMMUTABLE
           }
-        }, 3, "cA_3")
+        }, 3, "cA_4")
       ],
       onClick$: /* @__PURE__ */ inlinedQrl(() => {
         const [store2] = useLexicalScope();
@@ -1269,18 +1277,21 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ]),
       [_IMMUTABLE]: {
         class: _fnSignal((p0) => ({
-          "flex focus:bg-gray-700": true,
+          "flex": true,
           ...p0.class
         }), [
           props
-        ], '{"flex focus:bg-gray-700":true,...p0.class}'),
+        ], '{"flex":true,...p0.class}'),
+        color: _fnSignal((p0) => p0.color, [
+          props
+        ], "p0.color"),
         onClick$: _IMMUTABLE,
         size: _IMMUTABLE
       }
-    }, 1, "cA_4"),
+    }, 1, "cA_5"),
     /* @__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 lui-scroll overflow-auto select-none": true,
+        "motion-safe: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
       }
     }, {
@@ -1289,6 +1300,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ], "`lui-${p0.id}-opts`")
     }, props.values.map((value, i) => {
       return /* @__PURE__ */ _jsxC(Button, {
+        color: "transparent",
         onClick$: /* @__PURE__ */ inlinedQrl(() => {
           const [props2, store2, value2] = useLexicalScope();
           store2.opened = false;
@@ -1304,29 +1316,28 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         ]),
         get class() {
           return {
-            "border-0 bg-transparent": true,
             "opacity-0": !store.opened
           };
         },
         children: _wrapSignal(value, "name"),
         [_IMMUTABLE]: {
           class: _fnSignal((p0) => ({
-            "border-0 bg-transparent": true,
             "opacity-0": !p0.opened
           }), [
             store
-          ], '{"border-0 bg-transparent":true,"opacity-0":!p0.opened}')
+          ], '{"opacity-0":!p0.opened}'),
+          color: _IMMUTABLE
         }
       }, 1, i);
     }), 1, null)
-  ], 1, "cA_5");
+  ], 1, "cA_6");
 }, "SelectInputRaw_component_Itdx5yPeQd4"));
 const TextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "text-gray-300 pb-1",
+      class: "text-gray-300 pb-1 select-none",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1373,11 +1384,11 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   ]);
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: _fnSignal((p0) => ({
-      "flex gap-3 items-center": true,
+      "flex gap-3 items-center touch-manipulation": true,
       "justify-center": p0.center
     }), [
       props
-    ], '{"flex gap-3 items-center":true,"justify-center":p0.center}')
+    ], '{"flex gap-3 items-center touch-manipulation":true,"justify-center":p0.center}')
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
       class: "inline-flex relative items-center cursor-pointer"
@@ -1393,9 +1404,9 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       }, 0, null),
       /* @__PURE__ */ _jsxQ("div", null, {
         class: {
-          "transition ease-in-out w-12 h-7 rounded-md peer border hover:shadow-lg": true,
+          "motion-safe:transition ease-in-out w-12 h-7 rounded-md peer border hover:shadow-lg": true,
           "bg-gray-800 border-gray-700 hover:bg-gray-700 active:bg-gray-600": true,
-          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:rounded-md after:h-5 after:w-5 after:transition-all after:ease-in-out": true,
+          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:rounded-md after:h-5 after:w-5 after:motion-safe:transition-all after:ease-in-out": true,
           "after:bg-gray-700 after:border-gray-600 after:hover:bg-gray-600 after:active:bg-gray-500": true,
           "peer-checked:bg-blue-700 peer-checked:border-blue-600 peer-checked:hover:bg-blue-600 peer-checked:active:bg-blue-500": true,
           "peer-checked:after:translate-x-full peer-checked:after:bg-blue-600 peer-checked:after:border-blue-500 peer-checked:after:hover:bg-blue-500 peer-checked:after:active:bg-blue-400": true
@@ -1405,7 +1416,7 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     props.label && /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
-      class: "text-gray-300 flex gap-2"
+      class: "text-gray-300 flex gap-2 select-none"
     }, _fnSignal((p0) => p0.label, [
       props
     ], "p0.label"), 3, "yu_0")

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

@@ -1,8 +1,11 @@
-import type { PropsOf } from '@builder.io/qwik';
+import type { JSXChildren, PropsOf } from '@builder.io/qwik';
+import type { buttonColorClasses } from './Button';
 interface SelectInputProps extends Omit<PropsOf<'select'>, 'class'> {
     class?: {
         [key: string]: boolean;
     };
+    display?: JSXChildren;
+    color?: keyof typeof buttonColorClasses;
     id: string;
     values: {
         name: string;

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

@@ -9,7 +9,7 @@ export interface TextInputRawProps extends Omit<(PropsOf<'input'> & {
 interface TextInputProps extends Omit<TextInputRawProps, 'children'> {
     id: string;
 }
-export declare const InputClasses = "transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5";
+export declare const InputClasses = "motion-safe:transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5 touch-manipulation";
 export declare const TextInput: import("@builder.io/qwik").Component<TextInputProps>;
 export declare const TextInputRaw: import("@builder.io/qwik").Component<TextInputRawProps>;
 export {};

package/lib-types/utils/simple-color-picker/color.d.ts

@@ -0,0 +1,36 @@
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare function getMousePosition(e: MouseEvent | TouchEvent): {
+    x: number;
+    y: number;
+};
+export declare const pad2: (c: string) => string;
+export type RGBAColor = {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+};
+export type HSVAColor = {
+    h: number;
+    s: number;
+    v: number;
+    a?: number;
+};
+export declare function getBrightness(color: RGBAColor): number;
+export declare function hexNumberToRgb(color: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function rgbToHex(color: RGBAColor): string;
+export declare const hexStringToNumber: (color: string) => number;
+export declare function hsvToRgb(color: HSVAColor): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function rgbToHsv(color: RGBAColor): {
+    h: number;
+    s: number;
+    v: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.10.0-1",
+  "version": "0.10.0-2",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -43,12 +43,12 @@
     "@anuragroy/tailwindcss-animate": "^1.0.6",
     "@builder.io/qwik": "1.4.5",
     "@builder.io/qwik-city": "^1.4.5",
-    "@types/eslint": "^8.56.4",
-    "@types/node": "^20.11.21",
+    "@types/eslint": "^8.56.5",
+    "@types/node": "^20.11.24",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
-    "autoprefixer": "^10.4.17",
-    "chart.js": "^4.4.1",
+    "autoprefixer": "^10.4.18",
+    "chart.js": "^4.4.2",
     "eslint": "^8.57.0",
     "eslint-plugin-qwik": "latest",
     "np": "^10.0.0",