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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.212",
+  "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

@@ -1,17 +1,17 @@
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import { headerOverlayRecipe, headerPlaceholder, headerRecipe, headerToggleNav } from './styles.css';
+import { headerOverlayRecipe, headerPlaceholder, headerRecipe, headerToggleNav, HeaderToggleNavVariants } from './styles.css';
 
-export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-  isFixed?: boolean;
-  hideToggleNav?: boolean;
-  children: React.ReactNode;
-  childrenOverlay?: React.ReactNode;
-  childrenToggleNav?: React.ReactNode;
-};
+export type HeaderProps = React.HTMLAttributes<HTMLDivElement> &
+  HeaderToggleNavVariants & {
+    isFixed?: boolean;
+    children: React.ReactNode;
+    childrenOverlay?: React.ReactNode;
+    childrenToggleNav?: React.ReactNode;
+  };
 
-export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed = false, hideToggleNav = false, 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}
 
-        {!hideToggleNav && (
-          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav}>
+        {toggleNavVisibility !== 'hide' && (
+          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ toggleNavVisibility })}>
             {childrenToggleNav}
           </button>
         )}

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

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { themeContract } from '../..';
+import { queries, themeContract } from '../..';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const headerRecipe = recipe({
@@ -52,13 +52,6 @@ export const headerPlaceholder = style([
   },
 ]);
 
-export const headerToggleNav = style([
-  {
-    border: 0,
-    zIndex: 30,
-  },
-]);
-
 export const headerOverlayRecipe = recipe({
   base: {
     inset: 0,
@@ -86,4 +79,30 @@ export const headerOverlayRecipe = recipe({
   },
 });
 
+export const headerToggleNav = recipe({
+  base: {
+    border: 0,
+    zIndex: 30,
+  },
+
+  variants: {
+    toggleNavVisibility: {
+      show: { display: 'block' },
+      hide: { display: 'none' },
+      mobileOnly: {
+        display: 'block',
+        '@media': {
+          [queries.md]: {
+            display: 'none',
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    toggleNavVisibility: 'mobileOnly',
+  },
+});
+
+export type HeaderToggleNavVariants = Parameters<typeof headerToggleNav>[0];
 export type HeaderOverlayVariants = Parameters<typeof headerOverlayRecipe>[0];