@latte-macchiat-io/latte-vanilla-components 0.0.236 → 0.0.238

package/package.json

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

package/src/components/Header/index.tsx

@@ -1,7 +1,7 @@
-import { clsx } from 'clsx';
+import clsx from 'clsx';
 import { useState } from 'react';
 
-import { HeaderToggleNav } from './HeaderToggleNav/export';
+import { HeaderToggleNav } from './HeaderToggleNav';
 import { headerOverlayRecipe, headerPlaceholder, headerRecipe, headerToggleNav, HeaderToggleNavVariants } from './styles.css';
 
 export type HeaderProps = React.HTMLAttributes<HTMLDivElement> &
@@ -9,13 +9,24 @@ export type HeaderProps = React.HTMLAttributes<HTMLDivElement> &
     isFixed?: boolean;
     children: React.ReactNode;
     childrenOverlay?: React.ReactNode;
-    childrenToggleNav?: React.ReactNode;
+    childrenToggleNav?: React.ReactNode | ((args: { isOpen: boolean; onToggle: () => void }) => React.ReactNode);
   };
 
 export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed = false, toggleNavVisibility, className }: HeaderProps) => {
   const [isNavOpen, setNavOpen] = useState(false);
   const onToggleNav = () => setNavOpen(!isNavOpen);
 
+  const renderToggleNav = () => {
+    if (typeof childrenToggleNav === 'function') {
+      return childrenToggleNav({ isOpen: isNavOpen, onToggle: onToggleNav });
+    }
+    return (
+      <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ toggleNavVisibility })}>
+        {childrenToggleNav || <HeaderToggleNav isOpen={isNavOpen} />}
+      </button>
+    );
+  };
+
   return (
     <>
       <header className={clsx(headerRecipe({ isFixed }), className)}>
@@ -23,11 +34,7 @@ export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed =
 
         {children}
 
-        {toggleNavVisibility !== 'hide' && (
-          <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ toggleNavVisibility })}>
-            {childrenToggleNav || <HeaderToggleNav isOpen={isNavOpen} />}
-          </button>
-        )}
+        {toggleNavVisibility !== 'hide' && renderToggleNav()}
       </header>
 
       {isFixed && <div className={headerPlaceholder} />}

package/src/components/Modal/export.tsx

@@ -1,2 +1,2 @@
-export { Modal, type ModalProps } from './';
+export { Modal, type ModalProps, type ModalRenderProp } from './';
 export { type ModalVariants } from './styles.css';

package/src/components/Modal/index.tsx

@@ -10,7 +10,7 @@ import { Actions } from '../Actions';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 
-type ModalRenderProp = (args: { closeModal: () => void }) => ReactNode;
+export type ModalRenderProp = (args: { closeModal: () => void }) => ReactNode;
 
 export type ModalProps = React.HTMLAttributes<HTMLDivElement> &
   ModalVariants & {