@luminescent/ui 0.12.5 → 0.12.7

package/lib/index.qwik.cjs

@@ -545,7 +545,7 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       get class() {
         return {
           "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 pointer-events-none scale-95": !store.opened
+          "opacity-0 scale-95 pointer-events-none": !store.opened
         };
       },
       onInput$: /* @__PURE__ */ qwik.inlinedQrl((color) => {
@@ -578,10 +578,10 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       [qwik._IMMUTABLE]: {
         class: qwik._fnSignal((p0) => ({
           "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 pointer-events-none scale-95": !p0.opened
+          "opacity-0 scale-95 pointer-events-none": !p0.opened
         }), [
           store
-        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 pointer-events-none scale-95":!p0.opened}'),
+        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}'),
         color: qwik._fnSignal((p0) => p0.value ?? "#000000", [
           props
         ], 'p0.value??"#000000"'),
@@ -982,7 +982,7 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     /* @__PURE__ */ qwik._jsxQ("div", {
       class: {
         "absolute top-full pt-2 left-0 z-[1000] ": true,
-        "pointer-events-none opacity-0 scale-95": !store.opened,
+        "opacity-0 scale-95 pointer-events-none": !store.opened,
         "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100": props.hover
       }
     }, null, /* @__PURE__ */ qwik._jsxQ("div", null, {
@@ -1113,105 +1113,110 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
 const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  const props1 = qwik._restProps(props, [
+    "fixed",
+    "floating"
+  ]);
   const menu = qwik.useSignal(false);
-  return /* @__PURE__ */ qwik._jsxQ("nav", null, {
-    class: qwik._fnSignal((p0) => ({
-      "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
-      "fixed": p0.fixed,
-      "absolute": !p0.fixed
-    }), [
-      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__ */ qwik._jsxQ("div", {
-      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": !menu.value
-      }
-    }, null, /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: {
-        "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 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
-      }
-    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
-      name: "mobile",
-      [qwik._IMMUTABLE]: {
-        name: qwik._IMMUTABLE
-      }
-    }, 3, "8r_0"), 1, null), 1, null),
-    /* @__PURE__ */ qwik._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__ */ qwik._jsxQ("div", {
-      class: {
-        "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:max-w-7xl before:h-full before:rounded-lg before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': props.floating
-      }
-    }, null, [
-      /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "flex items-center flex-1 gap-2 py-2 justify-start"
-      }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
-        name: "start",
-        [qwik._IMMUTABLE]: {
-          name: qwik._IMMUTABLE
+  return /* @__PURE__ */ qwik._jsxS("nav", {
+    ...props1,
+    children: [
+      /* @__PURE__ */ qwik._jsxQ("div", {
+        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
+        }
+      }, null, /* @__PURE__ */ qwik._jsxQ("div", null, {
+        class: {
+          "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 bg-gray-800/50 border border-gray-700/50 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
         }
-      }, 3, "8r_1"), 1, null),
-      /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "flex items-center flex-1 gap-2 py-2 justify-center"
       }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
-        name: "center",
+        name: "mobile",
         [qwik._IMMUTABLE]: {
           name: qwik._IMMUTABLE
         }
-      }, 3, "8r_2"), 1, null),
-      /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "flex items-center flex-1 gap-2 py-2 justify-end"
-      }, [
-        /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
-          name: "end",
+      }, 3, "8r_0"), 1, null), 1, null),
+      /* @__PURE__ */ qwik._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__ */ qwik._jsxQ("div", {
+        class: {
+          "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:max-w-7xl before:h-full before:rounded-lg before:backdrop-blur-lg before:drop-shadow-xl before:-z-10': props.floating
+        }
+      }, null, [
+        /* @__PURE__ */ qwik._jsxQ("div", null, {
+          class: "flex items-center flex-1 gap-2 py-2 justify-start"
+        }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
+          name: "start",
           [qwik._IMMUTABLE]: {
             name: qwik._IMMUTABLE
           }
-        }, 3, "8r_3"),
-        /* @__PURE__ */ qwik._jsxC(Button, {
-          children: /* @__PURE__ */ qwik._jsxQ("svg", null, {
-            class: "w-6 h-6",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, /* @__PURE__ */ qwik._jsxQ("path", null, {
-            d: "M4 6h16M4 12h16m-7 6h7",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            "stroke-width": "2"
-          }, null, 3, null), 3, null),
-          class: {
-            "sm:hidden": true
-          },
-          color: "transparent",
-          onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
-            const [menu2] = qwik.useLexicalScope();
-            return menu2.value = !menu2.value;
-          }, "Nav_component_nav_div_div_div_Button_onClick_J0TKJTxh4N4", [
-            menu
-          ]),
-          square: true,
+        }, 3, "8r_1"), 1, null),
+        /* @__PURE__ */ qwik._jsxQ("div", null, {
+          class: "flex items-center flex-1 gap-2 py-2 justify-center"
+        }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
+          name: "center",
           [qwik._IMMUTABLE]: {
-            class: qwik._IMMUTABLE,
-            color: qwik._IMMUTABLE,
-            onClick$: qwik._IMMUTABLE,
-            square: qwik._IMMUTABLE
+            name: qwik._IMMUTABLE
           }
-        }, 3, "8r_4")
-      ], 1, null)
-    ], 1, null), 1, null)
-  ], 1, "8r_5");
+        }, 3, "8r_2"), 1, null),
+        /* @__PURE__ */ qwik._jsxQ("div", null, {
+          class: "flex items-center flex-1 gap-2 py-2 justify-end"
+        }, [
+          /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
+            name: "end",
+            [qwik._IMMUTABLE]: {
+              name: qwik._IMMUTABLE
+            }
+          }, 3, "8r_3"),
+          /* @__PURE__ */ qwik._jsxC(Button, {
+            children: /* @__PURE__ */ qwik._jsxQ("svg", null, {
+              class: "w-6 h-6",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, /* @__PURE__ */ qwik._jsxQ("path", null, {
+              d: "M4 6h16M4 12h16m-7 6h7",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2"
+            }, null, 3, null), 3, null),
+            class: {
+              "sm:hidden": true
+            },
+            color: "transparent",
+            onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+              const [menu2] = qwik.useLexicalScope();
+              return menu2.value = !menu2.value;
+            }, "Nav_component_nav_div_div_div_Button_onClick_J0TKJTxh4N4", [
+              menu
+            ]),
+            square: true,
+            [qwik._IMMUTABLE]: {
+              class: qwik._IMMUTABLE,
+              color: qwik._IMMUTABLE,
+              onClick$: qwik._IMMUTABLE,
+              square: qwik._IMMUTABLE
+            }
+          }, 3, "8r_4")
+        ], 1, null)
+      ], 1, null), 1, null)
+    ],
+    class: {
+      "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
+      "fixed": props.fixed,
+      "absolute": !props.fixed,
+      ...props1.class
+    }
+  }, null, 0, "8r_5");
 }, "Nav_component_ZePSmw9628k"));
 const Plus = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("svg", {

package/lib/index.qwik.mjs

@@ -543,7 +543,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       get class() {
         return {
           "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 pointer-events-none scale-95": !store.opened
+          "opacity-0 scale-95 pointer-events-none": !store.opened
         };
       },
       onInput$: /* @__PURE__ */ inlinedQrl((color) => {
@@ -576,10 +576,10 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       [_IMMUTABLE]: {
         class: _fnSignal((p0) => ({
           "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 pointer-events-none scale-95": !p0.opened
+          "opacity-0 scale-95 pointer-events-none": !p0.opened
         }), [
           store
-        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 pointer-events-none scale-95":!p0.opened}'),
+        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}'),
         color: _fnSignal((p0) => p0.value ?? "#000000", [
           props
         ], 'p0.value??"#000000"'),
@@ -980,7 +980,7 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     /* @__PURE__ */ _jsxQ("div", {
       class: {
         "absolute top-full pt-2 left-0 z-[1000] ": true,
-        "pointer-events-none opacity-0 scale-95": !store.opened,
+        "opacity-0 scale-95 pointer-events-none": !store.opened,
         "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100": props.hover
       }
     }, null, /* @__PURE__ */ _jsxQ("div", null, {
@@ -1111,105 +1111,110 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
 const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "fixed",
+    "floating"
+  ]);
   const menu = useSignal(false);
-  return /* @__PURE__ */ _jsxQ("nav", null, {
-    class: _fnSignal((p0) => ({
-      "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
-      "fixed": p0.fixed,
-      "absolute": !p0.fixed
-    }), [
-      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", {
-      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": !menu.value
-      }
-    }, null, /* @__PURE__ */ _jsxQ("div", null, {
-      class: {
-        "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 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
-      }
-    }, /* @__PURE__ */ _jsxC(Slot, {
-      name: "mobile",
-      [_IMMUTABLE]: {
-        name: _IMMUTABLE
-      }
-    }, 3, "8r_0"), 1, null), 1, null),
-    /* @__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-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:max-w-7xl before:h-full before:rounded-lg 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 py-2 justify-start"
-      }, /* @__PURE__ */ _jsxC(Slot, {
-        name: "start",
-        [_IMMUTABLE]: {
-          name: _IMMUTABLE
+  return /* @__PURE__ */ _jsxS("nav", {
+    ...props1,
+    children: [
+      /* @__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": menu.value,
+          "opacity-0 top-0 scale-95 pointer-events-none": !menu.value
+        }
+      }, null, /* @__PURE__ */ _jsxQ("div", null, {
+        class: {
+          "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 bg-gray-800/50 border border-gray-700/50 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
         }
-      }, 3, "8r_1"), 1, null),
-      /* @__PURE__ */ _jsxQ("div", null, {
-        class: "flex items-center flex-1 gap-2 py-2 justify-center"
       }, /* @__PURE__ */ _jsxC(Slot, {
-        name: "center",
+        name: "mobile",
         [_IMMUTABLE]: {
           name: _IMMUTABLE
         }
-      }, 3, "8r_2"), 1, null),
-      /* @__PURE__ */ _jsxQ("div", null, {
-        class: "flex items-center flex-1 gap-2 py-2 justify-end"
-      }, [
-        /* @__PURE__ */ _jsxC(Slot, {
-          name: "end",
+      }, 3, "8r_0"), 1, null), 1, null),
+      /* @__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-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:max-w-7xl before:h-full before:rounded-lg 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 py-2 justify-start"
+        }, /* @__PURE__ */ _jsxC(Slot, {
+          name: "start",
           [_IMMUTABLE]: {
             name: _IMMUTABLE
           }
-        }, 3, "8r_3"),
-        /* @__PURE__ */ _jsxC(Button, {
-          children: /* @__PURE__ */ _jsxQ("svg", null, {
-            class: "w-6 h-6",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            xmlns: "http://www.w3.org/2000/svg"
-          }, /* @__PURE__ */ _jsxQ("path", null, {
-            d: "M4 6h16M4 12h16m-7 6h7",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            "stroke-width": "2"
-          }, null, 3, null), 3, null),
-          class: {
-            "sm:hidden": true
-          },
-          color: "transparent",
-          onClick$: /* @__PURE__ */ inlinedQrl(() => {
-            const [menu2] = useLexicalScope();
-            return menu2.value = !menu2.value;
-          }, "Nav_component_nav_div_div_div_Button_onClick_J0TKJTxh4N4", [
-            menu
-          ]),
-          square: true,
+        }, 3, "8r_1"), 1, null),
+        /* @__PURE__ */ _jsxQ("div", null, {
+          class: "flex items-center flex-1 gap-2 py-2 justify-center"
+        }, /* @__PURE__ */ _jsxC(Slot, {
+          name: "center",
           [_IMMUTABLE]: {
-            class: _IMMUTABLE,
-            color: _IMMUTABLE,
-            onClick$: _IMMUTABLE,
-            square: _IMMUTABLE
+            name: _IMMUTABLE
           }
-        }, 3, "8r_4")
-      ], 1, null)
-    ], 1, null), 1, null)
-  ], 1, "8r_5");
+        }, 3, "8r_2"), 1, null),
+        /* @__PURE__ */ _jsxQ("div", null, {
+          class: "flex items-center flex-1 gap-2 py-2 justify-end"
+        }, [
+          /* @__PURE__ */ _jsxC(Slot, {
+            name: "end",
+            [_IMMUTABLE]: {
+              name: _IMMUTABLE
+            }
+          }, 3, "8r_3"),
+          /* @__PURE__ */ _jsxC(Button, {
+            children: /* @__PURE__ */ _jsxQ("svg", null, {
+              class: "w-6 h-6",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, /* @__PURE__ */ _jsxQ("path", null, {
+              d: "M4 6h16M4 12h16m-7 6h7",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "2"
+            }, null, 3, null), 3, null),
+            class: {
+              "sm:hidden": true
+            },
+            color: "transparent",
+            onClick$: /* @__PURE__ */ inlinedQrl(() => {
+              const [menu2] = useLexicalScope();
+              return menu2.value = !menu2.value;
+            }, "Nav_component_nav_div_div_div_Button_onClick_J0TKJTxh4N4", [
+              menu
+            ]),
+            square: true,
+            [_IMMUTABLE]: {
+              class: _IMMUTABLE,
+              color: _IMMUTABLE,
+              onClick$: _IMMUTABLE,
+              square: _IMMUTABLE
+            }
+          }, 3, "8r_4")
+        ], 1, null)
+      ], 1, null), 1, null)
+    ],
+    class: {
+      "motion-safe:transition-all duration-200 flex flex-col top-0 left-0 w-full z-50": true,
+      "fixed": props.fixed,
+      "absolute": !props.fixed,
+      ...props1.class
+    }
+  }, null, 0, "8r_5");
 }, "Nav_component_ZePSmw9628k"));
 const Plus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {

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

@@ -1,4 +1,8 @@
-interface NavContainerProps {
+import type { PropsOf } from '@builder.io/qwik';
+interface NavContainerProps extends Omit<PropsOf<'nav'>, 'class'> {
+    class?: {
+        [key: string]: boolean;
+    };
     fixed?: boolean;
     floating?: boolean;
 }

package/package.json

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