@luminescent/ui 0.9.0 → 0.10.0-0

package/lib/index.qwik.cjs

@@ -12,14 +12,15 @@ 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",
   pink: "bg-pink-600/90 border-pink-500 hover:bg-pink-500 active:bg-pink-400 focus:border-pink-400",
-  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",
   red: "bg-red-700/90 border-red-600 hover:bg-red-600 active:bg-red-500 focus:border-red-500",
   green: "bg-green-700/90 border-green-600 hover:bg-green-600 active:bg-green-500 focus:border-green-500",
-  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500"
+  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-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",
+  transparent: "bg-transparent border-transparent hover:bg-gray-700/10 active:bg-gray-700/20 focus:border-gray-700/20"
 };
 const sizeClasses = {
-  sm: "text-sm px-2.5 py-1.5 rounded-md gap-2",
+  sm: "text-base px-2.5 py-1.5 rounded-md gap-2",
   md: "text-base px-4 py-2 rounded-md gap-3",
   lg: "text-lg px-6 py-3 rounded-lg gap-3",
   xl: "text-lg px-8 py-4 rounded-xl gap-4"
@@ -837,6 +838,48 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
     ], 1, "dL_5");
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
+const NavContainer = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  return /* @__PURE__ */ qwik._jsxQ("nav", null, {
+    class: qwik._fnSignal((p0) => ({
+      "transition-all duration-200 flex flex-col fixed top-0 left-0 w-full z-50": true,
+      "bg-gray-800/50 backdrop-blur-lg drop-shadow-xl": !p0.floating
+    }), [
+      props
+    ], '{"transition-all duration-200 flex flex-col fixed top-0 left-0 w-full z-50":true,"bg-gray-800/50 backdrop-blur-lg drop-shadow-xl":!p0.floating}')
+  }, /* @__PURE__ */ qwik._jsxQ("div", null, {
+    class: qwik._fnSignal((p0) => ({
+      "flex justify-evenly w-full mx-auto px-4 py-2 max-w-7xl": true,
+      "bg-gray-800/50 backdrop-blur-lg drop-shadow-xl mt-3 rounded-lg": p0.floating
+    }), [
+      props
+    ], '{"flex justify-evenly w-full mx-auto px-4 py-2 max-w-7xl":true,"bg-gray-800/50 backdrop-blur-lg drop-shadow-xl mt-3 rounded-lg":p0.floating}')
+  }, [
+    /* @__PURE__ */ qwik._jsxQ("div", null, {
+      class: "flex flex-1 justify-start"
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
+      name: "start",
+      [qwik._IMMUTABLE]: {
+        name: qwik._IMMUTABLE
+      }
+    }, 3, "8r_0"), 1, null),
+    /* @__PURE__ */ qwik._jsxQ("div", null, {
+      class: "flex flex-1 justify-center"
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
+      name: "center",
+      [qwik._IMMUTABLE]: {
+        name: qwik._IMMUTABLE
+      }
+    }, 3, "8r_1"), 1, null),
+    /* @__PURE__ */ qwik._jsxQ("div", null, {
+      class: "flex flex-1 justify-end"
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
+      name: "end",
+      [qwik._IMMUTABLE]: {
+        name: qwik._IMMUTABLE
+      }
+    }, 3, "8r_2"), 1, null)
+  ], 1, null), 1, "8r_3");
+}, "NavContainer_component_0cvQrwegQjA"));
 const Plus = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("svg", {
     ...props,
@@ -1743,6 +1786,7 @@ exports.LogoPterodactyl = LogoPterodactyl;
 exports.LogoPurpur = LogoPurpur;
 exports.LogoVelocity = LogoVelocity;
 exports.LogoWaterfall = LogoWaterfall;
+exports.NavContainer = NavContainer;
 exports.NumberInput = NumberInput;
 exports.NumberInputRaw = NumberInputRaw;
 exports.SelectInput = SelectInput;

package/lib/index.qwik.mjs

@@ -10,14 +10,15 @@ 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",
   pink: "bg-pink-600/90 border-pink-500 hover:bg-pink-500 active:bg-pink-400 focus:border-pink-400",
-  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",
   red: "bg-red-700/90 border-red-600 hover:bg-red-600 active:bg-red-500 focus:border-red-500",
   green: "bg-green-700/90 border-green-600 hover:bg-green-600 active:bg-green-500 focus:border-green-500",
-  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500"
+  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-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",
+  transparent: "bg-transparent border-transparent hover:bg-gray-700/10 active:bg-gray-700/20 focus:border-gray-700/20"
 };
 const sizeClasses = {
-  sm: "text-sm px-2.5 py-1.5 rounded-md gap-2",
+  sm: "text-base px-2.5 py-1.5 rounded-md gap-2",
   md: "text-base px-4 py-2 rounded-md gap-3",
   lg: "text-lg px-6 py-3 rounded-lg gap-3",
   xl: "text-lg px-8 py-4 rounded-xl gap-4"
@@ -835,6 +836,48 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     ], 1, "dL_5");
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
+const NavContainer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxQ("nav", null, {
+    class: _fnSignal((p0) => ({
+      "transition-all duration-200 flex flex-col fixed top-0 left-0 w-full z-50": true,
+      "bg-gray-800/50 backdrop-blur-lg drop-shadow-xl": !p0.floating
+    }), [
+      props
+    ], '{"transition-all duration-200 flex flex-col fixed top-0 left-0 w-full z-50":true,"bg-gray-800/50 backdrop-blur-lg drop-shadow-xl":!p0.floating}')
+  }, /* @__PURE__ */ _jsxQ("div", null, {
+    class: _fnSignal((p0) => ({
+      "flex justify-evenly w-full mx-auto px-4 py-2 max-w-7xl": true,
+      "bg-gray-800/50 backdrop-blur-lg drop-shadow-xl mt-3 rounded-lg": p0.floating
+    }), [
+      props
+    ], '{"flex justify-evenly w-full mx-auto px-4 py-2 max-w-7xl":true,"bg-gray-800/50 backdrop-blur-lg drop-shadow-xl mt-3 rounded-lg":p0.floating}')
+  }, [
+    /* @__PURE__ */ _jsxQ("div", null, {
+      class: "flex flex-1 justify-start"
+    }, /* @__PURE__ */ _jsxC(Slot, {
+      name: "start",
+      [_IMMUTABLE]: {
+        name: _IMMUTABLE
+      }
+    }, 3, "8r_0"), 1, null),
+    /* @__PURE__ */ _jsxQ("div", null, {
+      class: "flex flex-1 justify-center"
+    }, /* @__PURE__ */ _jsxC(Slot, {
+      name: "center",
+      [_IMMUTABLE]: {
+        name: _IMMUTABLE
+      }
+    }, 3, "8r_1"), 1, null),
+    /* @__PURE__ */ _jsxQ("div", null, {
+      class: "flex flex-1 justify-end"
+    }, /* @__PURE__ */ _jsxC(Slot, {
+      name: "end",
+      [_IMMUTABLE]: {
+        name: _IMMUTABLE
+      }
+    }, 3, "8r_2"), 1, null)
+  ], 1, null), 1, "8r_3");
+}, "NavContainer_component_0cvQrwegQjA"));
 const Plus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
     ...props,
@@ -1742,6 +1785,7 @@ export {
   LogoPurpur,
   LogoVelocity,
   LogoWaterfall,
+  NavContainer,
   NumberInput,
   NumberInputRaw,
   SelectInput,

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

@@ -3,11 +3,12 @@ export declare const buttonColorClasses: {
     blue: string;
     purple: string;
     pink: string;
-    gray: string;
-    darkgray: string;
     red: string;
     green: string;
     yellow: string;
+    gray: string;
+    darkgray: string;
+    transparent: string;
 };
 export declare const sizeClasses: {
     sm: string;

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

@@ -0,0 +1,5 @@
+interface NavContainerProps {
+    floating?: boolean;
+}
+export declare const NavContainer: import("@builder.io/qwik").Component<NavContainerProps>;
+export {};

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

@@ -4,6 +4,7 @@ export * from './elements/Card';
 export * from './elements/ColorInput';
 export * from './elements/Header';
 export * from './elements/LoadingIcon';
+export * from './elements/Nav';
 export * from './elements/NumberInput';
 export * from './elements/SelectInput';
 export * from './elements/TextArea';

package/package.json

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