@luminescent/ui 0.10.0-4 → 0.12.0

package/lib/index.qwik.cjs

@@ -8,6 +8,121 @@ const Anchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
     props
   ], "p0.id")
 }, null, 3, "Oa_0"), "Anchor_component_O7y4zyaazA0"));
+const blobColorClasses = {
+  pink: [
+    "bg-pink-400",
+    "bg-pink-500",
+    "bg-pink-600"
+  ],
+  red: [
+    "bg-red-400",
+    "bg-red-500",
+    "bg-red-600"
+  ],
+  orange: [
+    "bg-orange-400",
+    "bg-orange-500",
+    "bg-orange-600"
+  ],
+  yellow: [
+    "bg-yellow-400",
+    "bg-yellow-500",
+    "bg-yellow-600"
+  ],
+  green: [
+    "bg-green-400",
+    "bg-green-500",
+    "bg-green-600"
+  ],
+  blue: [
+    "bg-blue-400",
+    "bg-blue-500",
+    "bg-blue-600"
+  ],
+  purple: [
+    "bg-purple-400",
+    "bg-purple-500",
+    "bg-purple-600"
+  ],
+  gray: [
+    "bg-gray-400",
+    "bg-gray-500",
+    "bg-gray-600"
+  ],
+  darkgray: [
+    "bg-gray-500",
+    "bg-gray-600",
+    "bg-gray-700"
+  ],
+  darkergray: [
+    "bg-gray-600",
+    "bg-gray-700",
+    "bg-gray-800"
+  ]
+};
+const blobClasses = [
+  "animate-blob",
+  "animate-blob1",
+  "animate-blob2",
+  "animate-blob3",
+  "animate-blob4",
+  "animate-blob5",
+  "animate-blob6"
+];
+const Blobs = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  const props1 = qwik._restProps(props, [
+    "color",
+    "blur"
+  ]);
+  const blob = Math.round(Math.random() * 6);
+  const colorClass = typeof (props.color ?? "darkgray") == "string" ? blobColorClasses[props.color ?? "darkgray"] : props.color ?? "darkgray";
+  return /* @__PURE__ */ qwik._jsxQ("div", {
+    class: {
+      "motion-reduce:hidden absolute -z-10 inset-0 transition-all animate-in fade-in anim-duration-[2s]": true,
+      ...props1.class
+    }
+  }, {
+    style: {
+      containerType: "size"
+    }
+  }, [
+    /* @__PURE__ */ qwik._jsxQ("div", {
+      class: {
+        "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
+        "blur-sm": (props.blur ?? "xl") === "sm",
+        "blur-md": (props.blur ?? "xl") === "md",
+        "blur-lg": (props.blur ?? "xl") === "lg",
+        "blur-xl": (props.blur ?? "xl") === "xl",
+        [blobClasses[blob]]: true,
+        [colorClass[0]]: true
+      }
+    }, null, null, 3, null),
+    /* @__PURE__ */ qwik._jsxQ("div", {
+      class: {
+        "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
+        "blur-sm": (props.blur ?? "xl") === "sm",
+        "blur-md": (props.blur ?? "xl") === "md",
+        "blur-lg": (props.blur ?? "xl") === "lg",
+        "blur-xl": (props.blur ?? "xl") === "xl",
+        "anim-delay-[-5s]": true,
+        [blobClasses[blob]]: true,
+        [colorClass[1]]: true
+      }
+    }, null, null, 3, null),
+    /* @__PURE__ */ qwik._jsxQ("div", {
+      class: {
+        "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
+        "blur-sm": (props.blur ?? "xl") === "sm",
+        "blur-md": (props.blur ?? "xl") === "md",
+        "blur-lg": (props.blur ?? "xl") === "lg",
+        "blur-xl": (props.blur ?? "xl") === "xl",
+        "anim-delay-[-10s]": true,
+        [blobClasses[blob]]: true,
+        [colorClass[2]]: true
+      }
+    }, null, null, 3, null)
+  ], 1, "OL_0");
+}, "Blobs_component_246Oa50YM60"));
 const buttonColorClasses = {
   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",
@@ -87,12 +202,7 @@ const cardColorClasses = {
       bg: "bg-pink-400/60 border-pink-400",
       hover: "hover:bg-pink-400/20",
       click: "active:bg-pink-300/20"
-    },
-    blobs: [
-      "bg-pink-400",
-      "bg-pink-500",
-      "bg-pink-600"
-    ]
+    }
   },
   red: {
     card: {
@@ -100,12 +210,7 @@ const cardColorClasses = {
       bg: "bg-red-400/60 border-red-400",
       hover: "hover:bg-red-400/20",
       click: "active:bg-red-300/20"
-    },
-    blobs: [
-      "bg-red-400",
-      "bg-red-500",
-      "bg-red-600"
-    ]
+    }
   },
   orange: {
     card: {
@@ -113,12 +218,7 @@ const cardColorClasses = {
       bg: "bg-orange-400/60 border-orange-400",
       hover: "hover:bg-orange-400/20",
       click: "active:bg-orange-300/20"
-    },
-    blobs: [
-      "bg-orange-400",
-      "bg-orange-500",
-      "bg-orange-600"
-    ]
+    }
   },
   yellow: {
     card: {
@@ -126,12 +226,7 @@ const cardColorClasses = {
       bg: "bg-yellow-400/60 border-yellow-400",
       hover: "hover:bg-yellow-400/20",
       click: "active:bg-yellow-300/20"
-    },
-    blobs: [
-      "bg-yellow-400",
-      "bg-yellow-500",
-      "bg-yellow-600"
-    ]
+    }
   },
   green: {
     card: {
@@ -139,12 +234,7 @@ const cardColorClasses = {
       bg: "bg-green-400/60 border-green-400",
       hover: "hover:bg-green-400/20",
       click: "active:bg-green-300/20"
-    },
-    blobs: [
-      "bg-green-400",
-      "bg-green-500",
-      "bg-green-600"
-    ]
+    }
   },
   blue: {
     card: {
@@ -152,12 +242,7 @@ const cardColorClasses = {
       bg: "bg-blue-400/60 border-blue-400",
       hover: "hover:bg-blue-400/20",
       click: "active:bg-blue-300/20"
-    },
-    blobs: [
-      "bg-blue-400",
-      "bg-blue-500",
-      "bg-blue-600"
-    ]
+    }
   },
   purple: {
     card: {
@@ -165,12 +250,7 @@ const cardColorClasses = {
       bg: "bg-purple-400/60 border-purple-400",
       hover: "hover:bg-purple-400/20",
       click: "active:bg-purple-300/20"
-    },
-    blobs: [
-      "bg-purple-400",
-      "bg-purple-500",
-      "bg-purple-600"
-    ]
+    }
   },
   gray: {
     card: {
@@ -178,12 +258,7 @@ const cardColorClasses = {
       bg: "bg-gray-400/60 border-gray-400",
       hover: "hover:bg-gray-400/20",
       click: "active:bg-gray-300/20"
-    },
-    blobs: [
-      "bg-gray-400",
-      "bg-gray-500",
-      "bg-gray-600"
-    ]
+    }
   },
   darkgray: {
     card: {
@@ -191,12 +266,7 @@ const cardColorClasses = {
       bg: "bg-gray-800/60 border-gray-800",
       hover: "hover:bg-gray-800/40",
       click: "active:bg-gray-700/40"
-    },
-    blobs: [
-      "bg-gray-500",
-      "bg-gray-600",
-      "bg-gray-700"
-    ]
+    }
   },
   darkergray: {
     card: {
@@ -204,31 +274,17 @@ const cardColorClasses = {
       bg: "bg-gray-900/60 border-gray-900",
       hover: "hover:bg-gray-900/50",
       click: "active:bg-gray-800/50"
-    },
-    blobs: [
-      "bg-gray-600",
-      "bg-gray-700",
-      "bg-gray-800"
-    ]
+    }
   }
 };
-const blobClasses = [
-  "animate-blob",
-  "animate-blob1",
-  "animate-blob2",
-  "animate-blob3",
-  "animate-blob4",
-  "animate-blob5",
-  "animate-blob6"
-];
 const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  qwik._jsxBranch();
   const props1 = qwik._restProps(props, [
     "color",
     "hover",
     "row",
     "blobs"
   ]);
-  const blob = Math.round(Math.random() * 6);
   return /* @__PURE__ */ qwik._jsxS("div", {
     ...props1,
     children: [
@@ -246,36 +302,20 @@ const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
       }, {
         class: "absolute inset-0"
       }, null, 3, "OW_1"),
-      props.blobs && /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "motion-reduce:hidden absolute -z-10 inset-0 transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
-        style: {
-          containerType: "size"
+      props.blobs && /* @__PURE__ */ qwik._jsxC(Blobs, {
+        get color() {
+          return props.color ?? "darkgray";
+        },
+        class: {
+          "overflow-clip": true
+        },
+        [qwik._IMMUTABLE]: {
+          class: qwik._IMMUTABLE,
+          color: qwik._fnSignal((p0) => p0.color ?? "darkgray", [
+            props
+          ], 'p0.color??"darkgray"')
         }
-      }, [
-        /* @__PURE__ */ qwik._jsxQ("div", {
-          class: {
-            "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
-            [blobClasses[blob]]: true,
-            [cardColorClasses[props.color ?? "darkgray"].blobs[0]]: true
-          }
-        }, null, null, 3, null),
-        /* @__PURE__ */ qwik._jsxQ("div", {
-          class: {
-            "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
-            "anim-delay-[-5s]": true,
-            [blobClasses[blob]]: true,
-            [cardColorClasses[props.color ?? "darkgray"].blobs[1]]: true
-          }
-        }, null, null, 3, null),
-        /* @__PURE__ */ qwik._jsxQ("div", {
-          class: {
-            "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out blur-xl": true,
-            "anim-delay-[-10s]": true,
-            [blobClasses[blob]]: true,
-            [cardColorClasses[props.color ?? "darkgray"].blobs[2]]: true
-          }
-        }, null, null, 3, null)
-      ], 1, "OW_2")
+      }, 3, "OW_2")
     ],
     class: {
       "relative p-8 border rounded-lg motion-safe:transition-all": true,
@@ -786,6 +826,204 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     }), 1, null)
   ], 1, "0s_4");
 }, "ColorPickerRaw_component_CWQPPcezhyA"));
+const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  return /* @__PURE__ */ qwik._jsxS("svg", {
+    ...props,
+    children: /* @__PURE__ */ qwik._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: qwik._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 Dropdown = /* @__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 select-none",
+      for: qwik._fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "Zz_0"), 1, null),
+    /* @__PURE__ */ qwik._jsxC(DropdownRaw, {
+      ...props
+    }, 0, "Zz_1")
+  ], 1, "Zz_2");
+}, "Dropdown_component_B5UM3uiu2TE"));
+const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  const props1 = qwik._restProps(props, [
+    "id",
+    "values",
+    "class",
+    "display",
+    "color",
+    "size"
+  ]);
+  const store = qwik.useStore({
+    opened: false,
+    value: props1.value
+  });
+  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;
+    }
+  `, "DropdownRaw_component_useStyles_UFDvrln9Bfk"));
+  return /* @__PURE__ */ qwik._jsxQ("div", null, {
+    class: "relative touch-manipulation"
+  }, [
+    props.values && /* @__PURE__ */ qwik._jsxS("select", {
+      ...props1,
+      children: props.values.map((value, i) => {
+        return /* @__PURE__ */ qwik._jsxQ("option", {
+          value: qwik._wrapSignal(value, "value")
+        }, null, `${value.value}`, 1, i);
+      })
+    }, {
+      class: {
+        "hidden": true
+      },
+      id: qwik._fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, 0, "Zz_3"),
+    /* @__PURE__ */ qwik._jsxC(Button, {
+      get color() {
+        return props.color;
+      },
+      get size() {
+        return props.size ?? "sm";
+      },
+      get class() {
+        return {
+          "flex": true,
+          ...props.class
+        };
+      },
+      children: [
+        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() === store.value)?.name ?? props.values[0].name, 1, "Zz_4"),
+        /* @__PURE__ */ qwik._jsxC(ChevronDown, {
+          width: 16,
+          get class() {
+            return {
+              "motion-safe:transition-all duration-200": true,
+              "transform rotate-180": store.opened
+            };
+          },
+          [qwik._IMMUTABLE]: {
+            class: qwik._fnSignal((p0) => ({
+              "motion-safe:transition-all duration-200": true,
+              "transform rotate-180": p0.opened
+            }), [
+              store
+            ], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p0.opened}'),
+            width: qwik._IMMUTABLE
+          }
+        }, 3, "Zz_5")
+      ],
+      onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+        const [store2] = qwik.useLexicalScope();
+        store2.opened = !store2.opened;
+      }, "DropdownRaw_component_div_Button_onClick_d8M33E0JtyQ", [
+        store
+      ]),
+      [qwik._IMMUTABLE]: {
+        class: qwik._fnSignal((p0) => ({
+          "flex": true,
+          ...p0.class
+        }), [
+          props
+        ], '{"flex":true,...p0.class}'),
+        color: qwik._fnSignal((p0) => p0.color, [
+          props
+        ], "p0.color"),
+        onClick$: qwik._IMMUTABLE,
+        size: qwik._fnSignal((p0) => p0.size ?? "sm", [
+          props
+        ], 'p0.size??"sm"')
+      }
+    }, 1, "Zz_6"),
+    /* @__PURE__ */ qwik._jsxQ("div", {
+      class: {
+        "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
+      }
+    }, {
+      id: qwik._fnSignal((p0) => `lui-${p0.id}-opts`, [
+        props
+      ], "`lui-${p0.id}-opts`")
+    }, [
+      props.values.map(({ name, value, color = "transparent" }, i) => {
+        return /* @__PURE__ */ qwik._jsxC(Button, {
+          color,
+          get size() {
+            return props.size ?? "sm";
+          },
+          children: name,
+          onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+            const [props2, store2, value2] = qwik.useLexicalScope();
+            store2.opened = false;
+            const select = document.getElementById(props2.id);
+            if (select) {
+              select.value = value2.toString();
+              select.dispatchEvent(new Event("change"));
+            }
+            store2.value = value2.toString();
+          }, "DropdownRaw_component_div_div_Button_onClick_FOKnkeI0cno", [
+            props,
+            store,
+            value
+          ]),
+          [qwik._IMMUTABLE]: {
+            size: qwik._fnSignal((p0) => p0.size ?? "sm", [
+              props
+            ], 'p0.size??"sm"')
+          }
+        }, 1, i);
+      }),
+      /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
+        name: "extra-buttons",
+        [qwik._IMMUTABLE]: {
+          name: qwik._IMMUTABLE
+        }
+      }, 3, "Zz_7")
+    ], 1, null)
+  ], 1, "Zz_8");
+}, "DropdownRaw_component_Hj5Qd2ULo0U"));
 const LoadingIcon = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
     "width",
@@ -871,17 +1109,15 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
       props
     ], '{"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) => ({
+    /* @__PURE__ */ qwik._jsxQ("div", {
+      class: {
         "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 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, {
+        "top-full mt-2": menu.value,
+        "opacity-0 top-0 scale-95": !menu.value
+      }
+    }, null, /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: {
-        "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
+        "flex flex-col gap-2 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",
@@ -889,21 +1125,21 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
         name: qwik._IMMUTABLE
       }
     }, 3, "8r_0"), 1, null), 1, null),
-    /* @__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-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-2 pb-0":p0.floating}')
-    }, /* @__PURE__ */ qwik._jsxQ("div", {
+    /* @__PURE__ */ qwik._jsxQ("div", {
+      class: {
+        "bg-gray-800/50 border-b border-gray-700/50": !props.floating,
+        'before:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': !props.floating,
+        "relative mt-2 mx-2": props.floating
+      }
+    }, null, /* @__PURE__ */ qwik._jsxQ("div", {
       class: {
-        "flex justify-evenly w-full mx-auto px-4 py-2 max-w-7xl": true,
-        "bg-gray-800/50 border border-gray-700/50 backdrop-blur-lg drop-shadow-xl rounded-lg": props.floating
+        "flex justify-evenly w-full mx-auto px-2 max-w-7xl": true,
+        "bg-gray-800/50 border border-gray-700/50 rounded-lg": props.floating,
+        'before:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': props.floating
       }
     }, null, [
       /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "flex items-center flex-1 gap-2 justify-start"
+        class: "flex items-center flex-1 gap-2 py-2 justify-start"
       }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
         name: "start",
         [qwik._IMMUTABLE]: {
@@ -911,7 +1147,7 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
         }
       }, 3, "8r_1"), 1, null),
       /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "flex items-center flex-1 gap-2 justify-center"
+        class: "flex items-center flex-1 gap-2 py-2 justify-center"
       }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
         name: "center",
         [qwik._IMMUTABLE]: {
@@ -919,7 +1155,7 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
         }
       }, 3, "8r_2"), 1, null),
       /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "flex items-center flex-1 gap-2 justify-end"
+        class: "flex items-center flex-1 gap-2 py-2 justify-end"
       }, [
         /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
           name: "end",
@@ -1146,200 +1382,6 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     }, 0, "gk_7")
   ], 1, "gk_8");
 }, "NumberInputRaw_component_8sGf0eS1rvo"));
-const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  return /* @__PURE__ */ qwik._jsxS("svg", {
-    ...props,
-    children: /* @__PURE__ */ qwik._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: qwik._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__ */ 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 select-none",
-      for: qwik._fnSignal((p0) => p0.id, [
-        props
-      ], "p0.id")
-    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "cA_0"), 1, null),
-    /* @__PURE__ */ qwik._jsxC(SelectInputRaw, {
-      ...props
-    }, 0, "cA_1")
-  ], 1, "cA_2");
-}, "SelectInput_component_m80ag1KuJSk"));
-const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  const props1 = qwik._restProps(props, [
-    "id",
-    "values",
-    "class",
-    "display",
-    "color",
-    "size"
-  ]);
-  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 touch-manipulation"
-  }, [
-    /* @__PURE__ */ qwik._jsxS("select", {
-      ...props1,
-      children: props.values.map((value, i) => {
-        return /* @__PURE__ */ qwik._jsxQ("option", {
-          value: qwik._wrapSignal(value, "value")
-        }, null, value.name, 1, i);
-      })
-    }, {
-      class: {
-        "hidden": true
-      },
-      id: qwik._fnSignal((p0) => p0.id, [
-        props
-      ], "p0.id")
-    }, 0, null),
-    /* @__PURE__ */ qwik._jsxC(Button, {
-      get color() {
-        return props.color;
-      },
-      get size() {
-        return props.size ?? "sm";
-      },
-      get class() {
-        return {
-          "flex": true,
-          ...props.class
-        };
-      },
-      children: [
-        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, "cA_3"),
-        /* @__PURE__ */ qwik._jsxC(ChevronDown, {
-          width: 16,
-          get class() {
-            return {
-              "motion-safe:transition-all duration-200": true,
-              "transform rotate-180": store.opened
-            };
-          },
-          [qwik._IMMUTABLE]: {
-            class: qwik._fnSignal((p0) => ({
-              "motion-safe:transition-all duration-200": true,
-              "transform rotate-180": p0.opened
-            }), [
-              store
-            ], '{"motion-safe:transition-all duration-200":true,"transform rotate-180":p0.opened}'),
-            width: qwik._IMMUTABLE
-          }
-        }, 3, "cA_4")
-      ],
-      onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
-        const [store2] = qwik.useLexicalScope();
-        store2.opened = !store2.opened;
-      }, "SelectInputRaw_component_div_Button_onClick_9Gkbglaqsdw", [
-        store
-      ]),
-      [qwik._IMMUTABLE]: {
-        class: qwik._fnSignal((p0) => ({
-          "flex": true,
-          ...p0.class
-        }), [
-          props
-        ], '{"flex":true,...p0.class}'),
-        color: qwik._fnSignal((p0) => p0.color, [
-          props
-        ], "p0.color"),
-        onClick$: qwik._IMMUTABLE,
-        size: qwik._fnSignal((p0) => p0.size ?? "sm", [
-          props
-        ], 'p0.size??"sm"')
-      }
-    }, 1, "cA_5"),
-    /* @__PURE__ */ qwik._jsxQ("div", {
-      class: {
-        "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
-      }
-    }, {
-      id: qwik._fnSignal((p0) => `lui-${p0.id}-opts`, [
-        props
-      ], "`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;
-          const select = document.getElementById(props2.id);
-          select.value = value2.value.toString();
-          const name = document.getElementById(`lui-${props2.id}-name`);
-          if (name)
-            name.textContent = value2.name;
-          select.dispatchEvent(new Event("change"));
-        }, "SelectInputRaw_component_div_div_Button_onClick_mLa0FdeKCLw", [
-          props,
-          store,
-          value
-        ]),
-        get class() {
-          return {
-            "opacity-0": !store.opened
-          };
-        },
-        children: qwik._wrapSignal(value, "name"),
-        [qwik._IMMUTABLE]: {
-          class: qwik._fnSignal((p0) => ({
-            "opacity-0": !p0.opened
-          }), [
-            store
-          ], '{"opacity-0":!p0.opened}'),
-          color: qwik._IMMUTABLE
-        }
-      }, 1, i);
-    }), 1, null)
-  ], 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"
@@ -1365,7 +1407,7 @@ const TextAreaRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       class: {
         [InputClasses]: true,
         "h-32": true,
-        "cursor-pointer active:bg-gray-600": props.output,
+        "cursor-pointer active:bg-gray-600 select-none": props.output,
         ...props1.class
       },
       onClick$: props.output ? /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
@@ -1866,11 +1908,14 @@ const LogoWaterfall = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
   }, 0, "Pt_0");
 }, "LogoWaterfall_component_1hFl8GlECLI"));
 exports.Anchor = Anchor;
+exports.Blobs = Blobs;
 exports.Button = Button;
 exports.ButtonAnchor = ButtonAnchor;
 exports.Card = Card;
 exports.ColorInput = ColorInput;
 exports.ColorPickerRaw = ColorPickerRaw;
+exports.Dropdown = Dropdown;
+exports.DropdownRaw = DropdownRaw;
 exports.Header = Header;
 exports.InputClasses = InputClasses;
 exports.LoadingIcon = LoadingIcon;
@@ -1888,8 +1933,6 @@ exports.LogoWaterfall = LogoWaterfall;
 exports.Nav = Nav;
 exports.NumberInput = NumberInput;
 exports.NumberInputRaw = NumberInputRaw;
-exports.SelectInput = SelectInput;
-exports.SelectInputRaw = SelectInputRaw;
 exports.TextArea = TextArea;
 exports.TextAreaRaw = TextAreaRaw;
 exports.TextInput = TextInput;
@@ -1897,6 +1940,7 @@ exports.TextInputRaw = TextInputRaw;
 exports.Toggle = Toggle;
 exports._auto_blobClasses = blobClasses;
 exports._auto_buttonClass = buttonClass;
+exports.blobColorClasses = blobColorClasses;
 exports.buttonColorClasses = buttonColorClasses;
 exports.cardColorClasses = cardColorClasses;
 exports.sizeClasses = sizeClasses;