employee-confirmation-modal 1.0.0

package/README.md

@@ -0,0 +1,138 @@
+# Employee Confirmation Modal
+
+Un composant React modal de confirmation pour la création d'employés, avec support du mode sombre, responsive et accessible.
+
+## Installation
+
+```bash
+npm install employee-confirmation-modal
+```
+
+## Utilisation
+
+```jsx
+import React, { useState } from 'react';
+import EmployeeConfirmationModal from 'employee-confirmation-modal';
+
+function App() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [employee, setEmployee] = useState({
+    firstName: 'Jean',
+    lastName: 'Dupont'
+  });
+
+  return (
+    <div>
+      <button onClick={() => setIsModalOpen(true)}>
+        Créer un employé
+      </button>
+
+      <EmployeeConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        employee={employee}
+        title="Employé créé avec succès !"
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `isOpen` | `boolean` | `false` | État d'ouverture du modal |
+| `onClose` | `function` | - | Fonction appelée à la fermeture |
+| `employee` | `object` | `{}` | Données de l'employé `{firstName, lastName}` |
+| `title` | `string` | `"Employé créé avec succès !"` | Titre du modal |
+| `message` | `string` | - | Message personnalisé |
+| `children` | `ReactNode` | - | Contenu personnalisé |
+| `className` | `string` | `''` | Classes CSS additionnelles |
+
+## Fonctionnalités
+
+- ✅ **Responsive** : Adapté mobile et desktop
+- ✅ **Mode sombre** : Support automatique avec `:root.dark`
+- ✅ **Accessible** : ARIA labels, navigation clavier
+- ✅ **Animations** : FadeIn et SlideIn fluides
+- ✅ **Fermeture** : Échap, clic overlay, bouton fermer
+
+## Mode sombre
+
+Le modal supporte automatiquement le mode sombre. Ajoutez la classe `dark` à votre élément `:root` :
+
+```javascript
+// Activer le mode sombre
+document.documentElement.classList.add('dark');
+```
+
+## Scripts de développement
+
+```bash
+# Build CommonJS
+npm run build
+
+# Build ES Modules  
+npm run build:esm
+
+# Build les deux versions
+npm run build:all
+
+# Nettoyer les builds
+npm run clean
+```
+
+## Licence
+
+MIT
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

package/esm/App.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import EmployeeConfirmationModal from './confirmationModal.jsx';
+
+// Exemple d'utilisation du modal
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function App() {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [employee, setEmployee] = React.useState({
+    firstName: 'Jean',
+    lastName: 'Dupont'
+  });
+  const openModal = () => setIsModalOpen(true);
+  const closeModal = () => setIsModalOpen(false);
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      padding: '20px',
+      fontFamily: 'Arial, sans-serif'
+    },
+    children: [/*#__PURE__*/_jsx("h1", {
+      children: "Demo - Modal de Confirmation d'Employ\xE9"
+    }), /*#__PURE__*/_jsx("button", {
+      onClick: openModal,
+      style: {
+        backgroundColor: '#4F46E5',
+        color: 'white',
+        padding: '10px 20px',
+        border: 'none',
+        borderRadius: '5px',
+        cursor: 'pointer',
+        fontSize: '16px'
+      },
+      children: "Cr\xE9er un employ\xE9"
+    }), /*#__PURE__*/_jsx(EmployeeConfirmationModal, {
+      isOpen: isModalOpen,
+      onClose: closeModal,
+      employee: employee,
+      title: "Employ\xE9 cr\xE9\xE9 avec succ\xE8s !"
+    })]
+  });
+}
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/_jsx(App, {}));

package/esm/confirmationModal.css

@@ -0,0 +1,197 @@
+/* Variables CSS pour la cohérence et la personnalisation */
+:root {
+  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
+  --modal-content-bg: white;
+  --modal-border-color: #d1d5db;
+  --modal-text-color: #374151;
+  --modal-header-bg: white;
+  --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  --modal-border-radius: 12px;
+  --modal-backdrop-blur: 2px;
+}
+
+/* Variables pour le mode sombre */
+:root.dark {
+  --modal-content-bg: #374151;
+  --modal-border-color: #6b7280;
+  --modal-text-color: #f3f4f6;
+  --modal-header-bg: #1f2937;
+  --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+/* Overlay du modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--modal-overlay-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(var(--modal-backdrop-blur));
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* Contenu principal du modal */
+.modal-content {
+  background-color: var(--modal-content-bg);
+  border-radius: var(--modal-border-radius);
+  box-shadow: var(--modal-shadow);
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow: hidden;
+  animation: slideIn 0.3s ease-out;
+  border: 1px solid var(--modal-border-color);
+  outline: none;
+}
+
+/* En-tête du modal */
+.modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--modal-border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--modal-header-bg);
+  color: var(--modal-text-color);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+/* Bouton de fermeture */
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--modal-text-color);
+  opacity: 0.7;
+  transition: all 0.2s ease;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  line-height: 1;
+}
+
+.modal-close:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+:root.dark .modal-close:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.modal-close:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  opacity: 1;
+}
+
+/* Corps du modal */
+.modal-body {
+  padding: 1.5rem;
+  color: var(--modal-text-color);
+}
+
+.modal-body p {
+  margin: 0;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+.modal-body strong {
+  font-weight: 600;
+  color: inherit;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { 
+    opacity: 0; 
+  }
+  to { 
+    opacity: 1; 
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .modal-content {
+    width: 95%;
+    margin: 1rem;
+    max-height: calc(100vh - 2rem);
+  }
+  
+  .modal-header {
+    padding: 1rem;
+  }
+  
+  .modal-header h2 {
+    font-size: 1.125rem;
+  }
+  
+  .modal-body {
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-content {
+    width: 98%;
+    margin: 0.5rem;
+  }
+  
+  .modal-header {
+    padding: 0.75rem;
+  }
+  
+  .modal-body {
+    padding: 0.75rem;
+  }
+}
+
+/* Amélioration de l'accessibilité */
+@media (prefers-reduced-motion: reduce) {
+  .modal-overlay,
+  .modal-content {
+    animation: none;
+  }
+}
+
+/* Focus visible pour l'accessibilité */
+.modal-content:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+}
+  
+  .modal-header {
+    padding: 1rem;
+  }
+  
+  .modal-body {
+    padding: 1rem;
+  }

package/esm/confirmationModal.js

@@ -0,0 +1,88 @@
+import { useEffect } from 'react';
+import './ConfirmationModal.css';
+
+/**
+ * Modal de confirmation pour création d'employé
+ * @param {Object} props
+ * @param {boolean} props.isOpen - État d'ouverture du modal
+ * @param {Function} props.onClose - Fonction de fermeture
+ * @param {Object} props.employee - Données de l'employé créé
+ * @param {string} props.title - Titre personnalisé (optionnel)
+ * @param {string} props.message - Message personnalisé (optionnel)
+ * @param {React.ReactNode} props.children - Contenu personnalisé (optionnel)
+ * @param {string} props.className - Classes CSS additionnelles
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function EmployeeConfirmationModal({
+  isOpen = false,
+  onClose,
+  employee = {},
+  title = "Employé créé avec succès !",
+  message,
+  children,
+  className = ''
+}) {
+  // Gestion de la touche Échap et scroll
+  useEffect(() => {
+    const handleEscape = event => {
+      if (event.key === 'Escape' && isOpen && onClose) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+
+      // Focus sur le modal pour l'accessibilité
+      const modalElement = document.querySelector('.modal-content');
+      if (modalElement) {
+        modalElement.focus();
+      }
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const handleOverlayClick = e => {
+    if (e.target === e.currentTarget && onClose) {
+      onClose();
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "modal-overlay",
+    onClick: handleOverlayClick,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "modal-title",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `modal-content ${className}`,
+      onClick: e => e.stopPropagation(),
+      tabIndex: -1,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "modal-header",
+        children: [/*#__PURE__*/_jsx("h2", {
+          id: "modal-title",
+          children: title
+        }), /*#__PURE__*/_jsx("button", {
+          className: "modal-close",
+          onClick: onClose,
+          "aria-label": "Fermer le modal",
+          type: "button",
+          children: "\xD7"
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "modal-body",
+        children: children || /*#__PURE__*/_jsx("p", {
+          children: message || /*#__PURE__*/_jsxs(_Fragment, {
+            children: ["L'employ\xE9 ", /*#__PURE__*/_jsxs("strong", {
+              children: [employee.firstName, " ", employee.lastName]
+            }), " a \xE9t\xE9 ajout\xE9 avec succ\xE8s."]
+          })
+        })
+      })]
+    })
+  });
+}
+export default EmployeeConfirmationModal;

package/esm/index.js

@@ -0,0 +1,21 @@
+// Export principal
+import EmployeeConfirmationModal from './confirmationModal.jsx';
+
+// Export par défaut
+export default EmployeeConfirmationModal;
+
+// Export nommé pour compatibilité
+export { EmployeeConfirmationModal };
+
+// Export nommé alternatif pour plus de flexibilité
+export { EmployeeConfirmationModal as ConfirmationModal };
+
+// Export du CSS (optionnel, pour les bundlers qui le supportent)
+export { default as ConfirmationModalStyles } from './confirmationModal.css';
+
+// Compatibilité CommonJS pour les environnements Node.js
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = EmployeeConfirmationModal;
+  module.exports.default = EmployeeConfirmationModal;
+  module.exports.EmployeeConfirmationModal = EmployeeConfirmationModal;
+}

package/lib/App.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _client = _interopRequireDefault(require("react-dom/client"));
+var _confirmationModal = _interopRequireDefault(require("./confirmationModal.jsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Exemple d'utilisation du modal
+function App() {
+  const [isModalOpen, setIsModalOpen] = _react.default.useState(false);
+  const [employee, setEmployee] = _react.default.useState({
+    firstName: 'Jean',
+    lastName: 'Dupont'
+  });
+  const openModal = () => setIsModalOpen(true);
+  const closeModal = () => setIsModalOpen(false);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      padding: '20px',
+      fontFamily: 'Arial, sans-serif'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+      children: "Demo - Modal de Confirmation d'Employ\xE9"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      onClick: openModal,
+      style: {
+        backgroundColor: '#4F46E5',
+        color: 'white',
+        padding: '10px 20px',
+        border: 'none',
+        borderRadius: '5px',
+        cursor: 'pointer',
+        fontSize: '16px'
+      },
+      children: "Cr\xE9er un employ\xE9"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmationModal.default, {
+      isOpen: isModalOpen,
+      onClose: closeModal,
+      employee: employee,
+      title: "Employ\xE9 cr\xE9\xE9 avec succ\xE8s !"
+    })]
+  });
+}
+const root = _client.default.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}));

package/lib/confirmationModal.css

@@ -0,0 +1,197 @@
+/* Variables CSS pour la cohérence et la personnalisation */
+:root {
+  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
+  --modal-content-bg: white;
+  --modal-border-color: #d1d5db;
+  --modal-text-color: #374151;
+  --modal-header-bg: white;
+  --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  --modal-border-radius: 12px;
+  --modal-backdrop-blur: 2px;
+}
+
+/* Variables pour le mode sombre */
+:root.dark {
+  --modal-content-bg: #374151;
+  --modal-border-color: #6b7280;
+  --modal-text-color: #f3f4f6;
+  --modal-header-bg: #1f2937;
+  --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+/* Overlay du modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--modal-overlay-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(var(--modal-backdrop-blur));
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* Contenu principal du modal */
+.modal-content {
+  background-color: var(--modal-content-bg);
+  border-radius: var(--modal-border-radius);
+  box-shadow: var(--modal-shadow);
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow: hidden;
+  animation: slideIn 0.3s ease-out;
+  border: 1px solid var(--modal-border-color);
+  outline: none;
+}
+
+/* En-tête du modal */
+.modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--modal-border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--modal-header-bg);
+  color: var(--modal-text-color);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+/* Bouton de fermeture */
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--modal-text-color);
+  opacity: 0.7;
+  transition: all 0.2s ease;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  line-height: 1;
+}
+
+.modal-close:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+:root.dark .modal-close:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.modal-close:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  opacity: 1;
+}
+
+/* Corps du modal */
+.modal-body {
+  padding: 1.5rem;
+  color: var(--modal-text-color);
+}
+
+.modal-body p {
+  margin: 0;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+.modal-body strong {
+  font-weight: 600;
+  color: inherit;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { 
+    opacity: 0; 
+  }
+  to { 
+    opacity: 1; 
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .modal-content {
+    width: 95%;
+    margin: 1rem;
+    max-height: calc(100vh - 2rem);
+  }
+  
+  .modal-header {
+    padding: 1rem;
+  }
+  
+  .modal-header h2 {
+    font-size: 1.125rem;
+  }
+  
+  .modal-body {
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-content {
+    width: 98%;
+    margin: 0.5rem;
+  }
+  
+  .modal-header {
+    padding: 0.75rem;
+  }
+  
+  .modal-body {
+    padding: 0.75rem;
+  }
+}
+
+/* Amélioration de l'accessibilité */
+@media (prefers-reduced-motion: reduce) {
+  .modal-overlay,
+  .modal-content {
+    animation: none;
+  }
+}
+
+/* Focus visible pour l'accessibilité */
+.modal-content:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+}
+  
+  .modal-header {
+    padding: 1rem;
+  }
+  
+  .modal-body {
+    padding: 1rem;
+  }

package/lib/confirmationModal.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+require("./ConfirmationModal.css");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Modal de confirmation pour création d'employé
+ * @param {Object} props
+ * @param {boolean} props.isOpen - État d'ouverture du modal
+ * @param {Function} props.onClose - Fonction de fermeture
+ * @param {Object} props.employee - Données de l'employé créé
+ * @param {string} props.title - Titre personnalisé (optionnel)
+ * @param {string} props.message - Message personnalisé (optionnel)
+ * @param {React.ReactNode} props.children - Contenu personnalisé (optionnel)
+ * @param {string} props.className - Classes CSS additionnelles
+ */function EmployeeConfirmationModal({
+  isOpen = false,
+  onClose,
+  employee = {},
+  title = "Employé créé avec succès !",
+  message,
+  children,
+  className = ''
+}) {
+  // Gestion de la touche Échap et scroll
+  (0, _react.useEffect)(() => {
+    const handleEscape = event => {
+      if (event.key === 'Escape' && isOpen && onClose) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+
+      // Focus sur le modal pour l'accessibilité
+      const modalElement = document.querySelector('.modal-content');
+      if (modalElement) {
+        modalElement.focus();
+      }
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const handleOverlayClick = e => {
+    if (e.target === e.currentTarget && onClose) {
+      onClose();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "modal-overlay",
+    onClick: handleOverlayClick,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "modal-title",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `modal-content ${className}`,
+      onClick: e => e.stopPropagation(),
+      tabIndex: -1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "modal-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+          id: "modal-title",
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          className: "modal-close",
+          onClick: onClose,
+          "aria-label": "Fermer le modal",
+          type: "button",
+          children: "\xD7"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "modal-body",
+        children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: message || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: ["L'employ\xE9 ", /*#__PURE__*/(0, _jsxRuntime.jsxs)("strong", {
+              children: [employee.firstName, " ", employee.lastName]
+            }), " a \xE9t\xE9 ajout\xE9 avec succ\xE8s."]
+          })
+        })
+      })]
+    })
+  });
+}
+var _default = exports.default = EmployeeConfirmationModal;

package/lib/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ConfirmationModal", {
+  enumerable: true,
+  get: function () {
+    return _confirmationModal.default;
+  }
+});
+Object.defineProperty(exports, "ConfirmationModalStyles", {
+  enumerable: true,
+  get: function () {
+    return _confirmationModal2.default;
+  }
+});
+Object.defineProperty(exports, "EmployeeConfirmationModal", {
+  enumerable: true,
+  get: function () {
+    return _confirmationModal.default;
+  }
+});
+exports.default = void 0;
+var _confirmationModal = _interopRequireDefault(require("./confirmationModal.jsx"));
+var _confirmationModal2 = _interopRequireDefault(require("./confirmationModal.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Export principal
+// Export par défaut
+var _default = exports.default = _confirmationModal.default; // Export nommé pour compatibilité
+// Export nommé alternatif pour plus de flexibilité
+// Export du CSS (optionnel, pour les bundlers qui le supportent)
+// Compatibilité CommonJS pour les environnements Node.js
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = _confirmationModal.default;
+  module.exports.default = _confirmationModal.default;
+  module.exports.EmployeeConfirmationModal = _confirmationModal.default;
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "employee-confirmation-modal",
+  "version": "1.0.0",
+  "description": "Modal de confirmation React pour création d'employé avec support dark mode et responsive",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "esm",
+    "src"
+  ],
+  "scripts": {
+    "build": "babel src --out-dir lib --copy-files",
+    "build:esm": "babel src --out-dir esm --copy-files --env-name esm",
+    "build:all": "npm run build && npm run build:esm",
+    "prepublishOnly": "npm run build:all",
+    "clean": "rimraf lib esm"
+  },
+  "keywords": [
+    "react",
+    "modal",
+    "confirmation",
+    "employee",
+    "dark-mode",
+    "responsive",
+    "accessibility"
+  ],
+  "author": "Votre Nom",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "rimraf": "^5.0.10"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/votre-username/employee-confirmation-modal.git"
+  },
+  "bugs": {
+    "url": "https://github.com/votre-username/employee-confirmation-modal/issues"
+  },
+  "homepage": "https://github.com/votre-username/employee-confirmation-modal#readme"
+}

package/src/App.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import EmployeeConfirmationModal from './confirmationModal.jsx';
+
+// Exemple d'utilisation du modal
+function App() {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [employee, setEmployee] = React.useState({
+    firstName: 'Jean',
+    lastName: 'Dupont'
+  });
+
+  const openModal = () => setIsModalOpen(true);
+  const closeModal = () => setIsModalOpen(false);
+
+  return (
+    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+      <h1>Demo - Modal de Confirmation d'Employé</h1>
+      
+      <button 
+        onClick={openModal}
+        style={{
+          backgroundColor: '#4F46E5',
+          color: 'white',
+          padding: '10px 20px',
+          border: 'none',
+          borderRadius: '5px',
+          cursor: 'pointer',
+          fontSize: '16px'
+        }}
+      >
+        Créer un employé
+      </button>
+
+      <EmployeeConfirmationModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        employee={employee}
+        title="Employé créé avec succès !"
+      />
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);

package/src/confirmationModal.css

@@ -0,0 +1,197 @@
+/* Variables CSS pour la cohérence et la personnalisation */
+:root {
+  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
+  --modal-content-bg: white;
+  --modal-border-color: #d1d5db;
+  --modal-text-color: #374151;
+  --modal-header-bg: white;
+  --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  --modal-border-radius: 12px;
+  --modal-backdrop-blur: 2px;
+}
+
+/* Variables pour le mode sombre */
+:root.dark {
+  --modal-content-bg: #374151;
+  --modal-border-color: #6b7280;
+  --modal-text-color: #f3f4f6;
+  --modal-header-bg: #1f2937;
+  --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+/* Overlay du modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--modal-overlay-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(var(--modal-backdrop-blur));
+  animation: fadeIn 0.3s ease-out;
+}
+
+/* Contenu principal du modal */
+.modal-content {
+  background-color: var(--modal-content-bg);
+  border-radius: var(--modal-border-radius);
+  box-shadow: var(--modal-shadow);
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow: hidden;
+  animation: slideIn 0.3s ease-out;
+  border: 1px solid var(--modal-border-color);
+  outline: none;
+}
+
+/* En-tête du modal */
+.modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--modal-border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--modal-header-bg);
+  color: var(--modal-text-color);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+/* Bouton de fermeture */
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--modal-text-color);
+  opacity: 0.7;
+  transition: all 0.2s ease;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  line-height: 1;
+}
+
+.modal-close:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+:root.dark .modal-close:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.modal-close:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  opacity: 1;
+}
+
+/* Corps du modal */
+.modal-body {
+  padding: 1.5rem;
+  color: var(--modal-text-color);
+}
+
+.modal-body p {
+  margin: 0;
+  line-height: 1.6;
+  font-size: 1rem;
+}
+
+.modal-body strong {
+  font-weight: 600;
+  color: inherit;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { 
+    opacity: 0; 
+  }
+  to { 
+    opacity: 1; 
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .modal-content {
+    width: 95%;
+    margin: 1rem;
+    max-height: calc(100vh - 2rem);
+  }
+  
+  .modal-header {
+    padding: 1rem;
+  }
+  
+  .modal-header h2 {
+    font-size: 1.125rem;
+  }
+  
+  .modal-body {
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-content {
+    width: 98%;
+    margin: 0.5rem;
+  }
+  
+  .modal-header {
+    padding: 0.75rem;
+  }
+  
+  .modal-body {
+    padding: 0.75rem;
+  }
+}
+
+/* Amélioration de l'accessibilité */
+@media (prefers-reduced-motion: reduce) {
+  .modal-overlay,
+  .modal-content {
+    animation: none;
+  }
+}
+
+/* Focus visible pour l'accessibilité */
+.modal-content:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+}
+  
+  .modal-header {
+    padding: 1rem;
+  }
+  
+  .modal-body {
+    padding: 1rem;
+  }

package/src/confirmationModal.jsx

@@ -0,0 +1,97 @@
+import { useEffect } from 'react'
+import './ConfirmationModal.css'
+
+/**
+ * Modal de confirmation pour création d'employé
+ * @param {Object} props
+ * @param {boolean} props.isOpen - État d'ouverture du modal
+ * @param {Function} props.onClose - Fonction de fermeture
+ * @param {Object} props.employee - Données de l'employé créé
+ * @param {string} props.title - Titre personnalisé (optionnel)
+ * @param {string} props.message - Message personnalisé (optionnel)
+ * @param {React.ReactNode} props.children - Contenu personnalisé (optionnel)
+ * @param {string} props.className - Classes CSS additionnelles
+ */
+function EmployeeConfirmationModal({
+  isOpen = false,
+  onClose,
+  employee = {},
+  title = "Employé créé avec succès !",
+  message,
+  children,
+  className = ''
+}) {
+  // Gestion de la touche Échap et scroll
+  useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === 'Escape' && isOpen && onClose) {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape)
+      document.body.style.overflow = 'hidden'
+      
+      // Focus sur le modal pour l'accessibilité
+      const modalElement = document.querySelector('.modal-content')
+      if (modalElement) {
+        modalElement.focus()
+      }
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+      document.body.style.overflow = 'unset'
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget && onClose) {
+      onClose()
+    }
+  }
+
+  return (
+    <div 
+      className="modal-overlay" 
+      onClick={handleOverlayClick}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+    >
+      <div 
+        className={`modal-content ${className}`} 
+        onClick={(e) => e.stopPropagation()}
+        tabIndex={-1}
+      >
+        <div className="modal-header">
+          <h2 id="modal-title">{title}</h2>
+          <button 
+            className="modal-close" 
+            onClick={onClose}
+            aria-label="Fermer le modal"
+            type="button"
+          >
+            &times;
+          </button>
+        </div>
+        <div className="modal-body">
+          {children || (
+            <p>
+              {message || (
+                <>
+                  L'employé <strong>{employee.firstName} {employee.lastName}</strong> a été ajouté avec succès.
+                </>
+              )}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EmployeeConfirmationModal

package/src/index.js

@@ -0,0 +1,21 @@
+// Export principal
+import EmployeeConfirmationModal from './confirmationModal.jsx';
+
+// Export par défaut
+export default EmployeeConfirmationModal;
+
+// Export nommé pour compatibilité
+export { EmployeeConfirmationModal };
+
+// Export nommé alternatif pour plus de flexibilité
+export { EmployeeConfirmationModal as ConfirmationModal };
+
+// Export du CSS (optionnel, pour les bundlers qui le supportent)
+export { default as ConfirmationModalStyles } from './confirmationModal.css';
+
+// Compatibilité CommonJS pour les environnements Node.js
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = EmployeeConfirmationModal;
+  module.exports.default = EmployeeConfirmationModal;
+  module.exports.EmployeeConfirmationModal = EmployeeConfirmationModal;
+}