@luminescent/ui 0.4.1 → 0.5.0

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, useStylesQrl, _jsxBranch, _IMMUTABLE, useStore, _wrapSignal, useLexicalScope } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, useStylesQrl, useStore, _wrapSignal, useLexicalScope } 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, {
@@ -8,21 +8,22 @@ const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   ], "p0.id")
 }, null, 3, "Oa_0"), "Anchor_component_O7y4zyaazA0"));
 const buttonColorClasses = {
-  blue: "bg-blue-600/90 border-blue-500 hover:bg-blue-500 focus:bg-blue-500",
-  purple: "bg-purple-600/90 border-purple-500 hover:bg-purple-500 focus:bg-purple-500",
-  pink: "bg-pink-600/90 border-pink-500 hover:bg-pink-500 focus:bg-pink-500",
-  gray: "bg-gray-800/90 border-gray-700 hover:bg-gray-700 focus:bg-gray-700",
-  red: "bg-red-700/90 border-red-600 hover:bg-red-600 focus:bg-red-600",
-  green: "bg-green-700/90 border-green-600 hover:bg-green-600 focus:bg-green-600",
-  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 focus:bg-yellow-600"
+  blue: "bg-blue-600/90 border-blue-500 hover:bg-blue-500 active:bg-blue-400 focus:border-blue-400",
+  purple: "bg-purple-600/90 border-purple-500 hover:bg-purple-500 active:bg-purple-400 focus:border-purple-400",
+  pink: "bg-pink-600/90 border-pink-500 hover:bg-pink-500 active:bg-pink-400 focus:border-pink-400",
+  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",
+  red: "bg-red-700/90 border-red-600 hover:bg-red-600 active:bg-red-500 focus:border-red-500",
+  green: "bg-green-700/90 border-green-600 hover:bg-green-600 active:bg-green-500 focus:border-green-500",
+  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500"
 };
 const sizeClasses = {
-  sm: "text-sm px-2 py-1 rounded-md gap-2",
+  sm: "text-sm px-2 py-1 rounded-md gap-2 active:px-1",
   md: "text-base px-4 py-2 rounded-md gap-3",
   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";
+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 Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
@@ -30,7 +31,7 @@ const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "gray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"]]: true,
     [sizeClasses[props.size ?? "md"]]: true,
     ...props1.class
   };
@@ -46,7 +47,7 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "gray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"]]: true,
     [sizeClasses[props.size ?? "md"]]: true,
     ...props1.class
   };
@@ -56,7 +57,9 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   }, null, 0, "7H_3");
 }, "ButtonAnchor_component_vQT9xS0lqew"));
 const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxS("svg", {
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "animate-spin"
+  }, /* @__PURE__ */ _jsxS("svg", {
     ...props,
     children: [
       /* @__PURE__ */ _jsxQ("circle", null, {
@@ -74,23 +77,17 @@ const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       }, null, 3, null)
     ]
   }, {
-    class: _fnSignal((p0) => ({
-      "animate-spin": true,
-      ...p0.class
-    }), [
-      props
-    ], '{"animate-spin":true,...p0.class}'),
-    fill: "none",
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, 0, "XP_0");
+  }, 0, null), 1, "XP_0");
 }, "LoadingIcon_component_iXFSRNToIus"));
 const cardColorClasses = {
   pink: {
     card: {
       bg_blobs: "bg-pink-400/10 border-pink-400/20",
       bg: "bg-pink-400/60 border-pink-400",
-      hover: "hover:bg-pink-400/20"
+      hover: "hover:bg-pink-400/20",
+      click: "active:bg-pink-300/20"
     },
     blobs: [
       "bg-pink-400",
@@ -100,9 +97,10 @@ const cardColorClasses = {
   },
   red: {
     card: {
-      bg_blobs: "bg-purple-400/10 border-purple-400/20",
+      bg_blobs: "bg-red-400/10 border-red-400/20",
       bg: "bg-red-400/60 border-red-400",
-      hover: "hover:bg-purple-400/20"
+      hover: "hover:bg-red-400/20",
+      click: "active:bg-red-300/20"
     },
     blobs: [
       "bg-red-400",
@@ -114,7 +112,8 @@ const cardColorClasses = {
     card: {
       bg_blobs: "bg-orange-400/10 border-orange-400/20",
       bg: "bg-orange-400/60 border-orange-400",
-      hover: "hover:bg-orange-400/20"
+      hover: "hover:bg-orange-400/20",
+      click: "active:bg-orange-300/20"
     },
     blobs: [
       "bg-orange-400",
@@ -126,7 +125,8 @@ const cardColorClasses = {
     card: {
       bg_blobs: "bg-yellow-400/10 border-yellow-400/20",
       bg: "bg-yellow-400/60 border-yellow-400",
-      hover: "hover:bg-yellow-400/20"
+      hover: "hover:bg-yellow-400/20",
+      click: "active:bg-yellow-300/20"
     },
     blobs: [
       "bg-yellow-400",
@@ -138,7 +138,8 @@ const cardColorClasses = {
     card: {
       bg_blobs: "bg-green-400/10 border-green-400/20",
       bg: "bg-green-400/60 border-green-400",
-      hover: "hover:bg-green-400/20"
+      hover: "hover:bg-green-400/20",
+      click: "active:bg-green-300/20"
     },
     blobs: [
       "bg-green-400",
@@ -150,7 +151,8 @@ const cardColorClasses = {
     card: {
       bg_blobs: "bg-blue-400/10 border-blue-400/20",
       bg: "bg-blue-400/60 border-blue-400",
-      hover: "hover:bg-blue-400/20"
+      hover: "hover:bg-blue-400/20",
+      click: "active:bg-blue-300/20"
     },
     blobs: [
       "bg-blue-400",
@@ -162,7 +164,8 @@ const cardColorClasses = {
     card: {
       bg_blobs: "bg-purple-400/10 border-purple-400/20",
       bg: "bg-purple-400/60 border-purple-400",
-      hover: "hover:bg-purple-400/20"
+      hover: "hover:bg-purple-400/20",
+      click: "active:bg-purple-300/20"
     },
     blobs: [
       "bg-purple-400",
@@ -174,7 +177,8 @@ const cardColorClasses = {
     card: {
       bg_blobs: "bg-gray-400/10 border-gray-400/20",
       bg: "bg-gray-400/60 border-gray-400",
-      hover: "hover:bg-gray-400/20"
+      hover: "hover:bg-gray-400/20",
+      click: "active:bg-gray-300/20"
     },
     blobs: [
       "bg-gray-400",
@@ -186,7 +190,8 @@ const cardColorClasses = {
     card: {
       bg_blobs: "bg-gray-800/10 border-gray-800/20",
       bg: "bg-gray-800/60 border-gray-800",
-      hover: "hover:bg-gray-800/20"
+      hover: "hover:bg-gray-800/20",
+      click: "active:bg-gray-700/20"
     },
     blobs: [
       "bg-gray-400",
@@ -198,7 +203,8 @@ const cardColorClasses = {
     card: {
       bg_blobs: "bg-gray-900/10 border-gray-900/20",
       bg: "bg-gray-900/60 border-gray-900",
-      hover: "hover:bg-gray-900/20"
+      hover: "hover:bg-gray-900/20",
+      click: "active:bg-gray-800/20"
     },
     blobs: [
       "bg-gray-400",
@@ -219,17 +225,12 @@ const blobClasses = [
 const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
-    "hoverable",
+    "hover",
     "href",
     "row",
     "blobs"
   ]);
-  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
-    .-animation-delay-5 { animation-delay: -5s; }
-    .-animation-delay-10 { animation-delay: -10s; }
-  `, "Card_component_useStyles_POiiuoB0EmE"));
   const blob = Math.round(Math.random() * 6);
-  const button = !!props1.onClick$ || props.hoverable;
   return /* @__PURE__ */ _jsxS("div", {
     ...props1,
     children: /* @__PURE__ */ _jsxQ("div", null, {
@@ -244,7 +245,7 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
         ], "p0.href")
       }, null, 3, "OW_0"),
       /* @__PURE__ */ _jsxQ("div", null, {
-        class: "relative z-10"
+        class: "relative"
       }, /* @__PURE__ */ _jsxQ("div", null, {
         class: _fnSignal((p0) => ({
           "flex gap-4": true,
@@ -255,7 +256,7 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
         ], '{"flex gap-4":true,"flex-col":!p0.row,"flex-row items-center":p0.row}')
       }, /* @__PURE__ */ _jsxC(Slot, null, 3, "OW_1"), 1, null), 1, null),
       props.blobs && /* @__PURE__ */ _jsxQ("div", null, {
-        class: "absolute -z-10 inset-0 w-full h-full transition-all overflow-clip",
+        class: "absolute -z-10 inset-0 w-full h-full transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
         style: {
           containerType: "size"
         }
@@ -270,7 +271,7 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
         /* @__PURE__ */ _jsxQ("div", {
           class: {
             "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
-            "-animation-delay-5": true,
+            "anim-delay-[-5s]": true,
             [blobClasses[blob]]: true,
             [cardColorClasses[props.color ?? "darkgray"].blobs[1]]: true
           }
@@ -278,7 +279,7 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
         /* @__PURE__ */ _jsxQ("div", {
           class: {
             "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
-            "-animation-delay-10": true,
+            "anim-delay-[-10s]": true,
             [blobClasses[blob]]: true,
             [cardColorClasses[props.color ?? "darkgray"].blobs[2]]: true
           }
@@ -289,8 +290,8 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
       "flex-1 relative border rounded-lg group 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]: props.hoverable,
-      "hover:shadow-lg cursor-pointer": button,
+      [cardColorClasses[props.color ?? "darkgray"].card.hover + " hover:shadow-lg"]: props.hover,
+      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer"]: props.hover == "clickable",
       ...props1.class
     }
   }, null, 0, "OW_3");
@@ -345,12 +346,13 @@ const CardHeader = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     }, 3, "OW_7"), 1, "OW_8")
   ], 1, "OW_9");
 }, "CardHeader_component_2xQZ6Uv7R4A"));
+const InputClasses = "transition ease-in-out text-lg 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-3 py-2";
 const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "mb-2",
+      class: "pb-2",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -365,7 +367,7 @@ const TextInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   return /* @__PURE__ */ _jsxS("input", {
     ...props,
     class: {
-      "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2": true,
+      [InputClasses]: true,
       ...props.class
     }
   }, null, 0, "dC_3");
@@ -434,8 +436,7 @@ class Color {
     this._updateBrightness();
   }
   _updateBrightness() {
-    const { r, g, b } = this._rgba;
-    this._brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+    this._brightness = getBrightness(this._rgba);
     this._isDark = this._brightness < 0.5;
     this._isLight = !this._isDark;
   }
@@ -461,6 +462,10 @@ class Color {
     return this._isLight;
   }
 }
+function getBrightness(color) {
+  const { r, g, b } = color;
+  return (r * 299 + g * 587 + b * 114) / 1e3;
+}
 function hexNumberToRgb(color) {
   const r = (color >> 16 & 255) / 255;
   const g = (color >> 8 & 255) / 255;
@@ -874,7 +879,8 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
   const props1 = _restProps(props, [
     "onInput$",
     "value",
-    "presetColors"
+    "presetColors",
+    "preview"
   ]);
   useStylesQrl(/* @__PURE__ */ inlinedQrl(`
     .color-picker {
@@ -890,6 +896,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       backdrop-filter: blur(10px);
       user-select: none;
       position: relative;
+      z-index: 1000;
     }
 
     .color-picker-saturation {
@@ -918,8 +925,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       top: -7px;
       left: -7px;
       box-sizing: border-box;
-      z-index: 10;
-    }
+≈    }
 
     .color-picker-hue {
       width: 8px;
@@ -961,11 +967,10 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       top: -6px;
       left: -4px;
       box-sizing: border-box;
-      z-index: 10;
     }
   `, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
   const store = useStore({
-    value: (props.value ?? "#FFFFFF") || "#FFFFFF"
+    value: (props.value ?? "#000000") || "#FFFFFF"
   });
   return /* @__PURE__ */ _jsxQ("div", null, null, [
     /* @__PURE__ */ _jsxQ("label", {
@@ -981,7 +986,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       onBlur$: /* @__PURE__ */ inlinedQrl(() => {
         const [props12] = useLexicalScope();
         const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
-        pickerDiv.style.display = "none";
+        pickerDiv.classList.add("opacity-0", "pointer-events-none", "scale-95");
       }, "ColorInput_component_div_TextInputRaw_onBlur_giB7aSy8tnc", [
         props1
       ]),
@@ -1009,23 +1014,25 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
             picker.setColor(element.value);
           });
         }
-        pickerDiv.style.display = "block";
+        pickerDiv.classList.remove("opacity-0", "pointer-events-none", "scale-95");
       }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
         props1,
         props,
         store
       ]),
-      get style() {
-        return {
-          borderLeft: `40px solid ${store.value}`
-        };
-      },
+      style: (props.preview ?? "left") == "full" ? {
+        backgroundColor: `${store.value}`,
+        color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
+      } : (props.preview ?? "left") == "left" ? {
+        borderLeft: `40px solid ${store.value}`
+      } : (props.preview ?? "left") == "right" ? {
+        borderRight: `40px solid ${store.value}`
+      } : (props.preview ?? "left") == "top" ? {
+        borderTop: `10px solid ${store.value}`
+      } : (props.preview ?? "left") == "bottom" ? {
+        borderBottom: `10px solid ${store.value}`
+      } : {},
       [_IMMUTABLE]: {
-        style: _fnSignal((p0) => ({
-          borderLeft: `40px solid ${p0.value}`
-        }), [
-          store
-        ], "{borderLeft:`40px solid ${p0.value}`}"),
         value: _fnSignal((p0) => p0.value, [
           store
         ], "p0.value")
@@ -1034,63 +1041,54 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     /* @__PURE__ */ _jsxQ("div", {
       id: `${props1.id}-color-picker`
     }, {
-      class: "hidden absolute mt-2"
+      class: "absolute mt-2 opacity-0 transition-all pointer-events-none scale-95"
     }, null, 3, null)
   ], 1, "0s_2");
 }, "ColorInput_component_jilGo0Bn3Ps"));
-const Add = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((rawProps) => {
-  const props = {
-    ...rawProps
-  };
-  props.class = ((props.class ?? "") + " ionicon").trim();
+const Plus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
     ...props,
-    children: [
-      /* @__PURE__ */ _jsxQ("line", null, {
-        x1: "256",
-        y1: "112",
-        x2: "256",
-        y2: "400",
-        style: "fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"
-      }, null, 3, null),
-      /* @__PURE__ */ _jsxQ("line", null, {
-        x1: "400",
-        y1: "256",
-        x2: "112",
-        y2: "256",
-        style: "fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"
-      }, null, 3, null)
-    ]
+    children: /* @__PURE__ */ _jsxQ("path", null, {
+      d: "M256 112v288M400 256H112",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "32"
+    }, null, 3, null)
   }, {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 512 512"
-  }, 0, "Oz_0");
-}, "Add_component_V0yTYgKwUXY"));
-const Remove = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((rawProps) => {
-  const props = {
-    ...rawProps
-  };
-  props.class = ((props.class ?? "") + " ionicon").trim();
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    viewBox: "0 0 512 512",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 0, "qR_0");
+}, "Plus_component_a7LdBXNrC2w"));
+const Minus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
     ...props,
-    children: /* @__PURE__ */ _jsxQ("line", null, {
-      x1: "400",
-      y1: "256",
-      x2: "112",
-      y2: "256",
-      style: "fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"
+    children: /* @__PURE__ */ _jsxQ("path", null, {
+      d: "M400 256H112",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "32"
     }, null, 3, null)
   }, {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 512 512"
-  }, 0, "yE_0");
-}, "Remove_component_JljE09jA0yc"));
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    viewBox: "0 0 512 512",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 0, "0g_0");
+}, "Minus_component_oP9l58XNP1Q"));
 const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "mb-2",
+      class: "pb-2",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
@@ -1109,6 +1107,16 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     "value",
     "step"
   ]);
+  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    input[type=number] {
+      -moz-appearance: textfield;
+    }
+  `, "NumberInputRaw_component_useStyles_v5EsWTMt0DU"));
   const store = useStore({
     value: props.value ?? 0
   });
@@ -1120,37 +1128,52 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       props
     ], '{"flex text-gray-50":true,"gap-2":!p0.input}')
   }, [
-    /* @__PURE__ */ _jsxQ("button", {
-      class: {
-        "flex justify-center items-center transition ease-in-out border border-gray-700 bg-gray-800 text-2xl hover:bg-gray-600 h-full py-1.5 cursor-pointer": true,
-        "px-3 rounded-l-md border-r-0": props.input,
-        "w-[50%] rounded-md": !props.input,
-        "opacity-50 pointer-events-none": props1.min ? store.value <= props1.min : false
+    /* @__PURE__ */ _jsxC(Button, {
+      get color() {
+        return props.input ? "gray" : "darkgray";
       },
-      disabled: props1.min ? store.value <= props1.min : false
-    }, {
       "aria-label": "Decrement",
       "data-action": "decrement",
+      disabled: props1.min ? store.value <= props1.min : false,
       onClick$: /* @__PURE__ */ inlinedQrl((event, element) => {
         const [props2, store2] = useLexicalScope();
         store2.value = store2.value - (props2.step ?? 1);
         props2.onDecrement$(event, element, store2);
-      }, "NumberInputRaw_component_div_button_onClick_LHGh2R4kyY0", [
+      }, "NumberInputRaw_component_div_Button_onClick_PgKg57gfX0I", [
         props,
         store
-      ])
-    }, /* @__PURE__ */ _jsxC(Remove, {
-      class: "fill-current",
-      width: "24",
+      ]),
+      get class() {
+        return {
+          "mr-2": props.input
+        };
+      },
+      children: /* @__PURE__ */ _jsxC(Minus, {
+        class: "fill-current",
+        width: "24",
+        [_IMMUTABLE]: {
+          class: _IMMUTABLE,
+          width: _IMMUTABLE
+        }
+      }, 3, "gk_3"),
       [_IMMUTABLE]: {
-        class: _IMMUTABLE,
-        width: _IMMUTABLE
+        "aria-label": _IMMUTABLE,
+        class: _fnSignal((p0) => ({
+          "mr-2": p0.input
+        }), [
+          props
+        ], '{"mr-2":p0.input}'),
+        color: _fnSignal((p0) => p0.input ? "gray" : "darkgray", [
+          props
+        ], 'p0.input?"gray":"darkgray"'),
+        "data-action": _IMMUTABLE,
+        onClick$: _IMMUTABLE
       }
-    }, 3, "gk_3"), 1, null),
+    }, 1, "gk_4"),
     props.input && /* @__PURE__ */ _jsxS("input", {
       ...props1,
       class: {
-        "transition ease-in-out text-lg text-center border border-gray-600 bg-gray-700 hover:bg-gray-600 focus:bg-gray-500 px-3 py-1 w-full": true,
+        [InputClasses]: true,
         ...props1.class
       }
     }, {
@@ -1161,158 +1184,238 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       value: _fnSignal((p0) => p0.value, [
         store
       ], "p0.value")
-    }, 0, "gk_4"),
-    /* @__PURE__ */ _jsxQ("button", {
-      class: {
-        "flex justify-center items-center transition ease-in-out border border-gray-700 bg-gray-800 text-2xl hover:bg-gray-600 h-full py-1.5 cursor-pointer": true,
-        "px-3 rounded-r-md border-l-0": props.input,
-        "w-[50%] rounded-md": !props.input,
-        "opacity-50 pointer-events-none": props1.max ? store.value >= props1.max : false
+    }, 0, "gk_5"),
+    /* @__PURE__ */ _jsxC(Button, {
+      get color() {
+        return props.input ? "gray" : "darkgray";
       },
-      disabled: props1.max ? store.value >= props1.max : false
-    }, {
       "aria-label": "Increment",
       "data-action": "increment",
+      disabled: props1.max ? store.value >= props1.max : false,
       onClick$: /* @__PURE__ */ inlinedQrl((event, element) => {
         const [props2, store2] = useLexicalScope();
         store2.value = store2.value + (props2.step ?? 1);
         props2.onIncrement$(event, element, store2);
-      }, "NumberInputRaw_component_div_button_onClick_1_c8jSdtGD9sk", [
+      }, "NumberInputRaw_component_div_Button_onClick_1_UzVlUpg1uGs", [
         props,
         store
-      ])
-    }, /* @__PURE__ */ _jsxC(Add, {
-      class: "fill-current",
-      width: "24",
+      ]),
+      get class() {
+        return {
+          "ml-2": props.input
+        };
+      },
+      children: /* @__PURE__ */ _jsxC(Plus, {
+        class: "fill-current",
+        width: "24",
+        [_IMMUTABLE]: {
+          class: _IMMUTABLE,
+          width: _IMMUTABLE
+        }
+      }, 3, "gk_6"),
       [_IMMUTABLE]: {
-        class: _IMMUTABLE,
-        width: _IMMUTABLE
+        "aria-label": _IMMUTABLE,
+        class: _fnSignal((p0) => ({
+          "ml-2": p0.input
+        }), [
+          props
+        ], '{"ml-2":p0.input}'),
+        color: _fnSignal((p0) => p0.input ? "gray" : "darkgray", [
+          props
+        ], 'p0.input?"gray":"darkgray"'),
+        "data-action": _IMMUTABLE,
+        onClick$: _IMMUTABLE
       }
-    }, 3, "gk_5"), 1, null)
-  ], 1, "gk_6");
+    }, 1, "gk_7")
+  ], 1, "gk_8");
 }, "NumberInputRaw_component_8sGf0eS1rvo"));
-const OutputField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    ...props,
+    children: /* @__PURE__ */ _jsxQ("path", null, {
+      d: "M112 184l144 144 144-144",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "48"
+    }, null, 3, null)
+  }, {
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width"),
+    viewBox: "0 0 512 512",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 0, "rN_0");
+}, "ChevronDown_component_V0linof0cMQ"));
+const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "mb-2",
+      class: "pb-2",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "ze_0"), 1, null),
-    /* @__PURE__ */ _jsxC(OutputFieldRaw, {
-      ...props,
-      children: void 0
-    }, 0, "ze_1")
-  ], 1, "ze_2");
-}, "OutputField_component_6Kc38ThYgF4"));
-const OutputFieldRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "cA_0"), 1, null),
+    /* @__PURE__ */ _jsxC(SelectInputRaw, {
+      ...props
+    }, 0, "cA_1")
+  ], 1, "cA_2");
+}, "SelectInput_component_m80ag1KuJSk"));
+const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
-    "onChange$"
+    "id",
+    "values"
   ]);
-  const alertsStore = useStore({
-    alerts: []
-  }, {
-    deep: true
+  const store = useStore({
+    opened: false
   });
-  return /* @__PURE__ */ _jsxC(Fragment, {
-    children: [
-      /* @__PURE__ */ _jsxS("textarea", {
-        ...props1,
-        class: {
-          "transition ease-in-out cursor-pointer text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2 break-words": true,
-          ...props1.class
-        },
-        onChange$: /* @__PURE__ */ inlinedQrl((event, element) => {
-          const [alertsStore2, props2] = useLexicalScope();
-          if (props2.onChange$)
-            props2.onChange$(event, element, alertsStore2);
-        }, "OutputFieldRaw_component__Fragment_textarea_onChange_sGG9tIcP0OY", [
-          alertsStore,
-          props
-        ]),
-        onClick$: /* @__PURE__ */ inlinedQrl((event, element) => {
-          const [alertsStore2] = useLexicalScope();
-          navigator.clipboard.writeText(element.value);
-          const alert = {
-            class: "text-green-500",
-            text: "Copied to clipboard!"
-          };
-          alertsStore2.alerts.push(alert);
-          setTimeout(() => {
-            alertsStore2.alerts.splice(alertsStore2.alerts.indexOf(alert), 1);
-          }, 1e3);
-        }, "OutputFieldRaw_component__Fragment_textarea_onClick_7OWCYv02KFs", [
-          alertsStore
-        ])
-      }, null, 0, null),
-      alertsStore.alerts.map((alert, i) => /* @__PURE__ */ _jsxQ("p", {
-        class: _wrapSignal(alert, "class"),
-        dangerouslySetInnerHTML: _wrapSignal(alert, "text")
-      }, null, null, 3, `output-alert${i}`))
-    ]
-  }, 1, "ze_3");
-}, "OutputFieldRaw_component_OxiM0W3AR0o"));
-const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
-    class: "flex flex-col"
+    class: "relative"
   }, [
-    /* @__PURE__ */ _jsxQ("label", null, {
-      class: "mb-2",
-      for: _fnSignal((p0) => p0.id, [
+    /* @__PURE__ */ _jsxS("select", {
+      ...props1,
+      children: props.values.map((value, i) => {
+        return /* @__PURE__ */ _jsxQ("option", {
+          value: _wrapSignal(value, "value")
+        }, null, value.name, 1, i);
+      })
+    }, {
+      class: {
+        "hidden": true
+      },
+      id: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, /* @__PURE__ */ _jsxC(Slot, {
-      name: "label",
+    }, 0, null),
+    /* @__PURE__ */ _jsxC(Button, {
+      children: [
+        /* @__PURE__ */ _jsxQ("span", null, {
+          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,
+          get class() {
+            return {
+              "transition-all duration-200": true,
+              "transform rotate-180": store.opened
+            };
+          },
+          [_IMMUTABLE]: {
+            class: _fnSignal((p0) => ({
+              "transition-all duration-200": true,
+              "transform rotate-180": p0.opened
+            }), [
+              store
+            ], '{"transition-all duration-200":true,"transform rotate-180":p0.opened}'),
+            width: _IMMUTABLE
+          }
+        }, 3, "cA_3")
+      ],
+      class: {
+        ...props1.class
+      },
+      onClick$: /* @__PURE__ */ inlinedQrl(() => {
+        const [store2] = useLexicalScope();
+        store2.opened = !store2.opened;
+      }, "SelectInputRaw_component_div_Button_onClick_9Gkbglaqsdw", [
+        store
+      ]),
       [_IMMUTABLE]: {
-        name: _IMMUTABLE
+        onClick$: _IMMUTABLE
       }
-    }, 3, "cA_0"), 1, null),
-    /* @__PURE__ */ _jsxC(SelectInputRaw, {
-      ...props,
-      children: /* @__PURE__ */ _jsxC(Slot, null, 3, "cA_1")
-    }, 0, "cA_2")
-  ], 1, "cA_3");
-}, "SelectInput_component_m80ag1KuJSk"));
-const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const props1 = _restProps(props, [
-    "transparent"
-  ]);
-  return /* @__PURE__ */ _jsxS("select", {
-    ...props1,
-    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "cA_4"),
-    class: {
-      "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-2 py-3": true,
-      "border-0 bg-transparent": props.transparent,
-      ...props1.class
-    }
-  }, null, 0, "cA_5");
+    }, 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,
+        "pointer-events-none opacity-0 scale-95": !store.opened
+      }
+    }, {
+      id: _fnSignal((p0) => `lui-${p0.id}-opts`, [
+        props
+      ], "`lui-${p0.id}-opts`")
+    }, props.values.map((value, i) => {
+      return /* @__PURE__ */ _jsxC(Button, {
+        onClick$: /* @__PURE__ */ inlinedQrl(() => {
+          const [props2, store2, value2] = useLexicalScope();
+          store2.opened = false;
+          const select = document.getElementById(props2.id);
+          select.value = value2.value.toString();
+          const name = document.getElementById(`lui-${props2.id}-name`);
+          name.textContent = value2.name;
+          select.dispatchEvent(new Event("change"));
+        }, "SelectInputRaw_component_div_div_Button_onClick_mLa0FdeKCLw", [
+          props,
+          store,
+          value
+        ]),
+        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}')
+        }
+      }, 1, i);
+    }), 1, null)
+  ], 1, "cA_5");
 }, "SelectInputRaw_component_Itdx5yPeQd4"));
-const TextAreaInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+const TextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
-      class: "mb-2",
+      class: "pb-2",
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "8U_0"), 1, null),
-    /* @__PURE__ */ _jsxC(TextAreaInputRaw, {
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "UP_0"), 1, null),
+    /* @__PURE__ */ _jsxC(TextAreaRaw, {
       ...props
-    }, 0, "8U_1")
-  ], 1, "8U_2");
-}, "TextAreaInput_component_5hzQkVgFVlw"));
-const TextAreaInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxS("textarea", {
-    ...props,
-    class: {
-      "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2 resize-y w-full h-32": true,
-      ...props.class
-    }
-  }, null, 0, "8U_3");
-}, "TextAreaInputRaw_component_CupRtuvzbEs"));
+    }, 0, "UP_1")
+  ], 1, "UP_2");
+}, "TextArea_component_rWDoQFL2c0g"));
+const TextAreaRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "output"
+  ]);
+  return /* @__PURE__ */ _jsxC(Fragment, {
+    children: /* @__PURE__ */ _jsxS("textarea", {
+      ...props1,
+      class: {
+        [InputClasses]: true,
+        "h-32": true,
+        "cursor-pointer active:bg-gray-600": props.output,
+        ...props1.class
+      },
+      onClick$: props.output ? /* @__PURE__ */ inlinedQrl((event, element) => {
+        navigator.clipboard.writeText(element.value);
+        const notification = document.createElement("div");
+        notification.className = "fixed bottom-0 right-0 px-6 py-4 m-6 bg-green-600/50 border border-green-500 text-gray-50 rounded-md shadow-lg whitespace-nowrap backdrop-blur-xl";
+        notification.innerText = "Copied to clipboard!";
+        document.body.appendChild(notification);
+        setTimeout(() => {
+          notification.remove();
+        }, 1e3);
+      }, "TextAreaRaw_component__Fragment_textarea_onClick_YAQUkxxJ6Sg") : void 0
+    }, {
+      readOnly: _fnSignal((p0) => p0.output, [
+        props
+      ], "p0.output")
+    }, 0, null)
+  }, 1, "UP_3");
+}, "TextAreaRaw_component_PZiPScYxgNk"));
 const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "center"
@@ -1339,10 +1442,12 @@ 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 bg-gray-800 border border-gray-700 hover:bg-gray-700": true,
-          "peer-checked:bg-blue-700 peer-checked:border-blue-600 peer-checked:hover:bg-blue-600": true,
-          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-gray-700 after:border after:border-gray-600 hover:after:bg-gray-600 after:rounded-md after:h-5 after:w-5 after:transition-all after:ease-in-out": true,
-          "peer-checked:after:translate-x-full peer-checked:after:bg-blue-500 peer-checked:after:border-blue-400 peer-checked:hover:after:bg-blue-400": true
+          "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: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
         }
       }, null, 3, null)
     ], 1, null),
@@ -1791,6 +1896,7 @@ export {
   Card,
   CardHeader,
   ColorInput,
+  InputClasses,
   LoadingIcon,
   LogoBirdflop,
   LogoDiscord,
@@ -1805,12 +1911,10 @@ export {
   LogoWaterfall,
   NumberInput,
   NumberInputRaw,
-  OutputField,
-  OutputFieldRaw,
   SelectInput,
   SelectInputRaw,
-  TextAreaInput,
-  TextAreaInputRaw,
+  TextArea,
+  TextAreaRaw,
   TextInput,
   TextInputRaw,
   Toggle,