@luminescent/ui 0.10.0-4 → 0.12.0

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _wrapSignal, useStore, useLexicalScope, _IMMUTABLE, _wrapProp, useOn, _jsxBranch, useSignal, useStylesQrl } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _wrapSignal, _IMMUTABLE, useStore, useLexicalScope, _wrapProp, useOn, useStylesQrl, useSignal } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
   class: "block h-32 -mt-32",
@@ -6,6 +6,121 @@ const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     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__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _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__ */ _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__ */ _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__ */ _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__ */ _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",
@@ -85,12 +200,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: {
@@ -98,12 +208,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: {
@@ -111,12 +216,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: {
@@ -124,12 +224,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: {
@@ -137,12 +232,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: {
@@ -150,12 +240,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: {
@@ -163,12 +248,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: {
@@ -176,12 +256,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: {
@@ -189,12 +264,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: {
@@ -202,31 +272,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__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
   const props1 = _restProps(props, [
     "color",
     "hover",
     "row",
     "blobs"
   ]);
-  const blob = Math.round(Math.random() * 6);
   return /* @__PURE__ */ _jsxS("div", {
     ...props1,
     children: [
@@ -244,36 +300,20 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
       }, {
         class: "absolute inset-0"
       }, null, 3, "OW_1"),
-      props.blobs && /* @__PURE__ */ _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__ */ _jsxC(Blobs, {
+        get color() {
+          return props.color ?? "darkgray";
+        },
+        class: {
+          "overflow-clip": true
+        },
+        [_IMMUTABLE]: {
+          class: _IMMUTABLE,
+          color: _fnSignal((p0) => p0.color ?? "darkgray", [
+            props
+          ], 'p0.color??"darkgray"')
         }
-      }, [
-        /* @__PURE__ */ _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__ */ _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__ */ _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,
@@ -784,6 +824,204 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     }), 1, null)
   ], 1, "0s_4");
 }, "ColorPickerRaw_component_CWQPPcezhyA"));
+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 Dropdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "flex flex-col"
+  }, [
+    /* @__PURE__ */ _jsxQ("label", null, {
+      class: "text-gray-300 pb-1 select-none",
+      for: _fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "Zz_0"), 1, null),
+    /* @__PURE__ */ _jsxC(DropdownRaw, {
+      ...props
+    }, 0, "Zz_1")
+  ], 1, "Zz_2");
+}, "Dropdown_component_B5UM3uiu2TE"));
+const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "id",
+    "values",
+    "class",
+    "display",
+    "color",
+    "size"
+  ]);
+  const store = useStore({
+    opened: false,
+    value: props1.value
+  });
+  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+    .lui-scroll {
+      scroll-behavior: smooth;
+    }
+    .lui-scroll::-webkit-scrollbar {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 8px;
+      height: 8px;
+    }
+    .lui-scroll::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+    .lui-scroll::-webkit-scrollbar-thumb {
+      background-color: #ffffff20;
+      border: 1px solid #ffffff20;
+      border-radius: 3px;
+    }
+    .lui-scroll::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  `, "DropdownRaw_component_useStyles_UFDvrln9Bfk"));
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "relative touch-manipulation"
+  }, [
+    props.values && /* @__PURE__ */ _jsxS("select", {
+      ...props1,
+      children: props.values.map((value, i) => {
+        return /* @__PURE__ */ _jsxQ("option", {
+          value: _wrapSignal(value, "value")
+        }, null, `${value.value}`, 1, i);
+      })
+    }, {
+      class: {
+        "hidden": true
+      },
+      id: _fnSignal((p0) => p0.id, [
+        props
+      ], "p0.id")
+    }, 0, "Zz_3"),
+    /* @__PURE__ */ _jsxC(Button, {
+      get color() {
+        return props.color;
+      },
+      get size() {
+        return props.size ?? "sm";
+      },
+      get class() {
+        return {
+          "flex": true,
+          ...props.class
+        };
+      },
+      children: [
+        _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() === store.value)?.name ?? props.values[0].name, 1, "Zz_4"),
+        /* @__PURE__ */ _jsxC(ChevronDown, {
+          width: 16,
+          get class() {
+            return {
+              "motion-safe:transition-all duration-200": true,
+              "transform rotate-180": store.opened
+            };
+          },
+          [_IMMUTABLE]: {
+            class: _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: _IMMUTABLE
+          }
+        }, 3, "Zz_5")
+      ],
+      onClick$: /* @__PURE__ */ inlinedQrl(() => {
+        const [store2] = useLexicalScope();
+        store2.opened = !store2.opened;
+      }, "DropdownRaw_component_div_Button_onClick_d8M33E0JtyQ", [
+        store
+      ]),
+      [_IMMUTABLE]: {
+        class: _fnSignal((p0) => ({
+          "flex": true,
+          ...p0.class
+        }), [
+          props
+        ], '{"flex":true,...p0.class}'),
+        color: _fnSignal((p0) => p0.color, [
+          props
+        ], "p0.color"),
+        onClick$: _IMMUTABLE,
+        size: _fnSignal((p0) => p0.size ?? "sm", [
+          props
+        ], 'p0.size??"sm"')
+      }
+    }, 1, "Zz_6"),
+    /* @__PURE__ */ _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: _fnSignal((p0) => `lui-${p0.id}-opts`, [
+        props
+      ], "`lui-${p0.id}-opts`")
+    }, [
+      props.values.map(({ name, value, color = "transparent" }, i) => {
+        return /* @__PURE__ */ _jsxC(Button, {
+          color,
+          get size() {
+            return props.size ?? "sm";
+          },
+          children: name,
+          onClick$: /* @__PURE__ */ inlinedQrl(() => {
+            const [props2, store2, value2] = 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
+          ]),
+          [_IMMUTABLE]: {
+            size: _fnSignal((p0) => p0.size ?? "sm", [
+              props
+            ], 'p0.size??"sm"')
+          }
+        }, 1, i);
+      }),
+      /* @__PURE__ */ _jsxC(Slot, {
+        name: "extra-buttons",
+        [_IMMUTABLE]: {
+          name: _IMMUTABLE
+        }
+      }, 3, "Zz_7")
+    ], 1, null)
+  ], 1, "Zz_8");
+}, "DropdownRaw_component_Hj5Qd2ULo0U"));
 const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "width",
@@ -869,17 +1107,15 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
       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__ */ _jsxQ("div", null, {
-      class: _fnSignal((p0) => ({
+    /* @__PURE__ */ _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__ */ _jsxQ("div", null, {
+        "top-full mt-2": menu.value,
+        "opacity-0 top-0 scale-95": !menu.value
+      }
+    }, null, /* @__PURE__ */ _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__ */ _jsxC(Slot, {
       name: "mobile",
@@ -887,21 +1123,21 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
         name: _IMMUTABLE
       }
     }, 3, "8r_0"), 1, null), 1, null),
-    /* @__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-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__ */ _jsxQ("div", {
+    /* @__PURE__ */ _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__ */ _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__ */ _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__ */ _jsxC(Slot, {
         name: "start",
         [_IMMUTABLE]: {
@@ -909,7 +1145,7 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
         }
       }, 3, "8r_1"), 1, null),
       /* @__PURE__ */ _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__ */ _jsxC(Slot, {
         name: "center",
         [_IMMUTABLE]: {
@@ -917,7 +1153,7 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
         }
       }, 3, "8r_2"), 1, null),
       /* @__PURE__ */ _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__ */ _jsxC(Slot, {
           name: "end",
@@ -1144,200 +1380,6 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     }, 0, "gk_7")
   ], 1, "gk_8");
 }, "NumberInputRaw_component_8sGf0eS1rvo"));
-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: "text-gray-300 pb-1 select-none",
-      for: _fnSignal((p0) => p0.id, [
-        props
-      ], "p0.id")
-    }, /* @__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, [
-    "id",
-    "values",
-    "class",
-    "display",
-    "color",
-    "size"
-  ]);
-  const store = useStore({
-    opened: false
-  });
-  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
-    .lui-scroll {
-      scroll-behavior: smooth;
-    }
-    .lui-scroll::-webkit-scrollbar {
-      appearance: none;
-      -webkit-appearance: none;
-      width: 8px;
-      height: 8px;
-    }
-    .lui-scroll::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-    .lui-scroll::-webkit-scrollbar-thumb {
-      background-color: #ffffff20;
-      border: 1px solid #ffffff20;
-      border-radius: 3px;
-    }
-    .lui-scroll::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
-  `, "SelectInputRaw_component_useStyles_Zc40Za0ngqc"));
-  return /* @__PURE__ */ _jsxQ("div", null, {
-    class: "relative touch-manipulation"
-  }, [
-    /* @__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")
-    }, 0, null),
-    /* @__PURE__ */ _jsxC(Button, {
-      get color() {
-        return props.color;
-      },
-      get size() {
-        return props.size ?? "sm";
-      },
-      get class() {
-        return {
-          "flex": true,
-          ...props.class
-        };
-      },
-      children: [
-        _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, "cA_3"),
-        /* @__PURE__ */ _jsxC(ChevronDown, {
-          width: 16,
-          get class() {
-            return {
-              "motion-safe:transition-all duration-200": true,
-              "transform rotate-180": store.opened
-            };
-          },
-          [_IMMUTABLE]: {
-            class: _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: _IMMUTABLE
-          }
-        }, 3, "cA_4")
-      ],
-      onClick$: /* @__PURE__ */ inlinedQrl(() => {
-        const [store2] = useLexicalScope();
-        store2.opened = !store2.opened;
-      }, "SelectInputRaw_component_div_Button_onClick_9Gkbglaqsdw", [
-        store
-      ]),
-      [_IMMUTABLE]: {
-        class: _fnSignal((p0) => ({
-          "flex": true,
-          ...p0.class
-        }), [
-          props
-        ], '{"flex":true,...p0.class}'),
-        color: _fnSignal((p0) => p0.color, [
-          props
-        ], "p0.color"),
-        onClick$: _IMMUTABLE,
-        size: _fnSignal((p0) => p0.size ?? "sm", [
-          props
-        ], 'p0.size??"sm"')
-      }
-    }, 1, "cA_5"),
-    /* @__PURE__ */ _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: _fnSignal((p0) => `lui-${p0.id}-opts`, [
-        props
-      ], "`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;
-          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: _wrapSignal(value, "name"),
-        [_IMMUTABLE]: {
-          class: _fnSignal((p0) => ({
-            "opacity-0": !p0.opened
-          }), [
-            store
-          ], '{"opacity-0":!p0.opened}'),
-          color: _IMMUTABLE
-        }
-      }, 1, i);
-    }), 1, null)
-  ], 1, "cA_6");
-}, "SelectInputRaw_component_Itdx5yPeQd4"));
 const TextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
@@ -1363,7 +1405,7 @@ const TextAreaRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       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__ */ inlinedQrl((event, element) => {
@@ -1865,11 +1907,14 @@ const LogoWaterfall = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
 }, "LogoWaterfall_component_1hFl8GlECLI"));
 export {
   Anchor,
+  Blobs,
   Button,
   ButtonAnchor,
   Card,
   ColorInput,
   ColorPickerRaw,
+  Dropdown,
+  DropdownRaw,
   Header,
   InputClasses,
   LoadingIcon,
@@ -1887,8 +1932,6 @@ export {
   Nav,
   NumberInput,
   NumberInputRaw,
-  SelectInput,
-  SelectInputRaw,
   TextArea,
   TextAreaRaw,
   TextInput,
@@ -1896,6 +1939,7 @@ export {
   Toggle,
   blobClasses as _auto_blobClasses,
   buttonClass as _auto_buttonClass,
+  blobColorClasses,
   buttonColorClasses,
   cardColorClasses,
   sizeClasses