@latte-macchiat-io/latte-vanilla-components 0.0.213 → 0.0.214

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.213",
+  "version": "0.0.214",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Header/index.tsx

@@ -11,7 +11,7 @@ export type HeaderProps = React.HTMLAttributes<HTMLDivElement> &
     childrenToggleNav?: React.ReactNode;
   };
 
-export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed = false, visibility, className }: HeaderProps) => {
+export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed = false, toggleNavVisibility, className }: HeaderProps) => {
   const [isNavOpen, setNavOpen] = useState(false);
   const onToggleNav = () => setNavOpen(!isNavOpen);
 
@@ -22,8 +22,8 @@ export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed =
 
         {children}
 
-        {visibility !== 'hide' && (
-          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ visibility })}>
+        {toggleNavVisibility !== 'hide' && (
+          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ toggleNavVisibility })}>
             {childrenToggleNav}
           </button>
         )}

package/src/components/Header/styles.css.ts

@@ -86,7 +86,7 @@ export const headerToggleNav = recipe({
   },
 
   variants: {
-    visibility: {
+    toggleNavVisibility: {
       show: { display: 'block' },
       hide: { display: 'none' },
       mobileOnly: {
@@ -100,7 +100,7 @@ export const headerToggleNav = recipe({
     },
   },
   defaultVariants: {
-    visibility: 'mobileOnly',
+    toggleNavVisibility: 'mobileOnly',
   },
 });