@luminescent/ui-qwik 1.2.2 → 1.2.4

package/lib/index.qwik.mjs

@@ -1,9 +1,9 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxBranch, _jsxS, _jsxC, Slot, _IMMUTABLE, _wrapSignal, useStore, useLexicalScope, useStylesQrl, useSignal } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _IMMUTABLE, useStore, useLexicalScope, _jsxC, Slot, _wrapSignal, _jsxBranch, useSignal, useStylesQrl } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
   id: _fnSignal((p0) => p0.id, [
     props
-  ]),
+  ], "p0.id"),
   class: "block h-32 -mt-32 pointer-events-none"
 }, null, 3, "mN_0"), "Anchor_component_dUkqs0yGHwc"));
 const blobColorClasses = {
@@ -146,14 +146,14 @@ const Blobs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   const colorClass = typeof (props.color ?? "darkgray") == "string" ? blobColorClasses[props.color ?? "darkgray"] : props.color ?? "darkgray";
   return /* @__PURE__ */ _jsxQ("div", {
     class: {
-      "motion-reduce:hidden absolute inset-0 transition-all animate-in fade-in anim-duration-[2s] -z-[1]": true,
+      "motion-reduce:hidden absolute inset-0 transition-all animate-in fade-in anim-duration-[2s]": true,
       ...props1.class
-    }
-  }, {
+    },
     style: {
-      containerType: "size"
+      containerType: "size",
+      ...props1.style
     }
-  }, [
+  }, null, [
     /* @__PURE__ */ _jsxQ("div", {
       class: {
         "absolute top-0 w-[30cqw] h-[30cqw] rounded-full opacity-20 ease-in-out": true,
@@ -191,205 +191,6 @@ const Blobs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     }, null, null, 3, null)
   ], 1, "Mx_0");
 }, "Blobs_component_xCrUzl14bRQ"));
-const cardColorClasses = {
-  slate: {
-    bg_blobs: "bg-slate-400/10 border-slate-400/20",
-    bg: "bg-slate-400/60 border-slate-400",
-    hover: "hover:bg-slate-400/20",
-    click: "active:bg-slate-300/20"
-  },
-  gray: {
-    bg_blobs: "bg-gray-400/10 border-gray-400/20",
-    bg: "bg-gray-400/60 border-gray-400",
-    hover: "hover:bg-gray-400/20",
-    click: "active:bg-gray-300/20"
-  },
-  darkgray: {
-    bg_blobs: "bg-gray-800/10 border-gray-800/40",
-    bg: "bg-gray-800/60 border-gray-800",
-    hover: "hover:bg-gray-800/40",
-    click: "active:bg-gray-700/40"
-  },
-  darkergray: {
-    bg_blobs: "bg-gray-900/10 border-gray-900/50",
-    bg: "bg-gray-900/60 border-gray-900",
-    hover: "hover:bg-gray-900/50",
-    click: "active:bg-gray-800/50"
-  },
-  zinc: {
-    bg_blobs: "bg-zinc-400/10 border-zinc-400/20",
-    bg: "bg-zinc-400/60 border-zinc-400",
-    hover: "hover:bg-zinc-400/20",
-    click: "active:bg-zinc-300/20"
-  },
-  neutral: {
-    bg_blobs: "bg-neutral-400/10 border-neutral-400/20",
-    bg: "bg-neutral-400/60 border-neutral-400",
-    hover: "hover:bg-neutral-400/20",
-    click: "active:bg-neutral-300/20"
-  },
-  stone: {
-    bg_blobs: "bg-stone-400/10 border-stone-400/20",
-    bg: "bg-stone-400/60 border-stone-400",
-    hover: "hover:bg-stone-400/20",
-    click: "active:bg-stone-300/20"
-  },
-  red: {
-    bg_blobs: "bg-red-400/10 border-red-400/20",
-    bg: "bg-red-400/60 border-red-400",
-    hover: "hover:bg-red-400/20",
-    click: "active:bg-red-300/20"
-  },
-  orange: {
-    bg_blobs: "bg-orange-400/10 border-orange-400/20",
-    bg: "bg-orange-400/60 border-orange-400",
-    hover: "hover:bg-orange-400/20",
-    click: "active:bg-orange-300/20"
-  },
-  amber: {
-    bg_blobs: "bg-amber-400/10 border-amber-400/20",
-    bg: "bg-amber-400/60 border-amber-400",
-    hover: "hover:bg-amber-400/20",
-    click: "active:bg-amber-300/20"
-  },
-  yellow: {
-    bg_blobs: "bg-yellow-400/10 border-yellow-400/20",
-    bg: "bg-yellow-400/60 border-yellow-400",
-    hover: "hover:bg-yellow-400/20",
-    click: "active:bg-yellow-300/20"
-  },
-  lime: {
-    bg_blobs: "bg-lime-400/10 border-lime-400/20",
-    bg: "bg-lime-400/60 border-lime-400",
-    hover: "hover:bg-lime-400/20",
-    click: "active:bg-lime-300/20"
-  },
-  green: {
-    bg_blobs: "bg-green-400/10 border-green-400/20",
-    bg: "bg-green-400/60 border-green-400",
-    hover: "hover:bg-green-400/20",
-    click: "active:bg-green-300/20"
-  },
-  emerald: {
-    bg_blobs: "bg-emerald-400/10 border-emerald-400/20",
-    bg: "bg-emerald-400/60 border-emerald-400",
-    hover: "hover:bg-emerald-400/20",
-    click: "active:bg-emerald-300/20"
-  },
-  teal: {
-    bg_blobs: "bg-teal-400/10 border-teal-400/20",
-    bg: "bg-teal-400/60 border-teal-400",
-    hover: "hover:bg-teal-400/20",
-    click: "active:bg-teal-300/20"
-  },
-  cyan: {
-    bg_blobs: "bg-cyan-400/10 border-cyan-400/20",
-    bg: "bg-cyan-400/60 border-cyan-400",
-    hover: "hover:bg-cyan-400/20",
-    click: "active:bg-cyan-300/20"
-  },
-  sky: {
-    bg_blobs: "bg-sky-400/10 border-sky-400/20",
-    bg: "bg-sky-400/60 border-sky-400",
-    hover: "hover:bg-sky-400/20",
-    click: "active:bg-sky-300/20"
-  },
-  blue: {
-    bg_blobs: "bg-blue-400/10 border-blue-400/20",
-    bg: "bg-blue-400/60 border-blue-400",
-    hover: "hover:bg-blue-400/20",
-    click: "active:bg-blue-300/20"
-  },
-  indigo: {
-    bg_blobs: "bg-indigo-400/10 border-indigo-400/20",
-    bg: "bg-indigo-400/60 border-indigo-400",
-    hover: "hover:bg-indigo-400/20",
-    click: "active:bg-indigo-300/20"
-  },
-  violet: {
-    bg_blobs: "bg-violet-400/10 border-violet-400/20",
-    bg: "bg-violet-400/60 border-violet-400",
-    hover: "hover:bg-violet-400/20",
-    click: "active:bg-violet-300/20"
-  },
-  purple: {
-    bg_blobs: "bg-purple-400/10 border-purple-400/20",
-    bg: "bg-purple-400/60 border-purple-400",
-    hover: "hover:bg-purple-400/20",
-    click: "active:bg-purple-300/20"
-  },
-  fuchsia: {
-    bg_blobs: "bg-fuchsia-400/10 border-fuchsia-400/20",
-    bg: "bg-fuchsia-400/60 border-fuchsia-400",
-    hover: "hover:bg-fuchsia-400/20",
-    click: "active:bg-fuchsia-300/20"
-  },
-  pink: {
-    bg_blobs: "bg-pink-400/10 border-pink-400/20",
-    bg: "bg-pink-400/60 border-pink-400",
-    hover: "hover:bg-pink-400/20",
-    click: "active:bg-pink-300/20"
-  },
-  rose: {
-    bg_blobs: "bg-rose-400/10 border-rose-400/20",
-    bg: "bg-rose-400/60 border-rose-400",
-    hover: "hover:bg-rose-400/20",
-    click: "active:bg-rose-300/20"
-  }
-};
-const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  _jsxBranch();
-  const props1 = _restProps(props, [
-    "color",
-    "hover",
-    "row",
-    "blobs"
-  ]);
-  return /* @__PURE__ */ _jsxS("div", {
-    ...props1,
-    class: {
-      "flex lum-bg-gray-900 lum-pad-equal-4xl rounded-lg": true,
-      "flex-col": !props.row,
-      [cardColorClasses[props.color ?? "darkgray"].bg]: !props.blobs,
-      [cardColorClasses[props.color ?? "darkgray"].bg_blobs]: props.blobs,
-      [cardColorClasses[props.color ?? "darkgray"].hover + " hover:shadow-lg"]: props.hover,
-      [cardColorClasses[props.color ?? "darkgray"].click + " active:scale-[99%] cursor-pointer select-none touch-manipulation"]: props.hover == "clickable",
-      ...props1.class
-    },
-    children: [
-      props.hover == "blur" && /* @__PURE__ */ _jsxQ("div", null, {
-        class: {
-          "transition-all absolute flex inset-0 w-full h-full z-10 backdrop-blur-xl rounded-lg opacity-0 hover:opacity-100": true
-        }
-      }, /* @__PURE__ */ _jsxC(Slot, {
-        name: "blur",
-        [_IMMUTABLE]: {
-          name: _IMMUTABLE
-        }
-      }, 3, "r7_0"), 1, "r7_1"),
-      /* @__PURE__ */ _jsxC(Slot, null, 3, "r7_2"),
-      props1.href && /* @__PURE__ */ _jsxQ("a", {
-        href: _wrapSignal(props1, "href")
-      }, {
-        class: "absolute inset-0"
-      }, null, 3, "r7_3"),
-      props.blobs && /* @__PURE__ */ _jsxC(Blobs, {
-        get color() {
-          return props.blobs == true ? props.color ?? "darkgray" : props.blobs;
-        },
-        class: {
-          "overflow-clip rounded-lg": true
-        },
-        [_IMMUTABLE]: {
-          color: _fnSignal((p0) => p0.blobs == true ? p0.color ?? "darkgray" : p0.blobs, [
-            props
-          ]),
-          class: _IMMUTABLE
-        }
-      }, 3, "r7_4")
-    ]
-  }, null, 0, "r7_5");
-}, "Card_component_vthoMhQFGts"));
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 function getMousePosition(e) {
   if (window.TouchEvent && e instanceof TouchEvent) {
@@ -530,7 +331,7 @@ const Shuffle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "z5_0");
 }, "Shuffle_component_17D0HKe0U1U"));
 const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -656,7 +457,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   ]);
   return /* @__PURE__ */ _jsxQ("div", {
     class: {
-      "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-4 rounded-lg border border-gray-700 touch-none": true,
+      "motion-safe:transition-all p-4 lum-bg-gray-900 flex gap-4 rounded-lg touch-none": true,
       "flex": true,
       "flex-col": !props.horizontal,
       ...props1.class
@@ -664,7 +465,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   }, {
     id: _fnSignal((p0) => p0.id, [
       props
-    ]),
+    ], "p0.id"),
     onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
       const [setColor2] = useLexicalScope();
       if (!el.dataset.value) return;
@@ -682,7 +483,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
           background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
         }), [
           store
-        ]),
+        ], "{background:`linear-gradient(to right, #FFFFFF, ${p0.hue.color})`}"),
         "preventdefault:mousedown": true,
         "preventdefault:touchstart": true,
         onMouseDown$: sbMouseDown,
@@ -703,7 +504,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
             transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
           }), [
             store
-          ])
+          ], "{background:p0.value,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
         }, null, 3, null)
       ], 1, null),
       /* @__PURE__ */ _jsxQ("div", null, {
@@ -722,7 +523,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
           background: p0.hue.color
         }), [
           store
-        ])
+        ], "{transform:`translateY(${-p0.hue.position}px)`,background:p0.hue.color}")
       }, null, 3, null), 3, null)
     ], 1, null),
     /* @__PURE__ */ _jsxQ("div", null, {
@@ -750,7 +551,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
             backgroundColor: `${p0.value}`
           }), [
             store
-          ])
+          ], "{backgroundColor:`${p0.value}`}")
         }, null, 3, "Xr_0"),
         /* @__PURE__ */ _jsxQ("input", {
           class: {
@@ -765,7 +566,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         }, {
           value: _fnSignal((p0) => p0.value, [
             store
-          ]),
+          ], "p0.value"),
           onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
             const [setColor2] = useLexicalScope();
             setColor2(el.value);
@@ -804,12 +605,12 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
           ])
         }, {
           class: {
-            "w-[1.6rem] h-[1.6rem] rounded-md hover:scale-110 motion-safe:transition-all -outline-offset-1 outline outline-1 outline-white/30": true
+            "w-[1.6rem] h-[1.6rem] rounded-md hover:scale-110 motion-safe:transition-all duration-300 hover:duration-100 ease-in-out -outline-offset-1 outline outline-1 outline-white/30": true
           }
         }, null, 2, i);
       }),
       /* @__PURE__ */ _jsxQ("button", null, {
-        class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
+        class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all duration-300 hover:duration-100 ease-in-out",
         onClick$: /* @__PURE__ */ inlinedQrl(() => {
           const [setColor2] = useLexicalScope();
           const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
@@ -847,7 +648,7 @@ const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "EL_0");
 }, "ChevronDown_component_t7XDRYS4gVA"));
 const Dropdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -857,7 +658,7 @@ const Dropdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     /* @__PURE__ */ _jsxQ("label", null, {
       for: _fnSignal((p0) => p0.id, [
         props
-      ]),
+      ], "p0.id"),
       class: "text-gray-300 pb-1 select-none"
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "Q4_0"), 1, null),
     /* @__PURE__ */ _jsxC(DropdownRaw, {
@@ -877,35 +678,13 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     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_z0gYS0qqgxg"));
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: _fnSignal((p0) => ({
       "relative touch-manipulation": true,
       "group": p0.hover
     }), [
       props
-    ])
+    ], '{"relative touch-manipulation":true,"group":p0.hover}')
   }, [
     props.values && /* @__PURE__ */ _jsxS("select", {
       ...props1,
@@ -923,7 +702,7 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     }, {
       id: _fnSignal((p0) => p0.id, [
         props
-      ]),
+      ], "p0.id"),
       class: _IMMUTABLE
     }, 0, "Q4_3"),
     /* @__PURE__ */ _jsxQ("button", null, {
@@ -932,7 +711,7 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         ...p0.class
       }), [
         props
-      ]),
+      ], '{"lum-btn lum-pad-md text-base lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md":true,...p0.class}'),
       onClick$: /* @__PURE__ */ inlinedQrl(() => {
         const [store2] = useLexicalScope();
         store2.opened = !store2.opened;
@@ -942,47 +721,37 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     }, [
       _fnSignal((p0) => p0.display, [
         props
-      ]),
+      ], "p0.display"),
       !props.display && props.values && /* @__PURE__ */ _jsxQ("span", null, {
         id: _fnSignal((p0) => `lui-${p0.id}-name`, [
           props
-        ]),
+        ], "`lui-${p0.id}-name`"),
         class: "flex-1 text-left"
       }, props.values.find((value) => value.value.toString() === store.value)?.name ?? props.values[0].name, 1, "Q4_4"),
       /* @__PURE__ */ _jsxC(ChevronDown, {
         width: 16,
-        get class() {
-          return {
-            "motion-safe:transition-all duration-200": true,
-            "transform rotate-180": store.opened,
-            "group-hover:transform group-hover:rotate-180": props.hover
-          };
+        class: {
+          "motion-safe:transition-all ease-in-out": true,
+          "transform rotate-180": store.opened,
+          "group-hover:transform group-hover:rotate-180 duration-300 group-hover:duration-100": props.hover
         },
         [_IMMUTABLE]: {
-          width: _IMMUTABLE,
-          class: _fnSignal((p0, p1) => ({
-            "motion-safe:transition-all duration-200": true,
-            "transform rotate-180": p1.opened,
-            "group-hover:transform group-hover:rotate-180": p0.hover
-          }), [
-            props,
-            store
-          ])
+          width: _IMMUTABLE
         }
       }, 3, "Q4_5")
     ], 1, null),
     /* @__PURE__ */ _jsxQ("div", {
       class: {
-        "transition-all absolute top-full pt-2 left-0 z-[1000] ": true,
+        "transition-all ease-in-out absolute top-full pt-2 left-0 z-[1000] ": true,
         "opacity-0 scale-95 pointer-events-none": !store.opened,
-        "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100": props.hover
+        "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100 duration-300 group-hover:duration-100": props.hover
       }
     }, null, /* @__PURE__ */ _jsxQ("div", null, {
       id: _fnSignal((p0) => `lui-${p0.id}-opts`, [
         props
-      ]),
+      ], "`lui-${p0.id}-opts`"),
       class: {
-        "motion-safe:transition-all p-1 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col border border-gray-700 max-h-72 lui-scroll overflow-auto select-none": true
+        "motion-safe:transition-all p-1 gap-1 lum-bg-gray-800 backdrop-blur-xl flex flex-col border max-h-72 lum-scroll overflow-auto select-none rounded-md": true
       }
     }, [
       props.values?.map(({ name, value }, i) => {
@@ -1037,7 +806,7 @@ const Link = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "zW_0");
 }, "Link_component_fiB6yg0RKjk"));
 const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1045,7 +814,6 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   const props1 = _restProps(props, [
     "id",
     "anchor",
-    "loading",
     "subheader"
   ]);
   let Component = /* @__PURE__ */ _jsxC(Fragment, {
@@ -1063,18 +831,18 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
         [_IMMUTABLE]: {
           id: _fnSignal((p0) => p0.id, [
             props
-          ])
+          ], "p0.id")
         }
       }, 3, "hw_1"),
       props.anchor && props.id && /* @__PURE__ */ _jsxQ("a", null, {
         href: _fnSignal((p0) => `#${p0.id}`, [
           props
-        ]),
+        ], "`#${p0.id}`"),
         onClick$: /* @__PURE__ */ inlinedQrl(() => {
           navigator.clipboard.writeText(window.location.href);
         }, "Header_component_Component_Fragment_h2_a_onClick_tdwReSG5ZBA")
       }, /* @__PURE__ */ _jsxC(Link, {
-        class: "transition-all opacity-10 group-hover:opacity-100 active:scale-75",
+        class: "transition-all opacity-10 group-hover:opacity-100 duration-300 group-hover:duration-100",
         width: 24,
         [_IMMUTABLE]: {
           class: _IMMUTABLE,
@@ -1091,58 +859,15 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       class: "flex items-center text-gray-400 text-sm"
     }, _fnSignal((p0) => p0.subheader, [
       props
-    ]), 3, null)
+    ], "p0.subheader"), 3, null)
   ], 1, "hw_5");
-  if (props.loading !== void 0) Component = /* @__PURE__ */ _jsxQ("div", null, {
-    class: "flex"
-  }, [
-    Component,
-    /* @__PURE__ */ _jsxQ("div", null, {
-      class: _fnSignal((p0) => ({
-        "motion-safe:transition-all duration-200": true,
-        "opacity-0": !p0.loading,
-        "opacity-100": p0.loading
-      }), [
-        props
-      ])
-    }, /* @__PURE__ */ _jsxQ("div", null, {
-      class: "lum-loading w-6 h-6"
-    }, null, 3, null), 3, null)
-  ], 1, "hw_6");
   return Component;
 }, "Header_component_JY2gvGRuOjU"));
-const navColorClasses = {
-  slate: "bg-slate-700/50 border-slate-600/50",
-  gray: "bg-gray-700/50 border-gray-600/50",
-  darkgray: "bg-gray-800/50 border-gray-700/50",
-  darkergray: "bg-gray-900/50 border-gray-800/50",
-  zinc: "bg-zinc-700/50 border-zinc-600/50",
-  neutral: "bg-neutral-700/50 border-neutral-600/50",
-  stone: "bg-stone-700/50 border-stone-600/50",
-  red: "bg-red-700/50 border-red-600/50",
-  orange: "bg-orange-700/50 border-orange-600/50",
-  amber: "bg-amber-700/50 border-amber-600/50",
-  yellow: "bg-yellow-700/50 border-yellow-600/50",
-  lime: "bg-lime-700/50 border-lime-600/50",
-  green: "bg-green-700/50 border-green-600/50",
-  emerald: "bg-emerald-700/50 border-emerald-600/50",
-  teal: "bg-teal-700/50 border-teal-600/50",
-  cyan: "bg-cyan-700/50 border-cyan-600/50",
-  sky: "bg-sky-700/50 border-sky-600/50",
-  blue: "bg-blue-700/50 border-blue-600/50",
-  indigo: "bg-indigo-700/50 border-indigo-600/50",
-  violet: "bg-violet-700/50 border-violet-600/50",
-  purple: "bg-purple-700/50 border-purple-600/50",
-  fuchsia: "bg-fuchsia-700/50 border-fuchsia-600/50",
-  pink: "bg-pink-700/50 border-pink-600/50",
-  rose: "bg-rose-700/50 border-rose-600/50",
-  transparent: "bg-transparent border-transparent"
-};
 const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "fixed",
     "floating",
-    "color"
+    "colorClass"
   ]);
   const menu = useSignal(false);
   return /* @__PURE__ */ _jsxS("nav", {
@@ -1159,15 +884,17 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
           "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full top-full": true,
           "mt-2": menu.value,
           "opacity-0 pointer-events-none": !menu.value,
-          "before:backdrop-blur-lg": props.color !== "transparent",
+          "before:backdrop-blur-lg": !(props.colorClass ?? "lum-bg-gray-900").includes("transparent"),
           'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true
         }
-      }, null, /* @__PURE__ */ _jsxQ("div", {
-        class: {
-          [navColorClasses[props.color ?? "darkgray"]]: true,
+      }, null, /* @__PURE__ */ _jsxQ("div", null, {
+        class: _fnSignal((p0) => ({
+          [p0.colorClass ?? "lum-bg-gray-900"]: true,
           "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true
-        }
-      }, null, /* @__PURE__ */ _jsxC(Slot, {
+        }), [
+          props
+        ], '{[p0.colorClass??"lum-bg-gray-900"]:true,"flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg":true}')
+      }, /* @__PURE__ */ _jsxC(Slot, {
         name: "mobile",
         [_IMMUTABLE]: {
           name: _IMMUTABLE
@@ -1175,18 +902,18 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
       }, 3, "03_0"), 1, null), 1, null),
       /* @__PURE__ */ _jsxQ("div", {
         class: {
-          [navColorClasses[props.color ?? "darkgray"]]: !props.floating,
-          "border-b": !props.floating,
-          "before:backdrop-blur-lg": props.color !== "transparent" && !props.floating,
+          [props.colorClass ?? "lum-bg-gray-900"]: !props.floating,
+          "border-t-0 border-x-0": !props.floating,
+          "before:backdrop-blur-lg": !(props.colorClass ?? "lum-bg-gray-900").includes("transparent") && !props.floating,
           'before:absolute before:content-[""] before:w-full before:h-full 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-2 max-w-7xl": true,
-          [navColorClasses[props.color ?? "darkgray"]]: props.floating,
+          [props.colorClass ?? "lum-bg-gray-900"]: props.floating,
           "border rounded-lg": props.floating,
-          "before:backdrop-blur-lg": props.color !== "transparent" && props.floating,
+          "before:backdrop-blur-lg": !(props.colorClass ?? "lum-bg-gray-900").includes("transparent") && props.floating,
           'before:absolute before:content-[""] before:w-full before:max-w-7xl before:h-full before:rounded-lg before:drop-shadow-xl before:-z-10': props.floating
         }
       }, null, [
@@ -1216,7 +943,13 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
             }
           }, 3, "03_3"),
           /* @__PURE__ */ _jsxQ("button", null, {
-            class: "lum-btn lum-pad-equal-md lum-bg-transparent sm:hidden"
+            class: "lum-btn lum-pad-equal-md lum-bg-transparent sm:hidden",
+            onClick$: /* @__PURE__ */ inlinedQrl(() => {
+              const [menu2] = useLexicalScope();
+              return menu2.value = !menu2.value;
+            }, "Nav_component_nav_div_div_div_button_onClick_WiYpOE6A0Vc", [
+              menu
+            ])
           }, /* @__PURE__ */ _jsxQ("svg", null, {
             class: "w-6 h-6",
             fill: "none",
@@ -1255,7 +988,7 @@ const Plus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "1y_0");
 }, "Plus_component_MKiwkkJ7or4"));
 const Minus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1279,7 +1012,7 @@ const Minus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "tk_0");
 }, "Minus_component_eaRlUyV3g0s"));
 const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1289,7 +1022,7 @@ const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     /* @__PURE__ */ _jsxQ("label", null, {
       for: _fnSignal((p0) => p0.id, [
         props
-      ]),
+      ], "p0.id"),
       class: "text-gray-300 pb-1 select-none"
     }, /* @__PURE__ */ _jsxC(Slot, null, 3, "kR_0"), 1, null),
     /* @__PURE__ */ _jsxC(NumberInputRaw, {
@@ -1322,7 +1055,7 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       "gap-2": !p0.input
     }), [
       props
-    ])
+    ], '{"flex text-gray-50 touch-manipulation":true,"gap-2":!p0.input}')
   }, [
     /* @__PURE__ */ _jsxQ("button", {
       disabled: props1.min ? (props.value ?? 0) <= props1.min : false,
@@ -1366,10 +1099,10 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       type: _IMMUTABLE,
       value: _fnSignal((p0) => p0.value ?? 0, [
         props
-      ]),
+      ], "p0.value??0"),
       step: _fnSignal((p0) => p0.step ?? 1, [
         props
-      ])
+      ], "p0.step??1")
     }, 0, "kR_4"),
     /* @__PURE__ */ _jsxQ("button", {
       disabled: props1.max ? (props.value ?? 0) >= props1.max : false,
@@ -1608,7 +1341,7 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       "justify-center": p0.center
     }), [
       props
-    ])
+    ], '{"flex gap-3 items-center touch-manipulation":true,"justify-center":p0.center}')
   }, [
     /* @__PURE__ */ _jsxQ("label", null, {
       class: "inline-flex relative items-center cursor-pointer"
@@ -1625,8 +1358,8 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       }, 0, null),
       /* @__PURE__ */ _jsxQ("div", {
         class: {
-          "motion-safe:transition ease-in-out h-7 peer border hover:shadow-lg": true,
-          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:h-5 after:w-5 after:motion-safe:transition-all after:ease-in-out": true,
+          "motion-safe:transition duration-300 hover:duration-100 ease-in-out h-7 peer border hover:shadow-lg": true,
+          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:h-5 after:w-5 after:motion-safe:transition-all after:duration-300 after:hover:duration-100 after:ease-in-out": true,
           "rounded-md after:rounded-[0.2rem]": !props.round,
           "rounded-full after:rounded-full": props.round,
           "w-12 peer-checked:after:translate-x-full": !props.checkbox,
@@ -1644,7 +1377,7 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       class: "text-gray-300 flex gap-2 select-none"
     }, _fnSignal((p0) => p0.label, [
       props
-    ]), 3, "R0_0")
+    ], "p0.label"), 3, "R0_0")
   ], 1, "R0_1");
 }, "Toggle_component_AHnKi33alRM"));
 const LogoBirdflop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1692,7 +1425,7 @@ const LogoBirdflop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         transform: "translate(2479.9 1169.7)",
         fill: _fnSignal((p0) => p0.fillGradient ? "url(#linear-gradient)" : "", [
           props
-        ])
+        ], 'p0.fillGradient?"url(#linear-gradient)":""')
       }, null, 3, null), 3, null),
       props.confused && /* @__PURE__ */ _jsxQ("g", null, {
         style: "transform: translate(595px, 460px) scale(0.375)",
@@ -1738,7 +1471,7 @@ const LogoDiscord = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     fill: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "uo_0");
 }, "LogoDiscord_component_jDPP8Q3cU0M"));
 const LogoFabric = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1777,7 +1510,7 @@ const LogoFabric = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "hI_0");
 }, "LogoFabric_component_iP0a9wJyPAg"));
 const LogoForge = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1815,7 +1548,7 @@ const LogoForge = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "zC_0");
 }, "LogoForge_component_W5Al1sALh8A"));
 const LogoLuminescent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1848,7 +1581,7 @@ const LogoLuminescent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
     fill: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "we_0");
 }, "LogoLuminescent_component_XLiMRdgGu0c"));
 const LogoLuminescentFull = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1994,7 +1727,7 @@ const LogoPaper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "gL_0");
 }, "LogoPaper_component_aG0HRBVBRDI"));
 const LogoPterodactyl = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -2032,7 +1765,7 @@ const LogoPterodactyl = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
     preserveAspectRatio: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "D4_0");
 }, "LogoPterodactyl_component_10hbViSPESg"));
 const LogoPurpur = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -2113,7 +1846,7 @@ const LogoPurpur = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     viewBox: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "tL_0");
 }, "LogoPurpur_component_c9OHr4CkPBo"));
 const LogoVelocity = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -2142,7 +1875,7 @@ const LogoVelocity = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     fill: _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "XA_0");
 }, "LogoVelocity_component_ZPc1n5yvS0Y"));
 const LogoWaterfall = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -2169,13 +1902,12 @@ const LogoWaterfall = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     "stroke-linejoin": _IMMUTABLE,
     height: _fnSignal((p0) => p0.width, [
       props
-    ])
+    ], "p0.width")
   }, 0, "to_0");
 }, "LogoWaterfall_component_5eX8hGbmtoU"));
 export {
   Anchor,
   Blobs,
-  Card,
   ColorPicker,
   Dropdown,
   DropdownRaw,
@@ -2197,8 +1929,6 @@ export {
   Toggle,
   blobClasses as _auto_blobClasses,
   blobColorClasses,
-  cardColorClasses,
-  navColorClasses,
   toggleOffColorClasses,
   toggleOnColorClasses
 };