@luminescent/ui 0.14.0 → 0.15.0

package/lib/index.qwik.cjs

@@ -194,31 +194,102 @@ const Blobs = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
   ], 1, "OL_0");
 }, "Blobs_component_246Oa50YM60"));
 const buttonColorClasses = {
-  slate: "bg-slate-700/90 border-slate-600 hover:bg-slate-600 active:bg-slate-500 focus:border-slate-500",
-  gray: "bg-gray-700/90 border-gray-600 hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
-  darkgray: "bg-gray-800/90 border-gray-700 hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
-  darkergray: "bg-gray-900/90 border-gray-800 hover:bg-gray-800 active:bg-gray-700 focus:border-gray-700",
-  zinc: "bg-zinc-700/90 border-zinc-600 hover:bg-zinc-600 active:bg-zinc-500 focus:border-zinc-500",
-  neutral: "bg-neutral-700/90 border-neutral-600 hover:bg-neutral-600 active:bg-neutral-500 focus:border-neutral-500",
-  stone: "bg-stone-700/90 border-stone-600 hover:bg-stone-600 active:bg-stone-500 focus:border-stone-500",
-  red: "bg-red-700/90 border-red-600 hover:bg-red-600 active:bg-red-500 focus:border-red-500",
-  orange: "bg-orange-700/90 border-orange-600 hover:bg-orange-600 active:bg-orange-500 focus:border-orange-500",
-  amber: "bg-amber-700/90 border-amber-600 hover:bg-amber-600 active:bg-amber-500 focus:border-amber-500",
-  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
-  lime: "bg-lime-700/90 border-lime-600 hover:bg-lime-600 active:bg-lime-500 focus:border-lime-500",
-  green: "bg-green-700/90 border-green-600 hover:bg-green-600 active:bg-green-500 focus:border-green-500",
-  emerald: "bg-emerald-700/90 border-emerald-600 hover:bg-emerald-600 active:bg-emerald-500 focus:border-emerald-500",
-  teal: "bg-teal-700/90 border-teal-600 hover:bg-teal-600 active:bg-teal-500 focus:border-teal-500",
-  cyan: "bg-cyan-700/90 border-cyan-600 hover:bg-cyan-600 active:bg-cyan-500 focus:border-cyan-500",
-  sky: "bg-sky-700/90 border-sky-600 hover:bg-sky-600 active:bg-sky-500 focus:border-sky-500",
-  blue: "bg-blue-700/90 border-blue-600 hover:bg-blue-600 active:bg-blue-500 focus:border-blue-500",
-  indigo: "bg-indigo-700/90 border-indigo-600 hover:bg-indigo-600 active:bg-indigo-500 focus:border-indigo-500",
-  violet: "bg-violet-700/90 border-violet-600 hover:bg-violet-600 active:bg-violet-500 focus:border-violet-500",
-  purple: "bg-purple-700/90 border-purple-600 hover:bg-purple-600 active:bg-purple-500 focus:border-purple-500",
-  fuchsia: "bg-fuchsia-700/90 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-500",
-  pink: "bg-pink-700/90 border-pink-600 hover:bg-pink-600 active:bg-pink-500 focus:border-pink-500",
-  rose: "bg-rose-700/90 border-rose-600 hover:bg-rose-600 active:bg-rose-500 focus:border-rose-500",
-  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
+  slate: {
+    hover: "hover:bg-slate-600 active:bg-slate-500 focus:border-slate-500",
+    bg: "bg-slate-700/90 border-slate-600"
+  },
+  gray: {
+    hover: "hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
+    bg: "bg-gray-700/90 border-gray-600"
+  },
+  darkgray: {
+    hover: "hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
+    bg: "bg-gray-800/90 border-gray-700"
+  },
+  darkergray: {
+    hover: "hover:bg-gray-800 active:bg-gray-700 focus:border-gray-700",
+    bg: "bg-gray-900/90 border-gray-800"
+  },
+  zinc: {
+    hover: "hover:bg-zinc-600 active:bg-zinc-500 focus:border-zinc-500",
+    bg: "bg-zinc-700/90 border-zinc-600"
+  },
+  neutral: {
+    hover: "hover:bg-neutral-600 active:bg-neutral-500 focus:border-neutral-500",
+    bg: "bg-neutral-700/90 border-neutral-600"
+  },
+  stone: {
+    hover: "hover:bg-stone-600 active:bg-stone-500 focus:border-stone-500",
+    bg: "bg-stone-700/90 border-stone-600"
+  },
+  red: {
+    hover: "hover:bg-red-600 active:bg-red-500 focus:border-red-500",
+    bg: "bg-red-700/90 border-red-600"
+  },
+  orange: {
+    hover: "hover:bg-orange-600 active:bg-orange-500 focus:border-orange-500",
+    bg: "bg-orange-700/90 border-orange-600"
+  },
+  amber: {
+    hover: "hover:bg-amber-600 active:bg-amber-500 focus:border-amber-500",
+    bg: "bg-amber-700/90 border-amber-600"
+  },
+  yellow: {
+    hover: "hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
+    bg: "bg-yellow-700/90 border-yellow-600"
+  },
+  lime: {
+    hover: "hover:bg-lime-600 active:bg-lime-500 focus:border-lime-500",
+    bg: "bg-lime-700/90 border-lime-600"
+  },
+  green: {
+    hover: "hover:bg-green-600 active:bg-green-500 focus:border-green-500",
+    bg: "bg-green-700/90 border-green-600"
+  },
+  emerald: {
+    hover: "hover:bg-emerald-600 active:bg-emerald-500 focus:border-emerald-500",
+    bg: "bg-emerald-700/90 border-emerald-600"
+  },
+  teal: {
+    hover: "hover:bg-teal-600 active:bg-teal-500 focus:border-teal-500",
+    bg: "bg-teal-700/90 border-teal-600"
+  },
+  cyan: {
+    hover: "hover:bg-cyan-600 active:bg-cyan-500 focus:border-cyan-500",
+    bg: "bg-cyan-700/90 border-cyan-600"
+  },
+  sky: {
+    hover: "hover:bg-sky-600 active:bg-sky-500 focus:border-sky-500",
+    bg: "bg-sky-700/90 border-sky-600"
+  },
+  blue: {
+    hover: "hover:bg-blue-600 active:bg-blue-500 focus:border-blue-500",
+    bg: "bg-blue-700/90 border-blue-600"
+  },
+  indigo: {
+    hover: "hover:bg-indigo-600 active:bg-indigo-500 focus:border-indigo-500",
+    bg: "bg-indigo-700/90 border-indigo-600"
+  },
+  violet: {
+    hover: "hover:bg-violet-600 active:bg-violet-500 focus:border-violet-500",
+    bg: "bg-violet-700/90 border-violet-600"
+  },
+  purple: {
+    hover: "hover:bg-purple-600 active:bg-purple-500 focus:border-purple-500",
+    bg: "bg-purple-700/90 border-purple-600"
+  },
+  fuchsia: {
+    hover: "hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-500",
+    bg: "bg-fuchsia-700/90 border-fuchsia-600"
+  },
+  pink: {
+    hover: "hover:bg-pink-600 active:bg-pink-500 focus:border-pink-500",
+    bg: "bg-pink-700/90 border-pink-600"
+  },
+  rose: {
+    hover: "hover:bg-rose-600 active:bg-rose-500 focus:border-rose-500",
+    bg: "bg-rose-700/90 border-rose-600"
+  }
 };
 const sizeClasses = {
   sm: {
@@ -242,16 +313,19 @@ const sizeClasses = {
     equal: "p-4"
   }
 };
-const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none";
+const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none text-center";
 const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
     "color",
+    "transparent",
     "size",
     "square"
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "darkgray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
+    "border-transparent": props.transparent,
+    [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
@@ -265,12 +339,15 @@ const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
 const ButtonAnchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
     "color",
+    "transparent",
     "size",
     "square"
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "darkgray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
+    "border-transparent": props.transparent,
+    [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
@@ -495,7 +572,7 @@ const InputColorClasses = {
   fuchsia: "bg-fuchsia-700/90 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-300",
   pink: "bg-pink-700/90 border-pink-600 hover:bg-pink-600 active:bg-pink-500 focus:border-pink-300",
   rose: "bg-rose-700/90 border-rose-600 hover:bg-rose-600 active:bg-rose-500 focus:border-rose-300",
-  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-300/60"
+  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
 };
 const InputClasses = "motion-safe:transition ease-in-out border text-gray-50 hover:shadow-lg focus:outline-none rounded-md px-2.5 py-1.5 touch-manipulation";
 const TextInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
@@ -1046,6 +1123,7 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     "class",
     "display",
     "color",
+    "transparent",
     "size",
     "hover"
   ]);
@@ -1106,6 +1184,9 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       get color() {
         return props.color;
       },
+      get transparent() {
+        return props.transparent;
+      },
       get size() {
         return props.size ?? "sm";
       },
@@ -1157,6 +1238,9 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
         color: qwik._fnSignal((p0) => p0.color, [
           props
         ], "p0.color"),
+        transparent: qwik._fnSignal((p0) => p0.transparent, [
+          props
+        ], "p0.transparent"),
         size: qwik._fnSignal((p0) => p0.size ?? "sm", [
           props
         ], 'p0.size??"sm"'),
@@ -1183,9 +1267,10 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
         "motion-safe:transition-all p-1.5 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 max-h-72 lui-scroll overflow-auto select-none": true
       }
     }, [
-      props.values?.map(({ name, value, color = "transparent" }, i) => {
+      props.values?.map(({ name, value, color: valueColor }, i) => {
         return /* @__PURE__ */ qwik._jsxC(Button, {
-          color,
+          color: valueColor ?? props.color,
+          transparent: true,
           get size() {
             return props.size ?? "sm";
           },
@@ -1205,6 +1290,7 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
           ]),
           children: name,
           [qwik._IMMUTABLE]: {
+            transparent: qwik._IMMUTABLE,
             size: qwik._fnSignal((p0) => p0.size ?? "sm", [
               props
             ], 'p0.size??"sm"')
@@ -1357,14 +1443,14 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
         class: {
           "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full": true,
           "top-full mt-2": menu.value,
-          "opacity-0 top-0 scale-95 pointer-events-none": !menu.value
+          "opacity-0 top-0 scale-95 pointer-events-none": !menu.value,
+          "before:backdrop-blur-lg": props.color !== "transparent",
+          'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true
         }
       }, null, /* @__PURE__ */ qwik._jsxQ("div", {
         class: {
           [navColorClasses[props.color ?? "darkgray"]]: true,
-          "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true,
-          "before:backdrop-blur-lg": props.color !== "transparent",
-          'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10': 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__ */ qwik._jsxC(qwik.Slot, {
         name: "mobile",
@@ -1415,7 +1501,7 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
             }
           }, 3, "8r_3"),
           /* @__PURE__ */ qwik._jsxC(Button, {
-            color: "transparent",
+            transparent: true,
             square: true,
             class: {
               "sm:hidden": true
@@ -1439,7 +1525,7 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
               d: "M4 6h16M4 12h16m-7 6h7"
             }, null, 3, null), 3, null),
             [qwik._IMMUTABLE]: {
-              color: qwik._IMMUTABLE,
+              transparent: qwik._IMMUTABLE,
               square: qwik._IMMUTABLE,
               class: qwik._IMMUTABLE,
               onClick$: qwik._IMMUTABLE
@@ -1544,7 +1630,10 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     /* @__PURE__ */ qwik._jsxC(Button, {
       size: "sm",
       get color() {
-        return (props.color ?? "darkgray") == "darkgray" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+        return (props.color ?? "darkgray") == "darkgray" || (props.color ?? "darkgray") == "transparent" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+      },
+      get transparent() {
+        return (props.color ?? "darkgray") == "transparent";
       },
       "data-action": "decrement",
       "aria-label": "Decrement",
@@ -1572,9 +1661,12 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       }, 3, "gk_3"),
       [qwik._IMMUTABLE]: {
         size: qwik._IMMUTABLE,
-        color: qwik._fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+        color: qwik._fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" || (p0.color ?? "darkgray") == "transparent" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
           props
-        ], '(p0.color??"darkgray")=="darkgray"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        ], '(p0.color??"darkgray")=="darkgray"||(p0.color??"darkgray")=="transparent"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        transparent: qwik._fnSignal((p0) => (p0.color ?? "darkgray") == "transparent", [
+          props
+        ], '(p0.color??"darkgray")=="transparent"'),
         "data-action": qwik._IMMUTABLE,
         "aria-label": qwik._IMMUTABLE,
         class: qwik._fnSignal((p0) => ({
@@ -1611,7 +1703,10 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     /* @__PURE__ */ qwik._jsxC(Button, {
       size: "sm",
       get color() {
-        return (props.color ?? "darkgray") == "darkgray" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+        return (props.color ?? "darkgray") == "darkgray" || (props.color ?? "darkgray") == "transparent" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+      },
+      get transparent() {
+        return (props.color ?? "darkgray") == "transparent";
       },
       "data-action": "increment",
       "aria-label": "Increment",
@@ -1639,9 +1734,12 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       }, 3, "gk_6"),
       [qwik._IMMUTABLE]: {
         size: qwik._IMMUTABLE,
-        color: qwik._fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+        color: qwik._fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" || (p0.color ?? "darkgray") == "transparent" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+          props
+        ], '(p0.color??"darkgray")=="darkgray"||(p0.color??"darkgray")=="transparent"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        transparent: qwik._fnSignal((p0) => (p0.color ?? "darkgray") == "transparent", [
           props
-        ], '(p0.color??"darkgray")=="darkgray"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        ], '(p0.color??"darkgray")=="transparent"'),
         "data-action": qwik._IMMUTABLE,
         "aria-label": qwik._IMMUTABLE,
         class: qwik._fnSignal((p0) => ({

package/lib/index.qwik.mjs

@@ -192,31 +192,102 @@ const Blobs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   ], 1, "OL_0");
 }, "Blobs_component_246Oa50YM60"));
 const buttonColorClasses = {
-  slate: "bg-slate-700/90 border-slate-600 hover:bg-slate-600 active:bg-slate-500 focus:border-slate-500",
-  gray: "bg-gray-700/90 border-gray-600 hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
-  darkgray: "bg-gray-800/90 border-gray-700 hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
-  darkergray: "bg-gray-900/90 border-gray-800 hover:bg-gray-800 active:bg-gray-700 focus:border-gray-700",
-  zinc: "bg-zinc-700/90 border-zinc-600 hover:bg-zinc-600 active:bg-zinc-500 focus:border-zinc-500",
-  neutral: "bg-neutral-700/90 border-neutral-600 hover:bg-neutral-600 active:bg-neutral-500 focus:border-neutral-500",
-  stone: "bg-stone-700/90 border-stone-600 hover:bg-stone-600 active:bg-stone-500 focus:border-stone-500",
-  red: "bg-red-700/90 border-red-600 hover:bg-red-600 active:bg-red-500 focus:border-red-500",
-  orange: "bg-orange-700/90 border-orange-600 hover:bg-orange-600 active:bg-orange-500 focus:border-orange-500",
-  amber: "bg-amber-700/90 border-amber-600 hover:bg-amber-600 active:bg-amber-500 focus:border-amber-500",
-  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
-  lime: "bg-lime-700/90 border-lime-600 hover:bg-lime-600 active:bg-lime-500 focus:border-lime-500",
-  green: "bg-green-700/90 border-green-600 hover:bg-green-600 active:bg-green-500 focus:border-green-500",
-  emerald: "bg-emerald-700/90 border-emerald-600 hover:bg-emerald-600 active:bg-emerald-500 focus:border-emerald-500",
-  teal: "bg-teal-700/90 border-teal-600 hover:bg-teal-600 active:bg-teal-500 focus:border-teal-500",
-  cyan: "bg-cyan-700/90 border-cyan-600 hover:bg-cyan-600 active:bg-cyan-500 focus:border-cyan-500",
-  sky: "bg-sky-700/90 border-sky-600 hover:bg-sky-600 active:bg-sky-500 focus:border-sky-500",
-  blue: "bg-blue-700/90 border-blue-600 hover:bg-blue-600 active:bg-blue-500 focus:border-blue-500",
-  indigo: "bg-indigo-700/90 border-indigo-600 hover:bg-indigo-600 active:bg-indigo-500 focus:border-indigo-500",
-  violet: "bg-violet-700/90 border-violet-600 hover:bg-violet-600 active:bg-violet-500 focus:border-violet-500",
-  purple: "bg-purple-700/90 border-purple-600 hover:bg-purple-600 active:bg-purple-500 focus:border-purple-500",
-  fuchsia: "bg-fuchsia-700/90 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-500",
-  pink: "bg-pink-700/90 border-pink-600 hover:bg-pink-600 active:bg-pink-500 focus:border-pink-500",
-  rose: "bg-rose-700/90 border-rose-600 hover:bg-rose-600 active:bg-rose-500 focus:border-rose-500",
-  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
+  slate: {
+    hover: "hover:bg-slate-600 active:bg-slate-500 focus:border-slate-500",
+    bg: "bg-slate-700/90 border-slate-600"
+  },
+  gray: {
+    hover: "hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
+    bg: "bg-gray-700/90 border-gray-600"
+  },
+  darkgray: {
+    hover: "hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
+    bg: "bg-gray-800/90 border-gray-700"
+  },
+  darkergray: {
+    hover: "hover:bg-gray-800 active:bg-gray-700 focus:border-gray-700",
+    bg: "bg-gray-900/90 border-gray-800"
+  },
+  zinc: {
+    hover: "hover:bg-zinc-600 active:bg-zinc-500 focus:border-zinc-500",
+    bg: "bg-zinc-700/90 border-zinc-600"
+  },
+  neutral: {
+    hover: "hover:bg-neutral-600 active:bg-neutral-500 focus:border-neutral-500",
+    bg: "bg-neutral-700/90 border-neutral-600"
+  },
+  stone: {
+    hover: "hover:bg-stone-600 active:bg-stone-500 focus:border-stone-500",
+    bg: "bg-stone-700/90 border-stone-600"
+  },
+  red: {
+    hover: "hover:bg-red-600 active:bg-red-500 focus:border-red-500",
+    bg: "bg-red-700/90 border-red-600"
+  },
+  orange: {
+    hover: "hover:bg-orange-600 active:bg-orange-500 focus:border-orange-500",
+    bg: "bg-orange-700/90 border-orange-600"
+  },
+  amber: {
+    hover: "hover:bg-amber-600 active:bg-amber-500 focus:border-amber-500",
+    bg: "bg-amber-700/90 border-amber-600"
+  },
+  yellow: {
+    hover: "hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
+    bg: "bg-yellow-700/90 border-yellow-600"
+  },
+  lime: {
+    hover: "hover:bg-lime-600 active:bg-lime-500 focus:border-lime-500",
+    bg: "bg-lime-700/90 border-lime-600"
+  },
+  green: {
+    hover: "hover:bg-green-600 active:bg-green-500 focus:border-green-500",
+    bg: "bg-green-700/90 border-green-600"
+  },
+  emerald: {
+    hover: "hover:bg-emerald-600 active:bg-emerald-500 focus:border-emerald-500",
+    bg: "bg-emerald-700/90 border-emerald-600"
+  },
+  teal: {
+    hover: "hover:bg-teal-600 active:bg-teal-500 focus:border-teal-500",
+    bg: "bg-teal-700/90 border-teal-600"
+  },
+  cyan: {
+    hover: "hover:bg-cyan-600 active:bg-cyan-500 focus:border-cyan-500",
+    bg: "bg-cyan-700/90 border-cyan-600"
+  },
+  sky: {
+    hover: "hover:bg-sky-600 active:bg-sky-500 focus:border-sky-500",
+    bg: "bg-sky-700/90 border-sky-600"
+  },
+  blue: {
+    hover: "hover:bg-blue-600 active:bg-blue-500 focus:border-blue-500",
+    bg: "bg-blue-700/90 border-blue-600"
+  },
+  indigo: {
+    hover: "hover:bg-indigo-600 active:bg-indigo-500 focus:border-indigo-500",
+    bg: "bg-indigo-700/90 border-indigo-600"
+  },
+  violet: {
+    hover: "hover:bg-violet-600 active:bg-violet-500 focus:border-violet-500",
+    bg: "bg-violet-700/90 border-violet-600"
+  },
+  purple: {
+    hover: "hover:bg-purple-600 active:bg-purple-500 focus:border-purple-500",
+    bg: "bg-purple-700/90 border-purple-600"
+  },
+  fuchsia: {
+    hover: "hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-500",
+    bg: "bg-fuchsia-700/90 border-fuchsia-600"
+  },
+  pink: {
+    hover: "hover:bg-pink-600 active:bg-pink-500 focus:border-pink-500",
+    bg: "bg-pink-700/90 border-pink-600"
+  },
+  rose: {
+    hover: "hover:bg-rose-600 active:bg-rose-500 focus:border-rose-500",
+    bg: "bg-rose-700/90 border-rose-600"
+  }
 };
 const sizeClasses = {
   sm: {
@@ -240,16 +311,19 @@ const sizeClasses = {
     equal: "p-4"
   }
 };
-const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none";
+const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none text-center";
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
+    "transparent",
     "size",
     "square"
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "darkgray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
+    "border-transparent": props.transparent,
+    [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
@@ -263,12 +337,15 @@ const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
 const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
+    "transparent",
     "size",
     "square"
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "darkgray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
+    "border-transparent": props.transparent,
+    [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
@@ -493,7 +570,7 @@ const InputColorClasses = {
   fuchsia: "bg-fuchsia-700/90 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-300",
   pink: "bg-pink-700/90 border-pink-600 hover:bg-pink-600 active:bg-pink-500 focus:border-pink-300",
   rose: "bg-rose-700/90 border-rose-600 hover:bg-rose-600 active:bg-rose-500 focus:border-rose-300",
-  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-300/60"
+  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
 };
 const InputClasses = "motion-safe:transition ease-in-out border text-gray-50 hover:shadow-lg focus:outline-none rounded-md px-2.5 py-1.5 touch-manipulation";
 const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1044,6 +1121,7 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     "class",
     "display",
     "color",
+    "transparent",
     "size",
     "hover"
   ]);
@@ -1104,6 +1182,9 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       get color() {
         return props.color;
       },
+      get transparent() {
+        return props.transparent;
+      },
       get size() {
         return props.size ?? "sm";
       },
@@ -1155,6 +1236,9 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         color: _fnSignal((p0) => p0.color, [
           props
         ], "p0.color"),
+        transparent: _fnSignal((p0) => p0.transparent, [
+          props
+        ], "p0.transparent"),
         size: _fnSignal((p0) => p0.size ?? "sm", [
           props
         ], 'p0.size??"sm"'),
@@ -1181,9 +1265,10 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         "motion-safe:transition-all p-1.5 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 max-h-72 lui-scroll overflow-auto select-none": true
       }
     }, [
-      props.values?.map(({ name, value, color = "transparent" }, i) => {
+      props.values?.map(({ name, value, color: valueColor }, i) => {
         return /* @__PURE__ */ _jsxC(Button, {
-          color,
+          color: valueColor ?? props.color,
+          transparent: true,
           get size() {
             return props.size ?? "sm";
           },
@@ -1203,6 +1288,7 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
           ]),
           children: name,
           [_IMMUTABLE]: {
+            transparent: _IMMUTABLE,
             size: _fnSignal((p0) => p0.size ?? "sm", [
               props
             ], 'p0.size??"sm"')
@@ -1355,14 +1441,14 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
         class: {
           "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full": true,
           "top-full mt-2": menu.value,
-          "opacity-0 top-0 scale-95 pointer-events-none": !menu.value
+          "opacity-0 top-0 scale-95 pointer-events-none": !menu.value,
+          "before:backdrop-blur-lg": props.color !== "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,
-          "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true,
-          "before:backdrop-blur-lg": props.color !== "transparent",
-          'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10': 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, {
         name: "mobile",
@@ -1413,7 +1499,7 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
             }
           }, 3, "8r_3"),
           /* @__PURE__ */ _jsxC(Button, {
-            color: "transparent",
+            transparent: true,
             square: true,
             class: {
               "sm:hidden": true
@@ -1437,7 +1523,7 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
               d: "M4 6h16M4 12h16m-7 6h7"
             }, null, 3, null), 3, null),
             [_IMMUTABLE]: {
-              color: _IMMUTABLE,
+              transparent: _IMMUTABLE,
               square: _IMMUTABLE,
               class: _IMMUTABLE,
               onClick$: _IMMUTABLE
@@ -1542,7 +1628,10 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     /* @__PURE__ */ _jsxC(Button, {
       size: "sm",
       get color() {
-        return (props.color ?? "darkgray") == "darkgray" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+        return (props.color ?? "darkgray") == "darkgray" || (props.color ?? "darkgray") == "transparent" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+      },
+      get transparent() {
+        return (props.color ?? "darkgray") == "transparent";
       },
       "data-action": "decrement",
       "aria-label": "Decrement",
@@ -1570,9 +1659,12 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       }, 3, "gk_3"),
       [_IMMUTABLE]: {
         size: _IMMUTABLE,
-        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" || (p0.color ?? "darkgray") == "transparent" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
           props
-        ], '(p0.color??"darkgray")=="darkgray"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        ], '(p0.color??"darkgray")=="darkgray"||(p0.color??"darkgray")=="transparent"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        transparent: _fnSignal((p0) => (p0.color ?? "darkgray") == "transparent", [
+          props
+        ], '(p0.color??"darkgray")=="transparent"'),
         "data-action": _IMMUTABLE,
         "aria-label": _IMMUTABLE,
         class: _fnSignal((p0) => ({
@@ -1609,7 +1701,10 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     /* @__PURE__ */ _jsxC(Button, {
       size: "sm",
       get color() {
-        return (props.color ?? "darkgray") == "darkgray" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+        return (props.color ?? "darkgray") == "darkgray" || (props.color ?? "darkgray") == "transparent" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+      },
+      get transparent() {
+        return (props.color ?? "darkgray") == "transparent";
       },
       "data-action": "increment",
       "aria-label": "Increment",
@@ -1637,9 +1732,12 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       }, 3, "gk_6"),
       [_IMMUTABLE]: {
         size: _IMMUTABLE,
-        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" || (p0.color ?? "darkgray") == "transparent" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+          props
+        ], '(p0.color??"darkgray")=="darkgray"||(p0.color??"darkgray")=="transparent"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        transparent: _fnSignal((p0) => (p0.color ?? "darkgray") == "transparent", [
           props
-        ], '(p0.color??"darkgray")=="darkgray"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        ], '(p0.color??"darkgray")=="transparent"'),
         "data-action": _IMMUTABLE,
         "aria-label": _IMMUTABLE,
         class: _fnSignal((p0) => ({

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

@@ -1,30 +1,101 @@
 import type { PropsOf } from '@builder.io/qwik';
 export declare const buttonColorClasses: {
-    slate: string;
-    gray: string;
-    darkgray: string;
-    darkergray: string;
-    zinc: string;
-    neutral: string;
-    stone: string;
-    red: string;
-    orange: string;
-    amber: string;
-    yellow: string;
-    lime: string;
-    green: string;
-    emerald: string;
-    teal: string;
-    cyan: string;
-    sky: string;
-    blue: string;
-    indigo: string;
-    violet: string;
-    purple: string;
-    fuchsia: string;
-    pink: string;
-    rose: string;
-    transparent: string;
+    slate: {
+        hover: string;
+        bg: string;
+    };
+    gray: {
+        hover: string;
+        bg: string;
+    };
+    darkgray: {
+        hover: string;
+        bg: string;
+    };
+    darkergray: {
+        hover: string;
+        bg: string;
+    };
+    zinc: {
+        hover: string;
+        bg: string;
+    };
+    neutral: {
+        hover: string;
+        bg: string;
+    };
+    stone: {
+        hover: string;
+        bg: string;
+    };
+    red: {
+        hover: string;
+        bg: string;
+    };
+    orange: {
+        hover: string;
+        bg: string;
+    };
+    amber: {
+        hover: string;
+        bg: string;
+    };
+    yellow: {
+        hover: string;
+        bg: string;
+    };
+    lime: {
+        hover: string;
+        bg: string;
+    };
+    green: {
+        hover: string;
+        bg: string;
+    };
+    emerald: {
+        hover: string;
+        bg: string;
+    };
+    teal: {
+        hover: string;
+        bg: string;
+    };
+    cyan: {
+        hover: string;
+        bg: string;
+    };
+    sky: {
+        hover: string;
+        bg: string;
+    };
+    blue: {
+        hover: string;
+        bg: string;
+    };
+    indigo: {
+        hover: string;
+        bg: string;
+    };
+    violet: {
+        hover: string;
+        bg: string;
+    };
+    purple: {
+        hover: string;
+        bg: string;
+    };
+    fuchsia: {
+        hover: string;
+        bg: string;
+    };
+    pink: {
+        hover: string;
+        bg: string;
+    };
+    rose: {
+        hover: string;
+        bg: string;
+    };
 };
 export declare const sizeClasses: {
     sm: {
@@ -50,6 +121,7 @@ export declare const sizeClasses: {
 };
 interface GenericButtonProps {
     color?: keyof typeof buttonColorClasses;
+    transparent?: boolean;
     size?: keyof typeof sizeClasses;
     square?: boolean;
     class?: {

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

@@ -6,6 +6,7 @@ interface DropdownProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
     };
     display?: JSXChildren;
     color?: keyof typeof buttonColorClasses;
+    transparent?: boolean;
     size?: keyof typeof sizeClasses;
     hover?: boolean;
     values?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",