@latte-macchiat-io/latte-vanilla-components 0.0.235 → 0.0.237

package/package.json

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 
 import { modal, modalContentCloseButton, modalContentRecipe, type ModalVariants } from './styles.css';
 
@@ -10,13 +10,13 @@ import { Actions } from '../Actions';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 
-type ModalRenderProp = (args: { closeModal: () => void }) => React.ReactNode;
+type ModalRenderProp = (args: { closeModal: () => void }) => ReactNode;
 
 export type ModalProps = React.HTMLAttributes<HTMLDivElement> &
   ModalVariants & {
     triggerLabel: string;
     withCloseButton?: boolean;
-    children: React.ReactNode | ModalRenderProp;
+    children: ReactNode | ModalRenderProp;
   };
 
 export const Modal = ({ triggerLabel, className, children, align, withCloseButton = false }: ModalProps) => {
@@ -24,6 +24,13 @@ export const Modal = ({ triggerLabel, className, children, align, withCloseButto
 
   const closeModal = () => setIsOpen(false);
 
+  const renderChildren = () => {
+    if (typeof children === 'function') {
+      return (children as ModalRenderProp)({ closeModal });
+    }
+    return children;
+  };
+
   return (
     <>
       <Actions align="center">
@@ -39,7 +46,7 @@ export const Modal = ({ triggerLabel, className, children, align, withCloseButto
               </button>
             )}
 
-            {typeof children === 'function' ? (children as ModalRenderProp)({ closeModal }) : children}
+            {renderChildren()}
           </div>
         </div>
       )}