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

package/package.json

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

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,11 +10,13 @@ import { Actions } from '../Actions';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 
+type ModalRenderProp = (args: { closeModal: () => void }) => ReactNode;
+
 export type ModalProps = React.HTMLAttributes<HTMLDivElement> &
   ModalVariants & {
     triggerLabel: string;
     withCloseButton?: boolean;
-    children: React.ReactNode | ((args: { closeModal: () => void }) => React.ReactNode);
+    children: ReactNode | ModalRenderProp;
   };
 
 export const Modal = ({ triggerLabel, className, children, align, withCloseButton = false }: ModalProps) => {
@@ -22,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">
@@ -37,7 +46,7 @@ export const Modal = ({ triggerLabel, className, children, align, withCloseButto
               </button>
             )}
 
-            {typeof children === 'function' ? children({ closeModal }) : children}
+            {renderChildren()}
           </div>
         </div>
       )}