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

package/package.json

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

package/src/components/Header/HeaderToggleNav/export.tsx

@@ -0,0 +1 @@
+export { HeaderToggleNav, type HeaderToggleNavProps } from './';

package/src/components/Header/HeaderToggleNav/index.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { clsx } from 'clsx';
+
+import { bar } from './styles.css';
+
+export type HeaderToggleNavProps = {
+  isOpen: boolean;
+};
+
+export const HeaderToggleNav = ({ isOpen }: HeaderToggleNavProps) => {
+  return (
+    <>
+      <span className={clsx(bar, isOpen && 'open')} />
+      <span className={clsx(bar, isOpen && 'open')} />
+      <span className={clsx(bar, isOpen && 'open')} />
+    </>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+
+export const bar = style({
+  height: '3px',
+  width: '100%',
+  display: 'block',
+  borderRadius: '2px',
+  backgroundColor: 'black',
+  transition: 'all 0.3s ease',
+
+  selectors: {
+    '&.open:nth-child(1)': {
+      transform: 'translateY(7.5px) rotate(45deg)',
+    },
+    '&.open:nth-child(2)': {
+      opacity: 0,
+    },
+    '&.open:nth-child(3)': {
+      transform: 'translateY(-7.5px) rotate(-45deg)',
+    },
+  },
+});

package/src/components/Header/HeaderToggleNav/theme.ts

@@ -0,0 +1,15 @@
+const themeHeaderToggleNavBase = {
+  headerToggleNav: {},
+};
+
+export const themeHeaderToggleNavLight = {
+  headerToggleNav: {
+    ...themeHeaderToggleNavBase.headerToggleNav,
+  },
+};
+
+export const themeHeaderToggleNavDark = {
+  headerToggleNav: {
+    ...themeHeaderToggleNavBase.headerToggleNav,
+  },
+};

package/src/components/Header/index.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
+import { HeaderToggleNav } from './HeaderToggleNav/export';
 import { headerOverlayRecipe, headerPlaceholder, headerRecipe, headerToggleNav, HeaderToggleNavVariants } from './styles.css';
 
 export type HeaderProps = React.HTMLAttributes<HTMLDivElement> &
@@ -11,7 +12,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,9 +23,9 @@ export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed =
 
         {children}
 
-        {visibility !== 'hide' && (
-          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ visibility })}>
-            {childrenToggleNav}
+        {toggleNavVisibility !== 'hide' && (
+          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ toggleNavVisibility })}>
+            {childrenToggleNav || <HeaderToggleNav isOpen={isNavOpen} />}
           </button>
         )}
       </header>

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',
   },
 });