aura-ui-library 1.0.26 → 1.0.28

package/dist/index.js

@@ -277,9 +277,13 @@ var Navbar = ({
   accentColor = "#6366f1",
   theme = "dark",
   // "dark" | "light"
+  transparent = false,
+  // Set to true to make navbar transparent until scrolled
   style = {},
   animationDuration = 1.2,
-  easing = "expo.inOut"
+  easing = "expo.inOut",
+  linkSize = "clamp(42px, 7vw, 100px)"
+  // Option to change navlink size
 }) => {
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   const [isScrolled, setIsScrolled] = (0, import_react2.useState)(false);
@@ -380,9 +384,9 @@ var Navbar = ({
       fontFamily: '"Inter", -apple-system, sans-serif',
       boxSizing: "border-box",
       padding: isScrolled ? "15px 5%" : "30px 5%",
-      backgroundColor: isScrolled ? headerBg : "transparent",
-      backdropFilter: isScrolled ? "blur(20px)" : "none",
-      boxShadow: isScrolled ? headerShadow : "none",
+      backgroundColor: isScrolled ? headerBg : transparent ? "transparent" : headerBg,
+      backdropFilter: isScrolled || !transparent ? "blur(20px)" : "none",
+      boxShadow: isScrolled ? headerShadow : !transparent && headerShadow,
       transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
       ...style
     },
@@ -394,12 +398,10 @@ var Navbar = ({
       fontWeight: "900",
       letterSpacing: "1px",
       textDecoration: "none",
-      color: isOpen ? textMain : textMain,
-      // Text logic handles contrast
+      color: textMain,
+      // Text logic handles contrast via theme
       zIndex: 1001,
       cursor: "pointer",
-      mixBlendMode: isOpen ? "normal" : "difference",
-      // Only difference when closed over unpredictable content
       willChange: "transform",
       transition: "transform 0.3s ease"
     },
@@ -424,14 +426,13 @@ var Navbar = ({
       cursor: "pointer",
       zIndex: 1001,
       border: `1px solid ${isOpen ? borderCol : "transparent"}`,
-      transition: "all 0.4s ease",
-      mixBlendMode: isOpen ? "normal" : "difference"
+      transition: "all 0.4s ease"
     },
     line: {
       width: "22px",
       height: "2px",
-      backgroundColor: isOpen ? textMain : textMain,
-      // In difference mode, white behaves properly
+      backgroundColor: textMain,
+      // Uses theme for color
       borderRadius: "2px",
       transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
       transformOrigin: "center"
@@ -474,7 +475,7 @@ var Navbar = ({
       willChange: "transform, opacity, color"
     },
     linkText: {
-      fontSize: "clamp(42px, 7vw, 100px)",
+      fontSize: linkSize,
       fontWeight: "900",
       letterSpacing: "-2px",
       textTransform: "uppercase",

package/dist/index.mjs

@@ -221,9 +221,13 @@ var Navbar = ({
   accentColor = "#6366f1",
   theme = "dark",
   // "dark" | "light"
+  transparent = false,
+  // Set to true to make navbar transparent until scrolled
   style = {},
   animationDuration = 1.2,
-  easing = "expo.inOut"
+  easing = "expo.inOut",
+  linkSize = "clamp(42px, 7vw, 100px)"
+  // Option to change navlink size
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
@@ -324,9 +328,9 @@ var Navbar = ({
       fontFamily: '"Inter", -apple-system, sans-serif',
       boxSizing: "border-box",
       padding: isScrolled ? "15px 5%" : "30px 5%",
-      backgroundColor: isScrolled ? headerBg : "transparent",
-      backdropFilter: isScrolled ? "blur(20px)" : "none",
-      boxShadow: isScrolled ? headerShadow : "none",
+      backgroundColor: isScrolled ? headerBg : transparent ? "transparent" : headerBg,
+      backdropFilter: isScrolled || !transparent ? "blur(20px)" : "none",
+      boxShadow: isScrolled ? headerShadow : !transparent && headerShadow,
       transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
       ...style
     },
@@ -338,12 +342,10 @@ var Navbar = ({
       fontWeight: "900",
       letterSpacing: "1px",
       textDecoration: "none",
-      color: isOpen ? textMain : textMain,
-      // Text logic handles contrast
+      color: textMain,
+      // Text logic handles contrast via theme
       zIndex: 1001,
       cursor: "pointer",
-      mixBlendMode: isOpen ? "normal" : "difference",
-      // Only difference when closed over unpredictable content
       willChange: "transform",
       transition: "transform 0.3s ease"
     },
@@ -368,14 +370,13 @@ var Navbar = ({
       cursor: "pointer",
       zIndex: 1001,
       border: `1px solid ${isOpen ? borderCol : "transparent"}`,
-      transition: "all 0.4s ease",
-      mixBlendMode: isOpen ? "normal" : "difference"
+      transition: "all 0.4s ease"
     },
     line: {
       width: "22px",
       height: "2px",
-      backgroundColor: isOpen ? textMain : textMain,
-      // In difference mode, white behaves properly
+      backgroundColor: textMain,
+      // Uses theme for color
       borderRadius: "2px",
       transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
       transformOrigin: "center"
@@ -418,7 +419,7 @@ var Navbar = ({
       willChange: "transform, opacity, color"
     },
     linkText: {
-      fontSize: "clamp(42px, 7vw, 100px)",
+      fontSize: linkSize,
       fontWeight: "900",
       letterSpacing: "-2px",
       textTransform: "uppercase",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aura-ui-library",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "A modern and customizable UI library for React applications.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",