@luminescent/ui 0.12.11 → 0.13.0

package/lib/index.qwik.cjs

@@ -1114,7 +1114,15 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
 const navColorClasses = {
-  gray: "bg-gray-800/50 border-gray-700/50",
+  red: "bg-red-700/50 border-red-600/50",
+  orange: "bg-orange-700/50 border-orange-600/50",
+  yellow: "bg-yellow-700/50 border-yellow-600/50",
+  green: "bg-green-700/50 border-green-600/50",
+  blue: "bg-blue-600/50 border-blue-500/50",
+  purple: "bg-purple-600/50 border-purple-500/50",
+  pink: "bg-pink-600/50 border-pink-500/50",
+  gray: "bg-gray-700/50 border-gray-600/50",
+  darkgray: "bg-gray-800/50 border-gray-700/50",
   transparent: "bg-transparent border-transparent"
 };
 const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
@@ -1135,9 +1143,10 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
         }
       }, null, /* @__PURE__ */ qwik._jsxQ("div", {
         class: {
-          [navColorClasses[props.color ?? "gray"]]: true,
+          [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:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': 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
         }
       }, null, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
         name: "mobile",
@@ -1147,17 +1156,19 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
       }, 3, "8r_0"), 1, null), 1, null),
       /* @__PURE__ */ qwik._jsxQ("div", {
         class: {
-          [navColorClasses[props.color ?? "gray"]]: !props.floating,
+          [navColorClasses[props.color ?? "darkgray"]]: !props.floating,
           "border-b": !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,
+          "before:backdrop-blur-lg": props.color !== "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__ */ qwik._jsxQ("div", {
         class: {
           "flex justify-evenly w-full mx-auto px-2 max-w-7xl": true,
-          [navColorClasses[props.color ?? "gray"]]: props.floating,
+          [navColorClasses[props.color ?? "darkgray"]]: props.floating,
           "border rounded-lg": props.floating,
-          'before:absolute before:content-[""] before:w-full before:max-w-7xl before:h-full before:rounded-lg before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': props.floating
+          "before:backdrop-blur-lg": props.color !== "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, [
         /* @__PURE__ */ qwik._jsxQ("div", null, {

package/lib/index.qwik.mjs

@@ -1112,7 +1112,15 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
 const navColorClasses = {
-  gray: "bg-gray-800/50 border-gray-700/50",
+  red: "bg-red-700/50 border-red-600/50",
+  orange: "bg-orange-700/50 border-orange-600/50",
+  yellow: "bg-yellow-700/50 border-yellow-600/50",
+  green: "bg-green-700/50 border-green-600/50",
+  blue: "bg-blue-600/50 border-blue-500/50",
+  purple: "bg-purple-600/50 border-purple-500/50",
+  pink: "bg-pink-600/50 border-pink-500/50",
+  gray: "bg-gray-700/50 border-gray-600/50",
+  darkgray: "bg-gray-800/50 border-gray-700/50",
   transparent: "bg-transparent border-transparent"
 };
 const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1133,9 +1141,10 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
         }
       }, null, /* @__PURE__ */ _jsxQ("div", {
         class: {
-          [navColorClasses[props.color ?? "gray"]]: true,
+          [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:absolute before:content-[""] before:w-full before:h-full before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': 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
         }
       }, null, /* @__PURE__ */ _jsxC(Slot, {
         name: "mobile",
@@ -1145,17 +1154,19 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
       }, 3, "8r_0"), 1, null), 1, null),
       /* @__PURE__ */ _jsxQ("div", {
         class: {
-          [navColorClasses[props.color ?? "gray"]]: !props.floating,
+          [navColorClasses[props.color ?? "darkgray"]]: !props.floating,
           "border-b": !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,
+          "before:backdrop-blur-lg": props.color !== "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 ?? "gray"]]: props.floating,
+          [navColorClasses[props.color ?? "darkgray"]]: props.floating,
           "border rounded-lg": props.floating,
-          'before:absolute before:content-[""] before:w-full before:max-w-7xl before:h-full before:rounded-lg before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': props.floating
+          "before:backdrop-blur-lg": props.color !== "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, [
         /* @__PURE__ */ _jsxQ("div", null, {

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

@@ -8,7 +8,15 @@ interface NavContainerProps extends Omit<PropsOf<'nav'>, 'class'> {
     color?: keyof typeof navColorClasses;
 }
 export declare const navColorClasses: {
+    red: string;
+    orange: string;
+    yellow: string;
+    green: string;
+    blue: string;
+    purple: string;
+    pink: string;
     gray: string;
+    darkgray: string;
     transparent: string;
 };
 export declare const Nav: import("@builder.io/qwik").Component<NavContainerProps>;

package/package.json

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